"프론트엔드한테도 Base64?"
Base64는 백엔드 도구라고 생각하기 쉽지만, 프론트엔드 개발자에게도 자주 등장. 한 번 익혀 두면 작업 효율이 분명히 다르다.
이유 1: 작은 이미지 임베딩
아이콘·로고를 Base64로 변환해 CSS·HTML에 직접 임베딩. HTTP 요청 줄여 페이지 로딩 빠름.
이유 2: SVG 임베딩
SVG 코드를 Base64로 변환해 CSS background 속성에 사용. 인라인 SVG 대안.
이유 3: API 응답 처리
백엔드에서 Base64로 받은 이미지를 디코딩해 화면에 표시. Base64 인코더로 결과 검증.
이유 4: 사용자 업로드 처리
FileReader API로 사용자 파일을 Base64로 변환 후 서버 전송. 이미지 미리보기에도 활용.
이유 5: localStorage 저장
이진 데이터를 localStorage에 저장하려면 Base64로 변환. 텍스트만 저장 가능한 제약 회피.
이유 6: 디버깅
API 응답·요청 본문에 Base64 자료 등장. 디버거에서 디코딩으로 내용 확인.
이유 7: JWT 토큰 분석
로그인 후 받은 JWT 토큰의 페이로드 디코딩으로 사용자 정보 확인.
프론트엔드 자주 쓰는 활용
- 아이콘 데이터 URI
- 이미지 미리보기
- JWT 페이로드 분석
- localStorage 데이터
Base64 디코더를 프론트엔드 작업 옆에 두면 부드럽다.
마무리
프론트엔드 개발자에게도 Base64는 자주 쓰는 자리. 한 번 익혀 두면 매 작업이 부드러워진다.