Node.js - 11 뷰와 템플릿, 레이아웃

뷰와 템플릿의 연결

 

템플릿 엔진은 Express.js가 뷰를 처리하고 브라우저에서 읽을 수 있는 HTML 페이지로 변환하는 데 사용하는 엔진이다.

템플릿의 사용으로 뷰에 동적 데이터를 삽입하는 코딩을 할 수 있다.

 

패키지 다운로드를 위해

npm install ejs --save 명령을 실행하여 ejs 패키지를 설치한다.

 

이제 ejs를 템플릿용으로 사용하겠다고 알려주기 위해, main.js 아래에

app.set("view engine", "ejs")를 추가한다.

 

 

그럼 코드는 이렇게 된다.

처음에 app.set("view engine", "ejs") 코드 추가 안한 상태로 실행시켜서 오류가 계속 났었다. 삽질;;

 

 

index.ejs

views 폴더 밑에 index.ejs 파일을 만들고 간단하게 위와 같이 html 코드를 짰다.

 

helloController.js

그리고 이건 컨트롤러. 밑에 respondWithName 이라는 컨트롤러를 추가하여 뷰를 랜더링 한다.

 

그럼 이제 index.js의 40행

app.get("/name", helloController.respondWithName) 

코드가 실행되어 url에 localhost:3000/name을 입력하면,

 

결과가 이렇게 잘 나온다. 

 

 

 

컨트롤러부터의 데이터 전달

 

라우트를 변경해 경로에서 매개변수를 가져온 다음 해당 매개변수를 뷰로 보낸다.

JavaScript 객체 내에서 변수를 전달하면 된다. 이름은 뷰에서의 변수의 이름과 일치해야 한다.

 

 

라우트의 코드는 

 

 

이렇게 된다. 

 

 

이제 이 매개변수를 사용하려면, 컨트롤러를 다음과 같이 수정한다.

 

이렇게 요청 매개변수로 지연 변수를 할당하고, 렌더링 된 뷰로 그 변수(name)를 전달한다.

 

그리고 index.ejs에서는 

<let name = "Jon"; %>을 삭제하고

 

 

이렇게만 코드를 수정한다.

 

이렇게 다 고치고 돌려본 실행 결과는

 

잘 나온다.

 

 

 

요소 및 레이아웃 설정

 

레이아웃이란 웹 사이트를 탐색할 때 페이지마다 변동되지 않는 컨텐츠를 말한다.

 

레이아웃을 사용하기 위해 먼저 express-ejs-layouts 패키지를 설치한다.

 

npm install express-ejs-layouts --save 명령을 실행한다.

 

패키지가 다 설치되었으면,  index.ejs 에서

const layouts = require("express-ejs-layout")을 선언하고, 

 

Express.js가 이 패키지를 추가 미들웨어로 사용하도록 main.js에 app.use(layouts)를 아래와 같이 추가한다.

**이때 app.use(layouts)는 app.get("/name/:myName", homeController.respondWithName) 보다 앞에 위치해야한다.

뒤에다가 선언하니까 적용이 안됐음...

 

 

암튼 이렇게 코딩해주고, views 폴더에 layout.ejs 파일을 만들어서

 

이렇게 만들어준다. 

 

그러면 <%-body%> 연산에 의해 저 자리에는 index.ejs가 들어오게 되고, 화면은

 

 

이렇게 된다.

 

만약 요소를 따로 추가하고 싶으면 ejs 파일을 생성한 후,

예) <% include particials/navigation %>로 포함시킬 수 있다.

 

키워드 include는 제공된 상대경로에서 요소를 찾아서 렌더링 해준다.

근데 ejs v3.0 이상부터는 문법이 바껴서 <%- include ("particials/navigation") %>으로 해야한다고 한다.

이렇게 했는데도 자꾸 이상한 오류나서 내일 다시 해봐야겠음 지금은 집중력 상실..

 

이렇게 자꾸 파일을 찾을 수 없다고 함;;;

 

 

 

 

(+ 21.10.25 17:51 수정)

오류 메시지 읽어보면 문법이 잘못 된게 아니라 그냥 경로에 해당하는 파일을 못찾았다고 하는거라서 경로를 상대경로로 맞춰서 

 

이렇게 적어줬더니

 

 

 

 

아주 잘 출력됨...