반응형

프로젝트를 진행하면서 path모듈과 static 미들웨어를 사용했을 때 이 둘은 단짝 친구같은 느낌을 받았다.

path모듈은 폴더와 파일의 경로를 쉽게 조작할 수 있도록 도와주는 node.js의 내장 모듈이다.

여기서 참고할 점은 운영체제별로 경로 구분자가 다르다는 점이다. 크게 윈도 타입과 POSIX 타입으로 구분된다. POSIX는 유닉스 기반의 운영체제들로 맥과 리눅스가 속해 있다.

윈도우는 경로 구분자가 '\'으로 구분하며 POSIX는 '/'으로 구분한다.

여기서 주로 많이 쓰이는 global 객체의 변수는 '__filename'과 '__dirname'이다. __filename은 현재 파일의 경로를, __dirname은 현재폴더의 경로를 말한다.

내 경험상 path모듈에서 많이 쓰이는 메서드는 바로 join()이다. join메서드 안에 여러 인수를 넣으면 하나의 경로로 합친다.

 
//path 모듈을 사용하려면 path모듈을 import 해야 한다.
const path = require('path'); //commonJS 형식
 
path.join('/a', '/b', 'c');
//결과 → /a/b/c

여기서 함께 쓰이는 것이 express 웹서버 프레임 워크의 static 미들웨어(middleware)다. 미들웨어는 express의 중추라고 볼 수 있다. 요청과 응답의 중간에 위치하는 역할을 하므로 middleware라고 부른다. 보통 미들웨어는 app.use()와 함께 사용되며 app.use(미들웨어)로 나타나는 형식이다.

 
const express = require('express');
const app = express();
// app.use(미들웨어) 형식으로 사용하는 이유는 보통 express 모듈을 app변수에 할당하기 때문이다.

static 미들웨어는 정적인 파일들을 제공하는 라우터 역할을 한다. 기본적으로 제공하기 때문에 따로 설치할 필요 없이 express 객체 안에서 꺼내 장착하면 된다. 여기서 path모듈과 함께 사용된다.

 
app.use('요청 경로', express.static('실제 경로')); //express.static으로 사용한다.
 
app.use('/', express.static(path.join(__dirname, 'public')));
 

위 소스코드는 함수의 인수로 정적 파일들이 담겨 있는 폴더를 지정했다는 뜻이다. 즉, '/' 요청경로이면 실제로 express.static(path.join(__dirname, 'public')) 경로로 안내하는 것이다. 그러면 public폴더 내부에 있는 css, js 폴더 등도 다 불러 올수 있다.

다시 말해, 실제 서버의 폴더 경로에는 public이 들어 있지만 요청 주소에는 public이 들어 있지 않다. 서버의 폴더 경로와 요청 경로가 다르므로 외부인이 서버의 구조를 쉽게 파악할 수 없다.

 

/*******************A**********************/

 
const express = require('express');
const path = require('path');
const app = express();

app.set('port', process.env.PORT || 3000);

app.use('/', express.static(path.join(__dirname, 'public')));/************1*******************/

app.get('/', (req, res)=>{
    console.log('Hello, Express');
});           /****************2*****************/

app.listen(app.get('port'), ()=>{
   console.log(app.get('port'), '번 포트에서 대기 중');
});
 

/*******************B**********************/

 
const express = require('express');
const path = require('path');
const app = express();

app.set('port', process.env.PORT || 3000);
 
app.get('/', (req, res)=>{
    console.log('Hello, Express');
});          /****************2*****************/

app.use('/', express.static(path.join(__dirname, 'public'))); /************1*******************/

app.listen(app.get('port'), ()=>{
   console.log(app.get('port'), '번 포트에서 대기 중');
});

참고로 A와 B코드에는 둘 다 오류가 발생하지 않지만 단순히 1번과 2번의 코드 순서만 바꿨음에도 엄청난 차이가 존재한다. 한번 확인을 해보시길 바란다. 나중에 이 부분에 대해 설명할 것이다.

반응형

+ Recent posts