string 의 길이 제한, 근데 언어별로 길이가 다르다면..?

개발하는 서비스에서 이런 경우가 있었다. 

검색어를 라벨모양의 컴포넌트에 넣어서 보여줘야하는데, 한글 기준 max length는 20자로, 20자 초과시 ellipsis 를 넣어주어야한다. 

그런데 같은 기준으로 하자니 영어가 기준일 때는 영어 한 글자 한 글자가 차지하는 부피(& 바이트)가 작기 때문에 검색어가 영어일 때는 굳이 ellipsis를 지정해줄 필요가 없었다. 

컴포넌트의 크기 기준이 모두 %로 되어있어 text-overflow:ellipsis; 를 사용하는 것도 애매.. (px로 넓이를 지정해서 사용해야한다.)

블록컴포넌트에서 사용해야하는건 알겠지만, 이상하게 꽂혀서 다른 방법을 찾아봤다. 

1. textEncoder를 사용해서 해당 string을 encode 해준 다음, 길이를 측정하기.

stream된 input을 UTF-8 bytes의 stream으로 변환해준다. 

new TextEncoder().encode('안녕').length // return 6
new TextEncoder().encode('hihi').length // return 4

2. Blob을 사용해서 해당 blob의 size 측정하기.

new Blob(['안녕']).size // return 6
new Blob(['hihi']).size // return 4

blob은 Binary Large Objects의 약자로, 단순 텍스트 외에도 이미지, 사운드, 비디오 등의 데이터도 다룰 수 있다. File API를 구성하는 객체라고 하니 흥미롭다. blob 보다는 textEncoder를 사용하는 것이 더 취지에 맞아보인다.

UTF-8 기준 한국어는 한 글자에 3bytes, 영어는 한 글자에 1 byte 로 세어진다. 



 

출처
- https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow#see_also
- https://developer.mozilla.org/en-US/docs/Web/API/TextEncoder

TextEncoder - Web APIs | MDN

-