[node js]Express로 정적 페이지 로드하기

이전에 만들었던 app.js라는 파일을 보면

var express = require('express');

var app = express();

app.get('/',function(req,res){

res.send('hello main page')

});

app.get('/login',function(req,res){

res.send('login please')

});

app.listen(3000,function(){

console.log('Connected 3000 port');

});

이다. 여기서 정적 페이지를 로드하기 위해서는 한줄의 코드만 추가하면 된다.

바로바로바로

app.use(express.static('public'));

이다.

여기서 초록색의 public은 폴더 이름이다.

현재 프로젝트에 public이라는 폴더를 만들어 놓고

이 명령은 내가 만들어 놓은 public이라는 폴더를 정적 파일이 위치할 디렉토리로 선정한다는 뜻이다.

app.js에 정적 페이지를 위한 코드를 추가하면 다음과 같다.

var express = require('express');

var app = express();

app.use(express.static('public'));

app.get('/',function(req,res){

res.send('hello main page')

});

app.get('/login',function(req,res){

res.send('login please')

});

app.listen(3000,function(){

console.log('Connected 3000 port');

});

아까 만들어 놓은 퍼블릭 이라는 폴더에

사진을 넣어놓는다고 하자.

rabbit.png(사진명)

그럼 다음과 같이 접속하면 웹페이지에서 사진을 볼 수 있다.

localhost:3000/rabbit.png 

굳이 public이라는 루트를 타고 들어가지 않아도 맨 첫줄에 있는 

app.use(express.static('public')) 이라는 함수가 있으면

먼저 public폴더에서 파일을 찾게 되기 때문이다.

만약 public폴더에 text파일을 넣는다고 해도.

text.txt(파일명)

localhost:3000/text.txt 경로로 들어가면

text의 내용이 로드된 것을 볼 수 있다.

그렇다면 다음과 같이 코드에 새로운 내용을 추가한다고 해보자. 

var express = require('express');

var app = express();

app.use(express.static('public'));

app.get('/',function(req,res){

res.send('hello main page')

});

app.get('/login',function(req,res){

res.send('login please')

});

app.get('/rabbit',function(){

res.send('hello rabbit, <img src="rabbit..png" />')

});

app.listen(3000,function(){

console.log('Connected 3000 port');

});

그리고 접속해보자

localhost:3000/rabbit

그러면 hello rabbit , 이라는 글과 함께

아까 public 폴더에 넣어 놓은 rabbit 사진이 뜬다.

그렇다면 rabbit.png 경로는 어떻게 된 것일까?/

app.js파일에 정적파일들이 위치할 폴더를 지정하는 다음과 같은 명령어가 추가되었을 때,

app.use(express.static('public'));

사용자 요청이 들어오게 되면 public이라는 파일에서 먼저 파일을 찾게 되고

public을 루트 경로로 인식하게 된다고 한다.