Node.js - 웹과 Express.js

1) 웹 서비스 동작 방식

브라우저가 인터넷을 통해 HTTP 요청을 서버에 전달 
→ 서버는 사용자의 HTTP 응답을 브라우저로 전송
→ 브라우저는 HTTP 응답을 사용자에게 적절한 화면으로 노출

 

===HTTP 요청 예시===
GET / HTTP/1.1
Host: localhost:3000
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:93.0) 
Accept: text/html
Accept-Language: ko-KR
Accept-Encoding: gzip, deflate
Connection: keep-alive

 

요청 - 어떤 사용자가 어떤 데이터를 필요로 하는지 등을 담고 있다.

 

===HTTP 응답 예시===
HTTP/1.1 200 OK
X-Powered-By: Express
Content-Type: text/html; charset=utf-8
Date: Mon, 25 Oct 2021 14:10:35 GMT
Connection: keep-alive
Keep-Alive: timeout=5

응답 - 사용자가 요청한 데이터와, 어떤 데이터가 전송되는지 등을 담고 있다.

 

---

2) Express.js

Express.js는 Node.js 웹 프레임워크 중 가장 유명한 프레임워크다.
필요에 따라 유연하게 구조 설정이 가능하며, 다양한 미들웨어를 통해 필요한 기능을 간단하게 추가할 수 있다.
모든 동작이 명시적으로 구성되어 동작 방식을 이해하기 좋다.

 

- npm init으로 시작

$npm init
$npm i express

프로젝트를 생성하고싶은 폴더의 터미널에서 npm init과 npm install express 명령을 입력한다.

 

아래는 express.js를 사용하는 app.js의 기본 구조이다.

const express = require('express') // express 프레임워크를 사용하겠다는 의미
const app = express()			  // express 프레임워크를 사용하겠다는 의미
app.get('/', (req, res) => 
    {res.send('Hello World!');	// Hello World! 출력
});

app.listen(3000);	// 3000번 포트에서 서버를 실행하겠다는 의미

localhost:3000으로 접속하면 서버가 정상적으로 실행되는지 확인 가능하다.

 

- express-generator 사용

위 모듈을 사용하면 프로젝트의 기본구조를 자동으로 생성해준다.

$npm i -g express-generator
$express project_name
$cd project_name
$npm i
$npm start

생성된 프로젝트는 npm start로 실행 가능하다.

 

---

3) Express.js 구조

app.js	Express.js의 가장 기본이 되는 파일로, 웹 어플리케이션의 기능을 정의
bin/www	Express.js 실행 부분을 담당, 포트와 실행 오류 정의
package.json	프로젝트 의존성 및 스크립트 정의
public	코드를 통하지 않고, 직접 제공되는 파일 디렉토리
routes	라우팅 파일 디렉토리
views	HTML 템플릿 디렉토리

 

 

---

 

4) Express.js 동작 방식

- app.js

express()로 생성되는 app 객체를 확인할 수 있다. app 객체는 Express.js의 기능을 담은 객체다. 

Express.js의 모든 동작은 app 객체에 정의된다.

// app.js
var express = require('express')
var app = express()

 

* app 객체의 주요 기능

app.use() : 미들웨어를 사용하기 위한 함수
app.listen() : http 서버를 생성해주는 함수 
app.locals : app에서 사용할 공통 상수. 전역변수를 선언하지 않고 이 값을 사용 가능함

 

- 라우팅 

(1) app 라우팅

app객체에 직접 get, post, put, delete 함수를 사용하여 HTTP method로 라우팅 할 수 있다.

각각 다음과 같이 작성한다.

app.get('/', (req, res) => {
    res.send('GET /');
});

app.post('/', (req, res) => {
	res.send('POST /');
});

app.put('/', (req, res) => {
	res.send('PUT /');
});

app.delete('/', (req, res) => { 
	res.send('DELETE /');
});

app.all('/all', (req, res) => {
	res.send('ANY /');
})

첫 번째 인자는 라우팅을 실행할 URL이고 마지막 인자는 이 라우팅이 실행될 때 작동하는 함수이다.

all 함수는 HTTP 메소드에 상관없이 라우팅이 가능하다.

 

 

(2) Express.Router

Express.Router를 통해 라우팅을 모듈화할 수 있다.

const express = require('express');
const router = express.Router();

router.get('/', (req, res, next) => {
    res.send('respond with a resource');
});

module.exports = router;

module.exports로 라우터를 내보내준다. 위 코드의 경로가 routes 폴더고 제목이 router1라고 하면 

// app.js
const Router1 = require('./routes/router1')
const app = express()

app.use('/router1', Router1) //( URL, 라우터이름 )

app.js에서는 변수 Router1에 router1 라우터를 가져와서 사용가능하다.

이는 app에 use 함수로 연결하여 사용한다.

 

 

- Request Handler

router나 app의 HTTP method 함수의 마지막 인자로 전달되는 함수로, 요청을 확인하고, 응답을 보내는 역할을 한다.

즉 아래의 파란색 부분이 Request Handler다. 

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

 

(1) Request 객체

HTTP 요청 정보를 가진 객체로, 주요 값과 함수는 다음과 같다.

req.params	URL 표현 중, /:id 에서 :id를 req.params.id로 사용 가능
req.queries	URL 표현 중 /?page=2에서 page 부분을 req,queries.page로 사용 가능
req.body	POST 요청의 요청 데이터를 담고 있다.
req.get('')	HTTP Request의 헤더 값을 가져올 수 있다. req.get('Authorization') 등

 

(2) Response 객체

HTTP 응답을 처리하는 객체로, 데이터를 전송하거나 응답 상태 및 헤더 설정 가능

res.send()	text 형식의 응답을 전송
res.json()	json형식의 응답을 전송
res.render()	HTML 템플릿을 사용하여 화면을 전송
res.set()	HTTP 응답의 헤더를 설정
res.status()	HTTP 응답의 상태 값을 설정