Express - 정적파일 서비스

Express - 정적파일 서비스

이번에는 Express 웹 프레임워크를 통해 *정적인 파일들을 서비스하는 방법을 알아보자.

* 정적인 파일들 - 이미지, CSS, js 등 어느 한 공간에 위치하고 있는 자원들

 홈페이지 탐색

홈페이지 상단의 시작하기에서 정적 파일 메뉴를 선택한다.

아래와 같은 페이지로 이동된다.

이미지, CSS 파일, js파일같은 정적 파일을 제공하려면 Express에서 제공하는 미들웨어 함수 "express.static()"을 사용하라고 알려주고 있다.

정적 파일이 위치하고 있는 디렉토리의 이름을 "static()"미들웨어 함수의 인자로 전달하면 파일로 직접적인 제공을 할 수 있다고 한다.

그리고 그 아래에 미들웨어 함수인 "static()"함수의 사용방법을 보여주고 있고 그에 따른 정적 파일에 대하여 브라우저에서 접근 방법을 알려주고 있다.

 미들웨어 함수 사용해보기

미들웨어라 부르는 static()함수를 알았으니 이제 이를 사용해서 정적인 파일을 서비스해보자.

지난번 작성했던 app.js를 열어 아래의 코드를 작성하자.

6번 줄과 14~16번 줄을 추가하였다.

6번 줄 - 

"express()"함수의 "use()"함수를 호출하고 인자로 "express.static()"미들웨어 함수를 호출한다. 

그리고 그 인자로 정적인 파일이 위치하는 디렉토리 경로를 인자로 넘겨준다.

이 작업을 완료하면 이제 우리는 정적인 파일에 대해 호출 및 접근이 가능해진다.

14~16번 줄 - 

웹 브라우저에서 정적인 파일을 서비스받을 url('/route')을 설정해준다.

해당 url로 요청이 들어오면 "response.send()"함수를 통해 'Hello Router'란 메시지와 함께 HTML 이미지 태그로 정적인 이미지 파일을 표현해준다.

 실행

코드를 작성했으니 이제 애플리케이션을 실행시켜서 웹 브라우저로 접속해보자.

node app.js 명령어를 통해 서버를 실행하자.

그리고 웹 브라우저에서 "localhost:9000/route"로 접속해보자.

우리가 의도했던 것처럼 Hello Router 문자열과 정적인 이미지 파일이 출력되는 것을 알 수 있다.