[#2] Express.js란 무엇인가?

Express.js

 

Express - Node.js web application framework

 

ExpressJS는 NodeJS를 위한 빠르고 개방적이고 간결한 웹 프레임워크라고 소개합니다.

혹시 일반 VanillaJS로 서버를 구현해 본 적이 있나요? 하나의 Post 로직을 짜기 위해서 많고 복잡한 코드를 필요로 합니다. JS로 구현하는 것은 HTTP 모듈 등을 사용하면 비교적 다른 언어보다 구현하기 쉬운 편이지만, 서버 측 로직을 전부 코드로 작성하는 것은 상당히 복잡합니다.   

일반 JS로 Request를 받고 Response를 Client side로 넘겨 주는 과정을 생각해 본다면, 굉장히 귀찮은 과정인 것을 알 수 있습니다. Express는 데이터를 취급하거나 파싱 하는 방법을 내부에 포함하고 있는 것은 아니지만 파싱을 대신해주기 위해 프로젝트 내부에 쉽게 연결하는 다른 패키지를 쉽게 설치할 수 있도록 도와줍니다. 

프레임워크는 일련의 도움 함수이면서 우리가 다루는 도구와 규칙의 모음입니다. Express.js는 프레임 워크이고 안에서 웹 어플리케이션 서버 구축을 위한 각종 라이브러리와 미들웨어가 내장되어 있기 때문에 개발하기가 편하다는 것이 장점입니다. 

Koa, Adonis, Sails 등등 다양한 라이브러리 또는 프레임워크들이 존재하지만, 가장 많이 배우고 대중화 되어 있는 Express를 배우고 Koa 등등 다른 프레임워크를 배우는 것이 좋겠습니다. 

Express 시작하기

간단하게 express를 시작 해 봅시다. 먼저 자신의 컴퓨터 환경에서 npm을 설치해 주세요. (구글에서 검색)

npm init 
npm install nodemon --save-dev
npm install express --save

다음과 같은 과정을 거치고 package.json을 확인 하면 Express.js는 의존성으로 추가, Nodemon은 개발 의존성으로 추가됩니다. 

 

const express = require('express')
const app = express()

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(3000, () => {
  console.log('app is listening')
})

간단하게 포트 로컬호스트 포트 3000번에 Hello World를 띄울 수 있습니다. 일반 Vanilla JS로 구현하는 것보다 훨씬 간단하게 코드를 작성할 수 있습니다. Express.js 프레임워크의 최대 장점인 것이죠.

 

미들웨어

https://velog.io/@support/%EC%BD%94%EB%93%9C%EC%8A%A4%ED%85%8C%EC%9D%B4%EC%B8%A0-8%EC%A3%BC%EC%B0%A8-Node.js-ExpressMiddleware

미들웨어는 함수 형태로 이루어져있습니다. request(요청), response(응답) 객체로 이뤄져 있는 함수인데, 클라이언트에서 요청이 오고 그 요청을 보내기 위해 응답하기 위해 중간중간 처리하는 구조를 가지고 있습니다. 

사진을 보시면 더 간편하게 이해 할 수 있죠. 

요청 -> 응답 과정에서 콘솔 창에 계속 남기고 싶으면 미들웨어 함수를 넣어서 기다리게 한 뒤 next() 함수가 호출되면 그다음 미들웨어를 순서대로 처리할 수 있도록 만든 것입니다. 이것이 express의 큰 요소를 차지하는 미들웨어입니다. 

const http = require("http");
const express = require("express");

const app = express();

app.use((req, res, next) => {
  console.log("first middleware");
  next();
});

app.use((req, res, next) => {
  console.log("second middleware");
  res.send("<h1>Hi node</h1>")
});

const server = http.createServer(app);

server.listen(10000);

http://localhost:10000로 들어가면 first middleware과 second middleware가 순서대로 출력되는 것을 알 수 있습니다. 미들웨어와 express에서 제공되는 유틸리티 함수인 send를 사용하여 바로 html 코드로 응답을 보낼 수 있습니다. 이외에도 다양한 유틸리티 함수들을 제공하고 있습니다. 2번째 미들웨어에서 next를 사용해야 하지만, 사용해도 되지 않는 이유가 바로 send로 응답을 보냈기 때문입니다. write로 하나하나 코드를 작성하는 것보다 send로 사용하면 훨씬 더 간단하게 코드를 작성할 수 있고 읽기도 훨씬 편할 것입니다.