트랙
/
JavaScript
JavaScript
/
연습 문제
/
마이크로 블로그
마이크로 블로그

마이크로 블로그

쉬움

지침

아주아주 짧은 글을 위한 소셜 미디어 시장의 틈새를 발견했어요. 이제 Twitter가 280자 글을 허용하면서, 빠른 소셜 미디어 소식을 원하는 사람들은 제대로 된 서비스를 받지 못하고 있어요. 그래서 직접 소셜 미디어 네트워크를 만들기로 했어요.

제품을 눈에 띄게 만들기 위해 과감한 선택을 하고, 5자 이하의 글만 허용해요. 5자를 넘는 글은 5자로 잘라야 해요.

사용자가 마음껏 자신을 표현할 수 있도록 이모지와 그 밖의 유니코드도 허용해요.

해야 할 일은 입력 문자열을 5자로 자르는 거예요.

텍스트 인코딩

디지털로 저장되는 텍스트는 일련의 바이트로 변환되어야 해요. 문자를 바이트로 매핑하는 방법 중 흔히 쓰이는 것은 세 가지예요.

  • ASCII는 영어 문자를 인코딩할 수 있어요. 모든 문자가 정확히 1바이트예요.
  • UTF-8은 유니코드 텍스트 인코딩이에요. 문자는 1바이트에서 4바이트를 차지해요.
  • UTF-16은 유니코드 텍스트 인코딩이에요. 문자는 2바이트 또는 4바이트예요.

UTF-8과 UTF-16은 둘 다 유니코드 인코딩이라서, 다음과 같은 아주 다양한 문자를 표현할 수 있어요.

  • 전 세계 대부분의 언어와 문자로 된 텍스트
  • 역사적 텍스트
  • 이모지

UTF-8과 UTF-16은 둘 다 가변 길이 인코딩이라서, 문자마다 차지하는 공간의 크기가 달라요.

'a'라는 글자와 '😛'라는 이모지를 생각해 봐요. UTF-16에서 'a'는 2바이트를 차지하지만 '😛'는 4바이트를 차지해요.

이 연습 문제의 핵심은 유니코드 코드 유닛 대신 유니코드 문자(코드포인트)를 기준으로 설계된 API를 사용하는 거예요.

유니코드 코드 포인트와 코드 단위

“일반적인” UTF-16 인코딩 문자열은 일련의 문자로 나타낼 수 있어요. 이때 각 문자는 최대 16비트 길이예요(그래서 UTF-16이라는 이름이 붙었어요).

즉, 16비트, 그러니까 코드 단위 하나로 표현할 수 있는 문자는 최대 2¹⁶(2의 16제곱), 곧 65536개예요. 이 65536개의 문자는 Basic Multilingual Set이라고 하는 영역을 이루는데, 대부분의 언어에서 가장 흔히 쓰이는 문자를 담기에 충분히 커요.

하지만 일부 기호는 코드 단위 하나에 담기지 않아요. 이럴 때는 코드 단위 두 개로 표현해요. 이렇게 UTF-16 코드 단위 두 개를 묶은 것을 흔히 _서로게이트 페어_라고 하는데, 이 둘이 코드 포인트 하나를 이뤄요.

정리하면, UTF-16 인코딩에서는 이렇게 말해요.

  • code unit은 문자 하나를 나타내는 16비트 이하의 값이에요.
  • code point는 코드 단위 하나 또는 두 개로 문자 하나를 나타내요.

여기에 _그래핌 클러스터_라는 것도 있어서 더 헷갈리게 만들죠. 그래핌 클러스터는 기본적으로 유니코드 문자(코드 포인트)의 나열인데, 하나의 시각적 단위로 다뤄야 하는 것들이에요. 예를 들어 여기 있는 👨‍👦 같은 일부 이모지가 그래요.

JavaScript에서의 UTF-16

대부분의 내장 JavaScript 메서드는 UTF-16 인코딩 문자열을 다룰 수 있지만, 동작 방식은 UTF-16 코드 단위를 기준으로 해요. 예를 들어 String.prototype.split("") 메서드는 문자열을 코드 단위로 나눠요.

반면 String iterators은 코드 포인트 단위로 순회해요.

유니코드 문자열에 대해 더 많이 읽고 예제도 찾아보려면 MDN을 참고해요.

GitHub에서 편집 링크가 새 창이나 탭에서 열려요
JavaScript Exercism

마이크로 블로그 문제를 시작해 볼 준비가 됐나요?

Exercism에 가입하고 JavaScript 트랙을 개념 37개연습 문제 159개, 그리고 실제 사람의 멘토링과 함께 배우고 익혀 보세요. 모두 무료예요.