Node.js - Express,Nunjucks 를 이용해서 기본 웹 서버 만들어보기

안녕하세요.

Hynn 입니다.

 

이번 포스팅에서는 Node.js 에서 Express/Nunjcks 를 사용하여 기본 웹 서버를 만들어보도록 하겠습니다.

이제 각 내장객체 등을 이용해서, 동작하는 방식에 대해서도 같이 설명을 드리면서 작성해보도록 하겠습니다.

 

여기서 등장하는 Express, Nunjucks 모듈이 어떠한 역활을 하는지, 어떠한 모듈인지에 대한 정의와 함께,

이를 실제 사용하여, 기초적인 웹 서버를 동작하도록 코드를 작성해보도록 하겠습니다.

 

==============

1. App Application Framework 란?

2. Express 란?

3. Nunjucks 란?

4. Node.js 와 Express,Nunjucks 를 활용하여 기본 웹 서버 작성해보기

==============

1. App Application Framework 란?

App Application Framework, 웹 애플리케이션 프레임워크는 필요에 의해 각종 기능들을, 개발자들이 사전에 만들어두고, 그것을 이용해서 사용자가 보다 쉽게 기능을 사용하고, 간결하게 작성할 수 있도록 돕는 일종의 도우미입니다.

하지만 이러한 웹 애플리케이션 프레임워크는 근본적으로, 프로그램의 원칙과 방법을 이용하여 각종 라이브러리와 미들웨어 등을 내장하여, 개발하기 편하게 하는 것에 장점을 두고 있다고 할 수 있습니다.

 

이는 즉, 수많은 개발자들이 각자의 스타일대로 구축부터 할 경우, 코드가 각각 다를 수 밖에 없습니다.

예를 들어, 이전 포스팅에서 언급했듯이, 서버에서 TCP 연결에 대한 코드를 작성한다고 한다면, 개발자마다 표현하는 변수, 작성등이 다르게 될 수 있지만, 이러한 웹 애플리케이션 프레임워크의 등장으로, 규칙이 강제되고, 코드, 구조의 통일성이 향상될 수 밖에 없습니다.

 

이것이야말로 프레임워크의 가장 큰 장점이라고 할 수 있습니다.

여기서 이 포스팅에서는 대표적으로 사용되는 "Express" , "Nunjucks" 라는 웹 앱 프레임워크 2가지를 살펴볼 예정입니다.

 

2. Express 란?

Express 는 Node.js 에서 가장 보편적으로, 가장 많이 사용되는 웹 앱 프레임워크 입니다.

현재 Express 개발자들에게 차세대 Koa 라는 프레임워크가 있다고는 하나, 현재시점에서도 Express 는 가장 많은 사용율을 차지하고 있는 웹 앱 프레임워크이기 때문에 이를 기초적으로 다룰 예정입니다.

 

Express 를 이용해서 웹 서버를 구축하는 것을 정식명칭으로는 REST 서버라고도 합니다. 

REST 는 REpresentational State Transfer 의 약자이며,  이 REST 는 HTTP URL 을 통해 자원을 명시하고, HTTP 4개의 Method, Post, Get, Delete, Put 을 통해 자원에 대한 CRUD 절차를 적용하는 것으로 이해하면 되겠습니다.

 

Express 에서 주로 다루게 될 것은, 라우팅, 미들웨어 사용이 있겠습니다.

 

3. Nunjucks 란?

Nunjucks 에 있는 기능은 사실 Express 에도 존재합니다.

여기서 주로 다루게 될 사항은 "View Engine" 입니다. 이것은 서버에서 처리한 데이터 결과값을 정적인 페이지 (ex.HTML)에 보다 편리하게 출력해주기 위해 사용되는 기능입니다. 이를 통해 View Engine 에서 요구하는 형태의 파일을 만들고, 이 문서에 서버에서 처리한 데이터를 전달하여, 해당 데이터를 화면에 출력할 수 있게 하는 것입니다. 

 

이를 사용하면, View Engine 에서 요구하는 문법에 맞춰 코드를 작성하면, Engine 에서 자동으로 HTML 을 "렌더링" 하기 때문에, HTML 에서 보다 간결할 뿐 아니라, 구조 분석에 용이한 형태로 작성되기 때문에, 더욱 간결하고, 명확하게 코드를 작성할 수 있습니다. 

물론 이 View Engine 은 Nunjucks 뿐 아니라, Express, ejs 등에도 내장되어 있기 때문에, 사용자가 학습하고자 하는 웹 앱 프레임워크에 맞추어 공부를 하시면 되겠습니다.

 

각 엔진별로는 문법이 조금씩 다를 수 있기 때문입니다. 

 

4. Node.js 와 Express,Nunjucks 를 활용하여 기본 웹 서버 작성해보기

이제 본격적으로 서버를 만들어보도록 하겠습니다.

먼저 이를 위해서는, 각자의 역활이 되는 Directory 를 생성해야 합니다.

 

위에서 언급했듯이, Routing 에 대한 Directory, 그리고 작동을 위한 Controller, 실제 보여지게 될 View Directory 가 되겠습니다. 실제 미들웨어 역활을 컨트롤러가 하는것으로 생각하시면 되겠습니다.

 

그리고 아래의 명령어를 통해, npm 을 사용해, pakage.json 과 express, nunjucks 를 설치합니다.

npm init
npm install express
npm install nunjucks

*** 

npm init -y
npm install express nunjucks

 위 3개의 명령어를 아래의 2개 명령어로 단출하게 정리도 가능합니다.

 

그리고 .gitignore 파일을 아래의 명령어로 생성하여, package.json 을 비롯한, 웹앱 프레임워크를 제외하도록 설정해야 합니다.

vi .gitignore

****

.node_modules/
package.json*
package-lock.json*

이제 "server.js" 파일을 생성하여 기본 코드를 작성해야 합니다.

 

const express = require('express')
const app = express()
const router = require('./routes')
const route = express.Router()
const nunjucks = require('nunjucks')

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

app.use(express.static('public'))
app.use(express.urlencoded({ extended:false }))
app.use(router)

app.use('/views',route)

app.get('/', (req,res)=>{
    res.render('index.html')
})

app.listen(3000,()=>{
    console.log('Fuckyou')
})

먼저, 이 작성은, 이후에 route 에 대한 전달의 대한 경로를 정하고 작성하는 것이니만큼 미리 작성이 가능합니다.

const 를 이용해 "require" 를 이용해, express , nunjucks 를 가져옵니다.

그리고 router 변수안에는, route 에 대한 변수를 각각 반영합니다.

 

그리고 나서는,  view engine 을 작성합니다.우리는 "HTML" 을 출력할 것이니, "View Engine", "HTML" 작성을 하고, Nunjucks 를 사용하여 그를 작성합니다.

 

그리고 정적페이지를 view 에 저장하였습니다. view 안에는, Board , Gallery, Notice 와 같이 일반적인 게시판 구조형태로 담아두었습니다.

여기서 우리의 예시는 "Board" 만을 작성할 예정입니다.

 

app.get Method 를 이용해서, 최초 페이지는 "Index.html" 을 Rendering 하도록 작성하고, App.listen 을 사용하여, 서버에 대한 코드의 작성을 완료하면, Server.js 파일의 작성이 완료됩니다.

 

이제 Board.route.js 파일을 사용하여, Routing 기능을 구현해야 합니다. 

const express = require('express')
const router = express.Router()
const contoller = require("../controllers/board.controller")

router.get("/list",contoller.list)
router.get("/write", (req,res)=>{
    res.render("board/write.html")
})
router.post("/write", contoller.write)
router.get("/view", contoller.view)
router.get('/delete',contoller.delete)
router.get('/modify', contoller.modify)
router.post('/modify', contoller.modified)

module.exports = router

 

먼저 상수로 express, router 에 대한 정보를 변수에 담습니다.

그리고 이후에 연계할 Controller 와의 연결도 미리 진행해줍니다.  " ../ " 의 의미는 라우트 경로의 상위 경로 이동 후 다시 Controller 경로로 이동하도록 지정해두었습니다.

 

그리고 각각의 Route 에 이제 "get", "post" 의 대한 Method 를 사용하여, 어떠한 경로로 이동될지, 동작할지에 대한 코드를 작성합니다.

첫번째 인자는, '/file name', 두번째는 Controller 에서 동작할 함수를 작성합니다.

 

그리고 마지막으로 Moudle.exports 의 대한 코드를 작성합니다.

 

이제 Controller.board.js 파일을 작성하여 마무리 해보도록 하겠습니다.

 

const items = [] 

exports.list = (req,res) => {
    res.render("board/list.html", {items})
}
exports.write = (req,res) => {
    const {name, content, subject} = req.body
    items.push({content, name, subject})
    res.redirect(`/board/view?index=${items.length-1}`)
    console.log(items)
}
exports.view = (req, res) => {
    const {index} = req.query
    const item = {
        ...items[index],index}
    res.render('board/view.html', {item})
}
exports.modify = (req,res) => {
    const {index} = req.query
    const item = {
        ...items[index],index}

    res.render('board/modify.html', {item})
}

exports.modified = (req,res) => {
    const {index,subject,content,name} = req.body
    items[index].subject = subject
    items[index].content = content
    items[index].name = name

    res.redirect(`/board/view?index=${index}`)
}

exports.delete = (req,res) => {
    const {index} = req.body
    items.splice(index,1)
    res.redirect("/board/list")
}

이 Controller 에서는 앞서 Route 에서 지정한 사항에 대한 실제 동작을 어떻게 하는 것인지에 대한 내용을 작성하는 것입니다.

"get" 으로 명명된 것은, 대체적으로 페이지에 대한 이동과, 데이터의 표현, Rendering 으로 나뉩니다,

즉 "get" 의 경우, 페이지로 이동할때, 어떠한 페이지로 이동할지, 어떠한 데이터를 표현하고 그를 렌더링 할지를 나타냅니다.

 

하지만 "Post" 라고 명명한, 글작성, 수정의 경우 데이터가 변환되거나 추가되기 때문에 그에 대한 내용을 작성해야 합니다.

그를 위해, 구조형 선언 및 Array 배열의 빈 배열을 사용해서 items 이라고 명명된 변수에 데이터를 담고 그 데이터를 HTML 에 아래의 예시처럼 데이터를 표현할 수 있도록 작성해야 합니다.

 

*HTML 예시*

    <h2>View Page</h2>

    <ul>
        <li>제목 : {{item.subject}}</li>
        <li>작성자 : {{item.name}}</li>
        <li>내용 : {{item.content}}</li>
    </ul>

    <a href="/board/list">목록가기</a>
    <a href="/board/modify?index={{item.index}}">수정</a>
    <a href="/board/delete?index={{item.index}}">삭제</a>

 

기본적인 작업은 모두 완료되었습니다.

이전에 JavaScript 문법을 이미 학습하셨다면, 문법의 대한 이해는 어렵지 않을 것으로 생각됩니다.

 

다음 포스팅에서는 MySQL 과의 연결도 다룰 예정인데요.

JavaScript 관련해서는 가장 핵심적이라 할 수 있는, Promise, Async, Await 에 대한 포스팅과 같이 업로드 예정입니다.

 

감사합니다