Devlog

Vue 3를 이용한 프론트엔드와 Spring Boot를 이용한 백엔드를 연동하려면, 단순히 "주소만 맞추면 된다"가 아닙니다.CORS, JWT 인증 처리, DTO 통신, 응답 규약, 예외 처리까지 고려한 구조 설계가 필요합니다.이번 포스팅에서는 실전 기준으로 아래 내용을 정리해드립니다.1. 시스템 구성 예시프론트엔드: Vue 3, TypeScript, Pinia, Axios백엔드: Spring Boot 3.x, Java 11+, Spring Security, JWT연동 방식: RESTful API 통신 (JSON 기반)빌드/배포: FE는 dist/로 빌드되어 Nginx에 정적 호스팅, BE는 API 서버로 독립 운영2. CORS 설정 – 백엔드에서 허용Vue 개발 서버는 기본적으로 localhost:51..

SPA(Vue) 환경에서 백엔드와 안전하게 인증을 연동하는 가장 일반적인 방식은 JWT (JSON Web Token) 기반 인증입니다.Vue + Axios + TypeScript 조합에서는 이 JWT 인증 구조를 어떻게 구현하고 관리하는 것이 좋을까요?이번 포스팅에서는 아래와 같은 순서로 JWT 기반 로그인 인증 흐름을 구축하는 방법을 실습 예제와 함께 소개합니다.1. JWT 인증이란?JWT는 로그인 성공 시 서버가 클라이언트에게 발급해주는 디지털 서명된 토큰입니다.이 토큰을 클라이언트가 저장하고, 이후 서버에 요청을 보낼 때 Authorization 헤더에 포함시키면 서버는 이를 인증 수단으로 사용합니다.✅ 상태를 서버에 저장하지 않기 때문에 Stateless 인증이 가능✅ REST API와 궁합이 좋..

Vue 프로젝트에서 비동기 API를 호출할 때, 대부분의 데이터는 상태로 저장되고 여러 컴포넌트에서 공유됩니다.이때 Pinia를 통해 상태를 관리하면서 동시에 API 호출과 데이터 가공까지 맡긴다면 훨씬 깔끔하고 유지보수하기 쉬운 구조를 만들 수 있습니다.이번 포스팅에서는 Pinia 스토어에서 비동기 API를 안전하게 호출하고 상태를 관리하는 방법을 아래와 같은 흐름으로 정리합니다:✅ 목표 구조상태: data, isLoading, error 분리액션: Axios + DTO 처리컴포넌트에서는 store만 불러 사용1. 📦 기본 구조 예시: 유저 리스트// src/stores/userStore.tsimport { defineStore } from 'pinia'import axios from 'axios'i..