[Node.js] 익스프레스 - 오류 페이지 출력하기 (404 페이지 만들기)
웹 서버에 등록되지 않은 패스를 웹 브라우저에 입력해보면 문서를 찾을 수 없다는 디폴트 메시지가 나타난다. 그런데 문서를 찾을 수 없다는 메시지를 우리가 직접 만든 페이지로 바꾸고 싶다면 어떻게 해야 할까? 지정한 패스 이외의 모든 패스로 요청이 들어왔을 때 오류 페이지가 보이도록 처리해주어야 한다.
이제 브라우저에서 존재하지 않는 패스를 입력하면 찾으려는 페이지가 없어 404 상태 코드가 반환되고, 서버에서 전송한 오류 페이지가 출력된다.
모듈을 설치했으면
위 코드를 js에 추가한다. 그리고 에러 페이지를 만드는데, 프로젝트 폴더 안의 [public] 폴더에 404.html을 만들어준다.
public/404.html
이제 예상치 못한 오류가 발생했을 때(존재하지 않는 페이지로 접속하려 할 때) 404 페이지가 출력된다. 파일을 실행하고 localhost:3000/givemeerror 등의 없는 주소로 접속해보면 404 페이지가 출력될 것이다.
오류 페이지 직접 만들기
라우터 미들웨어는 특정 패스가 등록되어 있는지 순서대로 확인하여 처리한다. all() 메소드 호출 부분을 추가하여 오류 페이지를 출력해보자.
app.all('*', function(req, res){
res.status(404).send('<h1>ERROR - 페이지 찾을 수 없음</h1>');
});
| cs |
이제 브라우저에서 존재하지 않는 패스를 입력하면 찾으려는 페이지가 없어 404 상태 코드가 반환되고, 서버에서 전송한 오류 페이지가 출력된다.
express-error-handler 미들웨어 사용하기
예상치 못한 오류가 발생했을 때 그 오류를 처리할 수 있는 미들웨어를 사용할 수 있다. express-error-handler 미들웨어를 사용해 404.html 페이지를 응답으로 보내주는 코드를 작성해보자. 먼저 express-error-handler 모듈은 외장 모듈이므로 cmd에서 npm i express-error-handler --save를 통해 모듈을 설치해주자.모듈을 설치했으면
var expressErrorHandler = require('express-error-handler');
var errorHander = expressErrorHandler({
static: {
'404' : './public/404.html'
}
});
app.use(expressErrorHandler.httpError(404));
app.use(errorHandler);
| cs |
위 코드를 js에 추가한다. 그리고 에러 페이지를 만드는데, 프로젝트 폴더 안의 [public] 폴더에 404.html을 만들어준다.
public/404.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ERROR PAGE</title>
</head>
<body>
<h3>Error - 페이지를 찾을 수 없습니다</h3><hr />
<p>/public/404.html 파일의 오류 페이지를 표시한 것입니다.</p>
</body>
</html>
| cs |
이제 예상치 못한 오류가 발생했을 때(존재하지 않는 페이지로 접속하려 할 때) 404 페이지가 출력된다. 파일을 실행하고 localhost:3000/givemeerror 등의 없는 주소로 접속해보면 404 페이지가 출력될 것이다.
댓글 없음: