express(2) - 정적 파일서비스

Express에서 정적 파일 제공

이미지, CSS 파일 및 JavaScript 파일과 같은 정적 파일을 제공하려면 Express의 기본 제공 미들웨어 함수인 express.static을 사용하십시오.

정적 자산이 포함된 디렉토리의 이름을 express.static 미들웨어 함수에 전달하면 파일의 직접적인 제공을 시작할 수 있습니다. 예를 들면, 다음과 같은 코드를 이용하여 public이라는 이름의 디렉토리에 포함된 이미지, CSS 파일 및 JavaScript 파일을 제공하십시오.

Express에서 정적 파일 서비스에 관한 정의를 해놓은 것이다.

정적 파일을 서비스한다는 말은 사람이 한번 만들어 놓은 것이 언제나 똑같이 보이는 것을 정적이라고 할 수 있다.

이전에 사용했던 코드에서 한 줄만 추가할 것이므로 기존 코드를 가지고 설명을 해보겠다.

일단 내가 하려고 하는 작업은 서버를 구동해서 요청이 들어왔을 때 내가 가지고 있는 이미지파일을 하나 보여주려 하는 것이다.

물론 그 요청이라는 것은 이미지파일을 보여달라는 요청이다.

일단 public이라는 디렉토리를 하나 만들자.(이건 관습적으로 public이라고 명명한다고 한다.) 이 디렉토리는 보여주려는 이미지파일을 넣으려고 하는 디렉토리이다. 홈 디렉토리 (npm init이 된 곳)에서 public이라는 디렉토리를 만든 기준으로 할 것이다.

var express = require('express');
var app = express();
 
app.use(express.static('public'));
 
app.get('/',function(req,res){
    res.send('Hello World!');
});
 
app.listen(3000,function() {
    console.log("Example app listening on port 3000!");
});

이전 코드와 다른점이라 하면은 app.use(express.static('public')); 

이 한 줄이 추가된 것 뿐이다.

이 줄을 추가하면 public 디렉토리에 있는 파일을 로드할 수 있다.

해당 코드를 node 명령어로 실행시키게되면 이전 포스팅했던 글처럼 서버 접속이 될 것이고, 

public 디렉토리에 존재하는 이미지파일의 풀네임을 url의 뒤쪽에 이어서 작성해주면 해당 이미지 파일이 로드되어 보여진다.

public이라는 디렉토리에 존재하는 이미지이며 파일이름은 확장자명까지 모두 써줘야한다. 

지금은 이미지만 달랑 보여주는 형태이고, 조금 더 나아가서 내가 이전에 app.get이라는 메소드를 통해 라우팅을 수행한다고 하였다. 즉, 다른 경로(페이지)에서도 public 디렉토리에 있는 이미지를 사용할 수 있다. 자바에서는 static 변수라하면 어느 클래스에서나 사용할 수 있는 변수 라고 볼 수 있는데 비슷한 의미인 듯 하다.

 
app.get('/topic',function(req,res) {
    res.send('Hello btn, <img src="/enroll_btn.jpeg">');
})
 

내가 기존 코드에 위와같은 코드를 추가했다고 하면 topic이라는 경로에서도 public 디렉토리에 있는 이미지를 로드할 수 있다. 물론 위의 소스코드에서는 topic 디렉토리에 있는 어떤 파일을 실행하는 형태가 전혀 아니고 그냥 페이지에 바로 send하는 형태인데 다른 경로에서도 사용할 수 있다는 것을 보여주려고 했다. 위와같이 코딩하게 되면 topic이라는 경로의 url로 접속했을 때 나오는 결과는 이러하다.

경로를 보면 topic이라는 경로에서도 public에 있는 이미지파일을 로드하고있는 것을 볼 수 있다.