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

express.static 예제

 

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 파일들을 저장하는 곳

 

예를 들어 images 폴더에 있는 test.jpg 파일을 접근하기 위해서

웹브라우저에서 "http://domain/images/test.jpg"를 입력하면 접근할 수 있다.

 

조금이라도 효율을 높이고 싶다면 폴더 명을 img, js, css로 바꾸는 것을 권장한다.

문자열 조금(진짜 조금) 바뀌는 게 얼마나 좋겠어 라고 생각하겠지만

네이버 같은 큰 웹서비스에서 하루에 오는 요청 양을 생각하면 

바꾸는 것도 괜찮다고 생각이 들지 않는가?(아니면 말고..)

 

그런데 보통의 웹서비스에서 정적파일들은 Node.js보단 nginx 같은 프록시 서버가

메모리 캐시를 이용하여 정적 파일(static file)들을 제공한다고 한다.

 

프록시 서버를 거쳐 express가 돌아가는 서버에 와서 제공하는 것보다 

프록시 서버가 바로 제공하는 것이 좀 더 빠르기 때문이다. 

 

따라서 정적파일 부분은 여기까지 하도록 하겠다.

 

그리고 app.use() 함수는 다음 middleware에 대한 포스팅때 언급하도록 하겠다.