🖥️ 프론트엔드 vs 백엔드 vs 풀스택

🔤 MERN = MongoDB + Express.js + React + Node.js

각 글자가 기술 이름의 첫 글자를 따온 거야.
이 4가지 기술을 조합해서 웹 애플리케이션을 처음부터 끝까지 만들 수 있어!

🅰️ Angular란?

Angular는 Google이 만든 TypeScript 기반의 프론트엔드 프레임워크야.
React가 "라이브러리"라면, Angular는 완전한 "프레임워크"임.

이 차이가 엄청 중요한데, React는 UI만 담당하고 나머지(라우팅, 상태관리 등)는
개발자가 직접 라이브러리를 골라서 조합해야 해.
반면 Angular는 모든 게 다 내장되어 있어! 🏗️

📦 필수 패키지 설치

백엔드 (서버 폴더)

# 프로젝트 초기화
npm init -y

# 핵심 패키지 설치
npm install express mongoose dotenv cors bcryptjs jsonwebtoken

# 개발용 패키지
npm install --save-dev nodemon

프론트엔드 (클라이언트 폴더)

# Vite로 React 프로젝트 생성 (요즘 트렌드!)
npm create vite@latest client -- --template react

# 또는 Create React App (전통적인 방법)
npx create-react-app client

# 추가 패키지
npm install axios react-router-dom @reduxjs/toolkit react-redux

📁 MERN 프로젝트 폴더 구조

my-mern-app/
├── 📁 server/          (백엔드)
│   ├── 📁 models/      (MongoDB 스키마)
│   │   └── User.js
│   ├── 📁 routes/      (API 라우트)
│   │   └── userRoutes.js
│   ├── 📁 controllers/ (비즈니스 로직)
│   │   └── userController.js
│   ├── 📁 middleware/  (미들웨어)
│   │   └── auth.js
│   ├── 📁 config/      (설정 파일)
│   │   └── db.js
│   ├── .env            (환경변수)
│   └── server.js       (진입점)
│
└── 📁 client/          (프론트엔드)
    ├── 📁 src/
    │   ├── 📁 components/
    │   ├── 📁 pages/
    │   ├── 📁 hooks/
    │   ├── 📁 store/   (Redux)
    │   └── App.jsx
    └── package.json

🔗 REST API 설계 패턴

MERN 스택에서 프론트엔드(React)와 백엔드(Express)는
REST API를 통해 통신해.
API 설계를 잘 해야 나중에 유지보수가 편해짐!

🍃 Mongoose 스키마 & 모델

// server/models/User.js
const mongoose = require('mongoose');
const bcrypt = require('bcryptjs');

const userSchema = new mongoose.Schema({
  이름: {
    type: String,
    required: [true, '이름은 필수입니다'],
    trim: true,
    maxlength: [50, '이름은 50자 이하여야 합니다']
  },
  이메일: {
    type: String,
    required: true,
    unique: true,
    lowercase: true,
    match: [/^\S+@\S+\.\S+$/, '올바른 이메일 형식이 아닙니다']
  },
  비밀번호: {
    type: String,
    required: true,
    minlength: 8,
    select: false  // 조회 시 기본적으로 제외
  },
  역할: {
    type: String,
    enum: ['user', 'admin'],
    default: 'user'
  },
  생성일: {
    type: Date,
    default: Date.now
  }
});

// 저장 전 비밀번호 해싱
userSchema.pre('save', async function(next) {
  if (!this.isModified('비밀번호')) return next();
  this.비밀번호 = await bcrypt.hash(this.비밀번호, 12);
  next();
});

module.exports = mongoose.model('User', userSchema);

🔐 JWT 인증 구현

MERN 스택에서 가장 많이 쓰이는 인증 방식은 JWT(JSON Web Token)야.
로그인 성공 시 서버가 토큰을 발급하고, 클라이언트는 이 토큰을
이후 요청마다 헤더에 담아서 보내는 방식이야!

// JWT 토큰 생성 (로그인 시)
const jwt = require('jsonwebtoken');

const generateToken = (userId) => {
  return jwt.sign(
    { id: userId },
    process.env.JWT_SECRET,
    { expiresIn: '7d' }  // 7일 후 만료
  );
};

// JWT 검증 미들웨어
const protect = async (req, res, next) => {
  let token;
  
  if (req.headers.authorization?.startsWith('Bearer')) {
    token = req.headers.authorization.split(' ')[1];
  }
  
  if (!token) {
    return res.status(401).json({ message: '로그인이 필요합니다' });
  }
  
  try {
    const decoded = jwt.verify(token, process.env.JWT_SECRET);
    req.user = await User.findById(decoded.id);
    next();
  } catch (err) {
    res.status(401).json({ message: '유효하지 않은 토큰입니다' });
  }
};

📘 TypeScript - 이제 선택이 아닌 필수

요즘 MERN/MEAN 프로젝트에서 TypeScript는 거의 표준이 됐어.
JavaScript에 정적 타입을 추가한 언어인데, 처음엔 귀찮아 보여도
프로젝트가 커질수록 그 진가를 발휘함! 🎯

🐳 Docker - 개발 환경 통일의 구세주

"내 컴퓨터에서는 되는데 왜 서버에서 안 돼?" 🤦
이 고통을 해결해주는 게 바로 Docker야!

Docker는 애플리케이션과 그 실행 환경을 컨테이너라는 단위로 패키징해서
어디서든 동일하게 실행할 수 있게 해줘.

# docker-compose.yml (MERN 스택 예시)
version: '3.8'
services:
  # MongoDB
  mongodb:
    image: mongo:6.0
    ports:
      - "27017:27017"
    volumes:
      - mongo-data:/data/db
    environment:
      MONGO_INITDB_ROOT_USERNAME: admin
      MONGO_INITDB_ROOT_PASSWORD: password

  # Express 서버
  server:
    build: ./server
    ports:
      - "5000:5000"
    depends_on:
      - mongodb
    environment:
      MONGODB_URI: mongodb://admin:password@mongodb:27017/myapp

  # React 클라이언트
  client:
    build: ./client
    ports:
      - "3000:3000"
    depends_on:
      - server

volumes:
  mongo-data:

🧪 테스팅 - 안 하면 나중에 후회함

개발하다 보면 테스트 코드 작성이 귀찮게 느껴지는데,
나중에 기능 추가하거나 리팩토링할 때 테스트가 없으면 진짜 지옥임 ㅋㅋ 😅

🚀 주요 배포 플랫폼 비교

🔄 CI/CD 파이프라인 구축

코드를 push하면 자동으로 테스트하고 배포까지 해주는
CI/CD(지속적 통합/지속적 배포) 파이프라인을 구축하면
개발 생산성이 엄청 올라가!

# .github/workflows/deploy.yml (GitHub Actions 예시)
name: MERN 앱 CI/CD

on:
  push:
    branches: [main]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      
      - name: Node.js 설정
        uses: actions/setup-node@v3
        with:
          node-version: '18'
      
      - name: 백엔드 테스트
        run: |
          cd server
          npm install
          npm test
      
      - name: 프론트엔드 빌드
        run: |
          cd client
          npm install
          npm run build
  
  deploy:
    needs: test
    runs-on: ubuntu-latest
    steps:
      - name: Vercel 배포
        run: npx vercel --prod --token=${{ secrets.VERCEL_TOKEN }}

⚡ Next.js vs 기존 MERN 비교

🔐 보안 필수 체크리스트

⚡ 성능 최적화 팁

📚 추천 학습 리소스

⚛️ MERN(React)을 선택해야 할 때

🅰️ MEAN(Angular)을 선택해야 할 때

🔑 핵심 요약