NodeJs.익스프레스 기본개념

목차

1. express 기본 설정

2. express 서버 만들기

3. express 사용하기

4. express 코드 설명   4.1. set과 get   4.2. 미들웨어와 use   4.3. 미들웨어 static   4.4. 미들웨어 bodyParser   4.5. 템플릿 엔진 : 넌적스(nunjucks)

---

1. express 기본 설정

 

express 기본 설정을 위해 다음의 코드가 필요하다.

# package.json 생성
$ npm init -y

우선 package 관리를 위해서 package.json을 생성해준다.

 

그 후 express 패키지를 추가한다.

# express 패키지 추가하기
$ npm install express

 

우선 express를 사용하기 위한 세팅은 이걸로 끝났다.

 

 

---

2. express 서버 만들기

 

const express = require('express')
const app = express()

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

 

TCP 서버를 만들었던것과 비슷하게 express도 require로 가져와서, 변수에 담아  실행시켜준다.

 

express()는 net.createServer()와 같은 역할을 한다.

 

app.listen을 실행하여 서버가 열렸을 때 대기상태가 될 수 있도록 해준다.

app.listen( 포트번호, callback)

 

 

---

3. express 사용하기

 

TCP서버를 구현했듯이 express로 서버를 구현해보도록하자.

 

TCP에서 직접 구현했던 기능들이 express에서는 대부분 구현이 되어있다. express 원리는 TCP 서버와 거의 유사하기 때문에 수월하게 익힐 수 있다.

 

한 번 아래의 코드를 살펴보자.

 

// require로 외장모듈인 익스프레스를 가져온다.
const express = require('express')

// require로 템플릿 엔진인 넌적스를 가져온다.
const nunjucks = require('nunjucks')

// express()는 TCP 통신의 createServer()와 같은 역할이다.
const app = express()

// 포트번호를 정하는 코드이며, SERVER_PORT가 있다면 사용하고, 없다면 3000번을 사용한다.
const PORT = process.env.SERVER_PORT || 3000

// 아래의 코드라고 이해하면 편하다.
// 첫 번째 인자, 변수명 | 두 번째 인자, 값
app.set('view engine', 'html')

// 템플릿 엔진인 넌적스를 적용시키는 코드
nunjucks.configure('views', {
    express: app,
})

// express.static('기준이 될 폴더')
app.use(express.static('public'))

// TCP 통신의 bodyParser처럼 인코딩을 해주는 코드
app.use(express.urlencoded({extended: false}))


// TCP 통신에서의 라우터 역할
// method: GET
app.get('/', (req, res) => {
    const name = req.query.name
    res.render('index.html', {name: name})
})


// TCP 통신에서의 라우터 역할
// method: GET
app.get('/user/join', (req, res) => {
    res.render('user/join.html')
})


// TCP 통신에서의 라우터 역할
// method: POST
app.post('/user/join', (req,res) => {
    const { userid, userpw, username } = req.body
    res.redirect('/user/welcome')
})

// TCP 통신에서의 라우터 역할
// method: GET
app.get('/user/welcome', (req, res) => {
    res.send('회원가입 성공')
})


// 클라이언트가 통신할 수 있도록 서버를 시작해둔다.
app.listen(PORT, () => {
    console.log('서버 시작!')
})

 

 

TCP 통신과 비교하면 수월하게 이해가 가능하다. app이라는 변수는 이전의 TCP통신에서 Server와 역할이 같다.

 

직접 구현해야 했던 것들인데, express를 사용하면 이미 구현된 코드를 가져와 사용하기 때문이다.

 

 

---

4. express 코드 설명

 

express를 사용하기 위해서는 여러가지 코드를 알아 두어야한다.

 

 

---

4.1 set과 get

 

app.set()은 키와 값의 형태를 이용하여 데이터를 저장할 수 있다. 나중에 app.get(키)를 이용해 데이터를 가져올 수도 있다.

app.set("키", "값")

 

아래의 app.get()은  주소에 대한 GET 요청이 올 때 어떤 동작을 할지 적는 부분이다.

 

두 번째 app.get의 매개변수 req와 res는 각각 요청, 응답에 관한 정보가 들어있는 객체이다.

 

express에서는 res.write역할을 res.send가 한다.

app.get('주소', '라우터')

app.get('주소', (req, res) => {
    res.send('데이터')
})

 

 

---

4.2 미들웨어와 use

 

미들웨어란, 요청과 응답의 중간에 위치하여 미들웨어라고 부른다.

 

미들웨어는 요청과 응답을 조작하여 기능을 추가하기도 하고, 나쁜 요청을 걸러내기도 한다.

 

미들웨어는 app.use와 함께 사용되며, 아래는 기본적인 형태이다.

app.use(미들웨어)

 

아래의 코드는 본격적인 사용의 예시이다.

// 모든 요청에 전부 실행된다.
app.use((req, res, next) => {
    console.log("Hello World!")
    next()
})

// 메서드 GET이면서, 경로가 '/'인 요청에 실행된다.
app.get('/', (req, res, next) => {
    console.log("Hello World2!")
    next()
}, (req, res) => {
    throw new Error("error")
})

//  에러를 받는 미들웨어
app.use((err, req, res, next) => {
    console.error(err)
    res.status(500).send(err.message)
})

app.use에 경로를 설정하지 않는다면, 모든 요청에 실행이된고, 경로를 지정해준다면 해당 주소의 경우에만 실행이 된다.

 

즉, 첫 번째 인자에는 주소가, 두 번째 인자에는 미들웨어가 들어간다.

 

또한 next() 통해 미들웨어를 여러 개 장착하여 사용할 수 있다. 이 때, 반드시 코드에서 next()를 실행하여야 한다.

 

마지막에 있는 app.use는 에러 처리 미들웨어이며 매개변수로 err, req, res, next 네 개를 받는다. 매개변수를 사용하지 않더라고 네 개를 전부 넣어줘야한다.

 

에러 처리 미들웨어에서 res.status 메서드로 HTTP 상태 코드를 지정할 수 있다. 굳이 에러 처리 미들웨어를 직접 연결핮 않아도 익스프레스가 처리하기도 한다.

 

 

---

4.3 미들웨어 static

 

이전의 static.js와 같은 역할이다. 즉, 정적 파일들을 제공하는 라우터 역할을 하는 미들웨어이다.

 

express에서 기본적으로 제공해 주어 따로 설치나 불러올 필요가 없다.

 

app.use("요청 경로", express.static("실제 경로"))

app.use("/", express.static(path.join(__dirname, "public")))​

 함수의 인수로 정적 파일이 담겨있는 폴더를 지정하면된다.

 

예를 들어 public/css/index.css를 localhost:3000/css/index.css로 접근이 가능하다.

 

이 때, 실제 서버의 폴더 경로에는 public이 있지만, 요청 주소에는 public이 들어가있지 않기 때문에 외부인이 서버의 구조를 파악하기 어려워 보안에 도움이 된다.

 

 

 

4.4 미들웨어 bodyParser

 

요청(req)의 데이터를 해석하여 req.body 객체로 만들어주는 미들웨어이다.

 

보통 폼 데이터, AJAX 요청의 데이터를 처리한다.

(단, 이미지, 동영상, 파일의 데이터는 multer 모듈을 사용하여 처리해야한다.)

 

bodyParser는 아래와 같이 사용한다.

app.use(express.json())
app.use(express.urlencoded({ extended: false }))

 원래는 bodyParser를 따로 설치해야 했지만, 이제는 익스프레스에서 기본적으로 제공해주어 따로 설치할 필요없다.

 

하지만, 직접 설치해야하는 경우가 있는데, 요청의 본문이 버퍼이거나 텍스트 데이터일때 설치해야한다.

$ npm install body-parser

const bodyParser = require("body-parser")

// 요청의 본문이 버퍼일때 사용
app.use(bodyParser.raw())

// 요청의 본문이 텍스트일때 사용
app.use(bodyParser.text())

 

요청 데이터의 종류를 간단히 살펴보자.

• JSON은 JSON 형식의 데이터 전달 방식이다.
• URL-encoded는 주소 형식으로 데이터를 보내는 방식이다. form 전송이 이 방식을 사용한다.
  • { extended: false }이면 노드의 querystring 모듈을 사용하여 쿼리스트링을 해석한다.
  • { extended: true }이면 노드의 qs 모듈을 사용하여 쿼리스트링을 해석한다. qs 모듈은 npm 패키지 이다.

 

 

---

4.5 템플릿 엔진 : 넌적스(nunjucks)

 

HTML에 데이터를 표현하기 위해서는 코드를 모두 적어야한다. 만약 자바스크립트라면 반복문을 통해서 줄일 수 있는데 말이다. 이를 처리할 수 있는 것이 템플릿 엔진이다. 템플릿 엔진을 사용하면 자바스크립트로 HTML을 렌더할 수 있다.

 

기존 HTML과는 문법이 살짝 다르기도 하니 주의하자.

 

넌적스를 사용하기 위해서는 설치해야한다.

$ npm install nunjucks

 

넌적스 연결방법은 다음과 같다.

const nunjucks = require("nunjucks")

nunjucks.configure( "views", {
    express: app,
})

nunjucks.configure의 첫 번째 인수로는 엔진을 적용할 폴더의 경로를 넣고, 두 번째 인수로는 옵션을 넣는다.

 

옵션에서는 express 속성에 app 객체를 연결한다.

 

추가적인 넌적스 문법에 대해서는 다음에 알아보도록하자.