[O'REILLY] Node & Express - 3장 : 뷰엔진 설정하기

1. 뷰엔진 설정

- 저번 시간에 npm i express-handlebars 설치를 통해 모듈을 설치했으면 다음과 같이 코드를 추가해준다.

 

meadlolark.js

버전마다 문법이 조금 다른 것 같다. 이건 최신버전 7.0.1 이다. 책에서는 3으로 하더라. npm i express-handlebars@3 하면된다

- 이 코드는 뷰 엔진을 생성하고 익스프레스에서 이 엔진을 기본값으로 사용한다.

- views 디렉토리를 만들고 그 안에 layouts 서브디렉토리를 만든다.

- 레이아웃을 사용하면 사이트에 존재하는 모든 페이지에 프레임워크를 제공해 유지보수 지옥을 피할 수 있다.

- 이제 템플릿을 만든다.

 

/views/layouts/main.handlebars

{{{body}}} 가 다르다

- {{{body}}} 부분의 표현식은 각 뷰에서 HTML로 바뀐다. 

- 핸들바 인스턴스를 만들었을 때 defaultLayout: 'main' 으로 기본 레이아웃을 선언했으므로, 따로 명시하지 않는다면 이 템플릿이 모든 뷰의 레이아웃으로 사용된다.

- 이제 각각의 페이지를 만들어본다.

 

views/home.handlebars

<h1>Welcome to Meadowlark Travel</h1>

 

views/about.handlebars

<h1>About Meadowlark Travel</h1>

 

views/404.handlebars

<h1>404 - Not Found!</h1>

 

views/500.handlebars

<h1>500 - Server Error !!</h1>

 

- 이제 뷰를 만들었으니, 이전의 라우트를 교체해 뷰를 사용하도록 바꾼다.

알록달록

- 뷰 엔진에서 콘텐츠 타입 text/html과 상태코드 200을 기본적으로 반환하므로, 따로 명시할 필요는 없다.

- 404와 500등 에러에 관해서는 명확히 명시해야 프론트엔드 개발자가 안 도망간다.

- 서버를 다시 시작하고(nodemon 이면 알아서 재시작 된다.) 홈이나 어바웃에 들어가보면 렌더링 된 것을 확인할 수 있다.

 

2. 정적 파일과 뷰

- 익스프레스는 미들웨어를 사용해 정적 파일과 뷰를 처리한다.

- 지금은 미들웨어를 통해 기능을 모듈화해서 요청을 쉽게 처리할 수 있다는 것만 알면 된다.

- static 미들웨어는 하나 이상의 디렉터리를 지정해서 이 디렉터리에 정적 자원을 보관하고, 이들은 아무런 변화 없이 클라이언트에 바로 전송한다.

- html, 이미지, css, js등을 보낸다. CSR이라면 빌드한 html을 걍 보낸 후 ajax로 비동기통신처리를 주력으로 해주면 되고, SSR이라면 css, js, 이미지 들을 주로 보낸다.

 

- 실습 : 프로젝트 디렉토리에 /public 을 만든다.

- 라우트를 선언하는 코드 앞에 static 미들웨어를 다음과 같이 추가한다.

app.use(express.static(__dirname + '/public'));

- 이거 정해져있다. 그냥 복붙하면 된다.

- public 안에 'logo.png' 를 넣어보고 실험해보자.

- 이제 다음과 같이 레이아웃에서 사용할 수 있다.

<img src='logo.png' alt='logo'>

cf) 미들웨어는 순서에 따라 처리되며, 보통 맨 처음이나 앞 부분에 선언하는 static 미들웨어가 다른 라우트를 가로챌 수도 있다. 라우트와 일치하는 주소가 있는지 잘 확인해야한다.

 

3. 뷰의 동적 컨텐츠

- 뷰의 진정한 가치는 동적 정보를 포함할 수 있다는 것이다.

- 어바웃 페이지에 '포춘쿠키'를 표시한다고 가정해보자.

 

meadowlark.js 에 다음과 같이 선언해본다.

넘나리 의미없는 것

 

다음은 views/about.handlebars 뷰를 다음과 같이 수정해본다.

<h1>About Meadowlark Travel</h1>
{{#if fourtune}}
<p>Your fortune :</p>
<blockquote>{{fortune}}</blockquote>
{{/if}}

 

마지막으로 /about 라우트를 수정한다.

랜덤으로 포춘 배열에서 아무거나 하나 뽑아서 뷰에 전달해주었다.

- render함수의 두번째 파라미터는 데이터를 전달할 때 쓰인다.