✨유튜브데모 업그레이드
전체조회시 나는 배열안에 키값없이 객체들을 넣어줬었고,
그것을 편하게 하기 위해 db를 배열로 만들어 map으로 돌려줬었다.
강사님은 객체안에 키:{} 형식으로 넣는것을 보고 다시 수정했다.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map
mdn 사이트를 참고하여 수정했다❗
|
물론 Map Object형태에서 forEach로 사용해서 value,index(key)를 받아서 사용해도 되고,
Object.fromEntries(obj)
를 사용하여 한 줄로 가능한 방법도 존재한다.
객체 안에 key:{} 형식으로 잘 들어오는 것이 확인된다.
🗝️forEach란?
향상.개선된 for문
점선을 경계로 array의 forEach와 Map Object의 forEach의 터미널에 찍히는 값이다❗
🗝️Map란?
그냥 봤을때 같은 콜백함수를 갖고 순회하는 함수로 보이지만, | |
forEach | 기존 배열을 수정하지 않는다 return 값을 내보낼 수 없다. undefined로 나온다. |
map | 기존 배열을 수정하지 않는다. return 값으로 새로운 배열을 반환한다. |
❄️유튜버 삭제기능 구현하기❗
➡️🔥DELETE를 활용해서 유튜버를 삭제하기❗🔥
<API 설계(URL과 method)> 설계추가하기
개별삭제의 method => DELETE/youtubers/:id
- req: params.id
- res: map에서 id로 객체를 조회해서 삭제
전체삭제의 method => DELETE/youtubers
- req: X
- res: map있는 객체들 전체삭제
💢GET과 DELETE의 URL이 동일하지만, method가 다르면 아무런 문제가 없다❗ 💢원래 res에 보내주는 데이터는 프론트엔드와 백엔드가 긴밀하게 회의를 해서 정해야 함❗ |
❄️개별삭제
처음에 예외처리를 하지 않았더니 없는 id임에도 삭제되었다고 나와서
예외처리도 해줬다. db.delete(id)가 없다면 false로 나오고 삭제되었다면 true로 나와서
if 조건문에서 boolean값으로 조건에 따라 실행되게 코드를 짜보았다.
Map Object에 존재하는 아이디를 삭제했을때❗ |
삭제 후 한 번 더 send 했을때❗ |
리팩토링이란?
소프트웨어의 코드 내부(구조)를 변경하는 것.
- 가독성(이해하기 쉽게)
- 성능
- 안정성
=> ✨이 모든 것이 충족되면 클린코드❗❗
🗝️🗝️리팩토링을 해야하는 시점❗
- 에러(문제점)이 n회 발견되었을때❗
- 리팩토링을 하면서, 에러(문제점)을 발견할 수도 있음❗
- 기능을 추가하기 전🔥
- 코드 리뷰할때
❌❌❌❌❌But 배포, 운영 직전에는 절대로 코드 수정이 일어나선 안된다❌❌❌❌❌ |
❄️전체삭제
clear() 함수를 이용하여 전체삭제를 해줬다.
db.size로 0보다 크면 삭제, 아니라면 삭제할 계정이 없다고 예외처리를 해주었다❗
clear()함수를 사용 후 console.log(db)로 찍었을때 Map(0) {}으로 빈 map으로 나온다. |
모든 계정이 삭제되었다는 message를 보내줬다❗ |
이미 모든 계정이 삭제 되었는데 또 삭제 요청을 했을때 처리❗ |
➡️조건문마다 res.json({})을 걸지 않고 변수를 넣어 메세지를 변경하게 하면 더욱 간결한 코드로 작성 가능함❗
❄️유튜버 수정기능 구현하기❗
➡️🔥PUT를 활용해서 유튜버를 삭제하기❗🔥
<API 설계(URL과 method)> 설계추가하기
개별수정의 method => PUT/youtubers/:id
- req: params.id, body <= channelTitle가져와야함
- res: map에서 id로 객체를 조회해서 삭제
💢이슈: URL 검색의 편의를 생각해서 Map Object 안에서의 key값을 숫자가 아닌 id로 했더니 수정을 할 때, Map에서 key 값이 변경되지 않는다는 것을 생각하고 지금 구현한 코드에서는 id와 일치하는 key값의 data를 삭제하고 새로 넣은 channelTitle의 id로 다시 추가해주었다. 원래 Map Object에서는 key값만 가져온다면 set()함수로 재할당이 가능하다. 지금은 Map Object라 이런 일이 생겼지만, 진짜 DB값으로 할때는 가능하거나 다르게 짜볼 수 있지 않을까 생각한다❗ |
처음 테오를 하이로 바꿔줬을때 res.json의 처리❗ |
변경 후 다시 send를 눌렀을 때의 처리❗ |
테오의 key와 channelTitle이 하이로 들어온다❗ |
HTTP 상태코드
- 200: 조회/수정/삭제성공
- 201: 등록 성공
- 404: 찾는 페이지(리소스) 없음(url에 맞는 api 없음)
- 500: 서버가 죽었을 때(서버가 크리티컬한 오류를 맞았을 때)
https://developer.mozilla.org/ko/docs/Web/HTTP/Status
'공부 > 타입스크립트로 함께하는 웹 풀 사이클 개발(React, Node.js)' 카테고리의 다른 글
백엔드 기초: Node.js + Express 기본(9)-빈 객체 확인, 채널 설계 (0) | 2024.09.09 |
---|---|
백엔드 기초: Node.js + Express 기본(8)-HTTP status, 유튜브데모 users 설계 (5) | 2024.09.07 |
백엔드 기초: Node.js + Express 기본(6)-POSTMAN, method (POST, GET) (1) | 2024.09.05 |
백엔드 기초: Node.js + Express 기본(5)-map에 Object, express 애플리케이션 생성 처음해보기 (0) | 2024.09.03 |
백엔드 기초: Node.js + Express 기본(4)-구조분해할당, 네이밍케이스, map (0) | 2024.09.02 |