사용자 입력 텍스트를 바이트(byte) 길이로 제한하는 Vue 컴포넌트 만들기

NHN Cloud Console 웹 애플리케이션 개발 중 사용자가 입력한 텍스트를 100바이트 길이로 제한하는 Vue 컴포넌트 구현 경험을 공유합니다. 이 글에서는 글자를 바이트 길이로 계산하는 함수 작성 방법과 함께, 한글, 영문, 숫자, 특수문자 등 다양한 문자를 입력받아 100바이트 미만의 글자만 표시하고 초과하는 입력은 무시하는 재사용 가능한 컴포넌트 구현 과정을 상세히 설명합니다.

이를 위해 비트와 바이트의 개념, 텍스트 인코딩 방식에 대한 배경지식을 먼저 설명하며, Vue2 환경에서 yarn workspace, eslint, prettier, Webpack4, testing-library 등을 활용한 개발 과정을 다룹니다.