프론트엔드 개발자가 백엔드를 고민하게 된 이유: MERN 스택과 Node.js, Nest.js의 차이점

개발자 지인과의 커피챗 이후, "프론트엔드만으로는 충분하지 않은 시대가 왔구나"라는 사실을 깨닫게 되었습니다. 처음에는 나 자신이 프론트엔드에만 집중하려는 욕심을 가지고 있다는 생각이 들었고, 이제는 백엔드도 공부해야 할 때가 되었음을 느꼈습니다. 그러면, 어디서부터 시작해야 할까?

 

제가 최종적으로 입사하고 싶은 회사들을 살펴보니 MERN 스택을 많이 사용한다는 사실을 알게 되었습니다. React는 이미 익숙하게 사용 중이었기 때문에, 백엔드에서 더 쉽게 접근할 수 있는 기술로 Node.js를 선택하게 되었습니다. 그러나 여기서 끝이 아니었습니다. 단순히 Node.js만으로는 충분하지 않았습니다.

 

특히 요즘 많은 개발자들이 사용하는 Nest.js라는 프레임워크에 대해 궁금증이 생겼습니다. "왜 사람들이 Nest.js를 많이 사용하는 걸까?"라는 질문에서부터 시작해, "나는 Next.js를 통해 CRUD 정도의 API는 만들 수 있는데, Nest.js와는 어떤 차이가 있는 걸까?"라는 생각까지 이어졌습니다.

끊임없이 떠오르는 이런 질문들을 하나씩 해결해 나가며, MERN 스택에 대한 이해와 함께 백엔드 개발에 대해 더 깊이 알아가고 있습니다. 이 과정에 대해 블로그에 기록하며, 정리된 생각들을 공유하고자 합니다.

 

Nest.js란?

Nest.js는 Node.js 위에서 동작하는 서버 프레임워크로, 모듈화된 구조와 데코레이터 기반의 코드 스타일을 제공하여 대규모 애플리케이션 개발에 적합합니다. TypeScript를 기본으로 지원하며, 의존성 주입(Dependency Injection), 미들웨어, 데코레이터 등 다양한 고급 기능을 제공해 코드 유지보수성과 확장성을 높입니다. Nest.js는 REST API뿐만 아니라 GraphQL, WebSockets, Microservices 등 다양한 아키텍처를 쉽게 지원할 수 있습니다.

 

설치 예시

npm i -g @nestjs/cli
nest new my-nest-app
cd my-nest-app
npm run start

 

코드 예시

// src/app.controller.ts
import { Controller, Get } from '@nestjs/common';
import { AppService } from './app.service';

@Controller()
export class AppController {
  constructor(private readonly appService: AppService) {}

  @Get()
  getHello(): string {
    return this.appService.getHello();
  }
}

// src/app.service.ts
import { Injectable } from '@nestjs/common';

@Injectable()
export class AppService {
  getHello(): string {
    return 'Hello, Nest.js!';
  }
}

// src/main.ts (앱 시작 파일)
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  await app.listen(3000);
}
bootstrap();

Next.js란?

Next.js는 React 기반의 프레임워크로, 주로 프론트엔드에서 사용되지만, API Routes 기능을 통해 서버 측에서 간단한 백엔드 API도 구현할 수 있습니다. 주된 목적은 서버사이드 렌더링(SSR), 정적 사이트 생성(SSG) 등 다양한 렌더링 방식 지원으로, SEO와 퍼포먼스에 최적화된 웹 애플리케이션을 만드는 데 있습니다. Next.js의 API Routes는 주로 프론트엔드와 통신을 위한 간단한 백엔드 API를 구현하는 데 사용됩니다.

 

설치 예시

npx create-next-app my-next-app
cd my-next-app
npm run dev

 

코드 예시

// pages/api/hello.js
export default function handler(req, res) {
  if (req.method === 'GET') {
    res.status(200).json({ message: 'Hello, Next.js!' });
  } else {
    res.status(405).json({ message: 'Method Not Allowed' });
  }
}

// pages/index.js
export default function Home() {
  return (
    <div>
      <h1>Hello from Next.js!</h1>
    </div>
  );
}

 

차이점 분석

1. 목적과 역할
   • Nest.js: 백엔드 개발에 초점을 맞춘 풀스택 프레임워크로, 대규모 애플리케이션 아키텍처를 설계하고, 복잡한 API와 서버 로직을 구성하는 데 적합합니다.
   • Next.js: 주로 프론트엔드 개발에 사용되며, 서버사이드 렌더링과 API Routes 기능을 제공하여 클라이언트와 서버 간의 간단한 통신을 처리할 수 있지만, 복잡한 백엔드 시스템 개발에는 한계가 있습니다.
2. 구조와 설계
   • Nest.js: 객체지향적 설계, 모듈화된 구조, TypeScript 지원을 통해 백엔드 로직을 체계적으로 관리하며, 대규모 애플리케이션에서 확장성과 유지보수성에 강점을 가집니다.
   • Next.js: 서버와 클라이언트 간의 간단한 데이터 처리와 SEO 최적화를 위한 기능을 제공하는 프레임워크로, 복잡한 비즈니스 로직보다는 클라이언트 중심의 기능에 적합합니다.
3. 주요 사용 사례
   • Nest.js: REST API, GraphQL API, WebSockets, 대규모 서버 애플리케이션.
   • Next.js: SEO 최적화된 웹사이트, 블로그, 간단한 API 처리.

요약하자면, Nest.js는 백엔드 시스템을 확장성 있게 구축하는 데 중점을 두고 있고, Next.js는 주로 프론트엔드 개발에 적합하며, 간단한 백엔드 기능을 제공하는 프레임워크입니다.

 

느낀 점

이번에 Nest.js와 Next.js를 비교하면서 느낀 점은, 두 프레임워크가 서로 다른 목적과 강점을 가지고 있다는 것이었습니다. Next.js는 제가 기존에 익숙하게 사용해오던 프레임워크로, 프론트엔드 개발에 최적화되어 있고, 특히 서버사이드 렌더링(SSR)과 정적 사이트 생성(SSG) 기능 덕분에 SEO와 퍼포먼스에 많은 이점을 느꼈습니다. 하지만, Next.js에서 제공하는 API Routes는 단순한 API 구현에만 적합하여, 복잡한 백엔드 로직을 구현하기엔 한계가 있다는 것을 깨달았습니다.

반면 Nest.js는 백엔드 로직을 체계적으로 관리하고, 대규모 애플리케이션 개발에 최적화된 구조를 제공해 주었습니다. Nest.js는 REST API뿐만 아니라 GraphQL이나 마이크로서비스 아키텍처까지도 쉽게 적용할 수 있는 유연성을 제공하기 때문에, 대규모 프로젝트에서 확장성 높은 애플리케이션을 구축하는 데 매우 유용하다고 느꼈습니다.

 

두 프레임워크 모두 각각의 장점이 분명하며, 프로젝트의 규모와 복잡도에 따라 적절히 선택해야 한다는 생각이 들었습니다. Nest.js는 백엔드에서 복잡한 로직을 처리할 때 강력한 도구가 될 수 있고, Next.js는 프론트엔드와 간단한 백엔드 API가 필요한 프로젝트에서 최고의 선택지가 될 수 있습니다. 앞으로 더 복잡하고 확장성 있는 프로젝트를 진행할 때는 이 두 프레임워크의 조합을 통해 효율성을 극대화할 수 있을 것 같습니다.

 

 

참고

https://velog.io/@jsleemaster/Nuxt-Next-Nest-%EB%AC%B4%EC%97%87%EC%9D%B4-%EB%8B%A4%EB%A5%B8%EA%B0%80#%EB%B2%94%EC%9A%A9-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%AC%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80

Nuxt, Next, Nest? 무엇이 다른가