🧠 풀 스택 개발을 위해 React + NestJS를 선택한 이유

풀 스택 개발자로서 올바른 기술 스택을 선택하는 것은 단지 과대 광고에 관한 것이 아니라 생산성, 확장성 및 장기적인 유지 보수성에 관한 것입니다. 다양한 스택을 사용하여 여러 프로젝트를 구축한 후, React(프런트엔드용)와 NestJS(백엔드용)의 조합이 완벽한 조화라는 것을 알게 되었습니다. 그 이유는 다음과 같습니다.

🔷 1. React – 프런트엔드의 강자

React는 몇 가지 주요 이유로 제가 가장 좋아하는 프런트엔드 프레임워크입니다.

컴포넌트 기반 아키텍처: 재사용 가능한 UI 로직을 장려합니다.
거대한 생태계: 수많은 라이브러리 (React Router, Zustand, Redux, Tailwind)
개발자 경험: 핫 리로드, 개발 도구, 쉬운 테스트
강력한 커뮤니티 및 취업 시장

간단한 예시: React의 버튼 컴포넌트

// components/Button.tsx
import React from 'react';

type ButtonProps = {
    label: string;
    onClick: () => void;
  };
  
  const Button: React.FC<ButtonProps> = ({ label, onClick }) => {
    return (
      <button className="px-4 py-2 bg-blue-500 text-white rounded" onClick={onClick}>
        {label}
      </button>
    );
  };
  
  export default Button;

이 재사용 가능한 컴포넌트 패턴은 React의 가장 큰 장점 중 하나입니다.

🛡️ 2. NestJS – 확장 가능하고 구조화된 백엔드

NestJS는 다음과 같은 이유로 저에게 두드러졌습니다.

Opinionated: 순수한 Express와 달리 구조를 제공합니다.
TypeScript 우선: 앱 전체의 타입 안전성
모듈식: 프로젝트 확장에 적합합니다.
REST, GraphQL, WebSockets, 마이크로서비스 지원
쉬운 데이터베이스 통합

예시: NestJS의 간단한 라우트

// users.controller.ts
import { Controller, Get } from '@nestjs/common';

@Controller('users')
export class UsersController {
  @Get()
  findAll() {
    return [{ id: 1, name: 'John Doe' }];
  }
}

처음부터 읽기 쉽고, 테스트 가능하며, 확장 가능합니다.

🔗 3. 프런트엔드와 백엔드 간 타입 공유

React와 NestJS 모두 TypeScript를 사용하므로, 프런트엔드와 백엔드 간에 타입/인터페이스를 공유할 수 있어 중복 선언을 피하고 버그를 줄일 수 있습니다.

공유 타입 예시

// shared/types.ts
export type User = {
  id: string;
  name: string;
  email: string;
};

NestJS에서:

import { User } from '../shared/types';

React에서:

import { User } from '../shared/types';

불일치 없음. 추측 없음.

🧩 4. 쉬운 API 통합

React + NestJS는 데이터를 가져오고 렌더링하는 것을 쉽게 만듭니다.

// React에서 사용자 가져오기
useEffect(() => {
fetch('/api/users')
.then(res => res.json())
      .then(data => setUsers(data));
  }, []);

백엔드는 깨끗하고 유지 보수 가능하며, 프런트엔드는 반응적이고 상호 작용적입니다.

🚀 마지막 생각

React + NestJS를 선택한 것은 우연이 아니었습니다. 실제 앱을 구축하고 병목 현상이 발생하는 지점을 이해하는 과정에서 나온 것입니다. 이 스택은 저에게 다음과 같은 도움을 주었습니다.

구조를 희생하지 않고 더 빠르게 움직일 수 있도록
자신감 있게 앱을 유지 보수하고 확장할 수 있도록
웹 및 모바일 앱을 효율적으로 제공할 수 있도록 (특히 React Native와 함께)

풀 스택 아키텍처를 결정 중이거나 MERN 배경을 가지고 있다면 React + NestJS를 시도해 볼 것을 강력히 추천합니다.