1. express 설치 및 구동

• 터미널에서 yarn add express를 통해 express 설치
• 터미널에서 yarn init

1. package.json 파일이 생성된다.
2. package.json에 "type": "module" 을 추가해준다.
3. express가 제대로 설치가 되었다면 package.json에 "express": "^4.18.2"이 올라가있다.

---

• 완료화면
  

// index.js에 이런식으로 하면 express 사용 가능하다!!!
import express from "express"; // 요즘 방식 => module

const app = express(); //api만드는 기능이 추가된  것!!

// /qqq는 엔드포인트이다!!
app.get("/qqq", function (req, res) {
  res.send("sadfsafdsafdsafdsfa");
});

// app.post("/myprofile", function(req, res){
//     res.send("여기 응답~~")
// })

app.listen(3000); // 포트값

// terminal 끄는법 contrl + c
// 한컴퓨터에 있는 것을 postman에서 이용하려면 localhost를 써줘야한다.

2. Nodemon(노드몬)

• 서버를 수정하고 저장하면 반영이 안되지만, 서버를 재시작하면 반영이 된다.

• 그 과정이 굉장히 비효율적이기 떄문에 노드몬을 사용한다.

$ yarn add nodemon

• 명령어 실행하는 두가지 방법

1. 컴퓨터 전체에 설치
2. nodemon이 제대로 설치가 되었다면 package.json에 "nodemon": "^2.0.21"이 올라가있다.
3. package.json에서 나만의 명령어 만들기(scripts에 명령어 추가하기)

"scripts": {
  "나만의명령어": "nodemon index.js"
}

3. json 데이터 받아오기

• express.json() // 옛날에는 bodyParser 사용

app.use(express.json());

4. API docs

• 백엔드개발자는 API를 만들고 꼭 명세서를 작성해야 한다.

• 명세서를 작성을 하지 않으면 프론트엔드 개발자는 이 API가 어떤 일을 하는지 모르기 때문

• 명세서를 잘 작성해야 프론트엔드 개발자랑 협업하기 좋다

5. swagger-ui-express , swagger-jsdoc

• API를 만들고 명세서를 만들기 위해 꼭 필요한 도구들

• 설치 방법

$ yarn add swagger-ui-express -> swagger-ui-express설치
$ yarn add swagger-jsdoc -> swagger-jsdoc 설치

설치가 잘 완료 되었다면 사용법을 알아볼려면
공식 사이트의 DOCS를 읽어보는것을 추천한다!

//index.js
import express from "express"; // 요즘 방식 => module
import swaggerUi from "swagger-ui-express";
import swaggerJSDoc from "swagger-jsdoc";
import { options } from "./swagger/config.js";

const app = express();
app.use(express.json()); // 옛날에는 bodyParser 시용
app.use("/api-docs", swaggerUi.serve, swaggerUi.setup(swaggerJSDoc(options)));
app.get("/starbucks", function (req, res) {
  // 1. DB에 접속 후, 데이터를 조회 => 데이터를 조회했다고 가정
  const result = [
    {
      name: "아메리카노",
      kcal: 5,
    },
    {
      name: "카페라때",
      kcal: 10,
    },
    {
      name: "콜드브루",
      kcal: 15,
    },
    {
      name: "아이스아메리카노",
      kcal: 20,
    },
    {
      name: "에스프레소",
      kcal: 1,
    },
    {
      name: "바닐라라때",
      kcal: 2,
    },
    {
      name: "아포가토",
      kcal: 3,
    },
    {
      name: "프라프치노",
      kcal: 5,
    },
    {
      name: "카페모카",
      kcal: 6,
    },
    {
      name: "디카페인",
      kcal: 7,
    },
  ];

  // 2. DB에서 꺼내온 결과를 브라우저에 응답을(response)로 주기

  res.send(result);
});

app.get("/users", function (req, res) {
  // 1. DB에 접속 후, 데이터를 조회 => 데이터를 조회했다고 가정
  const result = [
    {
      email: "aaa@gmail.com",
      name: "철수",
      phone: "010-1234-5678",
      personal: "220110-2222222",
      prefer: "https://naver.com",
    },
    {
      email: "bbb@gmail.com",
      name: "영희",
      phone: "010-2222-5678",
      personal: "320110-2222222",
      prefer: "https://google.com",
    },
    {
      email: "ccc@gmail.com",
      name: "민철",
      phone: "010-3333-5678",
      personal: "420110-2222222",
      prefer: "https://daum.com",
    },
    {
      email: "ddd@gmail.com",
      name: "민수",
      phone: "010-4444-5678",
      personal: "520110-2222222",
      prefer: "https://yahoo.com",
    },
    {
      email: "fff@gmail.com",
      name: "수아",
      phone: "010-5555-5678",
      personal: "620110-2222222",
      prefer: "https://empas.com",
    },
  ];

  res.send(result);
});

app.listen(3000); // 포트값

// config.js
export const options = {
  definition: {
    openapi: "3.0.0",
    info: {
      title: "Starbucks",
      version: "1.0.0",
    },
  },
  apis: ["./swagger/*.swagger.js"], // files containing annotations as above
};

// starbucks.swagger.js
/**
 * @swagger
 * /starbucks:
 *   get:
 *     summary: 커피 메뉴 리스트 가져오기
 *     tags: [Starbucks]
 *     responses:
 *       200:
 *         description: 성공
 *         content:
 *           application/json:
 *             schema:
 *               type: array
 *               items:
 *                 properties:
 *                   name:
 *                     type: string
 *                     example: 아메리카노
 *                   kcal:
 *                     type: int
 *                     example: 5
 *
 *
 */

// users.swagger.js
/**
 * @swagger
 * /users:
 *   get:
 *     summary: 사람 메뉴 리스트 가져오기
 *     tags: [users]
 *     responses:
 *       200:
 *         description: 성공
 *         content:
 *           application/json:
 *             schema:
 *               type: array
 *               items:
 *                 properties:
 *                   email:
 *                     type: string
 *                     example: aaa@gmail.com
 *                   name:
 *                     type: string
 *                     example: 민수
 *                   phone:
 *                     type: string
 *                     example: 010-1234-5678
 *                   personal:
 *                     type: string
 *                     example: 220110-2222222
 *                   prefer:
 *                     type: string
 *                     example: https://naver.com
 *
 *
 *
 */

간략하게 유저목록을 조회하는 api와 커피메뉴를 조회하는 api를 데이터를 하드코딩하여 만들어 보았다
내가 만든 스웨거 사이트가 정상 작동하는지 확인해보자!!

---