Next.js 초보자의 첫 토이 프로젝트 회고:
실시간 글자 수 계산기 개발기 (ft. 바이트 계산 로직)
매번 남의 코드만 따라 치는 '튜토리얼 지옥'에서 벗어나고 싶으신가요? 취준생 시절 제게 꼭 필요했던 가벼운 툴을 직접 만들어본 경험을 나눕니다.
1. 왜 하필 '글자 수 계산기'였을까?
React나 Next.js를 처음 배우면 다들 Todo 리스트부터 만들죠. 저도 그랬습니다. 하지만 막상 만들어놓고 나면 제가 쓰질 않더라고요. 그래서 "내가 진짜로 매일 쓸 만한, 아주 작고 실용적인 툴을 만들어보자!"라고 결심했습니다.
마침 취업 준비를 하면서 자소서 글자 수와 바이트(Byte) 제한 때문에 스트레스를 받던 터라, 잡코리아나 사람인보다 훨씬 가볍고 광고 없는 '나만의 실시간 글자 수 계산기'를 첫 토이 프로젝트로 낙점했습니다.
2. 핵심 로직: 실시간 상태 관리와 정규식
가장 먼저 해야 할 일은 사용자가 텍스트를 입력할 때마다 즉각적으로 글자 수를 세는 것이었습니다. React의 useState를 사용해 텍스트 상태를 관리하는 건 어렵지 않았습니다.
// 공백 포함 글자 수
const countWithSpaces = text.length;
// 공백 제외 글자 수 (정규식 활용)
const countWithoutSpaces = text.replace(/\s/g, '').length;공백 제외 글자 수는 자바스크립트의 정규표현식 /\s/g를 사용해 모든 공백 문자(스페이스, 탭, 줄바꿈)를 빈 문자열로 치환한 뒤 길이를 측정했습니다. 코드는 한 줄이지만 이 작은 로직이 자소서 작성할 때 얼마나 큰 도움이 되는지 모릅니다.
3. 가장 큰 난관: 한글과 영문의 바이트(Byte) 차이
단순히 글자 수를 세는 건 금방 끝났지만, 기업 제출용 DB 용량 제한 기준인 바이트(Byte) 계산에서 멘붕이 왔습니다. 영문과 숫자는 1Byte지만, 한글은 인코딩 방식(EUC-KR vs UTF-8)에 따라 2Byte나 3Byte로 계산되기 때문이죠.
보통 국내 채용 포털이나 기업 DB는 EUC-KR 기준을 많이 사용하므로, 한글은 2Byte, 영문/숫자/공백은 1Byte로 취급해야 했습니다. charCodeAt() 메서드를 활용해 아스키코드 값을 비교하는 방식으로 해결했습니다.
4. Next.js를 선택한 이유와 배포
"단순한 계산기면 그냥 바닐라 JS로 만들지 왜 Next.js를 썼냐?"라고 물으실 수 있습니다. 가장 큰 이유는 SEO(검색엔진 최적화)와 라우팅의 편리함 때문이었습니다.
폴더 기반 라우팅 덕분에 /tools/word-counter라는 깔끔한 URL을 금방 만들 수 있었고, Next.js의 내장 Metadata API를 사용해 검색 노출을 위한 세팅도 수월했습니다. Vercel을 통한 배포는 깃허브 연결 버튼 몇 번만 누르니 끝나버려서 허무할(?) 정도였고요.
🚀 직접 만든 결과물을 확인해보세요!
로딩 딜레이 0.1초도 없는 초경량 실시간 글자 수 계산기입니다. 취준생, 블로거 분들 모두 자유롭게 사용해 보세요!
실시간 글자 수 계산기 사용해보기마치며
거창한 프로젝트는 아니지만, 머릿속에 있던 아이디어를 내 손으로 직접 구현하고 배포까지 해봤다는 점에서 엄청난 자신감을 얻었습니다. 혹시 지금 프론트엔드 공부를 막 시작하셨다면, 남들 다 하는 클론 코딩 말고 아주 작더라도 '내가 쓸 도구'를 만들어보시길 강력히 추천합니다!