백엔드에서의 예외 처리

프론트엔드와 협업 시, 백엔드에서 예외처리를 해주면 좋은 코드를 알려드리려고 합니다.

이전에 작성했던 예외처리는 백엔드 프론트엔드 둘 다 사용이 가능한데요.

https://code-dung.tistory.com/56

안정성을 위한 예외 처리(기본)

지금부터 알려드릴 코드는 프론트엔드를 위한 백엔드의 예외 처리 코드입니다.

res.json(result);

여기까지만 작성을 했다면 성공을 했던 실패를 했던 전부 status code가 200으로 넘어가게 됩니다.

if(!결과){ // 조건 불충족시
  res.json({
    "success" : false,
    "message" : "결과가 없습니다"
  })
  return
}
// 조건 충족시
res.json({
    "success" : true,
    "data" : {결과}
})

그럼 이렇게 보내면 어떻게 될까요? 실패에 대한 메시지 보냈으니 된 거 아닌가 싶지만 결과가 있던 없던 위 코드는 상태코드가 200으로 넘어가게 됩니다. 

async function result(){
  try {
    const response = await fetch('경로');
    const {data} = await reponse.json(); //백엔드에서 보낸 json
    // success로 데이터 성공 실패를 파악,
    if(!data.success) { // 실패, 에러 뿌려주기
      retrun throw new Error();
    }
    //성공, 데이터 뿌려주기
  }
  catch(e){
    console.log("요청실패")
  }
}

이때 프론트엔드에서는 데이터를 받아서 바로 사용하는 게 아니라 success를 통해서 한 번 더 성공실패유무를 파악을 해야 한다는 단점이 생깁니다. 실패했다는 예외를 미리 코드를 작성해 준다면 프론트엔드는 어떻게 코드를 쓸 수 있을까요?

// 백엔드 코드
if(!결과){ // 조건 불충족시
  res.status(404).json({
    "success" : false,
    "message" : "결과가 없습니다"
  })
  return
}
// 조건 충족시
res.status(200).json({
    "success" : true,
    "data" : {결과}
})

// 프론트엔드 코드
async function result(){
  try {
    const response = await fetch('경로');
    //성공실패 확인x, 데이터 뿌려주기
    return reponse.json();
  }
  catch(e){
    console.log("요청실패")
  }
}

이처럼 성공실패 확인하는 작업이 줄어들고, 간단하게 통신에 대한 에러 핸들링을 할 수 있는 것입니다.

그래서 백엔드에서 예외처리를 하기 위해 자주 사용하는 HTTP 상태코드 정도는 알아두고 그에 맞는 코드를 작성해 주는 것을 잊지 말아야 합니다.