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

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를 반환해💥 왜 필..