[Express] 1. 설치방법과 라우팅

 

Express란?

 

Express는 Node.js를 위한 빠르고 개방적인 간결한 웹 프레임워크 이다.(공식 홈페이지 설명)

 

그럼 프레임워크(framework)란 무엇인가? 프레임워크는 라이브러리를 포함하는 상위 개념으로, 무언가를 구현하기 위해 여러 라이브러리가 합쳐진 형태이다. 따라서, 웹 프레임워크는 '웹 서버'를 구현하기 위한 목적으로 만들어진 프레임워크다. 

 

프레임워크와 라이브러리의 차이점은, 라이브러리는 사용자가 (도서관에서 책을 빌리듯이) 필요할때 불러서 사용한다.

하지만 프레임워크는 그 기능이 필요하면 사용자가 정해진 규칙(frame)에 맞춰서 일해야(work) 한다.

 

요약하자면, Express란 NodeJS를 사용하여 쉽게 웹 서버를 구성할 수 있게 만드는 프레임워크이다.

 

---

Express 설치

 

npm install express --save

다른 모듈들을 설치하는것과 같이 npm 을 이용하여 간단하게 설치한다.

---

Hello world 예제

 

아래 예제는 express 공식 홈페이지 (https://expressjs.com/ko/starter/hello-world.html)에서 가져왔다.

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

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

app.js라는 파일에 위 코드를 추가하고, node app.js 명령을 실행한 다음 브라우저에서 http://localhost:3000/을 로드하면 결과물을 확인할 수 있다.

 

이제 코드를 간단하게 살펴보자.

const express = require('express')	// require을 통해 express를 가져온다.
const app = express()			// express의 반환값을 저장한다.
const port = 3000			// port값을 3000으로 지정한다.

express 모듈을 불러온다음, Express 애플리케이션을 나타내는 app 객체에 저장한다.

 

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

위 내용은 기존 Node.js로만 서버를 만들때의 아래 코드와 같은 기능을 한다.

const server = http.createServer((req, res) => {
    var _url = req.url;
    var pathname = url.parse(_url, true).pathname;
    if (pathname === '/') {
        response.writeHead(200);
        response.end('Hello, World!\n');
    }
});

server.listen(port, hostname, () => {
    console.log(`Example app listening on port ${port}`);
});

아직 정확한 원리는 잘 모르겠지만,  얼핏 보기에도 훨씬 코드가 간결해진 것을 확인할 수 있다.

---

app.get

app.get(path, callback [, callback ...])

app.get 메소드는 HTTP GET 요청을 지정된 경로(path)로 라우팅하고, 지정된 콜백함수(callback)를 실행한다.

 

여기서 라우팅이란, 간단히 말해서 어떠한 네트워크 안에서 통신되는 데이터를 보낼 경로를 선택하는 과정이다.

자세한 내용은 express.js api 문서 참고 (https://expressjs.com/ko/4x/api.html#app.get.method)

 

+

GET 요청이 아닌 HTTP POST 요청을 받으려고 할 때에는, app.post를 사용하면 된다. 사용방법은 app.get과 동일.

---

app.listen

app.listen([port[, host[, backlog]]][, callback])

app.listen 메소드는 Node.js에서의 server.listen 메소드와 동일하다.

즉, 연결을 수신하는 HTTP 서버를 시작하고, 해당 포트(port)로 들어오는 연결들을 대기한다.

---

Route Parameter

 

기존의 생활코딩 WEB 강의에서는 각 게시글의 URL을 http://localhost:3000/?id=HTML 와 같이 쿼리스트링으로 사용했는데,

쿼리스트링은 요즘 잘 사용하지 않는 방식이라서 URL을 http://localhost:3000/page/HTML 과 같이 바꾼다고 한다. 이러한 방식의 URL을 Clean URL (혹은 Pretty URL)이라고 부른다.

 

그렇다면, 위 URL에서 "HTML"에 해당하는 부분을 어떻게 읽어내야 할까?

방법은 Express.js 공식홈페이지-guide-Route-Route parameters에 나와있다.(https://expressjs.com/en/guide/routing.html)

/*
Route path: /users/:userId/books/:bookId
Request URL: http://localhost:3000/users/34/books/8989
req.params: { "userId": "34", "bookId": "8989" }
*/

app.get('/users/:userId/books/:bookId', (req, res) => {
  res.send(req.params)
})

위의 코드의 실행 결과는 { "userId": "34", "bookId": "8989" } 이다.

따라서, http://localhost:3000/page/HTML에서 "HTML"만 추출해서 출력하려면 다음과 같이 사용하면 된다.

app.get('/page/:pageId', (req, res) => {
  res.send(req.params.pageId);
})

---

리다이렉트

// Node.js
response.writeHead(302, { Location: `/page/${post.id}` });
response.end();

기존 Node.js에서 이렇게 리다이렉트 하던 것을

// Node.js + express
response.redirect(`/page/${post.id}`);

express에서는 이렇게 간단히 사용할 수 있다.