Serving static files / Grave accent

• Serving static files in Express

  - 이전 포스팅에서 html을 pug 템플릿으로 옮겨 렌더링 하는 법을 공부하였다.
  하지만 이렇게 변환한 페이지는 이미지 파일이나 다른 html/css와 같은 파일을 로드 할 수 는 없을 것이다.
  - 이런 정적 파일을 제공하기 위해선 express의 미들웨어인 static을 사용해야한다.
  app.use(express.static('public'));
  - 다음처럼 static 미들웨어에 폴더명(public)을 인자로 넘김으로서 정적파일을 ./public 폴더에서 로드할 수 있게 되는 것이다.
  http://localhost:3000/images/kitten.jpg http://localhost:3000/css/style.css http://localhost:3000/js/app.js http://localhost:3000/images/bg.png http://localhost:3000/hello.html
  - static 미들웨어를 등록함으로써 위처럼 사진이나 html,css,js 파일을 로드할 수 있다.

• Grave accent

  - `(grave accent)는 자바스크립트 상에서 html 코드를 처리하기 위해 사용한다.
  특히 ${ }을 통해 코드 내의 변수를 삽입할 수 있다.
  "static.js" var html=`<img src="test_image.jpg">`; app.get('/',function(req,res){ res.send(html); } )
  - 위 예시처럼 가볍게 html을 변수로 하여 응답함으로써 이미지 파일을 로드할 수 있고,
  "grave.js" var list = `<ul>`; for(var i=0; i<10; i++){ list += `<li> ${i} </li>`; } list+=`</ul>`; app.get('/',function(req,res){ res.send(list); } )
  - 다음처럼 javascript의 변수로 html을 처리함으로써 텍스트의 반복을 JS에 맡길 수 있다. 또 JS 내의 변수를 처리하여 html 출력에 변형을 주는 등 grave accent를 이용하는 것으로 보다 동적으로 html을 로드 할 수 있다.