path 설정하기

이전에는 사용자의 요청에 응답을 하기 위해서는 respose에서 write와 send 또는 end를 통해 응답했다. 하지만 이는 비효율적이고 손이 많이 드는 일이다. 그래서 html파일의 path를 설정하면 보다 편하고 보안적으로 수행할 수 있다.

const path = require('path');

...

router.get("/add-product", (req, res, next) => {
  res.sendFile(path.join(__dirname, '../', 'views', 'add-product.html'));
});

위의 코드가 get 요청을 받을 때 html 파일을 응답하는 코드이다. Node js의 코어 모듈인 path를 활용했다. join함수의 첫 번째 값에는 절대경로가 들어가야 하기 때문에 __dirname를 넣어주고 그 다음 값부터는 경로와 파일 이름을 넣어주면 된다.

이 방법이 제일 일방적이지만 이를 더 편하게 할 수도 있다.

util 폴더에 path.js 파일을 만들어 준 후

const path = require('path');

module.exports = path.dirname(require.main.filename);

path.js 파일에 절대경로를 설정해주는 것이다.

const rootDir = require('../util/path');

...

router.get("/add-product", (req, res, next) => {
  res.sendFile(path.join(rootDir, 'views', 'add-product.html'));
});

그리고 아까의 코드를 위와 같이 수정할 수 있다. 전보다 깔끔해졌다.

static

static은 콘텐츠를 정적으로 제공하는 방법이다. 이미지나 css파일을 적용할 때 사용하는 방법으로 html의 불필요한 부분을 제거하여 깔끔하게 보일 수 있다. static을 적용하는 방법은 express 모듈을 사용하면 된다.

우선 html의 css코드를 따로 폴더를 만들어 보관했다.

그리고 이 프로젝트의 핵심 파일인 app.js에 static을 추가해주면 된다.

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

static값 안에는 콘텐츠를 제공할 경로를 넣어주면 되는데 path를 이용하여 넣어주면 된다.(개발자가 직접 입력할 경우에는 에러가 나온다.) 이렇게 하면 정적으로 콘텐츠를 제공할 준비를 마친 것이다. 그리고 제공받을 파일에 경로를 입력해주면 된다.

<link rel="stylesheet" href="/css/main.css">

이번 공부를 통해서 코드를 깔끔하게 작성하는 방법을 배웠다. 왜 이렇게 해야 하는지 하나하나 상세하게 이해까지는 하지 못했다. 하지만 이런 식으로 해야 큰 프로젝트를 진행할 때 코드에 대해 확실하게 이해하면서 헷갈리지 않을 것 같다. 이해하는 것은 내가 기초적인 것부터 알고 난 다음에 공부해도 괜찮을 것 같다.