웹 풀사이클 데브코스 TIL 19일차

핸들러

• 핸들러라는 것은 광범위하게 사용되고 있다. 일반적으로 요청에 의해 호출되는 메소드를 의미한다.
• 자바스크립트에서는 익스프레스 콜백함수에 해당한다.
• HTTP request가 날아오면 자동으로 호출되는 메소드

IF 긍정문

조건문을 긍정문으로 표현해주는게 가독성 측면에서 낫다.

 if (youtuber == undefined){
        res.json({
            message : `요청하신 ${id} 번은 가입된 유튜버가 아닙니다.`
        })
    }
    else{
        const channelTitle = youtuber.channelTitle
        db.delete(id)

        res.json({
            message : `${channelTitle} 님, 아쉽지만 여기까지네요..`
        })
    }

이 코드를

 if (youtuber){
            const channelTitle = youtuber.channelTitle
        db.delete(id)

        res.json({
            message : `${channelTitle} 님, 아쉽지만 여기까지네요..`
        })

    }
    else{
            res.json({
            message : `요청하신 ${id} 번은 가입된 유튜버가 아닙니다.`
        })
    }

이와 같이 변경할 수 있다.

Json 배열

Json을 여러개 보낼때 사용하는 형태이다

//json 배열
const fruits = [
    {id: 1, name : 'apple'},
    {id: 2, name : 'orange'},
    {id: 3, name : 'strawberry'},
    {id: 4, name : 'blueberry'}

]

// 과일 전체조회
app.get('/fruits', (req, res) => {
    res.json(fruits)
})

Postman으로 보면 배열 형태로 보내진다.

find 함수

만약 위의 fruits 배열에서 특정 id로 값을 찾고 싶다면 어떻게 해야할까?
먼저 forEach 문을 생각해 볼 수 있을 것이다.

    fruits.forEach(function(fruit) {
        if(fruit.id == id){
            findFruit = fruit
        }
    })

이 코드는 잘 동작하는 것을 알 수 있다. 하지만 우리에게는 더 좋은 방법이 있다. 바로 find 함수를 사용하는 것이다.

    let findFruit =
        fruits.find(f => f.id == id)
            //fruits 배열 안에 있는 객체 중 id 값이 params.id 랑 같은 객체

find 함수에 우리가 찾고자하는 조건을 리턴하는 콜백함수를 넘겨주면 그 객체를 찾아준다. 들어간 것은 콜백함수이므로

    let findFruit =
        fruits.find(function(f){
            return f.id == id
        })

이와 같이 써도 똑같이 동작하는것을 알 수 있다.

status 코드 보내기

지금까지는 메시지나 json만 응답으로 보냈지만 http 상태코드를 지정해서 보낼 수 있는 방법이 있다.

    if(findFruit)
        res.json(findFruit)
    else
        res.status(404).send(
            "전달해주신 id로  저장된 과일이 없습니다."
    )

status를 사용하면 상태코드를 원하는 대로 보낼 수 있다. 클라이언트와 소통을 정확하게 하기 위함

==과 ===의 차이

// ==, ===의 차이

if(1 == "1"){ //자료형 상관없이 값만 비교
    console.log("같아")
}
else{
    console.log("같지 않다")
}

if(1 === "1"){ //자료형 상관있고, 값도 상관있음
    console.log("같아")
}
else{
    console.log("같지 않다")
}

Post 예외처리

app.use(express.json()) //http 외 모듈인 미들웨어: json 설정
app.post('/youtubers', (req, res) => {
    const channelTitle = req.body.channelTitle
    if(channelTitle) {
    //db 에 저장해야함
    db.set(id++, req.body)
    res.status(201).json({
        message : `${db.get(id-1).channelTitle} 님, 유튜버 생활을 응원합니다!`
    })
    }
    else{
        res.status(400).json({
            message: "요청 값을 제대로 보내주세요."
        })
    }
})

상태코드 값을 201 Created, 400 Bad Request로 보내는 것으로 고도화 한 코드이다.

미니 프로젝트

회원 API 설게

1. 로그인 POST /login

   • req : body (id, pwd)
   • res: ${name}님 환영합니다. => 메인페이지로 갈 수도 있음

2. 회원 가입 POST /join

   • req: body {id, pwd, name}
   • res: ${name}님 환영합니다. => 로그인 페이지로 갈 수도 있음

3. 회원 개별 조회 GET /users/:id

   • req: URL(id)
   • res: id, name

4. 회원 탈퇴 DELETE /users/:id

   • req: URL(id)
   • res: ${name}님 다음에 또 뵙겠습니다. => 메인 페이지로 갈 수도 있음

Router

app
    .route('/users/:id')
    .get(functon(req,res))
    .delete(function(req, res))

이와 같이 사용하면 같은 url을 사용하는 핸들러들을 하나로 묶을 수 있다.

후기

오늘은 많은 것들을 배운 것 같다. Json을 여러개 보낼 때 사용하는 Json 배열에 대해서도 배웠고. 특정 id 로 값을 찾는 find 함수에 대해서도 학습하였다. 그 후 상태코드와 상태코드를 지정해서 전송하는 방법, == 과 ===의 차이, 라우터에 대해서 학습하였다. 중요한 내용이었던 것 같다.

키워드: 프로그래머스 데브코스, 국비지원교육, 코딩부트캠프