TextEncoder로 input byte 단위 입력 제한하기

서비스 공통 정책에 따라 사용자 입력값이 255바이트를 초과하지 않도록 제한해야 하는 요구사항이 생겼다.

한글, 이모지, 특수문자 등의 경우 같은 1글자라고 해도 2~4바이트 이상을 차지할 수 있기 때문에, 기존 글자수를 제한하는 maxLength 속성과 별개로 바이트 계산을 하여 공통 컴포넌트에 적용해 주었다.

---

📦 바이트 수 계산 및 제한 유틸 함수 구현

TextEncoder API를 활용하면 문자열을 UTF-8 바이트 배열로 변환할 수 있으므로, 이를 이용해 바이트 수를 계산하고 초과 시 잘라내는 유틸 함수를 구현하였다.

export const limitByteLength = (str: string, byteLimit: number): string => {
  if (!str) return '';

  const encoder = new TextEncoder();
  const bytes = encoder.encode(str);

  if (bytes.length <= byteLimit) return str;

  let result = '';
  let bytesUsed = 0;

  for (let i = 0; i < str.length; i++) {
    const char = str.charAt(i);
    const charBytes = encoder.encode(char).length;

    if (bytesUsed + charBytes <= byteLimit) {
      result += char;
      bytesUsed += charBytes;
    } else {
      break;
    }
  }

  return result;
};

이 함수는 다음과 같은 방식으로 동작한다.

1. 문자열을 TextEncoder 를 통해 바이트 배열로 변환
2. 전체 바이트 수가 제한 이하이면 그대로 반환
3. 초과할 경우 한 글자씩 바이트를 계산하여 제한 이내까지만 결과 문자열에 추가
4. 최종적으로 잘린 문자열을 반환

---

✍️ 공통 Input 컴포넌트에 적용

위에서 만든 유틸 함수를 공통 Input 컴포넌트의 onChange 핸들러에 적용하면 된다.
입력값을 감지하여 바이트 제한을 초과할 경우 자동으로 잘라주는 방식으로 구현하였다.

onChange: (e: React.ChangeEvent<HTMLInputElement>) => {
  const limitedValue = limitByteLength(e.target.value, MAX_BYTE_LENGTH);

  if (e.target.value !== limitedValue) {
    e.target.value = limitedValue;
  }

  // 이후 상태 업데이트 등 필요한 로직 수행
}