[엘리스sw] 6주차 3일 - MiddleWare와 Restful API

---

◆ Express.js의 Middleware

◆ REST API

---

Middleware

Express.js의 Middleware

 

Middleware란?

· 미들웨어는 Express.js 동작의 핵심

· HTTP 요청과 응답 사이에서 단계별 동작을 수행해주는 함수

 

Middleware 동작 원리

· Express.js의 미들웨어는 HTTP 요청이 들어온 순간부터 시작이 됨.

· 미들웨어는 HTTP 요청과 응답 객체를 처리하거나, 다음 미들웨어를 실행할 수 있음.

· HTTP 응답이 마무리될 때까지 미들웨어 동작 사이클이 실행됨.

---

Middleware의 작성과 사용

· req, res, next를 가진 함수를 작성하면 해당 함수는 미들웨어로 동작할 수 있음.

• req : HTTP 요청을 처리하는 객체
• res : HTTP 응답을 처리하는 객체
• next : 다음 미들웨어를 실행하는 함수, 인자 전달하면 오류처리 미들웨어가 실행됨.

Route Handler와 middleware

·  Route Handler도 미들웨어의 한 종류

·  Route Handler는 라우팅 함수(get, post, put, delete 등)에 적용된 미들웨어

·  일반적인 미들웨어와는 다르게 path parameter를 사용할 수 있음.

 

middleware 작성법

·  req, res, next를 인자로 갖는 함수를 작성하면 미들웨어가 됨.

·  req, res 객체를 통해 HTTP 요청과 응답을 처리하거나 next 함수를 통해 다음 미들웨어를 호출해야 함.

·  next() 함수가 호출되지 않으면 미들웨어 사이클이 멈추기 때문에 주의

const logger = (req, res, next) => {
	console.log(`Request ${req.path}`);
    next();
}

const auth = (req, res, next) => {
	if (!isAdmin(req)) {
    	res.send("Not Authorized");
        return;
    }
	next();
}

 

middleware 사용법

·  middleware는 적용되는 위치에 따라서 어플리케이션 미들웨어, 라우터 미들웨어, 오류처리 미들웨어로 분류 가능함.

·  필요한 동작 방식에 따라 미들웨어를 적용할 위치를 결정함.

 

어플리케이션 미들웨어

·  use나 http method 함수를 사용하여 미들웨어를 연결할 수 있음.

·  미들웨어를 모든 요청에 공통적으로 적용하기 위한 방법

·  HTTP 요청이 들어온 순간부터 적용된 순서대로 동작함.

app.use((req, res, next) => {
	console.log(`Request ${req.path}`);
    next();
});  // 1

app.use(auth);  // 2

app.get('/', (req, res, next) => {
	res.send('Hello Express');
});  // 3

 

라우터 미들웨어

·  router 객체에 미들웨어가 적용되는 것 외에는 어플리케이션 미들웨어와 사용방법은 동일함.

·  특정 경로의 라우팅에만 미들웨어를 적용하기 위한 방법

·  app 객체에 라우터가 적용된 이후로 순서대로 동작함.

router.use(auth);  // 3

router.get('/', (req, res, next) => {
	res.send('Hello Router');
});  // 4

app.use((req, res, next) => {
	console.log(`Request ${req.path}`);
    next();  // 1
});

app.use('/admin', router);  // 2

 

미들웨어 서브스택

·  use나 http method 함수에 여러 개의 미들웨어를 동시에 적용할 수 있음.

·  주로 한개의 경로에 특정해서 미들웨어를 적용하기 위해 사용함.

·  전달된 인자의 순서 순으로 동작함.

app.use(middleware1, middleware2, ...);

app.use('/admin', auth, adminRouter);

app.get('/', logger, (req, res, next) => {
	res.send('Hello Express');
});

 

오류처리 미들웨어

·  일반적으로 가장 마지막에 위치하는 미들웨어

·  다른 미들웨어와는 달리 err, req, res, next 4개 인자를 가지며, 앞선 미들웨어에서 next 함수에 인자가 전달되면 실행됨.

app.use((req, res, next) => {
	if (!isAdmin(req)) {
    	next(new Error('Not Authorized'));
        return;
    }
    next();  // 1
});

app.get('/', (req, res, next) => {
	res.send('Hello Express');
});

app.use((err, req, res, next) => {
	res.send('Error Occured');
});  // 2  (앞에는 건너뜀)

 

함수형 middleware

·  하나의 미들웨어를 작성하고, 작동 모드를 선택하면서 사용하고 싶을 경우 미들웨어를 함수형으로 작성하여 사용할 수 있음.

ex) API 별로 사용자의 권한을 다르게 제한하고 싶은 경우

const auth = (memberType) => {
	return (req, res, next) => {
    	if (!checkMember(req, memberType)) {
        	next(new Error(`member not ${memberType}`));
        	return;
        }
    	next();
    }
}

app.use('/admin', auth('admin'), adminRouter);

app.use('/users', auth('member'), userRouter);

· auth 함수는 미들웨어 함수를 반환하는 함수

· auth 함수 실행 시 미들웨어의 동작이 결정되는 방식으로 작성됨.

· 일반적으로 동일한 로직에 설정값만 다르게 미들웨어를 사용하고 싶은 경우에 활용됨.

 

 

Middleware Libraries

· Express.js는 다양한 미들웨어들이 이미 만들어져 라이브러리로 제공됨.

· 유용한 미들웨어를 npm을 통해 추가하여 사용할 수 있음.

· Express.js 홈페이지나 npm 온라인 저장소에서 찾아볼 수 있음.

ex) cors, multer, passport 등

 

Middleware 요약

· 미들웨어는 HTTP 요청과 응답 사이에서 동작하는 함수

· req, res, next를 인자로 갖는 함수는 미들웨어로 동작할 수 있음.

· app 혹은 router 객체에 연결해서 사용 가능함.

· next에 인자를 넘기는 경우 오류처리 미들웨어가 실행됨.

· 미들웨어에 값을 설정하고 싶은 경우는 함수형 미들웨어로 작성 가능함.

---

REST API

REST API란?
· REST + API (RESTful API)
· REST 아키텍쳐를 준수하는 웹 API

API란?
· Application Programming Interface
· 서비스나 프로그램 간에 미리 정해진 기능을 실행할 수 있도록 운영체제 API, 프로그램언어 API, 웹 API 등이 있음.

 

REST란?
· REpresentational State Transfer
· 웹에서 자료를 전송하기 위한 표현 방법에 대한 아키텍쳐
· REST를 정확하게 구현하기 위해선 많은 제한 조건이 있지만, 기본적인 REST 가이드를 따르면 조금 더 좋은 구조의 API를 구성할 수 있음.

 

REST API 기본 가이드 - HTTP Method의 사용
· REST API는 API의 동작을 HTTP method + 명사형 URL로 표현함.
· /posts라는 RUL은 '게시글'이라는 자원을 가리킨다고 할 때,
· GET - 가져오기, POST - 새로 만들기, PUT - 수정하기, DELET - 삭제하기의 HTTP method와 결합하여 API 동작을 정의하여야 함.

REST API 기본 가이드 - URL 표현법
· REST API URL의 자원은 복수형으로 표현되며, 하나의 자원에 대한 접근은 복수형 + 아이디를 통해 특정 자원에 접근함.
· /posts는 '게시글 전체'를 칭하는 URL이라고 할 때, /posts/1은 '1번 게시글'이라는 자원을 표현함.

REST API 기본 가이드 - 계층적 자원
· REST API는 URL을 통해 자원을 계층적으로 표현함.
· /users/1/posts라는 URL은 '1번 유저의 게시글 전체'라는 자원을 나타냄.

REST API 정리
· REST API는 REST 아키텍쳐를 준수하는 웹 API를 의미함.
· URL을 통한 자원의 표현 방법과 HTTP method를 통한 API 동작의 정의 정도만 사용해도 훌륭한 REST API를 구현할 수 있음.

---

JSON

JSON이란?
· JavaScript Object Notation
· 자바스크립트에서 객체를 표현하는 표현식으로 시작함.
· 데이터를 표현하는 방법이 단순하고 이해하기 쉬워서 웹 API에서 데이터를 전송할 때 표현식으로 주로 사용됨.

JSON을 사용하는 이유
· 웹 API는 기본적으로 데이터를 문자열로 전송하게 됨.
· 어떤 객체를 웹 API를 통해서 문자열로 전달하기 위해 JSON을 사용함.
· 통신 오버헤드가 굉장히 적음.

 

JSON과 XML

// JSON
{
  "person": {
    "name": "John Doe",
    "age": 30,
    "city": "Exampleville",
    "isStudent": false,
    "grades": [90, 85, 92]
  }
}

// XML
<person>
  <name>John Doe</name>
  <age>30</age>
  <city>Exampleville</city>
  <isStudent>false</isStudent>
  <grades>
    <grade>90</grade>
    <grade>85</grade>
    <grade>92</grade>
  </grades>
</person>

JSON이 더욱 적은 표현식을 사용하여 데이터를 효과적으로 표현함.

 

JSON 가이드 - Object
· JSON에서 Object는 { "key": value }로 표현함.
· value에는 어떤 값이라도 사용될 수 있음. (문자열, 숫자, JSON 객체 등)

ex. { name: 'elice', age: 5, nationality: 'korea' }

JSON 가이드 - Array
· JSON에서 Array는 [item1, item2]로 표현함.
· item에는 어떤 값이라도 사용될 수 있음. (문자열, 숫자, JSON 객체 등)

ex. ['first', 10, {name: 'bob'}]

---

Express.js로 REST API 구현하기

목표
· 데이터베이스 없이 Node.js 모듈 활용
· 간단한 메모의 작성, 수정, 삭제, 확인 기능 API 구현
· express-generator를 사용하지 않고 MVC 패턴 구현

MVC 패턴
· 웹 서비스의 가장 대표적인 프로젝트 구성 패턴으로
· 프로젝트의 기능들을 어떻게 분리할지에 대한 하나의 구성 방법
· Model - View - Controller를 구분하여 프로젝트 구조를 구성하는 것

View
· 데이터를 표현하는 기능을 의미함.
· 주로 Controller에 의해 데이터를 전달받고 전달받은 데이터를 화면에 표시해주는 기능을 담당함.

Controller
· Model을 통해 데이터에 접근하여, 처리 결과를 View로 전달하는 기능을 의미함.
· 웹 서비스에선 주로 라우팅 함수가 해당 기능을 수행함.

 

JSON 데이터 처리 미들웨어 사용하기

app.use(express.json());

 

· express.js는 기본적으로 HTTP body에 전달되는 JSON 데이터를 처리하지 못함.
· express에서 기본적으로 제공해주는 express.json() 미들웨어를 사용해야 JSON 데이터를 사용할 수 있음.

오류 처리 미들웨어 구현하기

app.use((err, req, res, next) => {
	res.status(500);

	res.json({
		result: 'fail',
		error: err.message,
	});
});

 

· 가장 마지막 미들웨어로 오류 처리 미들웨어를 적용하면 모든 라우팅에 공통적인 오류처리 로직을 적용할 수 있음.

정의되지 않은 라우팅에 404 오류 처리하기

app.use((req, res, next) => {
	res.status(404);
	res.send({
		result: 'fail',
		error: `Page not found ${req.path}`,
	});
});

 

· 모든 라우팅이 적용된 이후에 사용되는 미들웨어는 설정된 경로가 없는 요청을 처리하는 Route Handler로 동작함.
· Express.js는 기본적인 404 페이지를 가지고 있지만, 직접 처리가 필요한 경우 이와 같은 Router Handler를 추가해야 함.

---

Postman 사용하기

Postman 소개

API를 테스트할 수 있는 도구로, HTTP 요청을 손쉽게 작성하여 테스트 해볼 수 있게 도움을 줌.

추가적으로 API를 문서화할 수 있는 기능 및 다양한 도구를 제공함.

 

Postman으로 API 문서화하기

• collection 만들기
• api request 만들기
• document 작성하기
• 전체 문서 확인하기

 

Postman으로 API 테스트하기

• HTTP Method 설정하기
• query param 사용하기
• path variable 사용하기
• body 사용하기

 

실습 폴더 다운받은 후 터미널에서 node 실행

npm i

npm start

오류나서 다시 시도하니까 해결됨.

 

로컬 브라우저에서는 접속이 되는데, 포스트맨에서 에러가 뜨길래

useragent 설치 후 진행하니 제대로 됨.

 

save를 해야 Documentation에 기록되는 것을 확인할 수 있다.

https://www.postman.com/

Postman API Platform | Sign Up for Free

https://velog.io/@loo-ke/Postman-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

Postman 사용하기

---

req.query
· Express.js 프레임워크에서 제공되는 request 객체의 속성 중 하나
· req.query는 URL 쿼리 매개변수를 포함함.
· 클라이언트에서 서버로 전달된 쿼리 문자열을 파싱하여 key-value 쌍으로 저장함.

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

// 라우트 핸들링
app.get('/api/user', (req, res) => {
  // req.query를 사용하여 URL 쿼리 매개변수에 접근
  const userId = req.query.id;
  const userName = req.query.name;

  // 받은 매개변수로 응답 생성
  res.send(`사용자 ID: ${userId}, 사용자 이름: ${userName}`);
});

app.listen(port, () => {
  console.log(`서버가 http://localhost:${port}에서 실행 중입니다`);
});

 

router에서 에러를 throw하면 사용하는 곳에서 catch해야됨.

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

// 의도적으로 오류를 발생시키는 라우트
app.get('/fail', (req, res) => {
  throw new Error('Error!');
});

// 오류 처리 미들웨어
app.use((err, req, res, next) => {
  // 콘솔에 오류 스택 로깅
  console.error(err.stack);
  // 500 상태 코드와 함께 일반 오류 응답을 전송
  res.status(500).send('문제가 발생했습니다!');
});

app.listen(port, () => {
  console.log(`서버가 http://localhost:${port}에서 실행 중입니다`);
});

 

exports.list = () => {}와 같은 함수 형태로 모듈을 내보내면,
다른 파일에서는 require를 사용하여 해당 모듈을 불러온 뒤, 함수를 호출할 수 있음.
require("../models/book")를 사용하여 bookModel을 불러온 후, bookModel.list()로 호출하면 됨. 

(불러온모듈).함수()