🔗 함께보기

🚩 웹 통신 / API
: API의 개념, REST와 RESTful, app.listen(), JSON

---

🌿 API 구축을 위한 툴과 개념

nodemon

: node monitor의 약자

• 서버의 소스코드를 변경 할 때마다 서버를 재시작Ctrl+C 해야 하는데, nodemon 프로그램을 설치하면 바로 서버에 반영(refresh) 해준다.
• 서버를 실행 할 때는 터미널에 yarn start 를 하면 되고, 개발모드로 킬 때는 yarn start:dev 를 입력
• 노드몬 사용하기

라우팅

: Routing

• 애플리케이션 엔드 포인트(URI)의 정의, 그리고 URI가 클라이언트 요청에 응답하는 방식
• ✔️ 네트워크에서 경로를 선택하는 프로세스

---

🌿 REST-API

:REST(Representational State Transfer) API

Endpoint

: API 엔드포인트는 API 호출을 수신하는 API 연결의 끝. 요청(API 호출)이 수행되는 곳

• /User 형태

REST에서 사용되는 API 명령어 (HTTP Method)

• 주로 5가지의 Method(GET, POST, PUT, PATCH, DELETE)를 사용하여 CRUD를 구현

메서드(Method)	작동(Action)	역할	작동내용(Pay Load)
GET	index/retrieve	조회	✕
POST	create	생성	O
PUT	replace	수정(전체교체)	O
PATCH	modify	수정(일부수정)	O
DELETE	delete	취소	✕

REST의 구성요소

• 자원(Resource), 행위(Verb), 표현(Representations)

구성요소	의미	표현방법	형태
자원(Resource)	자원	HTTP URI	명사(noun)
행위(Verb)	자원에 대한 행위	HTTP Method
표현(Representations)	자원에 대한 행위의 내용	HTTP Message Pay Load

• REST는 자체 표현 구조(Self-descriptiveness)로 구성되어 REST-API만으로 요청을 이해할 수 있다.

req 와 res

: REST-API에서 사용되는 변수의 이름

	개념	담기는 것	위치
request(요청)	클라이언트(브라우저)에서 HTTP Method를 이용한 요청	요청을 보낸 브라우저 주소, 쿠키, 바디, 쿼리 등	res.send()
response(응답)	서버에서 클라이언트(브라우저)로 보내는 응답	쿠키, HTTP status 코드, JSON 등	req.body

---

🌿 실습

💡 포스트맨(Postman)으로 API 만들기

1. 데이터 조회하기

• 포스트맨을 열고 GET 요청 선택
• URL에 http://localhost:포트번호/가져올 데이터 위치(엔드포인트) 입력
• SEND 버튼 클릭

2. 데이터 등록하기

• express 프레임워크는 기본적으로는 json형태를 지원하고 있지 않습니다. 따라서 서버에서 json을 읽어오기 위해 소스코드에 app.use(express.json()) 코드를 추가해야 합니다

• 포스트맨에서 POST 요청 선택 후, Body - raw - JSON 설정 선택
• 입력할 데이터 직접 작성 (예시)
  {
  email: "aaa@gmail.com",
  name: "철수",
  phone: "010-1111-1111",
  personal: "220110-1111111",
  prefer: "https://naver1.com",
  }
• SEND 버튼 클릭

---

💡 스웨거 (Swagger)로 API-Docs(API 명세서) 만들기

: API 작동에 대한 설명서로, 실무에서 협업을 위해 중요하다

❗️Node.js로 만든 API를 스웨거와 연결하기 위해 모듈 설치 필요

1. 스웨거 폴더 생성
2. [모듈 설치] 스웨거 문서가 담겨있는 폴더에서 터미널을 열고 yarn add swagger-ui-express swagger-jsdoc 작성
3. [경로 설정] config.js 라는 스웨거 문서 생성

   export const options = {
   definition: {
   openapi: '3.0.0',
   info: {
   title: '내 API 명세서',
   version: '1.0.0',
   },
   },
   apis: ['./swagger/*.swagger.js'], // files containing annotations as above
   };

4. board api와 관련된 설명을 boards.swagger.js 라는 명세서 파일을 만들어 형식에 맞게 작성
5. [swagger ui 작성] index.js에 추가

   import swaggerUi from 'swagger-ui-express'
   import swaggerJSDoc from 'swagger-jsdoc'
   import { options } from './swagger/config.js'
   // ...생략
   app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerJSDoc(options)));
   // ...생략

---

📚참고자료

• [주니어탈출기] REST API 이해하기
• 당신의 API가 Restful 하지 않은 5가지 증거
  
• API 엔드포인트는 무엇인가요?