[NODE 강의] [Express] 정적파일 서비스

[클립명]

1. 404, 500 error handling

2. nunjucks macro

3. Express 권장구조

 

정적파일 세팅

node.js의 웹프레임워크인 Express는 각종 이미지 파일이나 js, css 파일들을 추가할때마다 해당 파일을 불러오기 위하여 router 설정을 하나하나 일일이 하지 않고, 불러올 수 있도록 간단하게 설정할 수 있다. 이를 정적파일 세팅이라고 한다.만약, 이런 기능이 없다면 이미지 파일을 추가할때마다 일일이 router 설정을 해줘야 할 것이다. 이것은 헬게이트 오픈이라고 할 수 있겠지...

 

express에서 정적파일 세팅은 미들웨어 함수를 사용하여 아래와 같이 한다.

app.use(express.static('uploads')에서 'uploads'는 정적파일이 존재하는 root경로의 폴더명이므로, 자신의 개발환경에 따라 다르게 설정할 수 있다.

const express = require('express');
const app = express();

//uploads 폴더 경로를 정적파일 경로로 설정
app.use(express.static('uploads'));

위와 같이 설정하면, 아래와 같이 호출하면 해당 경로에 있는 정적파일이 호출된다.

http://localhost:3000/images/kitten.jpg
http://localhost:3000/css/style.css
http://localhost:3000/js/app.js
http://localhost:3000/images/bg.png
http://localhost:3000/hello.html
http://localhost:3000/sample.jpg

 

Express는 정적 디렉토리에 대해 상대적으로 파일을 검색하며, 따라서 정적 디렉토리의 이름은 URL의 일부가 아니므로 호출주소에 /uploads 가 없어도 호출되는 것이다.

 

1개 이상의 폴더를 정적파일로 제공하고 싶다면, 미들웨어 함수를 두 번 사용하면 된다. 이 떄 express는 설정한 순서대로 파일을 검색하기 때문에 주로 사용하는 정적파일 경로를 첫번째로 설정하면 좋다.

​사용자가 호출경로를 임의로 지정할 수도 있다. 

const express = require('express');
const app = express();

//uploads 폴더 경로를 정적파일 경로로 설정
app.use('/static', express.static('uploads'));

위와 같이 설정하면 /uploads 경로에 존재하는 파일에 접근하기 위해서는 아래처럼 '/static' 경로로 접근해야 한다.

http://localhost:3000/static/images/sampls.jpg
http://localhost:3000/static/css/style.css
http://localhost:3000/static/js/app.js

express에서의 정적파일 제공

 

404, 500 ERROR Handling

존재하지 않는 페이지를 요청하거나 서버에서 에러가 발생하는 경우 404 not found 에러 또는 500 internal server error 같은 메시지가 출력되는데, 이런 에러가 발생할 때 보여줄 페이지를 설정하여 제공할 수 있다.

//404 에러 처리 페이지
app.use( (req, res,  _) => {
    res.status(404).render('common/404.html');
});
//500 에러 처리 페이지
app.use( (req, res,  _) => {
    res.status(404).render('common/500.html');
});

위와 같이 설정하고 해당 경로에 html 페이지를 만들어두면 된다.