데브코스 TIL - Day 21

23년 12월 15일 강의를 들은 내용을 기록한 글입니다.

실습 1 - 채널, 회원 합치기 (Router)

app.js를 만들어서 라우팅 관리하기

• app.js : 하나의 서버에서
• routes : 라우팅

# 디렉토리 구조
├── node_modules
├── routes
│   ├── channels.js
│   └── members.js
├── app.js
├── package-lock.json
└── package.json

// app.js
// app.js에서 서버를 만들고, 만들어둔 members 모듈과 channel 모듈을 추가해서 하나로 합치기
const express = require("express");
const app = express();
const PORT = 3000;

app.listen(PORT, () => {
  console.log(`${PORT} is open`);
});

// members,channels 모듈 가져오기
const memberRouter = require("./routes/members");
const channelRouter = require("./routes/channels");

// use()를 사용해서 module 사용하기
app.use("/", memberRouter);
app.use("/", channelRouter);

모듈로 가져오려면?

각각의 파일에서 express(),listen()를 사용해 서버를 만들어서 사용했었는데, app.js가 라우터로 활용할 수 있게 변경해주면 됨

1. const app = express() → const router = express.Router();
2. app.use(express.json()) → router.use(express.json())
3. app.post, app.get, app.delete, app.put → router.post, router.get, router.delete, router.put
4. app.listen(3000) 삭제
5. 모듈로 사용할 수 있도록 exports 하기
   • module.exports = router

// 변경 전 코드
const express = require("express");
const const app = express();

const db = new Map();

app.use(express.json());

// 회원가입
app.post("/join", (req, res) => {
  const { id, pwd, name } = req.body;
  if (id.length > 0 && pwd.length > 0 && name.length > 0) {
    db.set(id, { id, pwd, name });
    const member = db.get(id);
    res.status(201).send({ message: `${member.name}님, 환영합니다.` });
  } else {
    res
      .status(400)
      .send({ message: "잘못된 요청입니다. 입력값을 다시 확인해주세요" });
  }
});

// ... 중략

app.listen(3000);

// 변경 후 코드
//  app.js가 라우터로 활용할 수 있게 해주면 됨
// express.Router()를 사용
const express = require("express");
const router = express.Router();

const db = new Map();

router.use(express.json());

// 회원가입
router.post("/join", (req, res) => {
  const { id, pwd, name } = req.body;
  if (id.length > 0 && pwd.length > 0 && name.length > 0) {
    db.set(id, { id, pwd, name });
    const member = db.get(id);
    res.status(201).send({ message: `${member.name}님, 환영합니다.` });
  } else {
    res
      .status(400)
      .send({ message: "잘못된 요청입니다. 입력값을 다시 확인해주세요" });
  }
});

// ... 중략

module.exports = router;

channels 라우터 경로 수정하기

channels 파일을 잘 살펴보면 'channels' 공통된 단어로 라우팅이 이루어지는 것을 확인할 수 있다.

router
  .route("/channels")
  //   전체 채널 조회
  .get((req, res) => {
    // ...
  });

router.route("/channels/:id").get((req, res) => {
  // ...
});

때문에 app.js에서 route 설정할 때 루트URL('/')이 아닌 '/channels' 로 설정하면 가독성도 높아지고, 코드의 오류를 줄일 수 있다.

// app.js

// ...중략

// app.use("/", channelRouter);
app.use("/channels", channelRouter);

// channels.js

// ... 중략

router.route("/").get((req, res) => {
  // ...
});

router.route("/:id").get((req, res) => {
  // ...
});

회원마다 채널 가지도록 하기위해 데이터베이스 설계해보기

회원마다 채널을 100개 만들 수 있기때문에, channel을 누가 만들었는지 구분하기 위해 채널에 user_id 속성 값을 추가

API 수정하기

채널 API 수정

1. 채널 생성 (POST /channels)

   • req:
     • body (channelTitle, userId)
     • 원래는 userId → Header로 전달받아야함 (Token에 담아서)
   • res:
     • status code : 201
     • ${channelTitle}님, 채널 생성한 것을 축하드립니다.
     • 채널 관리 페이지

2. 회원의 채널 전체 조회 (Get /channels)

• req: body(userId)
• res: 채널 전체 데이터 list

실습 코드

• 회원의 채널 전체 조회
  • db에 있는 데이터들의 userId와 req.body로 들어온 userId가 일치하는 것들만 반환
  • userId가 없으면 일치하지 않는다는 오류 메세지 전달

router
  .route("/")
  //   전체 채널 조회
  .get((req, res) => {
    const { userId } = req.body;
    if (channelDB.size && userId) {
      const dbArr = [];
      channelDB.forEach((ch) => {
        if (ch.userId === userId) {
          dbArr.push(ch);
        }
      });
      if (dbArr.length) {
        res.status(200).send(dbArr);
      } else {
        notFoundChannel();
      }
    } else {
      notFoundChannel();
    }
  });

• 개별 채널 생성
  • req.body로 userId를 받아오고, 받아온 데이터를 db에 저장하기

  //   개별 채널 생성
  .post((req, res) => {
    const { channelTitle, userId } = req.body;
    if (channelTitle) {
      channelDB.set(id++, { channelTitle, subscriber: 0, videoNum: 0, userId });
      res
        .status(201)
        .send({ message: `${channelTitle}님, 채널이 생성되었습니다.` });
    } else {
      res.status(400).send({ message: "잘못된 요청입니다." });
    }
  });

배운 내용 정리

라우팅 (Routing)

express 공식 문서 - Routing

Request(요청)이 날아왔을 때, 원하는 경로에 따라 적절한 경로로 안내해주는 것

라우터를 모듈로 생성하고, 사용하기

• router 모듈로 내보내기

const express = require("express");
const router = express.Router();

// middleware that is specific to this router
router.use((req, res, next) => {
  console.log("Time: ", Date.now());
  next();
});
// define the home page route
router.get("/", (req, res) => {
  res.send("Birds home page");
});
// define the about route
router.get("/about", (req, res) => {
  res.send("About birds");
});

module.exports = router;

• app.js 파일에서 가져와서 사용하기

const birds = require("./birds");

// ...

app.use("/birds", birds);