[TIL] Day15 - map(), forEach(), 전체 개별 DELETE, PUT

전체조회

Map이 key-value 쌍으로 생성되어도, JSON형식으로 바로 브라우저에 보낼수는 없다. 입력정제가 필요하다~

 

forEach() 자바스크립트 함수

`JSON.stringify` 메소드 : 

app.get("/youtubers", (req, res) => {
  let youtubers = {};
  db.forEach((val, key) => (youtubers[key] = val));
  res.json((youtubers));
});

 

for + each " 개선된 for문"

배열 + 일반적 사용까지 확대

객체(배열)에서 요소를 하나 꺼낸 다음 매개변수로 그 요소를 전달하여 호출하는 콜백함수

const arr = [1,2,3,4,5];

arr.forEach((val, idx, all)=>console.log(`val : ${val}, idx : ${idx}, all : ${all}`));

//console
val : 1, idx : 0, all : 1,2,3,4,5
val : 2, idx : 1, all : 1,2,3,4,5
val : 3, idx : 2, all : 1,2,3,4,5
val : 4, idx : 3, all : 1,2,3,4,5
val : 5, idx : 4, all : 1,2,3,4,5

 

객체에서 사용법

let map = new Map();
map.set(7,"seven")
map.set(9,"nine")
map.set(8,"eight")

map.forEach((val, idx, all)=>console.log(`val : ${val}, idx : ${idx}, all : ${all}`));

//console
val : seven, idx : 7, all : [object Map]
val : nine, idx : 9, all : [object Map]
val : eight, idx : 8, all : [object Map]

 

map() 자바스크립트 함수

arr.map((val, idx, all)=>console.log(`val : ${val}, idx : ${idx}, all : ${all}`));

 

차이

반환타입 차이 return

const arr = [1,2,3,4,5];

const foreachArr = arr.forEach((val, idx, all)=>{return val*2});

const mapArr = arr.map((val, idx, all)=>{return val*2});

console.log(`foreach로 return하면 ${foreachArr},
    map으로 return하면 ${mapArr}`);

//console
foreach로 return하면 undefined,
    map으로 return하면 2,4,6,8,10

forEach는 값을 반복문을 돌지만, return값은 전달하지않고

map은 값이 반복문을 돌고, return값을 전달해 새로운 arr을 만들어낼 수 있다.

 

DELETE

<API 설계 URL, method> ⇒ res 부분을 프론트와 소통하면서 전달해야하는 메인 데이터이기 때문에, 구조설계를 잘 해야한닷..!!

1. 전체 유튜버 조회 GET `/youtubers`
   • req : X
   • res : map 전체조회
2. 개별 유튜버 조회 GET `/youtubers/:id` : id로 map에서 객체를 찾아서, 그 객체의 정보를 뿌려줌
   • req : params.id ← map 에 저장된 key 값을 전달
   • res : map에서 id로 객체를 조회해서 전달
3. 유튜버 등록 POST `/youtubers`
   • req : body ← channelTitle, sub = 0, videoNum = 0 신규 유튜버 정보 전달
   • DB에 저장 put
   • res : "channelTitle님, 유튜버 등록이 완료되었습니다."
4. 유튜버 삭제 DELETE `/youtubers/:id`
   • req : params.id
   • res : "channelTitle님, 삭제되었습니다."
   • 예외처리 : db에 등록되지 않은 id값을 삭제요청할 시-> 정보없음 응답

 

app.delete("/youtubers/:id", (req, res) => {
  let { id } = req.params;
  id = parseInt(id);
  let youtuber = db.get(id);

  if (!youtuber)
    res.json({ message: `요청하신 ${id}번은 없는 유튜버 입니다.` });
  else {
    const name = youtuber.channelTitle;
    db.delete(id);
    res.json({ message: `${name}님, 삭제되었습니다` });
  }
});

 

리팩토링 Refactoring

결과, 기능의 변경 없이 코드의 구조를 재조정하여 가독성을 높이는 과정.

이해하기 쉽게, 성능이 좋고, 안정성이 보장된! 좋은 `클린 코드`

리팩토링 하는 시기?

• 에러(문제점)이 n회 발견되었을 때!
• 리팩토링 하면서 에러(문제점) 발견!
• 기능을 추가하기 전!
  • ex. `API URL 설계 변경` 오탈자, 기능추가, 기존기능 테스트
• 코드 리뷰할 때

하면 안될 때? 배포, 운영 직전 에는 절대로 코드 수정이 일어나서는 안된다!

 

전체 DELETE

<API 설계 URL, method>

1. 전체 유튜버 조회 GET `/youtubers`
   • req : X
   • res : map 전체조회
2. 개별 유튜버 조회 GET `/youtubers/:id` : id로 map에서 객체를 찾아서, 그 객체의 정보를 뿌려줌
   • req : params.id ← map 에 저장된 key 값을 전달
   • res : map에서 id로 객체를 조회해서 전달
3. 유튜버 등록 POST `/youtubers`
   • req : body ← channelTitle, sub = 0, videoNum = 0 신규 유튜버 정보 전달
   • DB에 저장 put
   • res : "channelTitle님, 유튜버 등록이 완료되었습니다."
4. 유튜버 삭제 DELETE `/youtubers/:id`
   • req : params.id
   • res : "channelTitle님, 삭제되었습니다."
   • 예외처리 : db에 등록되지 않은 id값을 삭제요청할 시-> 정보없음 응답
5. 전체 유튜버 삭제 DELETE `/youtubers`
   • req : X
   • res : "전체 유튜버가 삭제되었습니다."
   • 예외처리 : clear 할 유튜버가 없으면? 이미 비어있으면?

 

반복되는 json 메시지 반환을 변수에 담아서 보낸다

app.delete("/youtubers", (req, res) => {
  let msg = "";
  if (db.size >= 1) {
    db.clear();
    msg = "전체 유튜버가 삭제되었습니다.";
  } else {
    msg = "삭제할 유튜버가 없습니다.";
  }
  res.json({
    message: msg,
  });
});

 

개별 PUT 수정

5. 개별 유튜버 수정 PUT `/youtubers/:id`

• req : params.id, body - channelTitle
• res : "channelTitle님, 채널명이 newChannelTitle로 변경되었습니다"

app.put("/youtubers/:id", (req, res) => {
  let { id } = req.params;
  id = parseInt(id);
  let youtuber = db.get(id);
  var oldTitle = youtuber.channelTitle;

  if (!youtuber)
    res.json({ message: `요청하신 ${id}번은 없는 유튜버 입니다.` });
  else {
    let newChannelTitle = req.body.channelTitle;
    youtuber.channelTitle = newChannelTitle;
    db.set(id, youtuber);

    res.json({
      message: `${oldTitle}님, 채널명이 ${newChannelTitle}로 변경되었습니다`,
    });
  }
});

 

HTTP Status 상태 코드

• 200 : 연결, 요청 성공 (조회, 수정, 삭제)
• 201 : 등록 성공
• 400 : 요청한 연산(처리)를 할때 필요한 데이터 req가 덜 왔다
• 404 : url 경로가 잘못되었다.. 찾는 페이지 없다.
• 500 : 서버 죽었다... 터졌다... 심각한 오류를 맞았을 때

성공 `2xx`

실패나 오류

클라이언트 잘못 : `4xx`

서버 잘못 : `5xx`

 

HTTP 상태 코드 - HTTP | MDN

 

☑️ 배운 점

DELETE 전체, 개별

PUT 개별

`.clear` : 전체삭제 → 데이터에 객체가 연결되어, 다른부분에서 사용하는게 있다면, 통으로 다 날리는건지,,, 연쇄삭제, 삭제제한 등.. 방법 찾아보기!

리팩토링을 새 기능을 feat 할때 같이 점검하기. → 깃 브랜치로 협업할때 충돌이 많이 일어나는 부분이 되지 않은가? 라는 생각이 들었다..