프로그래머스 데브코스 17일차 with. TS 웹 풀스택

📚요약

지난 시간에 post 요청으로 데이터를 추가해 봤습니다. 이번 시간에는 전체 조회(GET), 개별 삭제(DELETE), 전체 삭제(DELETE), 개별 수정(PUT) API를 추가해보겠습니다. 그에 관련된 JS도 알아보고 HTTP Status Code로 다시 알아보겠습니다.

 

📖JS

📄Map → Object

뒤에 나오겠지만 Map을 json으로 사용하기 위해서는 Object로 바꿔서 사용해야 하기 때문에 바꾸는 방법을 알아보겠습니다.

const book1 = {
  name: "book1",
  author: "author1",
  publishDate: "1999.06.14",
};

const book2 = {
  name: "book2",
  author: "author2",
  publishDate: "2005.05.12",
};

const book3 = {
  name: "book3",
  author: "author3",
  publishDate: "2000.04.15",
};

const db = new Map();
db.set(1, book1);
db.set(2, book2);
db.set(3, book3);

// 1. Object.fromEntries()로 Map을 Object로 변환
console.log(Object.fromEntries(db));

// 2. 새로운 객체 books에 db.forEach()를 통해 키-값 추가
const books = {};
db.forEach((v, k) => {
  books[k] = v;
});

console.log(books);
res.json(books);

 

📄Map, Array의 forEach()

반복문을 사용하는 경우 for문 사용하게 되는데 forEach의 경우 좀 더 쉽게 이용할 수 있도록 만들어진 함수입니다.

// Array의 forEach
const arr = [1,2,3,4,5]

for(let i=0; i<arr.length; i++) {
  console.log(arr[i]);
}

arr.forEach((element, index, array)=>{
  console.log(`el: ${element} i: ${index}`);
  console.log(array);
})

// Map의 forEach
const map = new Map([[1,'1'],[2,'2'],[3,'3']]);

for(let [key,value] of map) {
  console.log(`key: ${key} value : ${value}`);
}

map.forEach((value,key,origin)=>{
  console.log(`${value} - ${key}`);
  console.log(origin);
})

🍯tip! Array의 map()은 forEach()와 비슷하게 반복을 합니다. 차이점은 요소의 값을 변경한다는 점입니다.

 

📖API 추가

📄전체 조회(GET)

Map을 사용하기 위해서는 Object로 바꿔서 사용할 필요가 있기 때문에 앞에 설명한 방법 중 편한 방법을 사용하면 될 것 같습니다.

// GET 전체 조회
app.get("/books", (req, res) => {
  res.json(Object.fromEntries(db));
  // res.json(JSON.stringify(Object.fromEntries(db)));
});

🍯tip! 콘솔 창에서는 같은 결과로 나오지만 postman에서는 stringify를 하지 않는 경우가 보기에 좋다.

같은 요청에서 단순하게 객체를 출력한 경우(좌) & JSON.stringify한 경우(우)

 

📄개별 삭제(DELETE)

id를 받아와 해당 id에 대한 데이터가 존재하는 경우 삭제합니다. 데이터가 존재하는지의 여부를 확인해도 되지만 Map의 delete 함수를 통해 true의 경우 삭제가 된 것으로 false의 경우 삭제가 안되거나 데이터가 없는 경우로 나눠도 문제가 없습니다. 

// DELETE id로 개별 삭제
app.delete("/books/:id", (req, res) => {
  let { id } = req.params;
  id = parseInt(id);

  const removed = db.get(id);

  if (db.delete(id)) {
    res.json({
      message: `delete book ${removed.name}`,
    });
  } else {
    res.json({
      message: `there is no data ${id}`,
    });
  }
});

 

📄전체 삭제(DELETE)

전체 삭제의 경우 Map의 clear 함수를 이용하면 편하게 할 수 있고, 이미 텅 빈 데이터베이스의 경우만 케이스 처리를 해줍니다.

// DELETE 전체 삭제
app.delete("/books", (req, res) => {
  let message = "";

  if (!db.size) {
    message = "database is already empty";
  } else {
    db.clear();

    message = "database is empty";
  }
  res.json({
    message: message,
  });
});

 

📄개별 수정(PUT)

개별 수정의 경우 데이터가 있어야 수정 가능하기 때문에 데이터의 유무를 확인하고 있으면 Map의 set 함수를 이용해 수정합니다. 그 외에도 기존 데이터와 수정하려는 데이터가 같다면 수정하지 않는 부분도 추가했습니다.(해당 부분은 실제 데이터베이스와 연결할 때 큰 의미가 있을까 싶습니다..)

// PUT id로 개별 수정
app.put("/books/:id", (req, res) => {
  let { id } = req.params;
  id = parseInt(id);

  const before = db.get(id);
  const { newName } = req.body;
  if (!before) {
    res.json({
      message: `there is no data ${id}`,
    });
  } else if (before.name === newName) {
    res.json({
      message: `there is no change`,
    });
  } else {
    db.set(id, { ...before, name: newName });

    res.json({
      message: `change data ${before.name} => ${newName}`,
    });
  }
});

 

🍯tip! 계속 node.js로 실습을 진행하는 경우 매번 실행시키는 귀찮음이 있는데 nodemon 패키지를 설치하면 파일을 저장하기만 하면 변경사항을 자동으로 시켜준다.

 

📖리팩터링(refactoring)

리팩터링이란 소프트웨어 공학에서 결과의 변경 없이 코드의 구조를 재조정하는 것을 의미한다

△리팩터링-위키백과

목적

• 가독성 향상, 복잡성 감소 → 버그 및 취약점 발견
• 유지보수의 편리함
• 설계, 구조 및 구현의 개선 및 기능 보존

언제 하는가? 사실 자유롭게 원하는 때에 할 수 있는 것이 리팩토링의 장점입니다. 하지만 배포를 하거나 실제 운영 직전의 코드를 수정하는 것은 절대 금지입니다.

 

📖HTTP Status Code

현재 HTTP의 응답에 대한 상태를 나타내는 코드입니다. 크게 5가지로 1xx(정보), 2xx(성공), 3xx(리다이렉션), 4xx(클라이언트 오류), 5xx(서버 오류) 분류합니다.

 

일반적으로 많이 보는 코드

• 200 : 조회, 수정, 삭제 성공
• 201 : 새로운 데이터 생성 성공
• 404 : 요청한 페이지를 찾을 수 없음
• 500 : 서버 오류로 요청을 수행할 수 없음

 

다음 시간에 계속...

 

출처 & 참고

김송아 강사님의 강의

how to conver a map to json in javascript, Glasshost, 2024.04.30

자바스크립트 자료형 Map 정리, Inpa, 2024.04.30

nodemon 설치 및 실행방법, wheezy, 2024.04.30

HTTP 상태 코드, 위키백과, 2024.04.30