• 빠른 이동을 원하시면, 아래 키워드를 클릭하세요!

🌿 브라우저 버전과 CAN-I-USE, MDN

CSS-브라우저 버전과 CAN-I-USE, MDN 해당 링크로 이동하여 참고하며 학습해주세요! JavaScript도 CSS에서 설명한 것과 같이 똑같이 활용하면 됩니다.

JSON.parse의 reviver 인자와 Safari 브라우저 문제 소개

JavaScript에서 JSON.parse라는 함수는 JSON 형태의 문자열을 실제로 사용할 수 있는 JavaScript 객체로 바꾸는 역할을 합니다. 이 함수는 변환 과정을 더 세밀하게 조절할 수 있도록 reviver라는 특별한 함수를 추가로 받을 수 있습니다.

reviver 함수와 그 역할

const JS_프로필조회기능 = () => {
	const 철수프로필문자열 = localStorage.getItem("철수프로필저장소");
	JSON.parse(철수프로필문자열, (key, value, context) => {
		console.log(key);      // 크롬O, 사파리O
		console.log(value);    // 크롬O, 사파리O
		console.log(context);  // 크롬O, 사파리X
	});
}

• key: JSON 객체의 각 키(이름)를 나타냅니다.
• value: 각 키에 해당하는 값을 나타냅니다.

이 두 가지 인자는 표준적으로 모든 브라우저에서 잘 지원됩니다. 하지만 위 코드에서는 context라는 세 번째 인자를 추가했는데, 이 부분이 문제가 됩니다.

문제의 원인: Safari 브라우저와 표준

• 표준이란? 표준은 모든 브라우저가 따라야 할 약속 같은 것입니다. JSON.parse의 reviver 함수는 두 개의 인자만 받는 것이 표준입니다.
• Chrome: 표준이 아닌 추가 인자(context)가 있어도 큰 문제가 발생하지 않으며, 그냥 무시하거나 undefined로 처리합니다.
• Safari: 표준을 엄격하게 지키기 때문에, 추가 인자가 있으면 이걸 제대로 처리하지 못하고 문제가 발생할 수 있습니다. 이 때문에 Safari에서는 코드가 예상대로 동작하지 않을 수 있습니다.

Safari 브라우저는 JSON.parse의 reviver 함수가 표준에 맞지 않는 방식으로 사용될 때 문제를 일으킬 수 있습니다. 그래서 reviver 함수는 key와 value만 받도록 작성하는 것이 안전합니다. 이 방식으로 하면 모든 브라우저에서 코드가 잘 작동하게 됩니다.

아래 실습코드를 통해서 정리해보세요!

‼️ 크로스브라우징 문제 해결 (CoreJS와의 연관성)

CoreJS는 자바스크립트 라이브러리로, 모든 최신 자바스크립트 기능을 다양한 브라우저에서 사용할 수 있게 도와줍니다. 모든 브라우저가 최신 자바스크립트 기능을 동일하게 지원하지 않기 때문에, CoreJS는 그 차이를 맞춰주기 위해 존재합니다.

👉🏻 왜 CoreJS가 필요한가?

브라우저마다 자바스크립트 기능을 지원하는 속도와 범위가 다릅니다. 예를 들어, 최신 자바스크립트 기능 중 일부는 크롬에서는 잘 작동하지만, 사파리나 인터넷 익스플로러 같은 브라우저에서는 지원하지 않을 수 있습니다. 이런 문제를 해결하기 위해 CoreJS는 모든 브라우저에서 최신 자바스크립트 기능을 동일하게 사용할 수 있도록 해줍니다.

👉🏻 어떻게 CoreJS를 사용하는가?

CoreJS는 간단하게 웹사이트에 스크립트로 추가하거나, 프로젝트에서 설치하여 사용할 수 있습니다.

<script src="<https://cdn.jsdelivr.net/npm/[email protected]/minified.min.js>"></script>

이렇게 추가하면, 브라우저가 지원하지 않는 자바스크립트 기능들을 CoreJS가 대신 처리해줘서 코드가 모든 브라우저에서 동일하게 작동하게 됩니다.