Devlog

Vue 3 + Vite 프로젝트를 기반으로 Vue Router를 적용하고, Axios로 외부 API를 호출하는 방법을 A부터 Z까지 정리해보겠습니다.0. 프로젝트 준비Vue 프로젝트가 아직 없다면 아래 명령어로 생성해주세요:npm create vite@latest vue-router-axios-app설정 옵션:Framework: VueVariant: JavaScript 또는 TypeScript (원하는 대로)cd vue-router-axios-appnpm installnpm run dev1. Vue Router 설치 및 설정✅ 설치npm install vue-router✅ 폴더 구조 생성src/├── router/│ └── index.js├── views/│ ├── HomeView.vue│ └..

1. Node.js 설치Vue는 Node.js 기반이므로 Node가 설치되어 있어야 합니다.📌 설치 방법:공식 다운로드 페이지에서 LTS 버전 설치설치 확인:node -vnpm -v2. Vue 프로젝트 생성 (Vite 사용)Vite는 Vue 3의 공식 빌드 도구로, 빠르고 설정이 간편합니다.npm create vite@latest my-vue-app my-vue-app은 프로젝트 이름입니다. 원하는 이름으로 바꾸셔도 됩니다.선택 옵션:Framework: VueVariant: JavaScript or TypeScript (원하는 것 선택)설정 완료 후:cd my-vue-appnpm installnpm run devhttp://localhost:5173에서 기본 Vue 앱을 확인할 수 있습니다.3. CSS..

Vue.js로 프론트엔드 개발을 하다 보면, 어느 순간부터 다음과 같은 문제를 마주하게 됩니다.컴포넌트는 렌더링되었는데, props가 안 들어온다?v-model로 바인딩한 값이 안 바뀐다?이벤트 핸들러가 호출되지 않는다?Vuex에서 상태가 업데이트되었는데 화면은 그대로다?이럴 때 필요한 건 바로 "디버깅 스킬"입니다.이 글에서는 Vue.js에서 사용할 수 있는 디버깅 도구들, 자주 발생하는 문제에 대한 해결 방법, 그리고 Vue 2와 Vue 3 모두를 아우르는 실전 팁을 정리해봤습니다.1. Vue Devtools를 활용한 컴포넌트 디버깅✅ 설치 방법크롬 웹스토어에서 Vue.js devtools 설치👉 Chrome Vue DevtoolsVue 3 프로젝트의 경우, 최신 버전 Devtools 필요👉 Vu..

SPA(Single Page Application) 구조의 Vue 프로젝트에서는 백엔드(Spring Boot 등)로부터 발급받은 AccessToken과 RefreshToken을 이용해 인증을 처리할 수 있습니다. 이 포스팅에서는 AccessToken 자동 재발급 흐름을 구현하는 방법을 중심으로 다룹니다.📦 전체 인증 구조 요약[Login] ⬇AccessToken + RefreshToken 발급 ⬇API 요청 시 → AccessToken 사용 ⬇AccessToken 만료 → RefreshToken 전송 ⬇서버에서 AccessToken 재발급 → 재요청📁 프로젝트 구조 예시src/├── api/│ └── axios.js # Axios 설정 (인터셉터 포함)├── auth/│ ..