📌 NestJS + Prisma + Next.js로 만드는 웹 애플리케이션 첫걸음 - 애자일 쇼핑몰 프로젝트 + 프로젝트 최종 테스트 및 배포 완료

📌 NestJS + Prisma + Next.js로 만드는 웹 애플리케이션 첫걸음 - 애자일 쇼핑몰 프로젝트 + 프로젝트 최종 테스트 및 배포 완료

1. 최종 테스트 및 배포의 중요성

애플리케이션이 정상적으로 동작하려면 배포 전에 충분한 테스트가 필요합니다.
테스트를 진행하지 않으면 버그가 있는 상태로 운영 서버에 배포될 위험이 있습니다.

✅ 최종 배포 전 확인해야 할 사항:

• 기능 테스트 → 모든 주요 기능(회원가입, 장바구니, 결제)이 정상 동작하는지 확인
• API 테스트 → 백엔드 API의 응답 시간이 적절한지 체크
• 보안 점검 → 인증, 권한 관리, 데이터 보호 기능 확인
• 퍼포먼스 테스트 → 부하 테스트를 통해 성능 평가

💡 이제 프로젝트의 최종 테스트 및 배포 과정을 진행해보겠습니다.

---

2. 프론트엔드(Next.js) 테스트 진행

2.1. E2E(End-to-End) 테스트 - Cypress 활용

Cypress는 브라우저 환경에서 UI 및 기능을 테스트할 수 있는 자동화 도구입니다.

1) Cypress 설치

npm install cypress --save-dev

2) Cypress 기본 설정 (cypress.json)

{
  "baseUrl": "http://localhost:3000"
}

3) 로그인 기능 E2E 테스트 (cypress/integration/auth.spec.js)

describe('로그인 테스트', () => {
  it('올바른 이메일과 비밀번호로 로그인', () => {
    cy.visit('/login');
    cy.get('input[name="email"]').type('test@example.com');
    cy.get('input[name="password"]').type('password123');
    cy.get('button[type="submit"]').click();
    cy.contains('로그아웃').should('exist');
  });
});

✅ 이제 npx cypress open을 실행하면 브라우저에서 자동화 테스트가 수행됩니다.

---

2.2. Lighthouse를 활용한 성능 및 SEO 테스트

Google의 Lighthouse 도구를 활용하여 웹사이트의 속도, 접근성, SEO 점수를 확인합니다.

Lighthouse 실행 방법:

1. Chrome DevTools (F12) → Lighthouse 탭 이동
2. Performance, SEO, Accessibility 테스트 실행
3. 최적화가 필요한 요소 확인 후 개선

✅ Lighthouse 점수가 90점 이상 유지되도록 최적화합니다.

---

3. 백엔드(NestJS) API 테스트 진행

반응형

3.1. API 단위 테스트 (Jest 활용)

NestJS는 기본적으로 Jest를 지원하며, API 단위 테스트를 실행할 수 있습니다.

1) Jest 설치 및 기본 설정

npm install --save-dev jest @nestjs/testing supertest

2) 유닛 테스트 예제 (orders.service.spec.ts)

import { Test, TestingModule } from '@nestjs/testing';
import { OrdersService } from './orders.service';

describe('OrdersService', () => {
  let service: OrdersService;

  beforeEach(async () => {
    const module: TestingModule = await Test.createTestingModule({
      providers: [OrdersService],
    }).compile();

    service = module.get<OrdersService>(OrdersService);
  });

  it('주문 생성 테스트', async () => {
    const order = await service.createOrder({ userId: 1, totalAmount: 5000, items: [] });
    expect(order).toHaveProperty('id');
  });
});

✅ npm run test를 실행하여 API의 단위 테스트를 수행합니다.

---

3.2. API 부하 테스트 (k6 활용)

부하 테스트를 실행하여 API의 성능 및 트래픽 처리 능력을 확인합니다.

1) k6 설치 및 실행

brew install k6  # Mac 사용자의 경우

2) 부하 테스트 스크립트 (load_test.js)

import http from 'k6/http';
import { sleep } from 'k6';

export default function () {
  http.get('http://localhost:4000/products');
  sleep(1);
}

3) 테스트 실행 (100명의 동시 접속 시뮬레이션)

k6 run --vus 100 --duration 30s load_test.js

✅ 이제 API의 부하 처리 능력을 확인하고, 병목 구간을 개선할 수 있습니다.

---

4. 배포 후 최종 점검

4.1. 배포 환경 점검 체크리스트

✅ 프론트엔드 (Vercel 배포 확인)

• https://your-vercel-app.vercel.app/에서 정상적으로 웹사이트 접속 확인
• 모바일 및 PC 환경에서 반응형 UI 테스트
• SEO 점수 체크 및 메타 태그 확인

✅ 백엔드 (Railway 배포 확인)

• https://your-railway-app.app/ API 요청이 정상 동작
• 데이터베이스 연결 및 주문/결제 기능 테스트
• 로그 모니터링 및 오류 발생 여부 확인

✅ 보안 점검 (최종 체크)

• HTTPS 적용 여부 확인
• XSS, CSRF 보안 테스트 수행
• 관리자 페이지 접근 권한 확인

✅ 성능 테스트 (최적화 확인)

• Lighthouse 점수 90+ 유지
• API 응답 속도 200ms 이하 유지
• 100명 이상의 동시 접속 처리 가능 여부 확인

---

5. 최종 배포 및 운영 유지보수 계획

5.1. CI/CD 자동화 유지보수

GitHub Actions를 활용하여 배포 자동화 유지

on:
  push:
    branches:
      - main

✅ 코드 푸시 시 자동 배포 유지

---

5.2. 사용자 피드백 및 기능 개선 계획

✅ Google Analytics를 활용하여 사용자 활동 분석
✅ Hotjar를 활용하여 사용자 행동 패턴 분석
✅ 이메일 피드백을 수집하여 기능 개선 적용

💡 실제 운영하면서 사용자의 니즈에 맞게 지속적인 업데이트를 수행합니다.

---

🎯 마무리하며

이번 챕터에서는 Next.js + NestJS 기반 쇼핑몰 프로젝트의 최종 테스트 및 배포 과정을 다뤘습니다.

• 프론트엔드 E2E 테스트 (Cypress) 및 성능 테스트 (Lighthouse)
• 백엔드 API 단위 테스트 (Jest) 및 부하 테스트 (k6)
• 배포 후 점검 체크리스트 및 운영 유지보수 계획 수립

✅ 이제 프로젝트가 배포되어 사용자에게 안정적으로 제공될 준비가 완료되었습니다! 🚀