[ TIL ] Day 33 - 에러 처리 흐름과 종류 ⚠️🚨

🗓️ 수업 일자 : 2025.11.11

✨ 오늘의 수업 평가 :  [ REVIEW ]  가볍게 산책하듯 배움 🏞️☁️

 

아침부터 아파트 전체 정전때문에 부랴부랴 독서실 가서 작업하느라 진이 쪽 빠진날 😱🤪😵

 

그래도 팀 프로젝트 중간점검은 나름 성공적으로 끝났다!

(우리팀만 기본 API를 다 만들었👍 모두 고생 많았어요👍)

 

그래서 자체적으로 남은 과제들을 하나씩 또 맡아서 다시 팀작업에 들어갔다!

다시 화이티잉!!! 

 

👩‍💻 [개인 / 팀 프로젝트] 오늘 작업 내용 💻
- 팀 프로젝트 작업 : 그룹 생성 API 에 이미지 업로드 기능 추가

 

📝  오늘 배운 내용  

- 에러 처리 흐름과 종류

 

---

1. 에러 처리 흐름과 종류

• 요청(Request) 흐름 요약
  1. 클라이언트로부터 Request를 받음 
  2. validation(유효성 검사)를 진행 : Superstruct 라이브러리를 주로 사용하며, validation 파일을 별도로 구성하고 핸들러로 만든 뒤 라우터 작업에서 적용
  3. 비지니스 로직을 "비동기 에러 래퍼(asyncHandler)" 또는 try-catch문으로 처리 : 라우터 작업에서는 비동기 에러 처리를 위하여 "비동기 핸들러"를 만들어 적용하거나 비지니스 로직 내부에 try-catch문을 적용. 에러가 발생한 경우 해당 내용을 next()로 전달 함
  4. errorHandler() 로 최종 respons 전달 : next()로 받은 에러 정보는 전역에 불러 온 errorHandler()에서 처리 함
• 에러 처리 별 간략 설명
  • Superstruct 라이브러리 & validation 파일 : 비정상적인 입력을 서버로 들어오지 못하게 사전에 차단. Superstruct 라이브러리의 기능을 사용하여 validation 파일을 만들어서 사용.

[validation.js]
import * as s from "superstruct"; //superstruct 라이브러리 불러오기

// User 모델에 대한 유효성 검사 진행
const CreateUser = s.object({
  email: s.string(),
  password: s.size(s.string(), 8, 20),
});

// 유효성 검사 핸들러를 제작
export function validateUser(req, res, next) {
  try {
    s.assert(req.body, CreateUser);
    next(); // 유효성 통과 → 다음 단계로 이동
  } catch (err) {
    next(err); // 에러 객체를 errorHandler로 넘김
  }
}

 

• 비동기 에러 래퍼(asyncHandler) 또는 try-catch문 : 비동기 로직 안에서 생기는 에러를 next()로 넘겨주기 위한 방식, 비지니스 로직 내부에 직접 try-catch 문으로 적용해도 되지만, 모든 로직에 직접 적용해야 하므로 "비동기 에러 래퍼"를 만들어 적용하는 것이 작업에 좀 더 효율적임

[asyncHandler.js]

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

 

• errorHandler() : 모든 에러를 한 곳에서 처리하고, 응답 포맷을 통일하기 위하여 사용. 발생하는 에러 응답 코드를 기준으로 핸들러를 작성한 뒤 app.js / main.js 같은 전역 JS 에서 불러와 사용

export default function errorHandler(err, req, res, next) {

  // 1. err = undefined, null 인 경우 먼저 필터링 함
  if (!err) {
    return res.status(500).send({ message: 'Unknown Server error' });
  }

  // 2. 에러코드를 찾아내는 작업
  const status = err?.status || 500;

  // 3. 에러 코드 별 메세지 작성, 분류가 필요한 에러 코드를 추가로 작성 가능
  const messages = {
    400: 'Bad Request',
    404: 'Not Found',
    500: 'Unknown Server Error',
  };

  // 4. 최종적으로 에러에 대한 결과를 표기
  return res.status(status).json({
    status,
    message: messages[status] || 'Unexpected Error',
  });
}

 

 

[ 작성 한 에러 처리를 적용하는 방법 ]

//에러 관련 명령어만 작성

[최종 route.js]
import {validateUser} from '../lib/validation.js';
import asyncHandler from '../lib/asynchandler.js';

user.post(validateUser, asyncHandler(u.userNew));
// 클라이언트가 작성한 내용을 "validateUser"를 사용해 검토
// 이후 비동기 에러 처리를 위하여 실제 비지니스 로직을 asyncHandler()로 감쌈


[최종 app.js]
import errorHandler from './lib/errorhandler.js';

app.use(errorHandler);
// 다른 router에서 발생한 에러를 받기 위하여 전역JS의 하단에 선언

 

 

404 에러가 이렇게 예쁘면 얼마나 좋을까^^ 하하^^

 

---

 

📃 내일은 뭘 배울까 🤔

- Git 전체 다시 공부하기