Express.js 사용, 라우팅

목록

1. Express.js를 사용하는 이유

 

2. express 사용하기

1) npm init으로 시작하기

2) express-generator 사용하기

3) app.js

4) app 객체의 주요 기능

 

3. Express.js의 구조

 

4. Express.js의 동작 방식

1) Express.js 동작 시키기

2) Express.js 동작 따라가기

3) app.js

4) app 객체의 주요 기능

 

5. 라우팅

1) app 라우팅

2) Express.Router

3) path parameter 사용

 

6. 라우팅에 적용되는 함수 - Request Handler

 

 

 

 

반응형

---

1. Express.js를 사용하는 이유

Node.js의 웹 프레임워크 중 가장 유명함

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

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

모든 동작이 명시적으로 구성되기 때문에

웹 프레임워크의 동작 방식을 이해하기 가장 좋은 프레임워크

 

 

 

 

---

2. express 사용

1) npm init으로 시작하기

Express.js를 처음부터 작성할 수 있는 방법

직접 모든 구조를 작성해야함 초보자 ㄴㄴ

npm init express
$mkdir my-web     ← 프로젝트 폴더 만들기 $cs my-web          ← 폴더로 이동 $npm init               ← npm 프로젝트 시작 $npm i express     ← express 설치	const express = require('express')     ← express 불러오기 const app = express()                        ← 불러온 것 바탕으로 객체 만들기 app.get('/', (req, res) => {                   ← get, send 등 명령   res.send('내용'); }; app.listen(3000);

* npm i = npm install임

 

 

 

 

2) express-generator 사용하기

프로젝트 생성기임

사용하면 프로젝트의 기본 구조를 자동으로 생성해줌

빠르게 프로젝트를 시작하기 좋음

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

express-generator

$npm i -g exprss-generaor    ← 글로벌하게(-g) express-generator 설치 $express my-web                  ← express my를 작성 my-web 폴더 안에 express의 뼈대를 잡아서 생성해줌 $cd my-web                           ← 경로 수정 $npm i                                    ← 설치 $npm start                              ← 프로젝트 시작

 

 

 

 

3) npx + express-generator 사용하기

npx를 사용해 express-generator 설치하지 않고 바로 사용 가능

express-generator는 프로젝트 생성 이후에는 사용되지 않아

npx를 사용하는 것도 좋다함

npx + express-generator

$npx exprss-generaor my-web    ← my-web 폴더를 만들고 그 안에 다양한 것을 만들어줌 $cd my-web                                 ← 경로수정 $npm i                                          ← npm 설치 $npm start                                    ← 프로젝트 실행

 

 

 

 

---

3. Express.js의 구조

my-web(프로젝트 이름)

      |     app.js                 Express.js의 가장 기본이 되는 파일. 웹에서 동작하는 기능을 정의

      |     bin/www             Express.js의 실행 부분 담당. 포트와 실행 오류 등을 정의

      |     package.json     프로젝트 의존성 및 스크립트 정의                            ← 의존성 : 프로젝트안에 뭔 모듈 사용하냐

      |     public                 코드를 통하지 않고 직접 제공되는 파일 디렉터리    ←  이미지, 글꼴 등

      |     routes                라우팅 파일 디렉터리

      |     views                 HTML Template 디렉터리                                         ← 템플릿

 

 

 

 

---

4. Express.js의 동작 방식

* app 객체에서 모든 동작이 이루어짐

* app 객체나 Express.Router를 사용해서 라우팅을 구현 가능

* Request Handler를 통해 http 요청과 응답을 처리 가능

 

 

 

1) Express.js 동작 시키기

express-generator로 만들어진 프로젝트 디렉터리에 cmd나 terminal로 접근하여

npm start로 Express.js 프로젝트를 실행할 수 있음

localhost:3000 에 접속해서 Welcome to Express 페이지 확인 가능

 

 

 

 

2) Express.js 동작 따라가기

실행하면 그냥 아래 순서대로 진행된다함

 

브라우저에서 localhost:3000 접속

                        ↓

app.js → app.use('/', indexRouter);

                        ↓

routes/index.js → router.get ('/'. ...)

                        ↓

routes/index.js → res.render('index', ...)

                        ↓

             views/index.jade

 

 

 

 

3) app.js

express()로 생성되는 app 객체를 확인할 수 있음

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

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

app.js

var express = require('express');   ← ('express')모듈을 require 했을 때의 값이 express에 담김 .... var app = express();

 

 

 

 

4) app 객체의 주요 기능

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

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

                           express-generator를 사용하면 http.createServer를 사용하는데 app.listen 함수로 대체할 수 있음

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

                           Express.js에서는 global 변수를 선언하지 않고 이 값을 사용할 수 있음

 

 

 

 

---

5. 라우팅

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

 

1) app 라우팅

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

* 그룹화를 지원하지 않음

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) => {    ← all 함수를 사용하면 HTTP method에 상관없이 any 라우팅 가능     res.send('ANY /'); });

 

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

→ http 메서드 첫번째 인자인 /(최초의) 또는 /all은 라우팅에 해당되는 자원 혹은 url임

 

 

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

→ 뒤에 나오는 인자인  (req, res)=> {                이거는 라우팅이 실행될때 작동하는 함수(=>)임
                                    res.send('get /')

 

요약) /가 실행될 때 (req, res) => {            가 실행되라
                         res.send('ANY /')

 

 

 

 

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;

Express.Router 객체에서도 app 객체처럼

get, put, post, delete 함수를 사용할 수 있음

app의 함수와 동일한 동작을 하는 함수로

첫 번째 인자가 라우팅 될 url이고

마지막 인자가 라우팅 시 실행될 함수

 

* app과 Router 차이점

 - Express.Router는 일반적으로 모듈로 만들어서 사용

 

Express.Router 사용하기

app.js

const userRouter = require('./routes/users');      ← './routes/users' 모듈을 불러오면 userRouter 가 생성됨 const app = express(); app.use('/users', userRouter);                            ← /users의 요청에 대해서는 userRouter가 담당함

./routers/users.js

const petRouter = require('./pets');                     ← './pets' 모듈을 불러서 petRouter가 생성됨 const router = express.Router(); router.use('/pets', petRouter);                             ← '/pets'의 요청에 대해서는 petRouter 가 담당함                                                                                  module.exports = router;

 

작성된 라우터 모듈을 app에 use 함수로 연결하여 사용할 수 있음

 

router 객체에도 하위 라우터를 use 함수로 연결하여 사용할 수 있음

- 위에서 /pets는 /users의 하위 라우터임

 

 

활용)

계층적 구조의 라우터 사용하기
users.js (상위 라우터)	pet.js (하위 라우터)
const { Router } = require('express'); const petsRouter = require('./pets'); const router = require(); const router = Router(); router.get('/', (req, res) => {       res.send('get /users'); }); router.use('/:userId/pets', petsRouter);  → /:userId/pets 경로에다가 petsRouter 연결시키기 module.exports = router;  → router 모듈 생성하기	const { Router } = require('express'); const router = Router({mergeParams: true}); router.get('/', (req, res) => {       const { userId } = req.params;       res.send(`Pets of user ${userId}`); });  → get 라우팅 추가시키기 module.exports = router;

 

 

 

* 계층적 구조의 라우터를 사용할 때

라우터의 선언 시 Router({ mergeParams: true })를 사용해야함

 

 

 

3) path parameter 사용

Express.js 라우팅은 path parameter를 제공함

path parameter를 사용하면 주소의 일부를 변수처럼 사용할 수 있음

 

예시)

* /users/:id

  /users/123이나 /users/456 등으로

  users의 특정한 사용자를 지칭하는 번호가 들어갈 때

  /users/:id 로 묶어서 만들 수 있음

  → 접속했을 때 라우팅 적용

 

* /messages/:from-:to

  /message/123-456 등으로 접속하면

  from : 123, to : 456 내부적으로 자동으로 연동이 됨

  → 접속했을 때 라우팅 적용

 

 

활용)

path parameter 사용해서 메세지를 응답 보내는 라우팅

const express = require('express') const app = express(); app.get('/', (req, res) => {    res.send("OK"); }; app.get('/say/:greeting', (req, res)=> {          ←/:id 이건거같음     const {greeting} = req.paramas;     res.send(greeting); }); app.listen(8080);

 

 

 

---

6. 라우팅에 적용되는 함수 - Request Handler

* http 요청과 응답을 다룰 수 있는 함수

* 라우팅 경로에 해당하는 요청이 들어오면 Request Handler 함수가 실행됨

Request Handler

router.get('/:id', (req, res) => {   const id = req.params.id   res.send('내용입력 ${id}`); });

*      : Request Handler

 

 

 

1) Request 객체

http 요청 정보를 가진 객체

http 요청의 path paramaeter, query parameter, body, header 등을 확인 가능

 

 

 

 

2) Request 객체의 주요 값 및 함수

프로퍼티(   )를 접근하는 형식

req.params	url 표현 중 /path/:id 에서                                :id를 req.params.id로 사용할 수 있음	:id와 같은 파라미터(외부에서 가져오는데이터)를 가져올때 사용
req.queries	url 표현 중 /path?page=2 에서 page 부분을 req.queries.page로 사용할 수 있음	?page=2 와 같은 ? + 특정키(page) + value(2) 전달하는 페이지 핸들링할때 사용
req.body	일반적으로 post 요청의 요청 데이터를 담고 있음 req.body에 요청 데이터가 저장되어 들어옴	http body 정보를 받아올 때 사용
req.get('')	http Request의 헤더 값을 가져올 수 있음 req.get('Authorization') 등으로 값을 가져옴	컨텐츠 타입, 호스트등 요청한 사람의 정보를 가져올 때 사용

 

 

 

 

3) Response 객체

http 응답을 처리하는 객체임

http 응답의 데이터를 전송하거나

응답 상태 및 헤더를 설정할 수 있음

메서드(   ) 사용

res.send()	text 형식의 http 응답을 전송함
res.json()	json 형식의 http 응답을 전송함
res.render()	html Template을 사용하여 화면을 전송함
res.set()	http 응답의 헤더를 설정함        ← 헤더 : 컨텐츠 타입이나 응답의 정보 등
res.status()	http 응답의 상태 값을 설정함   ←  상태값 : 404 오류뜰때의 404같은 숫자값