nunjucks란?
템플릿 엔진 중 하나이다.
사용하는 이유, 첫번째 HTML 파일을 만들어주기 위해서이다.
예를들어 프로젝트한 내용을 express를 통해 넣으려고한다.
send안에 넣어야하는데.. html 그 긴코드를 다 넣을 순 없다. (가독성이 떨어짐.)
즉, HTML이 하는 역할과 express가 하는 역할을 구별하기 위해 템플릿 엔진을 쓴다.
종류는 nunjucks, ejs, pug 등등 템플릿 엔진은 많으나, 지금은 numjucks 사용할 것이다.
nunjucks 설치하기
비주얼스튜디오코드에서 사용할 폴더에! npm install nunjucks 를 해주어야한다.
터미널에서 cd로 원하는 폴더로 이동 후
(ls 쳤을 때 node_modules, package.json 등등 외부 라이브러리가 있는 파일에서 npm install을 해야한다.)
npm install nunjucks
입력해준다.
확인하는 방법, package-lock.json에서 nunjucks가 있으면 다운로드 잘 된 것임.
nunjucks 세팅하기
const express =require('express')
const nunjucks = require(`nunjucks`)
const app = express()
app.set('view engine','html') //nunjucks를 사용하기 위한 express 세팅
nunjucks.configure('views',{express:app})//첫번째 인자값 폴더명, 두번째 인자값 express:app이라는 변수명
//views라는 폴더에서 html 관리할거야!
폴더 생성하려면 nunjacks.configure('views') 첫번째 인자값에 해당하는 내용으로, 폴더를 똑같이 생성한다.
views 폴더 안에 index.html 파일 생성
app.use(express.urlencoded({extended:true})) //내장형 내장라이브러리
//외부형은 설치해야됨 npm install body-parser
//const bodyParser = require('body-parser')
// const bodyParser = require('body-parser')
// app.use(bodyParser.urlencoded({extended:true}))목적: post 보낼 때 body영역의 string을 조작하기 위함.
사용하기(HTML, CSS 연결)
app.use(express.static('public')) //정적파일 css 폴더명
app.get('/', (req,응답)=>{
console.log(req.query)
let name = req.query.name
let i = 100
응답.render('index.html', {
num:i,
name:name
})
})
app.use('/board',(요청, 응답)=>{
응답.render('index.html')
})
app.post('/',(req,res)=>{
console.log(req.body);
res.send('post');
});
app.listen(5000,()=>{
console.log('서버시작')
})
use: request method 가 get이든 post든 뭐든지 uri만 같으면 받겠다는 뜻이다.
첫번쨰 인자값 url이없으면 모든페이지 다 적용.
( '/' << 이부분)
res 객체 send()메서드 같은 역할: << render()>>라는 메서드 사용해야됨.
<!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>
<link href="http://localhost:5000/index.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="header">
<div id="logo">
hello nunjucks {{ num }} {{ name }}
</div>
<form method="get" >
<input type="text" name="name" action="/board">
<input type="password" name="pwd" placeholder="password">
<input type="submit" value="로그인">
</form>
</div>
</body>
</html>*{
background: red;
}'백엔드 > Node.js' 카테고리의 다른 글
| [nodejs] 게시판 만들기 CRUD(글쓰기, 읽기, 수정하기, 삭제하기) (0) | 2022.02.03 |
|---|---|
| [nodejs] promise, then, await 구동 순서, 사용 이유 완벽 이해하기 (0) | 2022.01.28 |
| [nodejs] 구조분해 할당, 객체 리터럴, require, 랜덤함수, promise (1) | 2022.01.27 |
| [nodejs] nodejs로 서버로 홈페이지 열기(express 라이브러리 사용) (0) | 2022.01.26 |
| [nodejs] nodejs 설치 및 버전 업데이트, nvm 설치, express 라이브러리 설치, 패키지, 라이브러리 (1) | 2022.01.26 |