[Node.js] express.js 기초 알아보기

유진·2023년 9월 18일

node.js

Node.js

목록 보기

5/8

Express.js

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

Express.js 시작하기

1. npm init으로 시작하기

Express.js를 처음부터 작성할 수 있는 방법
직접 모든 구조를 작성해야 하기 때문에, Express.js를 처음 접하는 사용자에겐 쉽지 않음

$mkdir my-web
$cd my-web
$npm init
$npm i express

---

const express = require('express')
const app = express()
app.get('/', (req, res) => {
	res.send('Hello World!');
});
app.listen(3000);

2. express-generator 사용하기

Express.js는 express-generator 라고 하는 프로젝트 생성기를 제공함
express-generator를 사용하면 프로젝트의 기본구조를 자동으로 생성해줌
빠르게 프로젝트를 시작하기 좋은 방법
생성된 프로젝트는 npm start 로 실행 가능

$npm i -g express-generator
$express my-web
$cd my-web
$npm i
$npm start

3. npx + express-generator 사용하기

npx를 사용하여 express-generator 를 설치하지 않고, 바로 사용 가능.
express-generator는 프로젝트 생성 이후엔 사용되지 않기 때문에, npx를 사용하는 것도 좋은 방법

$npx express-generator my-web
$cd my-web
$npm i
$npm start

Express.js 의 기본 구조

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

Express.js 동작 방식

app 객체

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

app.js에서는 express()로 생성되는 app 객체를 확인할 수 있음
app 객체는 Express.js 의 기능을 담은 객체
Express.js의 모든 동작은 app 객체에 정의됨

app 객체 주요 기능

app.use() : middleware 를 사용하기 위한 함수

app.listen() : http 서버를 생성해주는 함수. express-generator 를 사용하면 http.createServer를 사용하는데 app.listen 함수로 대체할 수 있음

app.locals : app에서 사용할 공통 상수. Express.js 에선 global 변수를 선언하지 않고 이 값을 사용할 수 있음

라우팅

1) app 라우팅

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 /');
});

app 객체에 직접 get, post, put, delete 함수를 사용하여 HTTP method 로 라우팅 할 수 있음.
HTTP method 함수의 첫 번째 인자가 이 라우팅을 실행할 URL.
마지막 인자가 이 라우팅이 실행될 때 작동하는 함수 all 함수를 사용하면 HTTP method에 상관없이 라우팅 가능

2) Express.Router
✔ app 라우팅을 통해서는 라우팅의 핵심인 그룹화를 지원하지 않음. 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;

router 객체에도 app 객체처럼 get, put, post, delete 함수를 사용할 수 있음
app의 함수와 동일한 동작을 하는 함수로 첫 번째 인자가 라우팅 될 URL이고, 마지막 인자가 라우팅 시 실행될 함수
라우터는 일반적으로 모듈로 만들어서 사용함

// Express.Router 사용
// ./app.js
const userRouter = require('./routes/users');
const app = express();

app.use('/users', userRouter);	// 작성된 라우터 모듈을 app 에 use함수로 연결하여 사용할 수 있음

// ./routes/users.js
const petRouter = require('./pets'); 
const router = express.Router();

router.use('/pets', petRouter);	// router 객체에도 하위 라우터를 use 함수로 연결하여 사용할 수 있음

module.exports = router;

라우팅 - path parameter 사용

Express.js 라우팅은 path parameter를 제공
path parameter를 사용하면, 주소의 일부를 변수처럼 사용할 수 있음
- /users/:id -> /users/123, /users/456 등으로 접속했을 때 라우팅 적용
- /messages/:from-:to -> /message/123-456 등으로 접속했을 때 라우팅 적용

Request Handler

라우팅에 적용되는 함수를 Request Handler라고 부름
HTTP 요청과 응답을 다룰 수 있는 함수로 설정된 라우팅 경로에 해당하는 요청이 들어오면 Request Handler 함수가 실행됨

router.get('/:id', (req, res) => {	// router나 app의 HTTP method 함수의 가장 마지막 인자로 전달되는 함수
	const id = req.params.id		// 설정된 라우팅 경로에 해당하는 요청이 들어오면 Request Handler 함수가 실행됨
	res.send(`hello ${id}`);		// 요청을 확인하고, 응답을 보내는 역할을 함
});

Request 객체의 주요 값 및 함수
HTTP 요청 정보를 가진 객체

1) req.params : URL 표현 중 /path/:id 에서 :id 를 req.params.id 로 사용할 수 있음
2) req.queries : URL 표현 중 /path?page=2 에서 page 부분을 req.queries.page 로 사용할 수 있음
3) req.body : 일반적으로 POST 요청의 요청 데이터를 담고 있음. req.body 에 요청 데이터가 저장되어 들어옴
4) req.get('') : HTTP Request 의 헤더 값을 가져올 수 있음. req.get('Authorization') 등으로 값을 가져옴

Response 객체의 주요 값 및 함수
HTTP 응답을 처리하는 객체

1) res.send() : text 형식의 HTTP 응답을 전송함
2) res.json() : json 형식의 HTTP 응답을 전송함
3) res.render() : HTML Template 을 사용하여 화면을 전송함
4) res.set() : HTTP 응답의 헤더를 설정함
5) res.status() : HTTP 응답의 상태 값을 설정함