Postman

  • API테스트 할 수 있게 해주는 API플랫폼

Thunder Client

  • vscode에서는 Thunder Client 바로 쓸 수 있어 편하니 추천!
  • https://www.thunderclient.com/

Map to JSON

시행착오 (GET /youtubers map에 들어있는 모든 내용 JSON으로 보내기)

  1. 순차

       for([key,value] of db){
     res.json(value);
     //console.log(db);
   }

    ### ⚠️에러 발생

    →error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client

    • 서버가 클라이언트에게 둘 이상의 응답을 보내려고 해서 발생하는 오류. 즉 요청을 for문으로 여러 번 보내서 에러가 발생함.
      1. forEach()로 돌아서 새 객체에 값을 매핑하여 보내기
        
     let yotubers = {};
        
     db.forEach((value,key)=>{
       youtubers[key] = value;
     });
     res.json(yotubers);

  2. 바로 객체를 JSON으로 보내기.

res.json(value);

/*

{} <- 객체가 찍히지 않는다. 
즉, json이 표현할 수 있도록 변환해줘야 함. 

*/
  1. Object.fromEntries() 사용
    • Object.fromEntries(array): 배열→ 객체 키,값으로 구성된 배열 형태를 객체로 변경한다.
    • Object.entries(obj): 객체→ 배열 객체를 배열로 만들며 이때 key와 value는 순서를 가지게 된다.
    • javascript map to json 이라고 치니 나온 글을 참고했다. https://medium.com/@glasshost/how-to-convert-a-map-to-json-in-javascript-b8a6ae3abedd 여기서 JSON.stringify() 를 써서 바꿔주기까지 했는데 이러면
     "{\"1\":{\"channelTitle\":\"hongsi 홍시\",\"sub\":\"57.8만명\",\"videoNum\":338}}"

    이렇게 뜨므로 적용하지 않았다.

    • 같은 내용이 stack overflow에도 나온다. https://stackoverflow.com/questions/37437805/convert-map-to-javascript-object

app.get('/youtubers',(req,res)=>{
  const allyoutuber = Object.fromEntries(db);
  res.json(allyoutuber);
  console.log(db);
  
  
  /*
  
      "1": {
        "channelTitle": "hongsi 홍시",
        "sub": "57.8만명",
        "videoNum": 338
    }
    */

⚠️ req.body undefined

TypeError: Cannot read properties of undefined ...
  • 분명 형식 잘 맞춰서 보냈고, 서버에도 문제가 없다 싶었는데…
  • body값이 읽을 수 없는 형태라서 발생하는 이슈 ! app.use(express.json()); 를 추가해주자 ㅎㅎ -

Map

let class = new Map([
	['name':'english Class',
		'people':13,
		'date':' '4month'

])

class.set(key, value);

Map과 array 구분

  • 단순히 생각나도 이해한건, array는 인덱스가 숫자, map은 문자열도 가능한 배열.
    • 그래서 map 선언 시, 2차원 배열 처럼 넣는 듯 하다.
    • 둘 다 순서가 있다는 것도 맞음.
  • VS 객체
    • 순서가 없는 키,값으로 이루어진 덩어리.

객체 → Map, array: Object.entries(obj)

  • 객체가 들어가서 entries

Map, array→ 객체 : Object.fromEntries(arr)

  • 객체로 변환되어 들어가니 from 붙이기.

forEach() vs map()

array에 쓰면, value, index, all(array에 있는 모든 값)을 보여준다.

//forEach()

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

arr.forEach(function(value, index, all){
    console.log(`index: ${index}, value:${value}`);
    return value*2; //undefined

});

let new_class = new Map([
	['name','english Class'],
		['people',13],
		['date', '4month']
    ]   

);

new_class.set('location','d-4');


new_class.forEach(function(value,key){
    console.log(`key: ${key}, value:${value}`);

})

//map()
arr.map(function(value, index, all){
    console.log(`index: ${index}, value:${value}` , all);
    return value*2;//값이 2배로 되어 반환된다.

});

리팩토링

  • 이해하기 쉽게, 성능 개선, 안정성 등..을 위해 코드 구조를 변경하는 것.
  • 클린코드 만들기
  • 언제?
    • 에러가 n회 발견 됐을 때
    • 리팩토링 중 에러 발견
    • 기능 추가 전
    • 코드 리뷰할 때
    • x→ 배포, 운영 직전에는 절대 안됨.