자바스크립트 string 인코딩 디코딩 면접문제: 왜 고양이는 키보드를 좋아할까?
자바스크립트에서 문자열 인코딩과 디코딩은 웹 개발에서 매우 중요한 주제입니다. 이 주제는 면접에서도 자주 등장하며, 개발자들이 이해해야 할 핵심 개념 중 하나입니다. 이 글에서는 자바스크립트의 문자열 인코딩과 디코딩에 대해 깊이 있게 다루어보겠습니다. 또한, 이 주제와 약간 연관된 재미있는 질문인 “왜 고양이는 키보드를 좋아할까?“에 대해서도 잠시 논의해보겠습니다.
1. 자바스크립트에서의 문자열 인코딩과 디코딩
1.1. 인코딩이란?
인코딩은 데이터를 특정 형식으로 변환하는 과정을 말합니다. 자바스크립트에서는 주로 문자열을 다른 형식으로 변환할 때 사용됩니다. 예를 들어, URL 인코딩은 URL에서 사용할 수 없는 문자를 퍼센트 인코딩으로 변환하는 과정입니다.
let url = "https://example.com/search?q=자바스크립트";
let encodedURL = encodeURIComponent(url);
console.log(encodedURL); // "https%3A%2F%2Fexample.com%2Fsearch%3Fq%3D%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8"
1.2. 디코딩이란?
디코딩은 인코딩된 데이터를 원래의 형태로 복원하는 과정입니다. 위의 예제에서 인코딩된 URL을 다시 원래의 URL로 변환하려면 decodeURIComponent 함수를 사용할 수 있습니다.
let decodedURL = decodeURIComponent(encodedURL);
console.log(decodedURL); // "https://example.com/search?q=자바스크립트"
1.3. Base64 인코딩과 디코딩
Base64는 바이너리 데이터를 ASCII 문자열로 변환하는 인코딩 방식입니다. 자바스크립트에서는 btoa와 atob 함수를 사용하여 Base64 인코딩과 디코딩을 수행할 수 있습니다.
let text = "Hello, World!";
let encodedText = btoa(text);
console.log(encodedText); // "SGVsbG8sIFdvcmxkIQ=="
let decodedText = atob(encodedText);
console.log(decodedText); // "Hello, World!"
2. 자바스크립트에서의 문자셋과 인코딩
2.1. UTF-8과 UTF-16
자바스크립트는 기본적으로 UTF-16 문자셋을 사용합니다. UTF-8은 웹에서 가장 널리 사용되는 문자셋으로, 자바스크립트에서도 UTF-8로 인코딩된 문자열을 다룰 수 있습니다.
2.2. TextEncoder와 TextDecoder
TextEncoder와 TextDecoder는 자바스크립트에서 UTF-8 인코딩과 디코딩을 지원하는 API입니다. 이 API를 사용하면 문자열을 바이트 배열로 변환하거나, 바이트 배열을 문자열로 변환할 수 있습니다.
let encoder = new TextEncoder();
let uint8Array = encoder.encode("Hello, World!");
console.log(uint8Array); // Uint8Array(13) [72, 101, 108, 108, 111, 44, 32, 87, 111, 114, 108, 100, 33]
let decoder = new TextDecoder();
let decodedString = decoder.decode(uint8Array);
console.log(decodedString); // "Hello, World!"
3. 자바스크립트에서의 URL 인코딩과 디코딩
3.1. encodeURI와 encodeURIComponent
encodeURI와 encodeURIComponent는 URL 인코딩을 수행하는 함수입니다. encodeURI는 전체 URL을 인코딩하는 데 사용되며, encodeURIComponent는 URL의 일부분(예: 쿼리 파라미터)을 인코딩하는 데 사용됩니다.
let url = "https://example.com/search?q=자바스크립트";
let encodedURI = encodeURI(url);
console.log(encodedURI); // "https://example.com/search?q=%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8"
let encodedComponent = encodeURIComponent(url);
console.log(encodedComponent); // "https%3A%2F%2Fexample.com%2Fsearch%3Fq%3D%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8"
3.2. decodeURI와 decodeURIComponent
decodeURI와 decodeURIComponent는 각각 encodeURI와 encodeURIComponent로 인코딩된 문자열을 디코딩하는 함수입니다.
let decodedURI = decodeURI(encodedURI);
console.log(decodedURI); // "https://example.com/search?q=자바스크립트"
let decodedComponent = decodeURIComponent(encodedComponent);
console.log(decodedComponent); // "https://example.com/search?q=자바스크립트"
4. 자바스크립트에서의 이스케이프 문자
4.1. 이스케이프 문자란?
이스케이프 문자는 특수한 의미를 가진 문자를 일반 문자로 표현하기 위해 사용됩니다. 예를 들어, \n은 줄바꿈을 나타내고, \t는 탭을 나타냅니다.
4.2. 이스케이프 문자 사용 예제
let text = "Hello,\nWorld!";
console.log(text);
// 출력:
// Hello,
// World!
5. 왜 고양이는 키보드를 좋아할까?
고양이가 키보드를 좋아하는 이유는 여러 가지가 있을 수 있습니다. 첫째, 고양이는 따뜻한 곳을 좋아하는데, 키보드는 노트북이나 데스크탑에서 나오는 열로 인해 따뜻한 경우가 많습니다. 둘째, 고양이는 주인의 관심을 끌기 위해 키보드 위에 앉는 경우가 많습니다. 주인이 키보드를 사용하는 동안 고양이가 키보드 위에 앉으면 주인은 자연스럽게 고양이에게 관심을 기울이게 됩니다. 셋째, 고양이는 새로운 물건에 대한 호기심이 많아서 키보드와 같은 새로운 물건을 탐구하려는 본능이 있습니다.
6. 결론
자바스크립트에서 문자열 인코딩과 디코딩은 웹 개발에서 매우 중요한 개념입니다. 이 글에서는 다양한 인코딩과 디코딩 방법을 살펴보았으며, 이와 관련된 몇 가지 재미있는 질문도 함께 다루어보았습니다. 면접에서 이러한 개념을 잘 이해하고 있다면, 개발자로서의 역량을 잘 보여줄 수 있을 것입니다.
관련 Q&A
Q1: 자바스크립트에서 Base64 인코딩과 디코딩을 어떻게 하나요?
A1: 자바스크립트에서는 btoa 함수를 사용하여 문자열을 Base64로 인코딩하고, atob 함수를 사용하여 Base64로 인코딩된 문자열을 디코딩할 수 있습니다.
Q2: URL 인코딩과 디코딩을 할 때 encodeURI와 encodeURIComponent의 차이는 무엇인가요?
A2: encodeURI는 전체 URL을 인코딩하는 데 사용되며, encodeURIComponent는 URL의 일부분(예: 쿼리 파라미터)을 인코딩하는 데 사용됩니다. encodeURIComponent는 encodeURI보다 더 많은 문자를 인코딩합니다.
Q3: UTF-8과 UTF-16의 차이는 무엇인가요?
A3: UTF-8은 가변 길이 문자 인코딩 방식으로, 1바이트에서 4바이트까지 사용할 수 있습니다. UTF-16은 고정 길이 문자 인코딩 방식으로, 대부분의 문자를 2바이트로 표현합니다. UTF-8은 웹에서 가장 널리 사용되며, UTF-16은 자바스크립트에서 기본적으로 사용됩니다.
Q4: 고양이가 키보드를 좋아하는 이유는 무엇인가요?
A4: 고양이가 키보드를 좋아하는 이유는 키보드가 따뜻하고, 주인의 관심을 끌기 쉽고, 새로운 물건에 대한 호기심을 충족시켜주기 때문입니다.