response 타입 공유?

Question

안녕하세요 타입스크립트를 사용하여 nextjs와 nestjs로 풀스택 토이프로젝트를 진행 중입니다. 다름이 아니라 백엔드 단에서 보내주는 응답 객체들의 타입을 프론트에서 어떻게 관리해야하는지 의문이 생겨서 질문 남깁니다..
프론트에서 api요청을 통해 유저 정보 객체를 응답으로 받았다면, 그 유저정보 객체의 타입을 어떻게 확인할 수 있을까요.. 저는 혼자 풀스택으로 진행 중이니 swagger 문서를 보고, 혹은 백엔드의 코드를 보고 프론트에서는 따로 types 폴더에 모아 작성을 해두고 있습니다만 뭔가 비효율적이라는 생각이 드네요. 실무에서는 어떤식으로 프론트와 백이 타입을 공유하는지 궁금합니다! 회의를 통해 타입을 정의해 놓은 파일을 따로 만들어두고 이를 양측이 공유한다는 말을 들었던 것 같기도 한데 다른 선배님들은 어떻게 진행하고 계신가요??

조용구 · Accepted Answer

안녕하세요 :)

백엔드의 API 타입이 빈번하게 바뀌지 않는 상황에서는 프런트에 직접 타입을 정의하기도 했었어요.

특정 프로젝트에서는 백엔드의 API 타입이 자주 바뀌기도 해서 스웨거 문서에 있는 문서를 타입스크립트로 자동으로 변환하는 스크립트 개발해서 개선했었습니다.

사용했던 오픈소스입니다:)
https://github.com/acacode/swagger-typescript-api

커리어리 AI 봇 · Answer

타입스크립트를 사용하여 풀스택 프로젝트를 진행할 때 프론트엔드와 백엔드 간의 타입을 효율적으로 공유하는 방법에 대해 알려드리겠습니다.

1. DTO(Data Transfer Object) 사용: 백엔드에서 프론트엔드로 전송되는 데이터 객체를 정의하는 DTO를 사용합니다. 이를 프론트엔드에서도 동일한 구조로 타입을 정의하여 사용합니다. 이 방법은 Swagger 문서 등을 통해 백엔드에서 정의된 DTO를 확인하고, 프론트엔드에서도 동일한 타입을 사용할 수 있습니다.

2. 공통 타입 파일 작성: 프론트엔드와 백엔드 간의 타입을 공유하기 위해, 양측에서 공통으로 사용하는 타입 파일을 작성합니다. 이 파일에는 유저 정보 객체 등과 같은 데이터 구조를 정의합니다. 프론트엔드와 백엔드에서 이 타입 파일을 import하여 사용하면 일관된 타입 정의를 유지할 수 있습니다.

3. API 클라이언트 라이브러리 사용: API 클라이언트 라이브러리를 활용하여 백엔드 API와 타입을 자동으로 연결할 수 있습니다. 예를 들어, Axios와 같은 HTTP 클라이언트를 사용할 때, 타입스크립트와 함께 제공되는 Axios의 타입 정의 파일을 활용하여 API 응답의 타입을 정의할 수 있습니다.

위의 방법 중에서 프로젝트의 특성과 요구사항에 맞게 선택하여 사용하시면 됩니다. 중요한 점은 프론트엔드와 백엔드 간의 타입을 일관되게 유지하고 관리하는 것이며, 타입스크립트의 장점을 최대한 활용하여 개발 생산성을 높이는 것입니다.