함께 성장하는 프로독학러

2. Express 본문

Programming/Node.js

2. Express

프로독학러 2018. 6. 15. 18:25

안녕하세요, 프로독학러 입니다.


이번 포스팅에서는 Node.js 를 이용해 웹 어플리케이션을 만드는 것을 좀 더 편하고 빠르게 할 수 있도록 도와주는 프레임워크인 Express 에 대해서 알아보도록 하겠습니다.


1. Express 소개


Express 는 Node.js 를 위한 빠르고 개방적인 간결한 웹 프레임워크

from - expressjs.com/ko


Express 는 웹 및 모바일 어플리케이션을 위한 일련의 강력한 기능을 제공하는 간결하고 유연한 Node.js 웹 어플리케이션 프레임워크입니다.


Express 를 사용하지 않고도 웹 어플리케이션을 만들수는 있지만, 일일히 다 구현하려면 상당히 복잡합니다.


일일히 다 신경쓰기 복잡하고 귀찮은 것들을 Node.js 의 웹 프레임워크를 이용하면 쉽게 구현할 수 있습니다.


Express 이외에도 Koa, Hapi 등의 웹 프레임워크가 있지만, 가장 많이 사용하는 Express 에 대해서 알아보도록 하겠습니다.

(나머지는 할 줄 모릅니다 허허)


2. Express 설치


Node.js 에서 Express 를 사용하기 위해서 먼저 설치해 보도록 합시다.


프로젝트 파일 경로에서 다음의 명령어를 입력해 설치합니다.

(프로젝트 경로에 package.json 파일이 생성되어 있어야 합니다 => npm init -y 를 통해 프로젝트를 초기화)


npm install --save express


설치가 잘 되었는지 확인해 볼까요?


(./package.json)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
  "name""nodeJS-tuts",
  "version""1.0.0",
  "description""",
  "main""index.js",
  "scripts": {
    "test""echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author""",
  "license""ISC",
  "dependencies": {
    "express""^4.16.3"
  }
}
 
cs


package.json 파일에 dependencies 부분에 express 가 있으면 정상적으로 설치가 완료된 상태입니다.


3. Express 사용


그럼 본격적으로 Node.js 환경에서 express 를 사용하기에 앞서 ES6 를 express 에서 사용할 수 있도록 설정하도록 하겠습니다.


ES6 를 express 에서 사용하려면 babel 을 설치해야합니다.

babel 은 ES6 로 작성된 코드를 ES5 로 변환해 주는 역할을 합니다.


npm install --save-dev babel-cli
npm install --save-dev babel-preset-es2015


위의 명령어를 통해 babel 을 설치해 줍니다.


babel-node 명령어를 통해 ES6 로 작성된 코드를 실행할 수 있습니다.

('babel-node 파일명' 과 같은 형식으로 실행합니다)


그리고 추가적으로 프로젝트 파일의 루트 경로에 .babelrc 파일을 생성해 다음과 같은 코드를 작성해 줍니다.


(./.babelrc)

1
2
3
{
"presets": ["es2015"]
}
cs


위 코드를 통해 babel 이 es2015 프리셋을 사용하도록 설정해 주었습니다.


3-1) 포트 리스닝


그럼 이제 test.js 파일을 만들어 보겠습니다.


(./test.js)

1
2
3
4
5
6
7
8
9
10
import express from 'express';
 
const app = express();
 
const port = 3000;
 
app.listen(port, () => {
    console.log('Express is listening on port', port);
});
 
cs


위의 코드의 첫 번째 줄에서 express 를 불러왔습니다. (ES5 의 require 와 같습니다)

3 번째 줄에서 express 를 실행시켜 상수 app 에 할당했습니다.

코드의 7 번째 줄에서 5 번째 줄에서 지정한 포트에 express 를 listen 했습니다. 그리고 포트 리스닝에 성공하면 실행할 콜백함수로 콘솔창에 'Express is listening on port' + 포트번호 가 뜨도록 작성했습니다.


그럼 위의 test.js 파일을 실행시켜 보도록 하겠습니다.


babel-node test.js


위의 명령어를 통해 babel 을 통해 ES6 로 작성된 test.js 파일을 실행 했습니다.



3000번 포트를 제대로 리스닝하고 있다는 문구가 뜹니다.


3-2) 라우터


우리가 지정한 3000 번 포트에 제대로 리스닝 하고 있으니 브라우저를 통해 3000 번 포트에 접속해 보겠습니다.


localhost:3000


브라우저의 주소창에 위와 같이 입력해 봅시다.



'Cannot GET / ' 가 창에 뜬다면 정상입니다.


현재 상태는 3000 번 포트를 express 가 리스닝 하고 있는 상태지만, 어떤 path 도 라우트 되지 않은 상태입니다.


localhost:3000 에 접속했을 때 어떤 문구가 화면에 뜨도록 하고 싶다면 어떻게 해야할까요?


이를 이해하기 위해 먼저 path 와 쿼리 스트링에 대해서 이해할 필요가 있습니다.


http://a.com/topic?id=1


위와 같은 url 이 있다고 생각해 봅시다.

대부분의 웹 어플리케이션의 url 은 위와 같은 형식으로 이루어 져 있습니다.

위의 url 에서 'http://' 은 프로토콜을 의미합니다.

프로토콜 뒤에 나오는 'a.com' 을 도메인 이라고 부르고,

도메인 다음에 나오는 / 이후의 'topic' 같은 녀석을 path 라고 부릅니다.

path 이후의 ? 다음에 나오는 'id=1' 같은 녀석은 query string 이라고 부릅니다.

웹 어플리케이션은 url 의 path 와 qurery string 을 이용하여 어떤 정보를 불러올지 결정합니다.


localhost:3000 은 localhost:3000/ 와 같습니다. 즉, '/' 경로인 것입니다.


test.js 파일을 아래와 같이 수정해 보겠습니다.


(./test.js)

1
2
3
4
5
6
7
8
9
10
11
12
13
import express from 'express';
 
const app = express();
 
const port = 3000;
 
app.get('/', (req, res) => {
  return res.send('Hello world');
});
 
app.listen(port, () => {
    console.log('Express is listening on port', port);
});
cs


위의 코드에서 7번째 줄에서 '/' 경로로 GET 방식으로 접근하면 브라우저 창에 'Hello world' 를 출력하도록 하였습니다.


app.get 에서 get 은 http 통신 방법중 GET 방식을 의미하는 것으로, POST, PUT, DELETE 의 방식을 이용하려면 app.post(...), app.put(...), app.delete(...) 과 같이 사용하면 됩니다.

* HTTP 통신 방법에 대해 자세히 알고싶다면 아래의 링크를 참조해 주세요.

https://velopert.com/332


get, post, put, delete 메소드의 인자는 두 개가 오는데, 첫 번째는 해당 메소드로 접속하는 경로입니다. 위의 예제에서는 '/' 경로로 설정되어 있죠. (생략한것과 동일) 그리고 두 번째 메소드는 콜백함수로, 콜백함수의 인자는 req, res 입니다. req 는 요청으로 사용자로부터 받은 요청을 의미하고, res 는 반응(response)로 사용자에게 반응하는 객체를 의미합니다.

위의 예제에서는 res.send 를 통해 'Hello world' 를 브라우저창에 출력하도록 했습니다.

(res.send 는 body 태그 안에 들어갈 내용을 결정합니다 - HTML 태그를 사용할 수도 있습니다)


파일을 수정했으면 명령 프롬프트에서 이전에 실행시켰던 test.js 를 종료시키고(ctrl + C 두 번) 다시 test.js 를 babel-node 로 실행시켜 줍니다.


브라우저를 통해 확인해 보겠습니다.



body 태그안에 Hello world 가 잘 들어간 것을 알 수 있습니다.


같은 방식으로 '/test' 경로로 접속했을 때 h1 태그로 감싸진 'Hello test!' 가 뜨도록 코드를 작성해 보겠습니다.


(./test.js)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import express from 'express';
 
const app = express();
 
const port = 3000;
 
app.get('/', (req, res) => {
  return res.send('Hello world');
});
 
app.get('/test', (req, res) => {
  return res.send('<h1>Hello test!</h1>');
});
 
app.listen(port, () => {
    console.log('Express is listening on port', port);
});
cs


저장한 뒤 test.js 를 babel-node 로 재시작하고 'localhost:3000/test' 로 접속해 봅시다.



3-3) 정적 파일 서비스


express 에서 정적 파일을 서비스 하는 방법은 무엇일까요?


먼저 프로젝트 파일 경로에서 public 이라는 폴더를 하나 생성해 줍니다.

그리고 public 폴더 안에 윈도우에서 기본으로 제공되는 이미지인 Koala.jpg 를 넣어봅시다.


그리고 test.js 파일을 아래와 같이 수정합니다.


(./test.js)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import express from 'express';
 
const app = express();
 
const port = 3000;
 
app.use(express.static('public'));
app.get('/', (req, res) => {
  return res.send('Hello world');
});
 
app.get('/test', (req, res) => {
  return res.send('<h1>Hello test!</h1>');
});
 
app.get('/koala', (req, res) => {
  return res.send('<img src="/koala.jpg">');
});
 
app.listen(port, () => {
    console.log('Express is listening on port', port);
});
cs


코드의 7번째 줄에서 정적파일을 서비스할 폴더 경로를 지정했습니다.

방식은 위와 같이 app.use(express.static(폴더 경로)); 로 합니다.

위 코드를 통해서 public 경로에 있는 정적파일을 서비스할 수 있게 됩니다.


코드의 16 번째 줄에서 '/koala' 경로로 들어오면 public 경로에 있는 코알라 사진을 img 태그를 통하여 보여주도록 하였습니다.

(원래 koala.jpg 의 경로는 'public/koala.jpg' 이지만 7번째 줄의 코드 덕분에 바로 '/koala.jpg' 로 접근할 수 있습니다)


babel-node 로 test.js 를 재시작한 뒤, localhost:3000/koala 로 접속해 봅시다.



img 태그를 통해 koala.jpg 파일이 제대로 보여지고 있습니다.


여기까지...


Node.js 의 웹 프레임워크 중 하나인 express 에 대해서 알아보고, 설치 및 실행까지 해 보았습니다.

express 의 기본 동작 원리는 원하는 port 를 리스닝 한 뒤에 해당 포트에서 요청받는 라우트 경로에 따라 원하는 결과를 라우트를 통해 보여주는 것입니다. (보여주는것 이외에도 DB와 통신을 한다거나 하는 역할도 수행합니다.)


다음 포스팅에서는 Node.js / express 환경에서 MongoDB 를 사용할 수 있도록 해주는 모듈인 mongoose 에 대해서 알아보도록 하겠습니다.


감사합니다.


**참고 자료 (항상 감사드립니다)

https://velopert.com/332

https://opentutorials.org/course/2136


*이 포스팅이 도움이 되셨다면 다녀가셨다는 표시로 공감 부탁드릴게요! (로그인 하지 않으셔도 공감은 가능합니다 ㅎㅎ)

Comments