27 (3/3) :: Node.js 웹 프레임워크, 라우팅, Express.js

엘리스 SW 엔지니어 트랙 27일차

최규범 강사님 온라인 강의날

 

 

어제 배운 내용 복습

웹 작동방식

프론트엔드 | 백엔드

CSR | SSR

등

 

 

웹 프레임워크

웹 구성에 많은 기능 필요

정형화된 부분을 프레임워크로 간단히 구현

필요한 곳에 집중가능

 

 

웹 프레임워크 기능

HTTP 요청, 라우팅, HTML Templating 등 기능 제공

 

 

라우터

요청 A

요청 B 

요청 C

가 있으면

 

응답 A

응답 B

응답 C

로 알맞게 보내주는 일을 해준다

 

 

Node.js의 다양한 웹 프레임워크

• Express.js - 가장 유명
• Koa.js - 현대적인 JavaScript 적극 사용
• Nest.js - TypeScript 사용, 고정된 구조 제공, Java의 Spring과 비슷
• Hapi, Sails.js, Memeor.js 등

 

 

Express.js

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

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

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

 

express-generator 사용하면 편리

빠르게 프로젝트 시작 가능

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

 

// express.js
const express = require('express')

const app = express()

// get 라우팅 추가
app.get('/', (req, res) => {
    res.send("hello express")
})

// 3000번에 서버를 연다
// 서버가 열린 후에 옆의 콜백함수가 실행
app.listen(3000, () => {
    console.log("SERVER STARTED")
})

 

 

npx + express-generator

프로젝트 생성 후에 사용되지 않기 때문에

npx 사용해서 설치 없이 사용 가능

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

 

 

Express 동작

express-generator로 만들어진 프로젝트 디렉터리에서

npm start로 Express.js 프로젝트 실행

localhost:3000에 접속하면 "Welcome to Express" 확인

 

 

app 객체 주요 기능

app.use()

middleware(미들웨어) 사용하기 위한 함수

 

app.listen()

http 서버 생성하는 함수

express-generator 사용시 http.createServer 사용하는데

app.listen 함수로 대체 가능

 

app.locals

app에서 사용할 공통 상수

global 변수 선언없이 이 값 사용 가능

 

 

라우팅

app 라우팅 | Express.Router

app 라우팅은 라우팅의 핵심 그룹화 지원 X

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

 

path parameter

주소 일부 변수처럼 사용 가능

예) users/:id

 

 

Request Handler

라우팅에 적용되는 함수

HTTP 요청과 응답을 다루는 함수

설정된 라우팅 경로에 해당하는 요청이 들어오면

Request Handler 함수가 실행됨