nodejs-express 정적 파일 서비스, 에러 처리

7. 정적인 파일의 서비스

미들웨어를 이용하는 사례이면서, 웹 애플리케이션을 만드는 데에 있어 중요한 정적인 파일(img, JS, CSS 등)을 서비스하는 방법을 알아보자. (express ver.) expressjs.com/en/starter/static-files.html 참고.

 

먼저 우리가 사용하는 프로그램에 폴더(public)를 만들고 안에 이미지(hello.jpg)를 넣어둔다. 그리고 아래와 같이 호출한다.

• 문법: express.static('public')) / 서비스하고자 하는 디렉토리를 지정해주면 된다. (public 아래의 디렉토리에 url을 통해서 접근할 수 있게 됨 - 이외의 접근은 할 수 없어 안전성도 있음.)

app.use(express.static('public')); //public 디렉토리 안에서 static 파일을 찾겠다는 것.

잘 실행되는지 확인하려면 http://localhost:3000/images/hello.jpg 라고 작성해보면 된다.

app.get('/', function (request, response) {
  var title = 'Welcome';
  var description = 'Hello, Node.js';
  var list = template.list(request.list);
  var html = template.html(title, list,
    `<h2>${title}</h2>${description}
    <img src = "/images/hello.jpg">`,
    `<a href="/create">create</a>`); //<img> 코드를 넣어준다. [사진 호출]
  response.send(html);
});

이때 사진이 너무 크면, 아래와 같이 수정해주자. (안 바꿔줘도 상관은 X)

  var html = template.html(title, list,
    `<h2>${title}</h2>${description}
    <img src = "/images/hello.jpg" style="width:300px; display:block; margin-top:10px">`,
    `<a href="/create">create</a>`);

코드 설명: 스타일 속성(CSS 문법)을 이용해 300 크기에, 줄바꿈을 주고, 여백(위·아래만)을 10 정도 줌.

 

8. 에러 처리

• 흔한 에러는: 존재하지 않은 페이지를 찾았을 때 발생하는 것. expressjs.com/en/starter/faq.html 를 참고. 

 

app.use(function (req, res, next) {
  res.status(404).send("Sorry can't find that!")
}) // app.listen 바로 위에 넣어준다.

끝에다 넣는 이유: 미들웨어는 순차적으로 실행하는데, 실행될 미들웨어가 끝까지 없을 때에 이 마지막 코드인 404를 출력하게끔 해준 것이다.

 

• 의도하지 않은 페이지가 출력될 경우 → 차라리 에러 처리를 하는 것

app.get('/page/:pageid', function (request, response, next) { //err 처리를 위해 next를 넣어준다.
  var fillterdid = path.parse(request.params.pageid).base;
  fs.readFile(`data/${fillterdid}`, 'utf8', function (err, description) {
    if (err) { //에러라면 err가 발생하게 해준다.
      next(err); //맨 끝의 err인자, 즉 500코드가 적혀있는 곳이 실행된다.
    } else { //그게 아니라면 정상 작동.
      var title = request.params.pageid;
      var sanitizedtitle = sanitizehtml(title);
      var sanitizeddescription = sanitizehtml(description, {
        allowedTags: ['h1']
      });
      var list = template.list(request.list);
      var html = template.html(sanitizedtitle, list,
        `<h2>${sanitizedtitle}</h2>${sanitizeddescription}`,
        `<a href="/create">create</a>
        <a href="/update/${sanitizedtitle}">update</a> 
        <form action="/delete_process" method="post">
        <input type="hidden" name="id" value="${sanitizedtitle}">
        <input type="submit" value="delete">
        </form>`);
      response.send(html);
    }
  });
});

// ~ code ~

app.use(function (err, req, res, next) { //next를 통해 전달받을 1번째 인자로 err를 둔다. 그리고 보면 4개의 인자를 갖고 있는데, 이는 에러를 핸들링하기 위한 미들웨어로 정해뒀기 때문이다.
  console.error(err.stack)
  res.status(500).send('Something broke!')
})

expressjs.com/en/guide/error-handling.html Writing error handlers 부분 참고.

 

9. 라우터

-1. 주소체계변경

소프트웨어가 커짐으로 복잡도를 정리하지 않으면, 소프트웨어가 커지는 데에 한계가 있다.

expressjs.com/en/guide/routing.html express.Router 부분 참고. 라우터를 만드는 것

 

10. 보안

expressjs.com/en/advanced/best-practice-security.html 참고

- express 최신 버전 유지하기

- http vs https → https를 사용하기, 웹 브라우저와 웹 서버가 통신할 때 상호간의 암호화가 체결되기 때문에 중간에 누군가 데이터를 가로채가도 데이터의 실제 내용이 무엇인지 알 수 없게 할 수 있다.

- 헬맷은 보안과 관련해서 일어날 수 있는 여러가지 이슈를 자동으로 해결해주는 모듈이다.

npm install --save helmet을 통해 다운받을 수 있고, 사용법은 제시된 코드를 넣어주면 된다. [기본 사용 권장]

- 누가 방문했는지 식별하기 위한 매커니즘인 쿠키를 옳바르게, 안전하게 사용하라

- npm 안전하게 관리하기. 모듈들 중 취약한 것이 있을 수 있기 때문에 관리하라는 것.

+ 보안은 언제나 안전하게 유지할 수 있도록 노력해야한다!

 

11. express generator

expressjs.com/en/starter/generator.html 참고