ritzs 님의 블로그

1. Vue 3 + Vite + Bootstrap 개발 환경 구축

• Node.js 설치 확인 (node -v, npm -v)
• Vite 기반 Vue 3 프로젝트 생성 (npm create vite@latest)
• Bootstrap 설치 및 적용 (npm install bootstrap)
• IntelliJ에서 Vite 실행 가능하도록 설정 (npm run dev)

2. Vue 컴포넌트 기본 구조 이해

• SFC (Single File Component) 구조
  • <template>: 화면 UI 정의
  • <script setup>: 로직 및 상태 관리
  • <style scoped>: 해당 컴포넌트 전용 스타일
• HelloWorld 컴포넌트 작성 및 사용

3. Bootstrap 기반 레이아웃 구성

• AppHeader, AppFooter, AppContainer 컴포넌트 생성
• Bootstrap 레이아웃 클래스 적용 (container, row, col, navbar 등)
• 전체 페이지 기본 틀 완성

4. Axios 설정 및 백엔드(Spring Boot) 연동 테스트

• Axios 설치 (npm install axios)
• 기본 API 호출 예제 작성
• Spring Boot에서 CORS 설정
• /api/hello 호출로 연동 확인

5. Vue Router 설정 (다중 페이지 구조)

• vue-router 설치 (npm install vue-router)
• Home / About 페이지 생성
• Header 메뉴에서 페이지 이동 가능하게 구현

6. Vue 상태관리 (Pinia)

• Pinia 설치 (npm install pinia)
• 전역 상태 관리 스토어 생성
• 간단한 카운터 예제 구현
• 라우터에 상태값 적용

7. JWT 기반 인증 시스템 구현

• 로그인 / 회원가입 폼 구성 (Vue)
• Spring Boot JWT 인증 백엔드 구현 (JwtAuthFilter, SecurityConfig)
• 로그인 후 사용자 정보 상태 저장 (Pinia + LocalStorage)
• Axios 인터셉터로 JWT 토큰 자동 포함
• 로그아웃 + 인증 유지 처리 (라우터 가드)

8. 사용자 정보 수정 페이지 구현

• /me API로 기존 사용자 정보 조회
• 이름, 비밀번호 수정 가능 (비밀번호는 선택 사항)
• @Transactional + Dirty Checking 기반 업데이트 처리

9. 파일 업로드 및 정적 리소스 제공

• FileController 작성
  • /api/files → 업로드 API
  • /files/** → 정적 리소스 접근 가능
• Vue에서 파일 업로드 컴포넌트 구현 (Axios multipart/form-data)
• 업로드 후 이미지/파일을 브라우저에서 직접 확인 가능

10. 예외 처리 및 로그 관리

• Spring Security 인증/인가 예외 핸들링 (AuthenticationEntryPoint, AccessDeniedHandler)
• Console WARN 제거 (UserDetailsServiceAutoConfiguration 제외)
• application.properties → logging.level 설정으로 Security/Request 로그 관리

11. 게시판 기능 (진행 중)

• Post / Comment Entity 및 Repository 생성
• 게시글 CRUD API, 댓글 작성 API 작성
• Vue에서 목록/작성/상세/댓글 UI 구현 예정