Elice) Express.js

 

1. Express.js

 

Express.js는 Node.js의 웹 프레임워크 중 가장 유명한 웹 프레임워크이다.

 

필요에 따라 유연하게 구조 설정이 가능하며,

다양한 미들웨어를 통해 필요한 기능을 간단하게 추가 할 수 있다.

 

모든 동작이 명시적으로 구성되기 때문에 웹 프레임워크의 동작 방식을 이해하기 가장 좋다.

 

 

---

 

 

 

2. express-generator 사용하기

 

// 1. 프로젝트 생성

$npm i -g express-generator
$express my-web // 프로젝트 생성
$cd my-web
$npm i
$npm start //  프로젝트 실행

// express-generator

 

 

// 2. npx로 생성

$npx express-generator my-web // 프로젝트 생성
$cd my-web
$npm i
$npm start

// npx + express-generator

 

! express-generator는 프로젝트 생성 이후엔 사용되지 않기 때문에 2번 처럼

npx로 express-generator를 설치하지 않고 사용하는 것도 좋은 방법이다.

 

 

---

 

 

3. express.js의 구조

 

my_web(프로젝트 파일)

- app.js : express.js의 가장 기본이 되는 파일, 웹 어플리케이션의 기능을 정의

- bin/www : express.js의 실행 부분을 담당, 포트와 실행 오류 등을 정의

- package.json : 프로젝트 의존성 및 스크립트 정의

- public : 코드를 통하지 않고, 직접 제공되는 파일 디렉토리

- routes : 라우팅 파일 디렉토리

- views : HTML template 디렉토리

 

 

---

 

 

4. express.js 동작 방식

 

express-generator로 만들어진 프로젝트 디렉토리에 접근하여

npm start로 express.js 프로젝트를 실행 할 수 있다

localhost:3000에 접속하여 Welcome to Express 페이지를 확인 할 수 있다

 

express.js 동작 따라가기

 

1. 브라우저에서 localhost:3000에 접속

2. app.js -> app.use('/', indexRouter);

3. routes/index.js -> router.get('/'. ...

4. routes/index.js -> res.render('index', ...)

5. views/index.jade

 

 

---

 

 

5. app.js

 

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

 

app.js에서는 express() 로 생성되는 app객체를 확인할 수 있다

 

app 객체는 Express.js의 기능을 담은 객체

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

 

! 주요 기능들

 

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

app.listen() : http서버를 생성해주는 함수

app.locals : app에서 사용할 공통 상수

 

 

---

 

 

6. 라우팅

 

라우팅은 경로를 선택하는 프로세스로 미리 정해직 규칙을 사용하여 최상의 경로를 선택하는 프로세스이다.

 

Express.js는 다양한 라우팅 방식을 제공한다.

크게는 app라우팅과 Express.Router를 통한 라우팅으로 나누어진다.

 

 

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

! req : request (요청) // res : response (응답) 따라서 req 요청을 보내고 res 응답을 받는다.

 

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

HTTP method 함수의 첫 번째 인자가 이 라우팅을 실행할 URL이다.

마지막 인자가 이 라우팅이 실행될 때 작동하는 함수다.

all 함수를 사용하여 HTTP method에 상관없이 라우팅이 가능하다.

 

 

2. 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.js 동작 방식 정리

 

Express.js 는 app 객체를 시작으로 모든 동작이 이루어진다.

app 객체나 Express.Router를 사용하여 라우팅을 구현할 수 있다.

Request Handler를 통해 HTTP 요청과 응답을 처리할 수 있다.