데브코스 TIL - Day 20

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

로그인 로직 작성하기

• db를 반복해서 돌면서 id와 pwd가 일치하는지 확인하기

//로그인
function isExist(obj) {
  return Object.keys(obj).length > 0 ? false : true;
}
function idMatch(db, id) {
  let loginUser = {};
  db.forEach((member) => {
    if (member.id === id) {
      loginUser = member;
    }
  });
  return loginUser;
}

//로그인
app.post("/login", (req, res) => {
  const { id, pwd } = req.body;
  if (id && pwd) {
    const loginUser = idMatch(db, id);
    if (isExist(loginUser)) {
      if (loginUser.pwd === pwd) {
        res.status(200).send({ message: `${loginUser.name}님, 환영합니다.` });
      } else {
        res.status(400).send({ message: "비밀번호가 일치하지 않습니다." });
      }
    } else {
      res.status(400).send({ message: "일치하는 아이디가 없습니다." });
    }
  } else {
    res.status(400).send({ message: "잘못된 요청입니다." });
  }
});

• db에서 데이터를 저장할 때 key값을 id값으로 설정하고, db.get(id)로 해당 유저의 정보를 확인하기

//로그인
app.post("/login", (req, res) => {
  const { id, pwd } = req.body;
  if (id && pwd) {
    const member = db.get(id);
    if (member) {
      const memberPwd = member.pwd === pwd;
      if (memberPwd) {
        res.status(200).send({ message: `${member.name}님, 환영합니다.` });
      } else {
        res.status(400).send({ message: "비밀번호가 일치하지 않습니다." });
      }
    } else {
      res.status(404).send({ message: "일치하는 아이디가 없습니다." });
    }
  } else {
    res.status(400).send({ message: "잘못된 요청입니다." });
  }
});

채널 API 설계

• 채널 API
  • 채널 생성
  • 채널 수정
  • 채널 삭제
  • 채널 전체 조회
  • 채널 개별 조회

페이지별 필요한 API 확인하기 (채널)

■ 마이 페이지

• data: id, 이름
• 화면 렌더할 때 회원 정보 API가 필요함 (개별 회원정보 조회)
• 회원탈퇴 버튼 클릭 → 회원 탈퇴시켜줄 API
• 채널 관리 버튼 클릭 → 채널 관리 화면으로 이동

■ 채널 관리 페이지

• data: channels
• 화면 렌더할 때 회원이 소유한 전체 채널 정보 API가 필요함
• 각 채널별 이동 버튼 클릭 → 각 채널 상세 페이지로 이동
• 채널 생성 버튼 클릭 → 채널 생성 화면으로 이동
• 삭제 버튼 클릭 → 개별 채널 정보 삭제할 API

■ 채널 개별 수정 페이지

• data: channelTitle
• 화면 렌더할 때 개별 채널 정보 API가 필요함
• 수정완료 버튼 클릭 → 개별 채널 정보 수정할 API

■ 채널 생성 페이지

• data: channelTitle
• 채널 생성 버튼 클릭 → 입력받은 채널명으로 채널 생성할 API

채널 API 설계

1. 채널 생성 (POST /channels)

   • req: body (channelTitle)
   • res:
     • status code : 201
     • ${channelTitle}님, 채널 생성한 것을 축하드립니다.
     • 채널 관리 페이지

2. 채널 개별 수정 (PUT /channels/:id)

   • req: URL(id), body(channelTitle)
   • res:
     • status code : 200
     • 채널명이 성공적으로 수정되었습니다. 기존 채널명:${channelTitle}, 수정된 채널명:${newChannelTitle}
     • 수정된 페이지

3. 채널 개별 삭제 (Delete /channels/:id)

   • req: URL(id)
   • res:
     • status code : 200
     • ${channelTitle}님, 채널이 삭제되었습니다.
     • 메인 페이지

4. 채널 개별 조회 (Get /channels/:id)

• req: URL(id)
• res: 채널 데이터

1. 채널 전체 조회 (Get /channels)

• req: X
• res: 채널 전체 데이터 list

실습 코드 (채널 API)

const express = require("express");
const app = express();

const channelDB = new Map();
let id = 0;

app.use(express.json());

app
  .route("/channels")
  //   전체 채널 조회
  .get((req, res) => {
    if (channelDB.size > 0) {
      const dbArr = [];
      channelDB.forEach((ch) => dbArr.push(ch));
      res.status(200).send(dbArr);
    } else {
      res.status(200).send({ message: "채널 정보가 없습니다." });
    }
  })
  //   개별 채널 생성
  .post((req, res) => {
    const { channelTitle } = req.body;
    if (channelTitle) {
      channelDB.set(id++, { channelTitle, subscriber: 0, videoNum: 0 });
      res
        .status(201)
        .send({ message: `${channelTitle}님, 채널이 생성되었습니다.` });
    } else {
      res.status(400).send({ message: "잘못된 요청입니다." });
    }
  });

app
  .route("/channels/:id")
  //   개별 채널 조회
  .get((req, res) => {
    const { id } = req.params;
    const channel = channelDB.get(parseInt(id));
    if (channel) {
      res.status(200).send(channel);
    } else {
      res.status(404).send({ message: "일치하는 채널이 없습니다." });
    }
  })
  //   개별 채널 수정
  .put((req, res) => {
    const { id } = req.params;
    const { channelTitle } = req.body;
    const channel = channelDB.get(Number(id));
    const oldTitle = channel.channelTitle;

    if (id && channelTitle) {
      if (channel) {
        channel.channelTitle = channelTitle;
        channelDB.set(Number(id), channel);
        res.status(200).send({
          message: `채널명이 정상적으로 수정되었습니다. 기존 채널명:${oldTitle}, 수정된 채널명:${channelTitle}`
        });
      } else {
        res.status(404).send({ message: "일치하는 채널이 없습니다." });
      }
    } else {
      res.status(400).send({ message: "잘못된 요청입니다." });
    }
  })
  //   개별 채널 삭제
  .delete((req, res) => {
    const { id } = req.params;
    const channel = channelDB.get(parseInt(id));
    if (id && channel) {
      channelDB.delete(parseInt(id));
      res
        .status(200)
        .send({ message: `${channel.channelTitle}님, 채널이 삭제되었습니다.` });
    } else if (id) {
      res.status(404).send({ message: "일치하는 채널이 없습니다." });
    } else {
      res.status(400).send({ message: "잘못된 요청입니다." });
    }
  });

app.listen(3000);

결과

• 전체 조회

• 개별 채널 조회

• 채널 생성

• 채널 수정

• 채널 수정 확인(개별조회)

• 채널 삭제

배운 내용 정리

map 빈 객체 확인하는 방법 3가지

1. Object.keys() ★★ 가장 좋은 방법
2. for of 문
3. lodash (라이브러리) : isEmpty

■ Object.keys()사용해서 빈 객체 확인하기

객체들의 key 속성들을 배열로 반환하는 메소드

mdn 공식 문서

const obj = {};
const obj = { message: "안녕하세요" };

console.log(Object.keys(obj)); // []
console.log(Object.keys(obj)); // [ "message" ]