| 서론안녕하세요, 팡일입니다. 프론트엔드 프로젝트를 진행하다 보면 Vite의 resolve 옵션을 자주 마주하게 됩니다. 처음에는 단순히 alias 설정 정도로만 사용하는 경우가 많지만, 실제로는 모듈 경로 해석, 의존성 중복 방지, 환경별 entry 선택 등 프로젝트의 구조와 성능에 직접적인 영향을 주는 중요한 설정들이 포함되어 있습니다. 특히 React 프로젝트나 모노레포 환경에서는 resolve 관련 옵션을 제대로 이해하지 못하면, 예상하지 못한 에러나 번들 문제를 겪는 경우도 많습니다. 이번 글에서는 resolve.alias를 시작으로 dedupe, conditions, mainFields, extensions, preserveSymlinks, tsconfigPaths까지, Vite의 모듈 해석..

| 서론안녕하세요 팡일입니다. Nest.js로 API를 개발하다 보면 단순히 기능을 구현하는 것뿐만 아니라, 클라이언트로부터 전달받는 데이터의 안정성과 신뢰성을 보장하는 것이 매우 중요하다는 것을 느끼게 됩니다. 특히 잘못된 데이터가 서버로 들어올 경우 예상치 못한 에러나 버그로 이어질 수 있기 때문에, 입력 데이터에 대한 검증(validation)은 필수적인 과정입니다. Nest.js에서는 이러한 문제를 해결하기 위해 DTO(Data Transfer Object)와 Validation Pipe를 함께 사용하여 데이터 구조 정의 + 유효성 검사를 동시에 처리할 수 있습니다. 이번 글에서는 DTO의 개념부터 시작해서, class-validator를 활용한 유효성 검사, 그리고 ValidationPipe를 ..

| 서론안녕하세요 팡일입니다. 오늘은 Nest.js에서 API를 보다 효율적으로 관리할 수 있도록 도와주는 Swagger 설정 및 활용 방법에 대해 정리해보려고 합니다. 백엔드 개발을 하다 보면 API를 만들고 끝나는 것이 아니라, 문서화하고,*테스트하고, 협업하는 과정이 매우 중요하다는 것을 느끼게 됩니다. 특히 프론트엔드와 협업할 때 API 스펙이 명확하지 않으면 커뮤니케이션 비용이 크게 증가하게 되는데요? 이때 Swagger를 활용하면 코드만으로 API 문서를 자동 생성하고, 직접 테스트까지 가능해집니다. 이번 글에서는 Swagger가 무엇인지부터 Nest.js에서 실제로 적용하는 방법, 그리고 장단점까지 전체 흐름을 한 번에 정리해보겠습니다. | Swagger란?API를 설계하고 문서화하며 테..

| 서론안녕하세요, 팡일입니다 이번 글에서는 간단한 게시글 예제를 통해 Nest.js에서 제공하는 데코레이터를 활용하여 CRUD API를 직접 구현하는 과정을 정리해보았습니다. Controller와 Service를 어떻게 나누고, 각 HTTP 메서드가 어떤 역할을 하는지 흐름 중심으로 이해해보시면 좋을 것 같습니다. | GET 데코레이터GET 요청은 서버에서 데이터를 조회할 때 사용하는 HTTP 메서드입니다.Nest.js에서는 @Get() 데코레이터를 사용하여 해당 요청을 처리할 수 있습니다. 이번 예제에서는 간단한 게시글 데이터를 기반으로 전체 조회 / 단건 조회 API를 구현해보겠습니다. 1) interface 생성먼저 게시글 데이터의 구조를 정의하기 위해 인터페이스를 생성합니다.// board...

| 서론안녕하세요, 팡일입니다. 프론트엔드 개발을 하면서 TypeScript에 점점 익숙해지다 보니, TypeScript를 활용한 백엔드 개발도 경험해보고 싶다는 생각이 들었습니다. 그래서 여러 백엔드 프레임워크를 찾아보던 중, 구조적인 설계와 생산성을 동시에 잡을 수 있는 NestJS를 알게 되었습니다. 이번 포스팅에서는 제가 NestJS를 학습하면서 기본 구조부터 실제 사용 방법까지 정리한 내용을 공유해보려고 합니다. 유의드리고 싶은 점- 아직 학습 과정에 있는 만큼 부족한 부분이나 잘못된 내용이 있을 수 있습니다. - 혹시 보시면서 개선할 점이 있다면, 편하게 의견 남겨주시면 감사하겠습니다! | NestJS란?1) 설명NestJS는 Node.js 기반의 백엔드 프레임워크로, TypeScript를..

| 서론안녕하세요, 팡일입니다. 이전 글에서는 React + Node.js 기반의 풀스택 모노레포 환경을 구축하는 과정을 정리했고,이번 글에서는 그 환경 위에서 실제로 데이터를 저장하고 조회할 수 있는 CRUD 기능을 구현해보겠습니다. 전체 데이터 흐름은 다음과 같습니다.React ↓Express API ↓Prisma ↓SQLite Database 간단한 Todo API를 만들어 React에서 데이터를 저장하고 조회해보겠습니다. | 1단계 : Prisma 설치1) Prisma ORMNode 서버에서 데이터베이스를 사용하기 위해 Prisma ORM을 사용합니다. Prisma는 TypeScript 환경에서 매우 사용하기 편한 ORM입니다.타입 자동 생성DB 마이그레이션 지원직관적인 API 2) 설치: ..

| 서론안녕하세요, 팡일입니다. 보통 웹 개발을 하면 프론트엔드 프로젝트와 백엔드 프로젝트를 각각 관리해왔었는데요? 혹시 모노레포라고 들어보셨나요? 모노레포란?: 두 개 이상의 프로젝트, 애플리케이션 또는 라이브러리 코드를 하나의 버전 관리 저장소(Repository)에서 통합하여 관리하는 개발 전략 프론트엔드와 백엔드를 각각 관리할 수도 있지만, 최근에는 모노레포(monorepo) 구조를 사용하는 경우가 많다는 점을 알고만 있었고, 실제로 세팅을 해본 경험은 없었습니다. 그러나, 드디어 환경 세팅에 성공하였고, 보다 쉽게 세팅하는 과정을 공유하고자 포스팅을 작성하게 되었습니다. 1) 모노레포의 장점본격적으로 시작하기에 앞서, 모노레포를 사용하면 다음과 같은 장점을 한 번 살펴보고 싶은데요?프론트엔드..

| 서론안녕하세요, 팡일입니다.프로젝트를 진행하면서 서버 데이터 호출 로직이 점점 복잡해져, API 모듈 구조를 정리하려고 했습니다. 그런데 구조를 손본 직후, 화면이 하얘지고 콘솔에는 courses.ts 404가 터졌습니다.“파일 하나만 만들면 되겠지” 하고 courses.ts를 추가했더니, 이번엔 TypeScript가 “내보낸 멤버가 없다”고 알려 줍니다. 한 문제를 막았더니 다른 문제가 생기는 상황, 실무에서 꽤 익숙한 패턴이죠.이번 글에서는 제가 겪었던 실제 케이스를 바탕으로 아래와 같은 내용을 정리해 보겠습니다. 동일한 폴더/파일 구조를 쓰는 분들께 바로 도움될 내용만 담았습니다.왜 Vite가 courses.ts를 찾아갔는지왜 TS가 export를 못 찾았는지구조를 어떻게 바꾸면 안전한지 ..

| 서론안녕하세요, 팡일입니다. React Router v6에서 중첩 라우트(nested routes)를 사용하다 보면 index 라우트를 자연스럽게 사용하게 됩니다. 저 역시 메시지 기능을 구현하면서 /message 아래에 여러 하위 페이지를 두는 구조를 만들게 되었는데요? 구조는 다음과 같았습니다./message/message/send/message/history/message/template의도는 단순했습니다. /message로 접근했을 때, 가장 기본적인 화면인 ‘문자 보내기’ 페이지를 보여주고 싶었습니다. 그래서 처음에는 index 라우트를 사용해 구현했지만, 포스팅 제목처럼 URL이 그대로인 점으로 인해서 애매한 상황에 놓여 있었습니다. 오늘은 현재 겪은 상황을 공유하고, 어떤 식으로 해결했는..

| 서론안녕하세요, 팡일입니다. 오늘은 React + Vite + TS 환경과 Firebase Hosting 그리고 Github Action을 구축하는 방법에 대해서 공유 드리려고 합니다. Vercel로 CI/CD를 구축하는 방법도 공유드린 적이 있는데요? Vercel의 경우에는 아래의 포스팅을 참고해주셔도 좋을 것 같습니다. [React] React 프로젝트에 Vercel + GitHub Actions로 CI/CD 구축하기시작하며 "린트, 테스트, 배포까지 자동화: CI/CD 개념부터 구성까지"오프닝 프론트엔드 개발을 하면서 코드 품질을 유지하고, 안정적으로 배포하는 방법에 대한 고민이 늘 있었다. 그러던 중 CI/CDpangil-log.tistory.com 이 과정은 크게 어렵지 않습니다! 간단하게 ..