node.js express 3. static file 정적 파일 옵션, path 모듈
이전 포스트 : http://psyhm.tistory.com/5
저번 포스트에서는 router 객체와 render란 무엇인가에 대해 공부했었다.
이제 정적 파일(이미지 파일, javascript 파일, css 파일) 등을 express 서버가 어떻게 제공하는 지 알아보자.
정적 파일(Static files)
express가 static files(정적 파일들)을 제공하기 위해선
express.static 미들웨어를 사용해야 한다.
사용 방법은 다음과 같다.
express.static(root, [options]);
root는 정적 파일들이 위치한 경로를 string 타입으로 적으면 되고
options는 속성을 키값으로 한 객체를 넣으면 된다.
options는 다음 테이블에서 확인 가능하다.
| 속성 | 설명 | 타입 | 디폴트 |
| dotfiles | "." 으로 시작하는 폴더나 파일을 어떻게 다룰 것인지에 대한 설정 | String | "ignore" |
| etag | etag를 생성할 건지에 대한 설정(웹 캐시) | Boolean | true |
| extenstions | 파일 확장자 대체 설정: 만약 file이 존재하지 않는다면 지정된 확장자를 가진 파일을 검색하고 발견된 첫번째 파일을 제공. ex) ['html', 'htm'] | Mixed | false |
| fallthrough | (클라이언트 오류에 대한 것이라고 나오는데 어떤 때 쓰는 지 잘 모르겠다..) | Boolean | true |
| immutable | Cache-Control 응답 헤더에서 immutable 사용유무를 결정합니다. | Boolean | false |
| index | 지정된 디렉토리 index file을 전송합니다. | Mixed | "index.html" |
| lastModified | Last-Modified 헤더를 OS에서 파일의 마지막 수정 날짜로 합니다. | Boolean | true |
| maxAge | Cache-Control 헤더의 max-age 값을 설정합니다. | Number | 0 |
| redirect | pathname이 디렉토리인 경우 후미 "/"로 리다이렉트 한다.(???) | Boolean | true |
| setHeaders | 응답시 사용자 정의 헤더를 설정하는 기능. (밑에 부연설명) | function |
※ immutable: immutable은 브라우저 캐시가 fresh(max-age 내) 상태이면 페이지를 다시 로드할 때 Conditional GET을 발생시키는 대신 무조건 fresh Cache를 사용합니다. (정적파일 제공시 유용할 듯)
※ setHeaders: 헤더에 대한 변경은 동기적으로 발생해야 합니다. 이 함수는 fn(res, path, stat)이며 인수는 다음과 같습니다.
- res: the response object
- path: the file path that is being sent
- stat: the stat object of the file that is being sent
var options = {
dotfiles: 'ignore',
etag: false,
extensions: ['htm', 'html'],
index: false,
maxAge: '1d',
redirect: false,
setHeaders: function (res, path, stat) {
res.set('x-timestamp', Date.now())
}
}
app.use(express.static('public', options))
사실 위의 설정을 몰라도 무난하게 쓸 수 있으나 알고 있다가 나중에 세부 설정이 필요할 때 쉽고 빠르게 찾을 수 있으니 뭐가 있는지만 알아두자.
그리고 이 express.static(root, [options]);을 express에서 사용하고자 한다면 app.js 파일 23째줄을 보면 이미 사용된 것을 확인할 수 있다.
app.use(express.static(path.join(__dirname, 'public')));
app.use()함수는 나중으로 일단 미루자. 지금 설명하기에는 이정도 설명이면 충분할 것 같다.
app.use() 함수는 클라이언트가 서버에 요청을 할 때 중간에 거쳐가는 함수를 사용(use)하려고 할 때 사용한다.
라고 보면 된다.
간단히 express 서버에서 express.static(path.join(__dirname, 'public'))을 사용하겠다라고 보면될 것 같다.
일단 express.static()함수에 path.join() 함수가 사용된 것을 알 수 있고
옵션은 없으니 모두 디폴트값을 사용하는 것을 알수 있다.
Path 모듈
먼저 path 객체를 보자.
path에 대한 설명은 아래 url에서 document를 확인할 수 있다.
출처: https://nodejs.org/docs/latest/api/path.html
path는 말 그대로 경로에 관련된 모듈이다.
파일 경로를 쓰는데 문자열을 직접 자르고 합치는 것보다 path에서 제공하는 join 함수를 사용하는 것이 편하다.
그리고 __dirname은 node.js에서 제공하는 node 파일의 경로를 담고 있는 변수이다.
Node.js의 global object의 변수이므로 Node.js 어떤 모듈이든 접근 가능합니다.
global object에 관한 내용은 아래 url에서 document를 확인할 수 있다.
출처: https://nodejs.org/dist/latest-v8.x/docs/api/globals.html
path.join() 함수는 각 파라미터를 합쳐서 경로 문자열을 반환한다.
따라서 path.join(__dirname, 'public')는 '현재 app.js 파일의 경로 + /public'을 리턴한다.
public 디렉토리 안의 정적 파일들을 제공할 수 있도록 만들어야하기 때문이다.
public 디렉토리로 가보면 다음 폴더들을 볼 수 있다.
- images: 이미지 파일 저장하는 곳
- javascripts: 웹페이지에서 쓰이는 자바스크립트 파일들 저장하는 곳
- stylesheets: 웹페에지에서 쓰이는 css 파일들을 저장하는 곳