목록
1. nunjucks의 역할
2. nunjucks의 문법
3. nunjucks 설치법 (링크)
1. 브라우저에 입력된 값을 받아 html을 다시 짜는 nunjucks
html이나 css를 사용할때, 서로 다른 파일을 연결하기 위해 script나 style을 사용했었다.
그와 같게 자바스크립트도 독립적으로 존재한다.
그래서 js도 서로를 연결해주는 수단이 필요한데, 그게 바로 템플릿 엔진인 nunjucks다.
그렇다면 템플릿 엔진은 뭘까.
지정된 템플릿 양식에 데이터를 조합해서 HTML문서를 만드는 소프트웨어다.
우리가 보는 웹사이트 화면을 만들어줄때 도와준다고 생각하면 쉽다.
간단히 그림을 그려보자면, 이렇게 이해하면 편하다.
- 웹서버는 헤더를 읽어주는 express를 통해서 브라우저가 보내주는 요청헤더를 읽는다.
- express가 텍스트를 json으로 바꿔준 데이터를 웹서버가 받음
- 요청헤더에 해당하는 라우터가 받아들인뒤 응답데이터를 nunjucks에게 보낸다.
- 템플릿엔진(nunjucks)가 파일을 읽고 텍스트형태로 가공해서 express에게 전달해준다.
- express는 그걸 읽고 브라우저가 읽도록 String으로 재가공해서 전달한다.
- 이 때, nunjucks가 만든 영역은 응답 body에 들어가고, 나머지 헤더부분은 express가 만든다.
-> 이 이야기의 요지 : 웹서버와 템플릿엔진은 서로 내용을 전달할 수 있다.
위에서 app.send를 사용해서 ()안에 모든 코드를 넣어서 전달할 수도 있을것이다.
하지만, 웹사이트를 만들때 html을 보통 1줄만 넣지않는다.
그 코드를 js에 모두 넣는다면, html 코드로 가득차서 가독성도 떨어지고 컨트롤 하기 힘들어진다.
그래서 앞으로는 이 부분은 따로 빼서 관리하자!라는 의도로 만들어진게 nunjucks다.
2. nunjucks 문법
파일이나 데이터들을 연결해서 가공해 넘겨주는게 템플릿 엔진 nunjucks을 쓰기 위해서는 문법을 알아야한다.
html이 시작하면 {}의 유무를 먼저 체크하고, 있다면 템플릿엔진(nunjucks)이 먼저 해석에 들어간다. (예) % : 구문을 쓸거다
해석이 끝나면 html이 실행되고 완료된 형태를 돌려준다.
2-1) {{변수}}
//server.js
app.get('/board/test',(req,res)=>{
const num2=10
res.render('test2',{
num2:num2,
})
})
------------------------------------
//test2.html
너 나오는 중이니 : {{num2}}사용할 변수는 {{}} 안에 넣어서 사용하면 된다.
객체, 배열, 함수도 가능하며, 객체 내의 속성을 사용할 경우도 평소 변수 사용하듯이 사용하면 된다.
객체 toy 안에 있는 속성 teddy = {{toy.teddy}}
함수 apple : {{apple()}}
2-2) {%연산자%}
{% for item in data %}
반복할 내용
item.속성명
{% endfor %}- for문을 쓸건데, item이란 이름을 가질거야.
- 자료는 어디에 있냐면(in) data라는 배열/객체에서 가져올거야.
- 가져와서 item에 넣을거야.
- endfor을 만나면 멈출거야.
이렇게 차근차근 해석이 가능하다.
{% if 조건 %}
조건을 성립할때 실행할 내용
{% else %}
조건을 성립하지 않을때 실행할 내용
{% endif %}- if문을 쓸건데, 충족해야 하는 조건은 이거야.
- 그게 아니라면 else문을 쓸거야.
- endif를 만나면 멈출거야
2-3) HTML 재사용하기
반복되는 코드들을 묶어서 복사붙여넣기하듯 사용할 수도 있다.
- include : 단일, 하나로만 가져오고 싶을때.
- extends : 중간에 내용이 바뀌지만 전체적인 레이아웃이 같을때 사용한다
- block : 중간에 내용이 바뀌는 공간을 정할때 사용한다
레이아웃을 가져올 수 있는 extends
1. 가져오고 싶은 레이아웃을 지정한다.
//_layout.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
{% block start %} <!-- block 변수명 -->
<!-- 가져오고 싶은 내용을 적는 공간 -->
{% endblock %}
</body>
</html>
2. 적용하고 싶은 html에 {% extends "파일경로" %} 으로 가져온다
//index.html
{% extends "_layout.html"%}
{% block start %}
<h1> 작성하고 싶은 내용을 작성 </h1>
{% endblock %}
다른 html을 가져올 수 있는 include
1. 가져오고 싶은 html을 만든다.
//sample.html
<ul>
<li>가져가고 싶은 코드를</li>
<li>html 파일로 작성한다</li>
</ul>
2. 적용하고 싶은 html에 {% include "파일경로" %} 으로 가져온다
//home.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
{% include "sample.html" %}
<!-- 여기부터 작성했던 코드가 들어온다 -->
</body>
</html>
nunjucks 설치법
https://hancoco.tistory.com/73
[220128] nunjucks 설치, 세팅, 사용
목록 1. 템플릿엔진 2. nunjucks 설치 3. nunjucks 세팅 4. nunjucks 사용 5. nunjucks 흐름 이해도 (링크) node.js 시작하기전 프로그램 세팅하는 법은 여기에! https://hancoco.tistory.com/70?category=1035202 [220125] 맥북에
hancoco.tistory.com
'프로그래밍 > nodejs' 카테고리의 다른 글
| [220221] nvm이 맥북 m1 칩에 설치되지 않을때. (0) | 2022.02.21 |
|---|---|
| [220127] 상수와 리터럴의 차이, 객체리터럴, 템플릿리터럴 (0) | 2022.02.10 |
| [220209] 세션 사용하기 : express-session, memorystore (0) | 2022.02.09 |
| [220209] 라우터 2개 사용하기, 라우터를 폴더화 시키는 2가지 방법 (0) | 2022.02.09 |
| [220208] 라우터와 미들웨어, 매개변수 next, 라우터 매개변수 (0) | 2022.02.09 |
댓글