#TIL Express.js

Express란?

Express는 웹 및 모바일 애플리케이션을 위한 일련의 강력한 기능을 제공하는 간결하고 유연한 Node.js 웹 애플리케이션 프레임워크이다. 사실상 Nodejs의 표준 웹서버 프레임워크로 불려질 만큼 많은 곳에서 사용하고 있다. 그렇다면 Node.js와 Express는 무슨 관계인가?

글에서 Node.js는 Chrome의 V8엔진을 이용하여 javascript로 브라우저가 아니라 서버를 구축하고, 서버에서 JavaScript가 작동되도록 해주는 런타임 환경(플랫폼)이라고 했다. Express는 이런 Nodejs의 원칙과 방법을 이용하여 웹애플리케이션을 만들기 위한 프레임워크이다.

1. 만약 Express 가 없다면?

mkdir webucks-backend
cd webucks-backend
npm init -y

backend directory를 생성하고 해당 디렉토리 내부에서 npm init -y 로 프로젝트를 시작한다

node withoutExpress.js

위에 명령으로 서버 시작

const http = require('http')
const { sendProducts } = require('./sendProducts')

const server = http.createServer((req, res) => {
  const { url, method } = req
  res.setHeader('Content-Type', 'application/json')

  if (url === '/ping') { return res.end(JSON.stringify({ message: '/ pong' }))}
  if (url === '/signup' && method === 'POST') return res.end(JSON.stringify({ message: '회원가입 완료!' }))
  if (url === '/login' && method === 'POST') return res.end(JSON.stringify({ message: '로그인 완료!' }))
  if (url === '/products' && method === 'GET') return sendProducts(res)

  res.end(JSON.stringify({ message: 'this response answers to every request' }))
})

server.listen(8080, () => { console.log('server is listening on PORT 8000')})

보이는 바와 같이 라우팅을 직접 request 객체에서 url과 method 에 따라서 조건문으로 분기해서 다른 로직(SignUp, Login, sendPosts)을 처리해 주어야 합니다.

여기서 끝이 아니라 점점 더 앱의 규모가 커지게 된다면 어떡할까요?
서버를 실행하는 함수 안에서 수많은 조건문과 수많은 로직을 모듈화 하는데 큰 공을 들이게 됩니다.

이런 불편함을 해소하기 위해서 탄생한 프레임워크가 Express 입니다.

2. Express

https://expressjs.com/

express 는 더욱더 읽기 쉽고 유연하고 지속가능한 백엔드 앱을 개발할 수 있도록 돕는 프레임워크 입니다.

npm install express --save

const http = require('http')
const express = require('express')						// express 마운트
const { CategoriAPI } = require('./CategoriAPI')		// 외부 파일 불러옴	
const { ListAPI } = require ('./ListAPI')				
const { DetailAPI } = require ('./DetailAPI')			


const app = express()
app.use(express.json())

app.get('/', (req, res) => {
  res.json({ message: '/ endpoint' }) // 이건 접속하자마자 뭐라도 보여야할것같아서 남김
})

app.get('/products/categories', CategoriAPI)
app.get('/products', ListAPI) 
app.get('/products/2', DetailAPI)

const server = http.createServer(app)

server.listen(8000, () => {
  console.log('server is listening on PORT 8000')
})

const ListAPI = (req,res) => {							// 기본 선언
    res.json({

        products : 
        {
            "data" : [{
              "id" : 1,
              "koreanName" : "나이트로 바닐라크림",
              "englishName" : "Nitro Vanilla Cream",
              "category" : "콜드 브루 커피",
              "categoryId" : 1,
              "imageUrl": "https://image.istarbucks.co.kr/upload/store/skuimg/2021/04/[9200000002487]_20210426091745467.jpg"
            }, {
              "id" : 2,
              "koreanName" : "아이스 카페 아메리카노",
              "englishName" : "Ice Cafe Americano",
              "category" : "에스프레소",
              "categoryId" : 3,
              "imageUrl" : "https://image.istarbucks.co.kr/upload/store/skuimg/2021/04/[110563]_20210426095937808.jpg",
            }, {
              "id" : 3,
              "koreanName" : "돌체 콜드 브루",
              "englishName" : "Dolce Cold Brew",
              "category" : "콜드 브루 커피",
              "categoryId" : 1,
              "imageUrl" : "https://image.istarbucks.co.kr/upload/store/skuimg/2021/04/[9200000002081]_20210415133656839.jpg",
            }, {
              "id" : 4,
              "koreanName" : "콜드 브루 몰트",
              "englishName" : "Cold Brew Malt",
              "category" : "콜드 브루 커피",
              "categoryId" : 1,
              "imageUrl" : "https://image.istarbucks.co.kr/upload/store/skuimg/2021/02/[9200000001636]_20210225093600536.jpg"
            }, {
              "id" : 5,
              "koreanName" : "에스프레소 콘 파나",
              "englishName" : "Espresso Con Panna",
              "category" : "에스프레소",
              "categoryId" : 3,
              "imageUrl" : "https://image.istarbucks.co.kr/upload/store/skuimg/2021/04/[30]_20210415144252244.jpg"
            }]
          }
    })
}


  module.exports = { ListAPI }				// 외부로 내보냄

1. Express 없이 서버를 구현한 코드와 비교해 봤을 때, 아직은 크게 와닿지 않을 수도 있지만
   • 조건문으로 라우팅을 처리했던 것이 간편해졌고
   • 각각의 요청을 처리하는 함수의 분리로 인해
2. 직관적으로 코드를 설계할 수 있다는 장점을 가지고 있습니다.