자바스크립트 string 인코딩 디코딩 면접문제: 왜 고양이는 키보드를 좋아할까?

blog 2025-01-23 0Browse 0
자바스크립트 string 인코딩 디코딩 면접문제: 왜 고양이는 키보드를 좋아할까?

자바스크립트에서 문자열 인코딩과 디코딩은 웹 개발에서 매우 중요한 주제입니다. 특히, 다양한 문자셋과 인코딩 방식을 이해하는 것은 면접에서 자주 등장하는 문제 중 하나입니다. 이 글에서는 자바스크립트의 문자열 인코딩과 디코딩에 대해 깊이 있게 다루어보겠습니다.

1. 자바스크립트에서의 문자열 인코딩

자바스크립트는 기본적으로 UTF-16 인코딩을 사용합니다. UTF-16은 유니코드 문자를 16비트 단위로 표현하는 방식으로, 대부분의 현대 언어와 기호를 표현할 수 있습니다. 하지만, 웹 환경에서는 다양한 인코딩 방식이 사용되기 때문에, 자바스크립트에서도 이를 처리할 수 있는 방법이 필요합니다.

1.1. encodeURIencodeURIComponent

encodeURIencodeURIComponent는 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. btoaatob

btoaatob는 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. decodeURIdecodeURIComponent

decodeURIdecodeURIComponent는 각각 encodeURIencodeURIComponent로 인코딩된 문자열을 디코딩합니다.

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. TextEncoderTextDecoder

TextEncoderTextDecoder는 다양한 인코딩 방식을 지원하는 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. 면접에서 자주 등장하는 문제

면접에서는 문자열 인코딩과 디코딩에 대한 기본적인 이해를 묻는 문제가 자주 등장합니다. 예를 들어, encodeURIencodeURIComponent의 차이점, Base64 인코딩의 사용 사례, 그리고 다양한 인코딩 방식 간의 변환 방법 등이 있습니다.

4.1. 예시 문제

  • 문제 1: encodeURIencodeURIComponent의 차이점은 무엇인가요?
  • 문제 2: Base64 인코딩은 어떤 상황에서 사용되나요?
  • 문제 3: UTF-8과 EUC-KR 인코딩의 차이점은 무엇인가요?

5. 결론

자바스크립트에서 문자열 인코딩과 디코딩은 웹 개발에서 필수적인 기술입니다. 다양한 인코딩 방식을 이해하고, 적절한 함수를 사용하여 문자열을 처리하는 능력은 면접에서도 높은 평가를 받을 수 있습니다. 이 글을 통해 자바스크립트의 문자열 인코딩과 디코딩에 대한 깊은 이해를 얻으셨기를 바랍니다.

관련 Q&A

Q1: encodeURIencodeURIComponent의 차이점은 무엇인가요?
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은 한국어에 특화되어 있습니다.

TAGS