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 구현 예정

+ Recent posts

티스토리툴바