Node.js - express (4) 정적인 파일 처리하기

 

 

이번 포스팅에서는 Node.js에서 express 모듈을 활용해 정적인 파일들을 처리하는 방법에 대해 알아보고자 한다.

 

아래와 같은 express.js 파일과 index.html 파일이 작성되어 있는 상태에서 서버가 실행되고 있다고 하자.

 

해당 서버는 웹브라우저에서 보낸 요청에 대한 응답으로 html 파일을 건내주고 있다. 이 때 html 파일뿐만 아니라 CSS, JavaScript와 같은 파일들도 보내주기 위해서는 어떠한 처리를 해야할까?

 

기본적으로 HTML 페이지에는 html 파일만 존재하고 있지 않다. 페이지를 꾸며주는 css 파일, 이벤트를 핸들링 해주는 js 파일, 이미지 파일 등 여러 파일들과 함께 전체 HTML 페이지가 만들어지게 된다. HTML 페이지에 css 파일과 js 파일이 같이 존재하는 경우 웹브라우저는 웹서버에게 css 파일과 js 파일들을 따로 요청해서 해당 파일들을 가져와야만 한다. 그렇기 때문에 express 모듈을 사용해서 서버를 구축할 때 이러한 역할을 해주는 부분을 추가적으로 만들어줘야 한다. 

 

// express에서 정적인 파일을 다루기 위한 세팅

app.use('/', express.static("./public"))

위의 코드를 통해 express는 정적인 파일들을 웹브라우저에게 보내줄 수 있게 된다. 여기서 말하는 정적인 파일이란 css 파일, js 파일, 이미지 파일 등과 같은 파일들을 일컫는다. 템플릿 엔진처럼 값을 변화시키는 파일이 아닌 정적인 형태의 확정적인 파일들을 말하는 것이다. 첫번째 인자값으로 들어가는 '/' 는 경로를 가리킨다. 두번째 인자값인 express.static( )은 정적인 파일들을 가져오는 미들웨어이다. express.static( )의 인자값으로는 정적인 파일들이 위치할 디렉토리를 넣어주면 된다. express.js 파일이 실행되고 있는 디렉토리 안에 "public"이라는 이름의 폴더를 생성해주고 public 디렉토리 안에 index.css 파일을 넣어보도록 하자.

 

 

 

public 디렉토리 안에 위와 같은 내용이 담긴 index.css 파일을 위치시킨 후 "localhost:3000/index.css" 로 접속해보면 index.css 파일에 작성된 코드들이 응답으로 호출되는 것을 확인할 수 있다. app.use( '/' , express.static('./public') ) 에 의해 "/" 경로로 요청이 들어왔을 때 라우트 매개변수명과 'public'  디렉토리 안의 파일명이 같다면 해당 파일을 열어서 브라우저에게 보내주고 있기 때문이다.

 

이제 index.html 파일 안에서 <link>엘리먼트를 사용해 css 파일을 연결하는 작업을 진행해 주면된다.

 

<link>엘리먼트를 통해 연결할 css파일의 경로를 href="http://localhost:3000/index.css"로 설정한 것을 볼 수 있다. 이렇게 URL로 경로를 작성해주는 이유는 브라우저가 웹서버로부터 css파일을 가져오는 과정 역시 일종의 통신 형태이기 때문이다. 웹서버가 브라우저에게 index.html 파일을 전달하면 브라우저는 해당 html 파일을 해석하다가 <link>엘리먼트 안의 경로로 웹서버에게 다시 요청을 보내게 된다. 해당 요청을 받은 웹서버는 index.css 파일에 작성된 코드들을 텍스트 형태로 브라우저에게 전달한다. 이러한 과정을 거쳐 css 파일을 가져오기 때문에 "http://localhost:3000/index.css"로 경로를 설정해줘야 하는 것이다. 이 또한 브라우저가 웹서버로부터 텍스트 파일을 가져오기 위한 하나의 통신 과정이라고 생각하면 된다. "http://localhost:3000/express"로 접속해보면 랜더된 html 파일에 css 속성이 적용된 것을 확인할 수 있다.

 

+)  href="http://localhost:3000/index.css"와 같이 전체 URL을 작성해줘도 되지만 href="/index.css"와 같이 "http://localhost:3000"을 생략해서 작성해줘도 된다.

 

css 적용 결과

 

 

일련의 과정들을 정리해보면 다음과 같다.

 

브라우저가 웹서버에게 "/express" 경로로 요청을 보내면 express는 요청에 대한 응답으로 완성된 html 파일을 브라우저에게 전달하고 브라우저는 전달받은 html 파일을 해석하기 시작한다.

 

브라우저는 html 파일을 해석하던 중 <link>엘리먼트를 발견하게 되고 <link href="http://localhost:3000/index.css" type="text/css" rel="stylesheet"> 안에 있는 주소로 다시 요청을 보내게 된다. 그리고 "localhost:3000/index.css" URL로 접속했을 때 나오는 결과물의 텍스트를 응답으로 받는다. 이 때 응답으로 전달받게 되는 텍스트가 index.css 파일의 내용이다.

 

브라우저는 이제 전달받은 index.css 파일과 html 파일을 가지고 해석을 진행하게 되고 그 결과 HTML 페이지에 css 속성이 적용된 결과물을 웹브라우저 화면에 랜더해준다.

 

이러한 과정들은 이미지 파일의 경우에도 동일하게 진행된다. 이미지 파일을 가지고 있는 것은 웹서버이기 때문에 브라우저는 웹서버에게 이미지 파일을 가져오기 위한 요청을 보내고 이미지 파일의 내용을 가져오는 형태로 진행되는 것이다.

 

이상으로 express에서 정적인 파일을 처리하는 방법에 대해 알아보았다.