Node.js - 12 설정과 에러처리

오늘은 적절한 에러 페이지를 브라우저에 보여주는 것에 대해 공부했다.

데베프랑 소시개때도 에러 페이지를 따로 만들어서 보여주는 걸 했었는데 비슷한 에러 처리 기술이다.

 

먼저 그렇게 하기 위한 전체적인 개요는

1. 애플리케이션 시작 스크립트 변경
2. 에러 처리를 위한 미들웨어 생성
3. Express.js를 통한 정적 페이지 서비스

 

package.json 설정 파일 수정

 

먼저 package.json 설정파일을 수정한다.

 

npm start

npm run start

npm -script start 

 

이런 npm 키워드를 이용해 애플리케이션을 실행시킬 수 있게 하기 위함이다.

(사실 이게 에러처리랑 뭔상관인지 모르겠지만 하라니까 한다. 하다보면 이유를 알게되겠지 머..)

 

package.json 파일의 script 부분에 

"start": "node main.js"를 추가한다.

 

이렇게!

 

이렇게 하면 설정파일 수정 끝이다.

 

 

 

에러 처리를 위한 미들 웨어 설정

Express.js의 에러처리

 

Express.js가 에러처리를 하는 방법은 크게 두가지다. 

먼저 첫번째는

 

1. 에러가 발생할 때마다 콘솔에 로깅

 

이렇게 하기 위해서는 먼저 http-status-codes 패키지를 설치해야 한다.

 

그리고 errorController.js 를 생성한 후

이렇게 함수를 정의해준다.

 

logErrors 함수는 보이다시피 error, req, res, next 총 4개의 변수를 갖고있다.

일반 미들웨어 함수보다 하나 더 많은 변수를 갖고 있어, 요청-응답 사이클에서 에러가 발생하면 첫번째 변수(error)에 저장되고, error 객체의 stack 특성을 console.error로 로깅할 수 있다.

 

next 변수는 체인 내에서 다음 함수 또는 라우터 호출, 좀 더 처리돼야 할 에러 객체를 전달한다.

 

컨트롤러에 이렇게 정의해주고, main.js로 돌아가서 app.use(errorController.logErrors)를 추가한다.

**이때 일반 라우트의 정의 다음에 미들웨어 라인을 추가해야 한다.

 

 

이렇게 코딩을 마치고 일부러 오류를 만들어 실행해보면

 

이렇게 나오는데, 그냥 저런 컨트롤러 설정 없이 나오던 오류 화면과 똑같아서 뭐가 다른지 모르겠다.

console.error 함수에 의해 출력된 것인지 확인해보려고 함수 안에 "오류 출력" 스트링을 추가해서 나오나 봤더니 나오지도 않는다... 에휴^^

 

 

암튼 첫번째 방식 끝.

 

 

두번째는

2. errorController.js 에서 사용자 정의 메시지로 에러에 대응

 

 

아까 선언했던 logErrors 함수 아래에

• respondResourceFound : 라우터에 매칭되지 않은 모든 요청들을 잡아내는 함수
• respondInternalError : 모든 내부 에러를 잡아내는 함수

 

이 두가지를 선언한다.

 

이렇게 해서 일부러 에러를 발생시켜서 확인해보면,

 

이렇게 내가 입력한대로 잘 나온다.

 

 

 

정적 파일의 제공

 

이제 내가 만든 html 파일로 대체해서 에러 페이지를 응답해보았다.

 

public 폴더 밑에 정적 파일로 404.html, 500.html을 추가하여 텍스트 메시지로 응답하는 대신 이 파일로 응답시킨다.

 

필요한 작업은 Express.js에 정적 파일의 위치를 알려주는 것이다. 

 

errorController에 이렇게 추가한다.

res.sendFile은 에러 페이지의 절대경로를 특정하는 데 사용하며, 일반 템플릿 렌더링이 작동하지 않을 때 유용하다.

 

이제 main.js에 정적 콘텐츠 제공을 위한 설정이 돼있는지 확인해야 한다.

이때 express 모듈의 static 메소드를 사용한다.

이 메소드는 정적 파일이 들어 있는 폴더의 절대경로를 가져온다.

 

main.js 에 app.use(express.static("public")을 추가한다.

 

이렇게

 

이 코드는 정적 파일 제공을 위해 애플리케이션에게 main.js와 같은 레벨에 위치하는 public 폴더에 접근하도록 한다.

 

이렇게 완성시키고, 404.html과 500.html 파일은 그냥 내 멋대로 대충 만들었다.

그래서 실행시켜보면

 

 

 

이렇게 내가 만든 페이지가 원하는대로 잘 나온다.

 

한가지 주의할 점은 이 에러페이지 html 파일들은 다른 ejs 파일들과 달리 모든 스타일을 html 페이지 안에서 해결해야한다. 즉, 같은 css나 레이아웃을 공유하지 못하는 것 같다.