TwentyTwentyOne

🛠️ Next.js에서 커스텀 서버(Custom Server) 구축하기Next.js는 기본적으로 내장 서버를 제공하지만, 특정 요구 사항이나 맞춤형 라우팅이 필요한 경우 커스텀 서버를 직접 구성할 수 있습니다.커스텀 서버를 통해 Express, Koa, Fastify 등 다양한 Node.js 서버 프레임워크와 연동할 수 있습니다.✅ 커스텀 서버란?커스텀 서버는 Next.js 애플리케이션을 직접 제어할 수 있는 Node.js 서버입니다.기본 제공 서버를 대체하여, 더 복잡한 라우팅이나 미들웨어 통합을 구현할 수 있습니다.커스텀 서버의 활용 예동적 API 라우팅미들웨어 사용 (인증, 로그 등)외부 서비스와의 연동 (OAuth, WebSocket 등)특정 헤더 설정 (보안 헤더 추가)✅ 기본 커스텀 서버 설..

🚪 NestJS를 떠나며: Fastify와 DDD로의 전환기NestJS는 처음에는 TypeScript 기반의 구조화된 백엔드 개발을 위한 훌륭한 선택처럼 보였습니다.그러나 시간이 지남에 따라 복잡성과 디버깅의 어려움으로 인해 생산성이 저하되었습니다.이에 따라, Fastify와 도메인 주도 설계(DDD)를 도입하여 더 간결하고 효율적인 개발 환경을 구축하게 되었습니다.❌ NestJS의 한계점1. 과도한 추상화와 복잡성NestJS는 Java의 Spring Framework에서 영감을 받아 다양한 추상화 계층을 제공합니다.하지만 JavaScript/TypeScript의 동적 특성과는 맞지 않아 오히려 개발을 복잡하게 만들었습니다.2. 디버깅의 어려움에러 스택 트레이스가 깊은 추상화 계층을 따라가야 하므로, ..

✅ TypeScript를 사용하는 이유와 장단점은?“왜 TypeScript를 쓰시나요?” 이 질문은 프론트엔드 개발 면접에서 거의 빠지지 않는 질문입니다.단순히 “정적 타입 언어라서요”를 넘어서, 협업, 리팩토링, 실무 유지보수 관점에서 "왜" 써야 하는지, 언제 쓰면 효과적인지까지 설명할 수 있어야 합니다.이번 글에서는 TypeScript의 기술적 강점, 실무 경험 기반 장단점, 그리고 현실적인 선택 기준을 함께 정리해보겠습니다.📌 1. TypeScript란?TypeScript는 JavaScript에 타입 시스템을 추가한 정적 타입 언어입니다.컴파일 시점에서 오류를 잡고, 개발 도구의 자동완성(Autocomplete), 코드 탐색(Jump to Definition) 등을 가능하게 합니다.functio..

✅ 기존 프로젝트에 Prisma 도입하기 – TypeScript + PostgreSQL 환경 기준"이미 잘 굴러가고 있는 TypeScript + PostgreSQL 프로젝트에 Prisma ORM을 도입하려면?"📍 본 글에서는 기존 Node.js / TypeScript 프로젝트에 Prisma ORM을 안전하게 통합하는 과정을 단계별로 설명합니다.PostgreSQL을 사용하는 REST 또는 GraphQL 서버, NestJS, Express 등 어떤 백엔드 구조에도 유연하게 적용할 수 있습니다.💡 이 글을 읽으면 이런 상황에 도움이 됩니다.기존 PostgreSQL 프로젝트에 ORM을 도입하고 싶을 때Prisma와 기존 DB 스키마를 연결하고 싶을 때NestJS 프로젝트에서 Prisma를 안정적으로 적용하고..

🚀 Next.js App Router 설치 및 프로젝트 시작 가이드Next.js는 React 기반의 풀스택 웹 애플리케이션을 구축하기 위한 프레임워크로, 최신 기능들을 활용하여 효율적인 개발을 지원합니다. 이번 가이드에서는 Next.js의 App Router를 기반으로 프로젝트를 설치하고 시작하는 방법을 단계별로 설명합니다.✅ 시스템 요구 사항Node.js:버전 18.18 이운영 체제:macOS, Windows(WSL 포함), 또는 Linu⚙️ 자동 설치: create-next-app 사용하기Next.js에서는 create-next-app CLI를 통해 빠르게 프로젝트를 생성할 수 있습니다.1. 프로젝트 생성npx create-next-app@latest실행 후, 아래와 같은 프롬프트가 나타납니다:프로..

🚀 Next.js 공식 문서 핵심 요약 및 실전 가이드 웹 개발을 시작하면서 React를 활용한 프레임워크를 찾고 있다면, Next.js는 사실상 표준입니다.React의 단점을 보완하고, 생산성을 극대화해주는 최고의 선택지죠.이번 글에서는 Next.js 공식 문서를 한국어로 완전히 이해하고, 실무에 어떻게 적용할 수 있는지를 정리합니다."그냥 번역"이 아닌, 개발자 입장에서 실전 활용에 맞게 해석한 가이드입니다.✅ Next.js는 어떤 프레임워크인가요?Next.js는 React 기반의 풀스택 웹 프레임워크입니다.React만으로는 어려운 부분들 – 라우팅, 서버사이드 렌더링(SSR), 정적 페이지 생성(SSG), 이미지 최적화, SEO, 코드 스플리팅 – 이 모든 걸 쉽게 만들어주는 도구입니다.🧭 Ne..

🚀 포트폴리오 프로젝트 시작하기: 환경 설정 및 초기 구성개발을 시작하기 전, 프로젝트의 환경을 설정하는 과정은 매우 중요합니다.포트폴리오 프로젝트를 Next.js(프론트엔드)와 NestJS(백엔드)로 구성하기 위해 초기 설정 및 기본 구조를 구축해 보겠습니다.✅ 1. 프로젝트 개요🔹 프로젝트 목표개인 포트폴리오 웹사이트를 제작하여 경험과 프로젝트를 효과적으로 소개Next.js와 NestJS를 활용하여 풀스택 환경 구성PostgreSQL과 Prisma ORM을 사용하여 데이터 관리CI/CD를 적용하여 배포 및 유지보수 효율성 극대화✅ 2. 개발 환경 구성🔹 프론트엔드 환경 설정 (Next.js)Next.js 프로젝트 생성npx create-next-app@latest portfolio cd port..

📌 Webpack과 TypeScript로 만드는 웹앱 캘린더 플러그인 개발 시리즈 - TypeScript 제대로 이해하기 – 타입 시스템과 캘린더 데이터 모델링이번 글에서는 TypeScript의 핵심 개념을 배우고, 이를 바탕으로 캘린더 플러그인의 데이터 구조를 타입으로 설계해보겠습니다.특히 TypeScript를 처음 접하는 개발자라면 “왜 TS를 써야 하는가?”에 대한 감을 잡는 데 중점을 두겠습니다.🎯 목표TypeScript의 기본 개념(타입 지정, interface, enum 등) 이해캘린더에서 사용될 데이터 타입 정의하기실제 코드에서 TypeScript가 제공하는 안전성과 개발 편의성 체감하기💡 TypeScript란?TypeScript는 JavaScript에 타입 시스템을 추가한 언어입니다...

📌 Webpack과 TypeScript로 만드는 웹앱 캘린더 플러그인 개발 시리즈✅ 1편: 개발 환경 설정과 프로젝트 구조 이해하기웹앱에서 활용할 수 있는 커스터마이징 가능한 캘린더 플러그인을 직접 만들어보는 시리즈의 첫 번째 글입니다.이 시리즈는 Webpack, TypeScript, JavaScript, Node.js 환경을 처음 접하는 사람들을 위해 개념 설명 + 예제 코드 + 실습 중심으로 작성됩니다.이번 글에서는 프로젝트의 기초 환경을 설정하고, 플러그인의 구조를 설계하는 데 초점을 맞춥니다.🎯 목표Node.js 기반 TypeScript 프로젝트 초기 설정Webpack을 위한 기본 설정 파일 구성향후 캘린더 플러그인 개발을 위한 폴더 구조 설계🛠️ 1. 개발 도구 사전 설치✅ Node.js ..

📌 NestJS + Prisma + Next.js로 만드는 웹 애플리케이션 첫걸음 - 애자일 쇼핑몰 프로젝트 - NestJS 프로젝트 기본 구조 및 핵심 개념1. NestJS 프로젝트란?NestJS는 Node.js 기반의 모듈화된 백엔드 프레임워크로, TypeScript를 기본적으로 지원하며 대규모 애플리케이션 개발에 적합합니다.이번 쇼핑몰 프로젝트에서는 NestJS를 활용하여 백엔드 API 서버를 구축하고, Prisma를 이용해 데이터베이스와 상호작용할 예정입니다.✅ NestJS의 주요 특징:TypeScript 지원 (안정성과 유지보수성 향상)모듈 기반 구조 (기능별 분리하여 확장성 제공)REST API 및 GraphQL 지원의존성 주입(Dependency Injection) 방식으로 효율적인 코드 ..