Express (Node.js 프레임워크)

Express 란

• Node.js 를 위한 빠르고 개방적인 간결한 웹 프레임워크

Express 설치

• 이전 설치 방식과 똑같이 yarn init 으로 프로젝트 폴더 내에 패키지 관리자 생성 후 yarn add express 로 Express 설치

Express 설정

Express 기본 예시

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

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

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

• 초기 express 설정 예제코드를 보면 위와 같이 작성되어 있음
  
  

• app.get 은 해당하는 엔드포인트로 요청이 있을 시 내부의 콜백을 실행하여 res.send를 실행하게 됨
  
  

• app.listen 을 통해 서버가 실행되고, 포트번호를 지정하여 http 통신으로 넘어오는 요청들 중 3000포트로 들어오는 요청에 한해서만 수신이 허용됨

  
  
  
  
  
  

Express 라우팅

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

// respond with "hello world" when a GET request is made to the homepage
app.get('/', function(req, res) {
  res.send('hello world');
});

• Routing (라우팅)은 애플리케이션 엔드 포인트(URI)의 정의, 그리고 URI가 클라이언트 요청에 응답하는 방식을 말함

• 각 요청에 맞는 엔드포인트를 정의하고, 각 엔드포인트에 따라 실행될 메서드를 정의

• 위 예시를 기준으로 보면 app.get 방식으로 '/' 라는 경로의 엔드포인트를 통한 요청이 왔을 때 두 번째 인수에 들어가는 function 함수에 인수로 req, res가 담기게 됨
  req = 클라이언트 측에서 보내는 요청 정보
  res = 백엔드 측에서 다시 클라이언트로 보낼 정보

• 이 req, res를 이용해서 요청에 대한 응답값을 보낼 때 어떤 식으로 할 지를 조작 가능
  
  Routing 관련 Docs

Express 사용해보기

• 앞서 본 예시와 같이 코드를 작성

• express 를 불러온 다음 호출하여 생성된 인스턴스를 app 변수에 담음

• get 같은 각 요청에 대한 엔드포인트와 그에 따른 실행로직을 작성

• 코드 마지막 줄에 app.listen 으로 통신 요청 과정에서 감지할 포트번호를 지정하고, 서버를 실행
  여기서는 프론트 쪽도 개발 예정이라 프론트의 기본 포트번호인 3000번과 겹치는 것을 피하기 위해 5000으로 지정

• 실제로 node app.js 로 실행하면 서버가 실행된 것을 콘솔 출력으로 확인 가능

• 이후 지정한 엔드포인트 주소와 포트번호로 브라우저 환경에서 접속을 시도하면 지정해 둔 문자열이 브라우저 공간에 출력되는 것 확인 가능

Express의 미들웨어

+a) 미들웨어란

• 서로 다른 애플리케이션, 시스템, 프로토콜 등의 컴퓨터 프로그램들이 서로 상호작용할 수 있도록 도와주는 소프트웨어

• 다양한 애플리케이션들이 서로 상호작용할 수 있는 인터페이스 역할을 하여 애플리케이션 간의 의존성을 줄임

• 서로 다른 프로토콜 (ex. http, https)을 사용하는 애플리케이션 간에 데이터를 주고받을 수 있도록 변환하거나 DB와 애플리케이션 간의 연결을 관리하는 등 통신, 연결의 중간에서 관리하는 역할을 함

• 미들웨어는 위와 같이 사용해 볼 수 있음
  (여기서는 User 정보 조회 요청이 올 시 미들웨어로 권한이 있는지를 우선 파악하는 로직이라고 가정)

• 먼저 get으로 어떤 요청이 들어올 때 요청에 대한 결과를 반환해서 보낼 getUser 함수를 만듬

• 이후 checkAuth 함수를 만들어서 응답을 보내기 전 체크를 하는 미들웨어 함수를 만듬

• app.get 인수 내부에 두 함수를 넣어서 순차적으로 실행되게 함
  
  
  
  - 결과적으로 get 요청이 들어오면 checkAuth 가 먼저 실행되어서 내부에 로직이 먼저 실행됨
  - 이후 next() 호출로 다음 인수의 함수가 실행되도록 넘겨 줌에 따라 getUser 함수가 실행되어 응답을 보냄

+a) 엔드포인트 요청에 따라 실행되는 콜백함수의 세 번째 인수 next

const checkAuth = (req, res, next) => {
 console.log('you have admin permission');
 next();
};

• 앞서 get 요청 메서드 내부 콜백 함수에는 req,res 가 인수로 들어갔는 데 그 세 번째 인수자리에는 next가 들어감

• next는 다음 실행순서로 넘기는 기능으로, next() 로 호출하여 사용

• 따라서 미들웨어 함수 내에서 next 사용여부에 대한 분기점을 나눠서 검증에 대한 유효여부 기능을 구현할 수도 있음
  미들웨어 함수 내에 로직 마지막에 next() 를 호출하지 않을 시 다음 순번의 함수로 넘어가지지 않음 (브라우저 상에서 무한로딩이 걸리게 됨)