1. nunjucks의 설치와 세팅
지난 번에 이어서 html을 쉽게 가져오기 위해 템플릿 엔진을 사용하는 방법을 알아보자.
nunjucks도 express와 마찬가지로 패키지이므로 설치 방식도 동일하게 npm을 사용하면 된다.
터미널에 다음과 같이 입력하면 자동으로 nunjucks가 설치된다.
npm install nunjuckspackage.json에서 문제 없이 설치가 끝났는지를 확인할 수 있다.
이제 이를 사용하기 위해 js 문서에도 코드를 몇 줄 추가해주어야 한다.
const nunjucks = require('nunjucks')외부 객체인 nunjucks를 현재 js로 가져온다.
app.set('view engine', 'html')nunjucks를 사용하기 위한 express의 세팅이다.
nunjucks.configure('views', {express:app})nunjucks를 express에 연결하는 코드이다. 인자값 2개는 각각 string과 object 형태인데,
string은 폴더의 이름을 지정하면 되며, 이 폴더 안의 html을 가져오겠다는 것을 뜻한다.
여기까지 하고 작성한 코드를 보면 다음과 같다.
/* server.js */
const express = require('express')
const app = express()
const nunjucks = require('nunjucks') // 새로 추가
app.set('view engine', 'html') // 새로 추가
nunjucks.configure('views', {express:app}) // 새로 추가
app.listen(3000, () => {
console.log('서버 실행중')
}
app.get('/', (req, res) => {
res.send('<h1> hello </h1>')
}
app.get ('/ab', (req, res) => {
res.send('<h2> hello ab </h2>')
}
2. nunjucks의 활용
이제 nunjucks를 활용할 준비가 끝났다.
views라는 폴더를 만들고, 그 안에 html을 하나 만든 뒤, nunjucks를 통해 브라우저에서 불러와보자.
/* index.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>
<h2> hello nunjucks </h2>
<form method='get' action='./'>
<input type="text" name='name'>
<input type="password" name='pw'>
<input type="submit" value="로그인">
</form>
</body>
</html>
이 views 폴더 안의 index.html를 server.js를 이용해 불러와보자.
기억해야할 점은, 이 작업을 수행한 후 html을 불러오는 것은 단순히 우리 컴퓨터에 저장된 html 문서를
브라우저에서 여는 작업이 아니라, 호스트가 자신인 서버로부터 html 파일을 받아서
그 파일을 브라우저로 출력하는 작업이라는 것이다.
로컬 호스트 페이지를 다음과 같이 수정해보자.
app.get('/', (req, res) => {
res.render('index.html')
}
send를 render 메소드로 바꾸고, 원하는 html파일을 인자값으로 준다.
이후 다시 브라우저에서 localhost:3000 에 접속하면 우리가 만든 html 파일을 주는 것을 확인할 수 있다.
cf) 제출 메소드에 따른 코드 작성
html문서에서 form element의 메소드는 디폴트 값으로 get을 가지는데, 이를 post로 바꿀 경우,
지금까지 js에서 작성한 코드에 대응하는 코드가 없기 때문에 그 상태에서 submit할 경우, 에러가 났다고 출력된다.
이를 해결하기 위해서는 지금까지 get으로 작성한 코드를 post로도 동일하게 작성을 하거나,
get대신 use 메소드를 사용해야한다.
다음 작업을 하기 전에, html에서 form element의 method를 post로 바꾸고, js의 get 메소드를 use로 바꿔두자.
2.1. JS 파일에서 html에 변수 넣기
이제 js를 통해 html에 변수를 넣는 방법을 알아보자.
우선 js에서 변수를 선언하고, render의 인자로 그 변수를 포함시킨 다음, html에 그 변수를 추가하는 작업을 거쳐야한다.
2.1.1. JS에서 변수 추가
방금 작성한 index.html을 렌더링시키는 코드를 다음과 같이 수정해보자.
app.get('/', (req, res) => {
let i = 1000 // 변수 선언, 값 지정
let j = 2000
res.render('index.html', {
num : i,
num2 : j // 두 번째 인자값으로 변수들을 모은 객체를 준다.
})
})우선 코드 블럭 내부에 변수를 원하는 대로 선언해준다.
그리고 render 메소드에 두 번째 인자값을 주는데,
이 두 번째 인자는 선언한 모든 변수들을 저장한 객체 형식이다.
이제 다시 html로 이동해 선언한 변수를 삽입해보자.
다음과 같이 body 가장 아래에 코드를 추가한다.
<h3> {{num}} {{num2}} </h3>
// 객체의 value가 아닌 key를 써주는것에 유의한다.
이제 다시 브라우저에서 불러오면 key에 대응하는 변수의 값을 출력해주는 것을 볼 수 있다.
'Nodejs > Node.js Set up' 카테고리의 다른 글
| Node.js #2 server (0) | 2022.01.31 |
|---|---|
| Node.js Setup #3 -module, server (0) | 2022.01.28 |
| Node.js Setup #2 (0) | 2022.01.26 |
| Node.js Setup #1 (0) | 2022.01.26 |