이 블로그 포스트에서는 Next.js와 Nest.js의 기본 개요와 함께 개발 환경 설정, 초기 프로젝트 구성을 자세히 설명합니다.
1. Next.js 개요
Next.js는 React 기반의 프레임워크로, 서버 사이드 렌더링(SSR) 및 정적 웹사이트 생성(SSG)을 지원합니다. 이를 통해 웹 애플리케이션의 성능을 최적화하고 SEO 친화적인 페이지를 생성할 수 있습니다. Next.js는 다양한 기능을 제공하며, 페이지 기반의 라우팅 시스템, 자동 코드 분할, API 라우팅 등으로 개발자가 손쉽게 애플리케이션을 구축할 수 있게 돕습니다.
2. Nest.js 개요
Nest.js는 Node.js를 위한 진보된 프레임워크로, 대규모 응용 프로그램을 구축하기 위해 설계되었습니다. 주로 TypeScript로 작성되며, Angular에서 영감을 받아 모듈화된 구조를 가지고 있습니다. Nest.js는 여러 프로그래밍 패러다임을 지원하여 개발자가 보다 효율적으로 코드를 작성할 수 있도록 돕습니다. 또한, Express 또는 Fastify와 같은 인기 있는 HTTP 서버 프레임워크 위에서 동작하며, 유연성과 확장성을 제공합니다.
3. 개발 환경 설정
이제 Next.js와 Nest.js의 개발 환경을 설정해보겠습니다. 아래의 단계들을 따라서 진행해 주세요.
3.1 Node.js 설치
Next.js와 Nest.js 모두 Node.js 환경에서 실행됩니다. 따라서 먼저 Node.js를 설치해야 합니다. Node.js는 공식 웹사이트인 nodejs.org에서 다운로드할 수 있습니다.
3.2 Next.js 프로젝트 생성
Next.js 프로젝트를 생성하려면, 터미널을 열고 아래의 명령어를 입력합니다:
npx create-next-app@latest my-next-app위의 명령어는 “my-next-app”이라는 이름의 Next.js 프로젝트를 생성합니다. 생성 과정에서 몇 가지 질문을 받게 되며, 이를 통해 TypeScript 사용 여부 등 프로젝트의 특성을 설정할 수 있습니다.
3.3 Nest.js 프로젝트 생성
Nest.js 프로젝트를 생성하려면 다음 단계에 따라 진행하세요:
npm i -g @nestjs/cli이후, Nest.js CLI를 사용하여 프로젝트를 생성합니다:
nest new my-nest-app위의 명령어를 입력하면 “my-nest-app”이라는 이름의 Nest.js 프로젝트가 생성됩니다. 이 과정에서도 몇 가지 질문을 받게 됩니다.
4. 초기 프로젝트 구조 잡기
Next.js와 Nest.js의 기본 프로젝트 구조는 다음과 같습니다:
4.1 Next.js 프로젝트 구조
- pages: 애플리케이션의 각 페이지 컴포넌트가 위치합니다. 이 폴더 내에 파일을 추가하면 자동으로 라우팅됩니다.
- public: 정적 파일(이미지, 폰트 등)을 저장하는 폴더입니다.
- styles: CSS 파일이 위치하는 폴더입니다.
- components: 재사용 가능한 컴포넌트를 저장하는 폴더입니다.
4.2 Nest.js 프로젝트 구조
- src: 소스 코드가 위치하는 기본 폴더입니다.
- modules: 애플리케이션의 기능을 모듈 단위로 구성하는 폴더입니다.
- controllers: HTTP 요청을 처리하는 컨트롤러를 저장하는 폴더입니다.
- services: 비즈니스 로직을 처리하는 서비스 클래스가 위치하는 폴더입니다.
- main.ts: 애플리케이션의 엔트리 포인트 파일입니다.
5. 결론
이번 포스트에서는 Next.js와 Nest.js의 개요 및 개발 환경 설정을 살펴보았습니다. 이 두 프레임워크는 각각 클라이언트와 서버 사이드 개발에 특화되어 있어, 함께 사용하면서 효율적인 풀스택 애플리케이션을 구축할 수 있습니다. 다음 포스트에서는 각 프레임워크에 대한 심화 내용을 다뤄 보겠습니다.