[ TIL ] Day 27 - 실습 : 비동기 에러 래퍼 함수 / 미들웨어 적용 / 최종 배포

🗓️ 수업 일자 : 2025.11.3

✨ 오늘의 수업 평가 :  [ PROJECT ]  프로젝트 끝! 하얗게 불태웠다~ 🤍🩶🖤

 

오늘부터 시작하는 팀 프로젝트에 집중하기 위해서 

개인 프로젝트 중 [ 비동기 에러 래퍼 함수 / 미들웨어 / 이미지(multer) 작업]은 기존 코드를 따라 치며 

각 항목별로 다시 되새기는 정도로만 작업을 진행하였다.  

 

팀 프로젝트를 진행하며 시간이 되면 해당 부분에 대해서 심도있게 공부 해 봐야겠다.

 

시작할 때 너무 여유를 가지고 작업하여, 뒤로 갈 수록 일정이 빠듯하게 된 부분은 많이 아쉬움이 남는다 

앞으로는 기초 완성이 되면 일단 넘어가고, 고민은 2시간을 넘기지 않는 등등(규모에 따라 변경)

프로젝트에 대한 나만의 세부 목표도 다시금 정해봐야겠다.  

 

👩‍💻 [프로젝트] 오늘 작업 내용 💻

- route 파일 2차 분기 ⇒ controll 파일로 작업 영역 이동

- 비동기 에러 래퍼 함수 적용

- 미들웨어 적용 작업 ( "이미지(multer) 작업" 포함)

- 최종 배포하기

---

0. 전체 작업 순서 

1. 작업 내용 분석 : 데이터 모델 정리, 작업 파일 구조화 등 (완벽하지 않아도 됨, 전체 틀을 잡는 다는 생각으로)
2. 작업 공간 셋팅 : 필요한 npm 다운로드 및 설치 확인(기본 구문으로 테스트), 필요 시 Git 연결 (with new branch)
3. 데이터 모델링 및 시딩 작업 
   
   • 데이터 모델링 : schema.prisma 파일에 작업 후 마이그레이션(초기 init) 작업
   • 시딩 작업 : 비어있는 DB에 테스트용 초기 데이터를 넣는 작업
4. 각 모델 별 CRUD 작업 : (아직 익숙하지 않으므로) app.js 혹은 main.js에 한번에 작업
   이후 모델 별 route 분리 작업 : route 폴더에 모델별로 1차 분기
                                                 → xx_route .js에는 서버 요청만 남기고 xx_controller.js 에 실행 함수 분리.
5. 유효성 검사 적용 : 공용으로 제작 후, 각 모델별로 분리하여 xx_controller.js에 적용
6. 비동기 에러 래퍼 함수 적용 : 서버 다운을 막기 위하여 각 xx_route.js에 적용
7. 미들웨어 적용 작업 : 공용 / 각 모델별 미들웨어를 각각 분리해서 app.js / xx_route.js 에 각각 적용

+ 미션 내용 누락 : "이미지(multer) 작업" 진행

 

- 작업을 진행하며 xx.http를 이용해 지속적인 검토 진행

- 데이터 모델링 수정이 필요한 경우, 작업 후 꼭 마이그레이션 진행 

 

 

1. route 파일 2차 분기

 

2차 분기 작업 방식 

1. xx_controllers.js 파일에 작업에 사용할 npm import 작업 진행 

기존 xx_route.js(라우트 파일)과 신규로 만든 xx_controller.js(컨트롤러) 파일 비교

[ xx_controller.js ]

import { PrismaClient } from '@prisma/client'; //prisma client 불러오기
import { assert } from 'superstruct';          // superstruct 와 검사 함수 불러오기
import { CreateProduct, PatchProduct } from '../structs/productStructs.js';

// 불러온 prisma client 선언하여 사용할 준비
const prisma = new PrismaClient();


// express는 xx_route.js에서 사용하므로 불러올 필요 없음

 

 

2. 기존 xx_route.js(라우트 파일)에서 요청에 사용했던 즉시실행함수를 xx_controller.js(컨트롤러) 로 이동,

    작업을 마친 뒤 기존 xx_route.js에서 해당 함수들을 불러와 사용

xx_route.js에 선언되 있던 즉시실행함수의 이동 경로 한눈에 보기

[ xx_route.js ]

productRoute
  .route('/')
  .get(async (req, res) => { ... }) // product 리스트 불러오기 요청
  .post(async (req, res) => { ... }) // product 신규 등록 요청


↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓


[ xx_controller.js ]

...

export async function productsList(req, res) { ..(내용 붙여넣기).. }
export async function productNew(req, res) { ..(내용 붙여넣기).. }



↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓


[ xx_controller.js ]

import * as p from '../controllers/xx_controllers.js';

productRoute
  .route('/')
  .get(p.productsList)
  .post(p.productNew);

 

 

3. 작업을 마친 후에는 꼭 응답 확인 작업 진행

GET Test 결과 : 쿼리 스트링을 사용해서 특정 정보 받아오기

 

 

+ 추가 이어져 있는 route 정리 작업

이어져 있는 route 구문 정리 작업 - 변경 전 / 변경 후 코드 내용

• 가독성이 좋아짐👍(논리적 구조 개선)
• 유지보수가 편리해짐 (다른 라우터를 사용하는 경우, 변수 정보를 바꿔주거나 새로운 변수로 교체만 해주면 됨)

 

2. 비동기 에러 래퍼 함수 적용 

- 비동기 에러 래퍼 함수 (복습)

• 비동기 작업이 실행되는 도중 에러가 발생해도 서버를 다운시키지 않고, 에러를 잡아 내는 역할을 하는 함수
• 모든 비동기 작업에 try{ }catch( ){ } 문을 작성하면 해결 되지만, 모든 구문을 일일이 수정할 수 없으니
  에러를 잡아내는 래퍼(wrapper)함수를 만들고 try{ }문에 요청 함수가 실행 되도록 제작

- 비동기 에러 함수 예문 (with Prisma!)

import { Prisma } from '@prisma/client';

export default function asyncHandler(handler) {
  return async function (req, res) {
    try {
      await handler(req, res);
    } catch (e) {
      console.error(e);

      if (
        e instanceof Prisma.PrismaClientKnownRequestError &&
        e.code === 'P2025'
      ) {
        res.status(404).send({ message: `Cannot find, ${e.message}` });
      } else if (
        e instanceof Prisma.PrismaClientKnownRequestError &&
        e.code === 'P2002'
      ) {
        res.status(400).send({ message: e.message });
      } else {
        res.status(500).send({ message: e.message || 'Unknown server error' });
      }
    }
  };
}

 

Prisma 에러 정보 : https://www.prisma.io/docs/orm/reference/error-reference

Errors | Prisma Documentation

 

 

3. 미들웨어 적용 작업 

-  프로젝트에 적용한 미들웨어 

• cors() : 교차 출처 리소스 공유, 기본적으로 클라이언트 / 서버 둘 중 하나의 리소스만 사용해야 하지만 cors를 통해 개발자가 원하는 리소스를 여러 개 사용 할 수 있음, npm install cors로 설치 후 import 하여 선언
• errorHandler() : undefined / null 값도 "값이 있다"고 판단하여 서버가 에러로 인식하지 않음, 따라서 해당 값이 나오면 에러로 인식하기 위하여 직접 코드 작성
• multer() : 이미지를 업로드 하기 위한 미들웨어 사용. npm install로 설치 후 route / controller 분리하여 작업

파일 전체에 적용 할 미들웨어들을 app.js에 작성함

 

 

+추가  라우터 레벨 미들웨어 (router-level middleware)   

• 특정 라우터에만 적용하는 미들웨어
• 사용 예시
  • 웹사이트 사용자 구조에서 [ 일반 사용자 / 관리자 ] 가 접속 할 수 있는 페이지를 분리 가능
  • 내용을 입력하는 페이지의 경우 입력 데이터에 대해 추가 검사를 진행 가능

 

+추가  에러 핸들러 (error handler middleware) with GPT   

• 여러 에러를 한번에 처리 가능하도록 코드 작성

export default function errorHandler(err, req, res, next) {
  if (!err) {
    // err = undefined, null 인 경우
    return res.status(500).send({ message: 'Unknown error' });
  }

  // 나머지 에러를 확인하는 작업
  const status = err?.status || 500;

  const messages = {
    400: 'Bad Request',
    404: 'Not Found',
    500: 'Unknown Server Error',
    // 추가하고 싶은 에러가 있는 경우, 응답 코드와 출력할 메세지로 적용 가능
  };

  return res.status(status).json({
    status,
    message: messages[status] || 'Unexpected Error',
  });
}

 

 

 

4. 최종 배포 작업

1. DB 생성 작업 (Free DB는 1개밖에 못만듦)
   1. ProgreSQL 홈페이지에 접속하여 [New → PostgreSQL] 접속
      https://dashboard.render.com/new/database
      
   2. ProgreSQL DB 정보를 입력 후 [Create Database] 클릭하여 생성
      : Name &  Database - 알맞게 설정 / PostgreSQL Version - 15 설정 / Plan Options - Free
   3. [General] 항목에서 "Status" 가  ✅available  되면
      [Connections] 항목에서 " Internal Database URL"을 찾아 값을 복사
2. 웹 서비스 생성 작업
   1. ProgreSQL 홈페이지에서 [New →   Web Service ] 접속
   2. Web Service 정보 입력하기
      • Source Code : Github 연동하여 관련 레포지토리 선택
      • Name / Branch : 프로젝트 이름과 관련된 브랜치 선택
      • Build Command : 사용한 패키지를 다운로드 할 수 있도록 명령어 입력
                                    npm install --production && npx prisma migrate deploy && npx prisma generate
      • Start Command : 시작하는 명령어 입력 
                                    node app.js
      • Environment Variables : DATABASE_URL - 위에서 복사한 DB 정보 
                                                NODE_VERSION - 터미널에 node -v 해서 버전 정보 확인 후 입력
   3. 최종 url : https://panda-market-ilt7.onrender.com/

 

---

 

📃 내일은 뭘 배울까 🤔

- 팀 프로젝트 시작! : 스키마 / 역할 배분