프로그래밍/ReactJS 🤞

Next.js와 Nest.js, To-Do 리스트 예제로 보는 차이점과 활용법

재우니 2024. 10. 29. 22:49

 

두 프레임워크의 차이점 요약

  • Next.js는 주로 프론트엔드에서 SSR과 SSG를 지원하여 SEO와 사용자 경험을 최적화하는 데 적합합니다.
  • Nest.js는 모듈화된 서버 사이드 애플리케이션을 위한 DI와 구조화된 코드를 제공합니다.

 

 

이제 각 프레임워크의 예제를 통해 구독자들은 Next.js와 Nest.js의 특징을 체험할 수 있으며, 프로젝트에 적합한 프레임워크를 선택하는 데 도움이 될 것입니다.

 

Next.js와 Nest.js는 서로 다른 용도를 가진 강력한 프레임워크로, 각각의 장점과 활용 사례가 다릅니다. 이 두 프레임워크를 비교해보면 각기 다른 개발 목표와 구조적 특성을 이해할 수 있습니다. 2023년과 2024년 현재, 각 프레임워크의 최신 기능 및 이점과 함께 To-Do 리스트 예제를 통한 실습 사례로 이론을 이해해보겠습니다.

Next.js 개요

Next.js는 Vercel에서 개발한 React 기반의 프론트엔드 프레임워크로, 특히 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG) 기능을 제공하여 SEO 최적화와 빠른 로딩을 필요로 하는 웹사이트 개발에 최적화되어 있습니다. Next.js는 React의 컴포넌트 기반 구조를 유지하면서도, 개발자가 별도의 설정 없이 SSR, SSG, 그리고 클라이언트 사이드 렌더링(CSR)을 유연하게 사용할 수 있는 환경을 제공합니다. Next.js의 주요 특징은 다음과 같습니다:

 

 

  • SSR과 SSG: Next.js는 React에 서버 사이드 렌더링(SSR) 기능을 더해, 페이지 로딩 시 서버에서 HTML을 사전 생성하여 브라우저에 제공합니다. 이는 SEO에 유리하며, 사용자 경험(UX) 향상에 도움이 됩니다.
  • 파일 기반 라우팅: Next.js에서는 파일과 폴더 구조만으로 페이지 라우팅을 설정할 수 있어 기존의 React 라우터보다 직관적입니다.
  • API 라우트 지원: Next.js는 API 서버 기능도 포함하여, 간단한 백엔드 작업을 Next.js 앱 내에서 구현할 수 있습니다.
  • 코드 스플리팅 및 최적화: Next.js는 자동으로 페이지별로 번들을 분리하여 로딩 속도를 최적화합니다.

 

 

Next.js는 사용자와 상호작용이 많은 웹 애플리케이션, SPA(Single Page Application)나 e-commerce와 같은 웹사이트 프론트엔드 구축에 최적화되어 있습니다. 이러한 이유로 Google, Uber, TikTok과 같은 기업에서도 Next.js를 도입해 빠른 반응성과 UX를 개선하고 있습니다.

Nest.js 개요

Nest.js는 Angular의 설계 철학에 영향을 받은 백엔드 프레임워크로, TypeScript 기반의 구조화된 백엔드 시스템 구축을 위해 개발되었습니다. Nest.js는 Node.js 환경에서 Express 또는 Fastify를 활용하여 서버 애플리케이션을 빠르고 모듈화된 방식으로 구축할 수 있도록 합니다. Nest.js의 주요 특징은 다음과 같습니다:

 

 

  • 모듈화된 구조: Nest.js는 애플리케이션을 모듈 단위로 나누어 관리할 수 있어, 코드의 재사용성을 높이고 확장성을 제공합니다.
  • DI(Dependency Injection): Nest.js는 DI 패턴을 제공하여, 클래스 간의 의존성을 쉽게 주입하고 관리할 수 있습니다. 이는 코드의 유지보수성을 높이는 데 유리합니다.
  • MVC 패턴 지원: Nest.js는 Model-View-Controller(MVC) 아키텍처를 기반으로 하여 서버 로직의 구조를 더욱 명확하게 분리할 수 있습니다.
  • 타사 라이브러리 및 마이크로서비스 통합: Redis, GraphQL, WebSocket 등과 쉽게 통합할 수 있는 모듈을 제공하며, 마이크로서비스 아키텍처도 지원하여 확장성이 뛰어납니다.
  • 테스트 및 검증 지원: Nest.js는 단위 테스트, 통합 테스트 등 다양한 테스트 도구와 쉽게 통합될 수 있어 품질 관리에 용이합니다.

 

 

Nest.js는 API 서버, 마이크로서비스, IoT, 실시간 데이터 처리 등 다양한 서버 사이드 애플리케이션에 적합합니다. 특히 모듈화된 코드 구조와 DI, 데이터 계층 분리 등의 특성 덕분에 대규모 서비스에 적합한 백엔드 프레임워크로 평가받고 있습니다.

Next.js와 Nest.js의 비교

 

 

특성 Next.js Nest.js
주 사용 언어 TypeScript / JavaScript TypeScript (기본적으로 사용)
기능 목표 프론트엔드 및 SSR/SSG 백엔드 및 서버사이드 애플리케이션
기본 아키텍처 React 기반의 CSR/SSR/SSG DI 기반의 모듈화된 백엔드 구조
라우팅 파일 기반 자동 라우팅 라우터 컨트롤러 기반 수동 라우팅
데이터 관리 방식 상태 관리(React Context, Redux 등) 서비스와 컨트롤러를 통한 데이터 관리
주요 사용 사례 SEO를 고려한 웹사이트, SPA, e-commerce API 서버, IoT, 마이크로서비스
확장성 및 유지보수성 중소규모 프론트엔드 중심의 웹사이트 대규모 백엔드 시스템, 모듈 단위 유지보수

SSR과 API의 차이점

Next.js의 SSR 기능은 HTML을 서버에서 사전 렌더링하여 SEO와 초기 로딩 시간을 개선하는 데 주로 사용됩니다. 반면, Nest.js는 API 중심의 백엔드 서버를 제공하며, Next.js의 클라이언트가 Nest.js API를 호출하여 데이터를 처리하는 방식으로 구성됩니다.

프론트엔드와 백엔드의 협업

Next.js와 Nest.js는 서로 협업하여 하나의 프로젝트에 사용될 수 있습니다. Next.js는 UI와 사용자 경험에 초점을 맞추고, Nest.js는 서버 로직과 데이터 처리에 집중할 수 있어 전체적인 애플리케이션의 유지보수성과 확장성이 높아집니다.

 

 

Part 1: Next.js (TypeScript)로 To-Do 리스트 만들기

1. Next.js 설치 및 TypeScript 설정

npx create-next-app@latest todo-nextjs --typescript
cd todo-nextjs
npm install

2. src/pages/index.tsx에 To-Do 리스트 작성

Next.js는 TypeScript와 호환되며 .tsx 파일 확장자를 사용하여 React 컴포넌트를 작성할 수 있습니다.

// src/pages/index.tsx
import { useState, ChangeEvent } from 'react';

type Todo = {
  id: number;
  task: string;
};

export default function Home() {
  const [todos, setTodos] = useState<Todo[]>([]);
  const [task, setTask] = useState<string>('');

  const addTodo = () => {
    if (task.trim() !== '') {
      setTodos([...todos, { id: Date.now(), task }]);
      setTask('');
    }
  };

  const removeTodo = (id: number) => {
    setTodos(todos.filter((todo) => todo.id !== id));
  };

  const handleTaskChange = (e: ChangeEvent<HTMLInputElement>) => {
    setTask(e.target.value);
  };

  return (
    <div>
      <h1>Next.js TypeScript To-Do List</h1>
      <input
        type="text"
        value={task}
        onChange={handleTaskChange}
        placeholder="Add a new task"
      />
      <button onClick={addTodo}>Add</button>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            {todo.task}
            <button onClick={() => removeTodo(todo.id)}>Remove</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

3. 실행

npm run dev

 

브라우저에서 http://localhost:3000으로 접속하면 TypeScript 기반의 To-Do 리스트 애플리케이션이 실행됩니다.

Part 2: Nest.js (TypeScript)로 To-Do 리스트 API 만들기

Nest.js는 기본적으로 TypeScript가 포함된 프레임워크이기 때문에 별도의 설정이 필요하지 않습니다.

 

1. Nest.js 설치

npm i -g @nestjs/cli
nest new todo-nestjs
cd todo-nestjs
npm install

2. To-Do 리스트 서비스 및 컨트롤러 생성

Nest CLI를 사용해 서비스를 생성하고 TypeScript 파일에서 타입을 정의하여 To-Do 리스트 API를 구현하겠습니다.

nest generate service todo
nest generate controller todo

3. src/todo/todo.model.ts에 Todo 타입 정의

// src/todo/todo.model.ts
export type Todo = {
  id: number;
  task: string;
};

4. src/todo/todo.service.ts 구현

// src/todo/todo.service.ts
import { Injectable } from '@nestjs/common';
import { Todo } from './todo.model';

@Injectable()
export class TodoService {
  private todos: Todo[] = [];

  addTodo(task: string): Todo[] {
    const newTodo: Todo = { id: Date.now(), task };
    this.todos.push(newTodo);
    return this.todos;
  }

  removeTodo(id: number): Todo[] {
    this.todos = this.todos.filter((todo) => todo.id !== id);
    return this.todos;
  }

  getTodos(): Todo[] {
    return this.todos;
  }
}

5. src/todo/todo.controller.ts 구현

// src/todo/todo.controller.ts
import { Controller, Get, Post, Delete, Body, Param } from '@nestjs/common';
import { TodoService } from './todo.service';
import { Todo } from './todo.model';

@Controller('todos')
export class TodoController {
  constructor(private readonly todoService: TodoService) {}

  @Get()
  getTodos(): Todo[] {
    return this.todoService.getTodos();
  }

  @Post()
  addTodo(@Body('task') task: string): Todo[] {
    return this.todoService.addTodo(task);
  }

  @Delete(':id')
  removeTodo(@Param('id') id: string): Todo[] {
    return this.todoService.removeTodo(Number(id));
  }
}

6. 실행

npm run start

 

 

Nest.js 서버는 http://localhost:3000/todos에서 To-Do 리스트 API가 작동합니다. GET, POST, DELETE 요청을 통해 To-Do 데이터를 추가, 조회, 삭제할 수 있습니다.

 

 

저작자표시 비영리 동일조건