
자바스크립트에서 문자열 인코딩과 디코딩은 웹 개발에서 매우 중요한 주제입니다. 특히, 다양한 문자셋과 인코딩 방식을 이해하는 것은 면접에서 자주 등장하는 문제 중 하나입니다. 이 글에서는 자바스크립트의 문자열 인코딩과 디코딩에 대해 깊이 있게 다루어보겠습니다.
1. 자바스크립트에서의 문자열 인코딩
자바스크립트는 기본적으로 UTF-16 인코딩을 사용합니다. UTF-16은 유니코드 문자를 16비트 단위로 표현하는 방식으로, 대부분의 현대 언어와 기호를 표현할 수 있습니다. 하지만, 웹 환경에서는 다양한 인코딩 방식이 사용되기 때문에, 자바스크립트에서도 이를 처리할 수 있는 방법이 필요합니다.
1.1. encodeURI
와 encodeURIComponent
encodeURI
와 encodeURIComponent
는 URI(Uniform Resource Identifier)를 인코딩하는 데 사용되는 함수입니다. encodeURI
는 전체 URI를 인코딩하는 데 적합하며, encodeURIComponent
는 URI의 일부(예: 쿼리 문자열)를 인코딩하는 데 적합합니다.
const uri = "https://example.com/한글";
const encodedURI = encodeURI(uri);
console.log(encodedURI); // "https://example.com/%ED%95%9C%EA%B8%80"
const component = "한글";
const encodedComponent = encodeURIComponent(component);
console.log(encodedComponent); // "%ED%95%9C%EA%B8%80"
1.2. btoa
와 atob
btoa
와 atob
는 Base64 인코딩과 디코딩을 위한 함수입니다. Base64는 바이너리 데이터를 텍스트로 변환하는 데 사용되며, 주로 이미지나 파일을 문자열로 변환할 때 사용됩니다.
const text = "Hello, World!";
const encodedText = btoa(text);
console.log(encodedText); // "SGVsbG8sIFdvcmxkIQ=="
const decodedText = atob(encodedText);
console.log(decodedText); // "Hello, World!"
2. 자바스크립트에서의 문자열 디코딩
디코딩은 인코딩된 문자열을 원래의 형태로 복원하는 과정입니다. 자바스크립트에서는 decodeURI
, decodeURIComponent
, 그리고 atob
함수를 사용하여 디코딩을 수행할 수 있습니다.
2.1. decodeURI
와 decodeURIComponent
decodeURI
와 decodeURIComponent
는 각각 encodeURI
와 encodeURIComponent
로 인코딩된 문자열을 디코딩합니다.
const encodedURI = "https://example.com/%ED%95%9C%EA%B8%80";
const decodedURI = decodeURI(encodedURI);
console.log(decodedURI); // "https://example.com/한글"
const encodedComponent = "%ED%95%9C%EA%B8%80";
const decodedComponent = decodeURIComponent(encodedComponent);
console.log(decodedComponent); // "한글"
2.2. atob
atob
는 Base64로 인코딩된 문자열을 디코딩합니다.
const encodedText = "SGVsbG8sIFdvcmxkIQ==";
const decodedText = atob(encodedText);
console.log(decodedText); // "Hello, World!"
3. 다양한 인코딩 방식과 호환성
자바스크립트는 UTF-16을 기본으로 사용하지만, 웹 환경에서는 다양한 인코딩 방식이 사용됩니다. 예를 들어, 서버와 클라이언트 간의 데이터 교환 시, 서버가 EUC-KR 인코딩을 사용한다면, 클라이언트에서 이를 처리하기 위해 추가적인 변환이 필요할 수 있습니다.
3.1. TextEncoder
와 TextDecoder
TextEncoder
와 TextDecoder
는 다양한 인코딩 방식을 지원하는 API입니다. 이를 통해 UTF-8, EUC-KR 등 다양한 인코딩 방식으로 문자열을 변환할 수 있습니다.
const encoder = new TextEncoder();
const encoded = encoder.encode("한글");
console.log(encoded); // Uint8Array(6) [ 237, 149, 156, 234, 184, 128 ]
const decoder = new TextDecoder("euc-kr");
const decoded = decoder.decode(encoded);
console.log(decoded); // "한글"
4. 면접에서 자주 등장하는 문제
면접에서는 문자열 인코딩과 디코딩에 대한 기본적인 이해를 묻는 문제가 자주 등장합니다. 예를 들어, encodeURI
와 encodeURIComponent
의 차이점, Base64 인코딩의 사용 사례, 그리고 다양한 인코딩 방식 간의 변환 방법 등이 있습니다.
4.1. 예시 문제
- 문제 1:
encodeURI
와encodeURIComponent
의 차이점은 무엇인가요? - 문제 2: Base64 인코딩은 어떤 상황에서 사용되나요?
- 문제 3: UTF-8과 EUC-KR 인코딩의 차이점은 무엇인가요?
5. 결론
자바스크립트에서 문자열 인코딩과 디코딩은 웹 개발에서 필수적인 기술입니다. 다양한 인코딩 방식을 이해하고, 적절한 함수를 사용하여 문자열을 처리하는 능력은 면접에서도 높은 평가를 받을 수 있습니다. 이 글을 통해 자바스크립트의 문자열 인코딩과 디코딩에 대한 깊은 이해를 얻으셨기를 바랍니다.
관련 Q&A
Q1: encodeURI
와 encodeURIComponent
의 차이점은 무엇인가요?
A1: encodeURI
는 전체 URI를 인코딩하는 데 사용되며, encodeURIComponent
는 URI의 일부(예: 쿼리 문자열)를 인코딩하는 데 사용됩니다. encodeURI
는 :/?#[]@!$&'()*+,;=
와 같은 특수 문자를 인코딩하지 않지만, encodeURIComponent
는 이러한 문자도 인코딩합니다.
Q2: Base64 인코딩은 어떤 상황에서 사용되나요?
A2: Base64 인코딩은 바이너리 데이터를 텍스트로 변환할 때 사용됩니다. 주로 이미지나 파일을 문자열로 변환하여 전송하거나 저장할 때 사용됩니다. 또한, HTTP 헤더나 URL에서 사용될 수 있는 안전한 문자열로 변환할 때도 사용됩니다.
Q3: UTF-8과 EUC-KR 인코딩의 차이점은 무엇인가요?
A3: UTF-8은 유니코드 기반의 가변 길이 인코딩 방식으로, 전 세계의 모든 문자를 표현할 수 있습니다. 반면, EUC-KR은 한국어를 위한 고정 길이 인코딩 방식으로, 주로 한국어 텍스트를 표현하는 데 사용됩니다. UTF-8은 더 넓은 범위의 문자를 지원하지만, EUC-KR은 한국어에 특화되어 있습니다.