2026-03-07

오늘 한 것

  • Vite 빌드 결과물인 프론트엔드 정적 파일(index.html, js, css)을 스프링 부트 서버 내부 리소스로 통합.
  • 브라우저를 통해 localhost:8080에 접속하여 클라이언트 UI 렌더링 성공 확인.
  • 포스트맨(Postman)이 아닌 실제 프론트엔드 화면에서 회원가입 기능을 실행하여 백엔드 API와의 통신 및 DB 저장 흐름 최종 검증.

막힌 점

  • 프론트엔드 파일을 프로젝트에 추가한 직후 브라우저 접속 시 500 (Internal Server Error) 발생.
  • 에러 발생 시 브라우저 개발자 도구의 콘솔만 확인하고, 정작 원인이 기록되어 있는 인텔리제이(백엔드) 실행 콘솔의 상세 로그를 즉각적으로 확인하지 않아 원인 파악이 지연됨.
  • 스프링 부트 환경에서 정적 파일용 폴더(static)와 서버 템플릿용 폴더(templates)의 역할 차이를 혼동하여 파일을 잘못된 경로에 배치함.

정리

  • 순수 HTML, JS, CSS로 구성된 프론트엔드 빌드 파일은 반드시 스프링 부트의 src/main/resources/static 폴더에 위치해야 서버가 이를 있는 그대로 클라이언트에게 전달(Serving)할 수 있다.
  • templates 폴더는 타임리프(Thymeleaf) 같은 서버 사이드 렌더링(SSR) 엔진 전용 공간이다. 이곳에 프론트엔드 파일을 넣으면 서버가 이를 타임리프 문법으로 해석하려 시도하다가 파싱 에러(500)를 일으키며 뻗어버린다.
  • 브라우저에서 500 에러를 마주했다면, 브라우저 창을 볼 것이 아니라 그 즉시 백엔드 IDE 콘솔 창을 열어 붉은색 스택 트레이스(Stack Trace)를 읽어내는 것이 디버깅의 첫걸음이다.

코드

// 올바른 프론트엔드 정적 자원(Static Resources) 배치 구조 src/ └── main/ └── resources/ ├── static/ │ ├── index.html // 클라이언트 진입점 │ ├── index-CRrRqFH4.js // 빌드된 자바스크립트 (API 호출 등) │ └── index-kQJbKSsj.css // 빌드된 스타일시트 └── templates/ // (타임리프 미사용 시 비워둠)