TIL

오늘 한 일

1. 왜 src 내부 이미지는 ‘객체’인가?
   • 번들러의 개입: src 폴더 내 파일은 Webpack/Turbopack 같은 번들러가 자바스크립트 모듈로 처리함.
   • 메타데이터 포함: import 시 단순 경로가 아니라 해시값(캐싱용), 가로/세로 크기, Blur 데이터 등이 포함된 JSON 객체 형태가 됨.
   • 단점: 백엔드 API에서 이미지 주소를 문자열(“/images/logo.png”)로 줄 경우, 프론트의 객체 타입과 맞지 않아 별도의 변환 로직이 필요함.
2. 왜 public으로 이동하는가?
   • 정적 서빙(Static Serving): public 폴더는 번들러를 거치지 않고 빌드 시 루트(/) 경로에 그대로 복사됨.
   • 문자열 참조: 별도의 import 없이 “/images/name.png” 같은 직관적인 문자열로 즉시 참조 가능.
   • API 연동 최적화: DB에 저장된 이미지 경로(문자열)를 수정 없이 src 속성에 바로 대입할 수 있어 개발 생산성이 높아짐.