4주차-파트 04: forEach문, HTTP 매서드, 리팩토링, HTTP 상태 코드

 

map에서 함수를 적용시킨 반환형이 너무 헷갈려서 잘 정리한 블로그를 찾았다.

https://stonefree.tistory.com/460

[JavaScript] 자바스크립트에서 맵(Map)과 키(Key) 사용하기

 

 

 

 

CHAPTER 1. 전체 조회

자바스크립트에서 map을 json으로 변환하여 전체 유튜버 db를 조회해보자.

app.get('/youtubers',function(req,res){    //전체 유튜버 db조회

    let youtubers_json = {}
    db.forEach(function(value,key){
        youtubers_json[key] = value
    })
    res.json(youtubers_json)
})

 

 

 

✔️for Each문

 

기본형태

numbers.forEach(function() {
    // code
});

 

콜백 함수는 각 요소에 대해 실행되며, 배열의 요소를 나타내는 매개변수를 반드시 하나 이상 사용해야 한다. forEach 구문의 인자로 콜백함수를 등록할 수 있다. 콜백함수는 객체(또는 배열)에서 요소를 하나 꺼낸 다음 불린다.

 

콜백함수의 매개변수로 전달되는 부분이 헷갈렸는데 여기서 매개변수로 전달 되는 것은 객체(또는 배열)에서 꺼내진 하나의 요소이다.

 

 

다음 코드를 실행 시킬 경우 아래처럼 출력된다.

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

arr.forEach(function(a){
    console.log(a)
})

 

 

 

 

 

매개변수로 1개이상 입력받을 수 있다. 매개변수의 이름과 상관없이 오직 순서로만 무얼 전달할지 결정되며, 첫번째 매개변수는 데이터, 두번째 매개변수는 인덱스, 세번째 매개변수는 전체 객체(전체 배열)이다.

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

arr.forEach(function(a, b, c){
    console.log(`a: ${a} b:${b} c:${c}`)
})

 

 

 

※ for each와 map의 차이

for each로는 return값을 받지 못하지만 map으로는 return값을 받는다(이걸 이용해 곱하기 연산을 한다던가 하여 새로운 배열을 만들 수 있음).

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

const foreachArr = arr.forEach(function(a){
    return a
})



const mapArr = arr.map(function(a){
    return a
})

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

 

 

 

 

CHAPTER 2. DELETE를 이용해 삭제

 

들어가기전에 req.body, req.params, req.query3개가 너무 헷갈려서 어떤 분이 잘 정리해놓은 블로그를 들고왔다.

https://inpa.tistory.com/entry/EXPRESS-%F0%9F%93%9A-reqparams-reqquery-reqbody-%F0%9F%A4%94-%EC%A0%95%EB%A6%AC

[EXPRESS] 📚 req.params / req.query / req.body 🤔 차이 정리

 

 

 

 

그리고 예전 코드 짠 부분을 보다 보니 let {id}가 뭔지 갑자기 모르겠어서 gpt한테 물어보았는데 "구조분해할당"이고 객체여서 {}로 값을 주는 것이었다... 실습한지 1주도 안됐는데 순간 너무 새로웠다...

 

 

---

 

delete문으로 해당 id의 개별 유튜버 데이터 삭제하는 코드 작성.

참고로 url로 입력받는 부분은 http매서드(get, post, delete...)로 구분할 수 있기 때문에위에서와 같아도 상관없다.

 

맵객체.delete(id값) : 해당 id의 데이터를 map에서 삭제한다.

app.delete('/youtubers/:id',function(req,res){
    let {id}=req.params
    id = parseInt(id)

    let youtuber = db.get(id)

    if (youtuber == undefined){
        res.json({message: `요청하신 ${id}번은 없는 유튜버입니다.`
        })
    }
    else{
        res.json({
        message: `${youtuber.channelTitle}님, 다음에 또 뵙겠습니다.`
        })
        db.delete(id)}
})

 

---

 

다음으로 전체 유튜버 데이터 삭제하도록 코드를 작성하였다. 다음은 나혼자 작성한거. gpt한테 map에 forEach문 적용하는 것을 물어봤다.

app.delete('/youtubers',function(req,res){
    db.forEach(function(value,key){
        db.delete(key)
    })
})

 

 

그런데 그냥 코드 한줄로 전부다 삭제 할 수 있다.

map객체.clear():안의 데이터 모두 삭제

 

※참고로 map은 안의 요소들이 모두 삭제되어도 undefined가 아니다.

app.delete('/youtubers',function(req,res){

    let msg=""
    if (db.size>=1){
        db.clear()
        msg = "전체 유튜버가 삭제되었습니다."
    }
    else{      //db가 비어있을경우
        msg = "삭제할 유튜버가 없습니다."
    }
    res.json({
        message: msg
    })
})

 

 

CHAPTER 3. Put을 이용하여 채널명 수정

 

채널명을 수정해주기 위해 db.set을 이용하여 덮어쓰기를 하였다.

app.put('/youtubers/:id', function(req,res){
    let {id} = req.params
    id = parseInt(id)

    let youtuber = db.get(id)

    if (youtuber == undefined){
        res.json({message: `요청하신 ${id}번은 없는 유튜버입니다.`
        })
    }
    else{
        let oldTitle = youtuber.channelTitle
        let newTitle = req.body.channelTitle
        youtuber.channelTitle = newTitle
        db.set(id, youtuber)      //덮어쓰기
    
        res.json({
            message: `${oldTitle}님, 채널명이 ${newTitle}로 수정되었습니다.`
        })
    }

})

 

 

참고로 json형태로 값을 보낼 때 키값이 항상 문자열로 저장된다. vscode에서는 개발자가 키값을 문자열 처리 해주지 않아도 자동적으로 문자열 처리해주지만, postman에서는 개발자가 직접 문자열로 처리해줘야하기 때문에 항상 키 값을 큰따음표("")로 감싸줘야한다.

 

 

 

 

CHAPTER 4. 리팩토링(Refactoring)

✅리팩토링

소프트웨어의 코드 내부(구조)를 변경하는 것

 

😵‍💫나쁜코드 -> 😎클린코드로 변경

                             1) 이해하기 쉽게

                             2) 성능

                             3) 안정성

                                 .....

 

< 리펙토링은 언제 해야 할까? >

• 에러(문제점)이 n회 발견되었을 때
• 리펙토링을 하면서, 에러(문제점)을 발견할 수 있다.
• 기능을 추가하기 전ex) API, URL"설계 수정"
• 코드 리뷰할 때

 

 

 

⚠️리펙토링 하면 안 될 때

• 배포, 운영 직전에는 "절대로" 코드 수정이 일어나서는 안된다!

 

 

 

CHAPTER 5. HTTP 상태 코드

HTTP(인터넷상에서 통신할 때 사용되는 규약) 안에 작성되어서 들어가는 "상태"

 

- 2** : 성공

• 조회/ 수정/ 삭제 성공: 200
• 등록 성공: 201

- 4**: 클라이언트 잘못

• 요청한 연산(처리)을 할 때 필요한 데이터(req)가 덜 왔을때 : 400
• 찾는 페이지 없음(url에 맞는 api없음): 404

- 5** : 서버 잘못

• 서버가 죽었을 때(서버가 크리티컬한 오류를 맞았을 때): 500

상태 코드를 쓰는 이유 -> ⭐클라이언트(사용자, 화면)와 소통을 정확하게 하기 위함