NestJS · Frontend Integration

프런트엔드 통합을 위한 API 계약 안정화

React나 Angular와 NestJS를 연결할 때 중요한 것은 호출 예제가 아니라, 인증 방식, 오류 형식, CORS, 타입 공유, 배포 URL을 팀이 같은 계약으로 쓰는 것이다.

01

계약 공개

백엔드는 request와 response DTO, 오류 body 예시를 문서 또는 OpenAPI로 제공한다.

02

인증 연결

프런트는 쿠키 기반인지 bearer token 기반인지에 맞춰 요청 옵션을 고정한다.

03

오류 매핑

Nest exception filter의 오류 형식을 폼 오류와 전역 알림으로 나눠 표시한다.

04

환경 분리

개발, 스테이징, 운영 API URL과 CORS 허용 출처를 별도로 관리한다.

OpenAPI
계약 문서 프런트가 필드명과 상태 코드를 추측하지 않게 함
배포마다 갱신
CORS
브라우저 접근 제어 허용 origin과 credentials 조합을 명확히 설정
wildcard+cookie 불가
Error shape
오류 표시 기준 fieldErrors, message, code 같은 표준 body
폼 오류 매핑에 필요
SDK
타입화된 호출 생성 클라이언트나 shared schema로 drift 감소
버전 관리 필요

환경값 · 프리플라이트 · 오류 표시 점검

환경값 프런트 빌드에 운영 비밀키가 들어가지 않는다.
프리플라이트 인증 header와 custom header가 OPTIONS에서 허용된다.
오류 표시 백엔드 validation 오류가 필드별 메시지로 변환된다.
계약 변경 DTO 변경 시 프런트 빌드나 타입 검사에서 drift가 드러난다.