[220128] nunjucks 설치, 세팅, 사용

목록

1.   템플릿엔진

2.   nunjucks 설치

3.   nunjucks 세팅

4.   nunjucks 사용

5.   nunjucks 흐름 이해도 (링크)

 

---

node.js 시작하기전 프로그램 세팅하는 법은 여기에!

https://hancoco.tistory.com/70?category=1035202 

[220125] 맥북에서 터미널, nodejs 개발환경 세팅하기 (M1칩) + 용어설명, npm, nvm, express

---

템플릿 엔진

• 웹 개발에서, 지정된 템플릿 양식과 데이터가 합쳐져 html문서를 출력하는 소프트웨어.
• express, nunjucks도 많은 템플릿 엔진 중 하나다.
• 템플릿 엔진을 사용하는 이유
  • 1. html 파일을 만들어 주기 위해서.
  • 2. 프로젝트한 내용을 express를 통해 넣으려고 함
  • html이 하는 역할과 express가 하는 역할을 구별하기 위해서.

 

 

항상 뭐든지 새로 사용할때는 세가지를 기억하자

1. 가져오기
2. 세팅하기
3. 사용하기

 

---

 

http개념을 이해해야하는 이유

인터넷이 생기면서부터 생성된 http를 이루는 기본적인 골격은 바뀌지않았다. 세부적인 업데이트가 있었을뿐.

하지만 웹서버(http 통신을 하는 프로그래밍)는 계속해서 발전을 해왔다.

즉, 라이브러리는 바뀌어도 http의 기본원리는 바뀌지않는다는 것을 기억해야한다.

(예로 들어 express가 내년이 지나면 없어질 수도 있는거임.)

그러니 http의 개념에 중시하고 라이브러리는 사용방법만 익혀두는게 현명하다.

 

 

url 간단 정리!

html을 배울때 잠깐 정리했었던 url!

https://hancoco.tistory.com/11

[211229] url, uri, form

 

nunjucks를 통해 다룰 줄 알게 된 이 시점에서 다시한번 간단히 정리해보기!

http://google.com:3000/main?id=test&&page=12

 

• 프로토콜 : 웹브라우저와 웹서버가 데이터를 주고받기 위해 만든 통신규칙. 서버에 접속할때 어떤 방식으로 통신할 것인가?
• 호스트, 도메인 : 특정 인터넷에 접속되어 있는 컴퓨터
• 포트 : 연결되어있는 컴퓨터 안에 여러 서버가 있는데 그 중 몇번째 서버에 접속중인지 알려준다. 생략시 기본 포트로 연결됨.
• 패스 : 연결되어 있는 컴퓨터의 어떤 디렉토리(폴더)안의 어떤 파일인지 알려줌
• 쿼리스트링
  • node.js를 다루려는 목적 중 하나이며, 웹서버에 정보전달을 해준다.
  • ?로 시작하며, 값 사이에 &&로 연결하고, key값과 value값을 =로 연결한다.

 

 

---

 

nunjucks 설치

const nunjucks = require('nunjucks')

npm intall nunjucks -> express처럼 외부 라이브러리 설치하듯 진행하면 된다.

설치 위치는 node_modules. pwd를 쳤을때 내 경로가 어디인지 확인을 해야한다.

1. ls를 쳤을때 내 경로가 node_module이 있어야 함
2. package.json이 있는 곳에서 npm install을 해야함.

node_modules를 봐서 확인할 수 도 있지만, package.json을 보면 쉽게 바로 알 수 있다.

 

 

---

 

 

nunjucks 세팅

const express = require('express')
const nunjucks = require(`nunjucks`)
cont app = express()

app.set(`view engine`, `html`)//nunjucks를 사용하기 위한 express 세팅

//첫번째 인자 string, 두번째 인자 객체
//첫번째 인자 : 폴더명
//nunjucks.configure('',{})

nunjucks.configure(`view`,{express:app}) //nunjucks 기본 폴더 세팅
//view라는 폴더에서 html을 다 관리할거야
//express는 app

 

 

---

 

 

nunjucks 사용

• nunjuck를 사용하는 이유 : 텍스트를 쓰면서 응답을 주는 행위를 좀 더 편하게 하기 위해서 사용한다
• send() 메서드 : string을 불러오는 메서드
• render() : 템플릿엔진을 불러올수 있는 메서드 --> 얘를 사용

const express = require(`express`)
const nunjucks = require(`nunjucks`)
const app=express()

app.set(`view engine`, `html`)
nunjucks.configure(`views`,{express:app})

app.get(`/`,(req,응답)=>{
    응답.render(`index.html`)
})

app.listen(3000,()=>{
    console.log(`서버 시작`)
})

 

 

 

---

nunjucks 흐름 이해도 (링크)

https://hancoco.tistory.com/92

[220210] 템플릿 엔진, nunjuck란?