Devlog

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..

Axios를 통해 API를 호출할 때, 다음과 같은 상황을 자주 마주치게 됩니다:응답이 배열 형태일 때: list, items 등중첩된 객체 구조일 때: user.profile.address 같은 구조에러 응답도 타입으로 명확히 관리하고 싶을 때이럴 때 DTO(Data Transfer Object) 패턴을 적용하면, 코드를 안정적이고 유지보수하기 쉽게 만들 수 있습니다.1. 배열 응답 처리 - 배열도 객체처럼 관리하자1-1. API 응답 예시GET /api/users[ { "id": 1, "name": "Alice" }, { "id": 2, "name": "Bob" }]1-2. DTO 정의export class UserDTO { id: number name: string constructor(d..

프론트엔드 개발에서 외부 API와의 통신은 필수입니다.하지만 API 응답의 타입이 예측과 다르거나 누락될 경우, 예상치 못한 에러가 발생할 수 있습니다.특히 TypeScript 환경에서는 타입 안정성을 확보하지 않으면 undefined 참조 오류가 쉽게 발생하죠.이번 포스팅에서는 다음 두 가지에 대해 실제 예제를 통해 정리합니다:Axios로 API 호출 시 안전하게 응답 처리하는 방법DTO 구조를 활용하여 타입 안정성을 높이는 실무 방식✅ 1. API 응답 처리에서 흔히 생기는 문제예를 들어 아래와 같은 사용자 API가 있다고 해봅시다:GET /api/user/1{ "id": 1, "name": "Alice", "email": "alice@example.com"}타입을 선언하지 않고 바로 사용하면 ..

TypeScript를 쓰다 보면 객체 타입을 선언해놓고도 다음과 같은 오류를 겪는 경우가 많습니다.Cannot read property 'name' of undefined또는…Object is possibly 'undefined'.이런 상황을 피하기 위해, 객체를 명확하게 초기화하고, 선택적 접근 및 기본값을 설정하는 방식을 제대로 이해하는 것이 중요합니다.1. 객체 타입 선언 시 기본값으로 초기화하기interface User { id: number name: string}let user: User = { id: 0, name: ''}초기값을 명확히 주는 것은 가장 기본적이고 안정적인 방식입니다.2. Partial로 부분 초기화 + 타입 캐스팅Partial는 모든 필드를 optional로 바꿔줍니..

TypeScript에서는 비슷하게 생겼지만 전혀 다른 의미를 가진 문법들이 많이 존재합니다.그중에서도 ?, ?., ??, ||는 자주 혼동되기 쉬운 문법이에요.이번 포스팅에서는 이 네 가지 문법의 차이점과 실제 예제를 중심으로 완벽하게 정리해드립니다!🟢 1. 옵셔널 파라미터 ?👉 함수나 인터페이스에서 "선택적으로" 값을 받을 때 사용function greet(name?: string) { console.log(`안녕하세요, ${name || '게스트'}님!`)}name을 전달하지 않아도 호출 가능타입은 string | undefined인터페이스 예시interface User { id: number nickname?: string // 있어도 되고 없어도 되는 값}🔵 2. 옵셔널 체이닝 ?.👉..

JavaScript와 TypeScript에서 가장 흔하게 겪는 오류 중 하나는"Cannot read properties of undefined" 에러입니다.특히 비동기 통신이나 복잡한 객체 구조에서 이런 일이 자주 발생합니다.이럴 때 사용하는 것이 바로 "옵셔널 체이닝(?.)"입니다.✅ 옵셔널 체이닝이란?옵셔널 체이닝(Optional Chaining)은객체나 배열의 특정 속성에 접근할 때, 중간 값이 null이나 undefined여도 에러 없이 안전하게 접근할 수 있도록 도와주는 문법입니다.const name = user?.profile?.name 위 코드의 의미는:user가 있고 → profile이 있고 → name이 있으면 → 그 값을 가져와그 중 하나라도 없으면 undefined를 반환해💥 왜 필..

프로젝트가 커질수록 하나의 store 파일에 모든 상태를 넣는 건 유지보수의 지옥입니다.이럴 때 필요한 것이 바로 모듈화입니다. Pinia는 기본적으로 store 파일을 개별 모듈처럼 분리해서 사용할 수 있게 설계되어 있어 매우 간단하게 적용할 수 있습니다.1. 모듈화 폴더 구조 예시 src/├── stores/│ ├── index.js (선택)│ ├── userStore.js│ ├── postStore.js│ └── commentStore.js2. 개별 store 모듈 정의하기예시: userStore.js// src/stores/userStore.jsimport { defineStore } from 'pinia'export const useUserStore = defineStore('us..

Pinia는 단순한 상태관리 라이브러리지만, 비동기 API 호출과 함께 사용하면 강력한 전역 상태 관리 도구로 활용할 수 있습니다.이번 포스팅에서는 Axios로 API를 호출하고, 그 결과를 Pinia 상태로 관리하는 실전 구조를 소개합니다.📁 폴더 구조src/├── api/│ └── axiosInstance.js├── stores/│ └── usePostStore.js└── views/ └── PostListView.vue🔧 1. Axios 인스턴스 구성공통 Axios 인스턴스를 만들어 재사용 가능하게 합니다.// src/api/axiosInstance.jsimport axios from 'axios'const axiosInstance = axios.create({ baseURL: '..

Vuex보다 가볍고, 타입 지원도 뛰어난 Vue 3 공식 상태관리 라이브러리 Pinia.이번 포스팅에서는 Pinia를 설치하고 기본적인 상태관리 로직을 구현하는 방법을 소개합니다.1. Pinia 설치터미널에서 다음 명령어를 입력하여 설치합니다.npm install pinia그리고 main.js 또는 main.ts에서 Pinia를 등록합니다.// src/main.jsimport { createApp } from 'vue'import App from './App.vue'import { createPinia } from 'pinia'const app = createApp(App)const pinia = createPinia()app.use(pinia)app.mount('#app')2. 상태 저장소(Store)..