[웹 풀사이클 데브코스 TIL] 5주차 Day 1 - Node.js & Express.js 서버 개발 실습(1)

웹 브라우저에서는 URL로 받을 수 있는 GET 방식만 취급합니다!

id, password와 같은 개인정보를 POST를 사용해 등록하기 위해 Postman 을 다운받아서 사용하겠습니다

 

먼저 GET으로 테스트를 해 봤는데요, 기존에 만들어 놨던 youtuber-demo.js url로 요청을 보냈더니

이렇게 결과가 나오는게 너무너무 신기합니다 .... !!!!! (진짜)

 

사이트에서는 post로 전송되지 않던 메시지가 

일단 포스트맨에서는 전송 되고 있습니다 ㅎㅎ!

 

 

app.use(express.json())
app.post('/test', (req, res) => {
  // body에 숨겨져서 들어온 데이터를 화면에 뿌려주기
  console.log(req.body.message)
  
  res.send(req.body.message)
})

메시지 출력해보기

여기에서 사용된 app.use() 함수는 뭘까요 ?

app.use() 함수는 Express 프레임워크에서 미들웨어를 애플리케이션에 추가하는 데 사용됩니다

app.use()는 app.get(), app.post() 처리 전에 JSON 미들웨어를 적용하도록 해줍니다. 

 

어제 Redux 미들웨어에 대해 작성을 했는데요, Express의 app.use()와 쓰임새가 비슷한 것처럼 보이지만, 핵심 기능은 다릅니다!

app.use()는 HTTP 요청을 처리하기 위한 미들웨어이고,
Redux의 미들웨어는 상태 관리를 위해 액션과 리듀서 사이에 추가적인 기능을 넣을 수 있도록 해 줍니다.

 

👾 POST를 활용해서 유튜버 추가 기능 만들기 👾

<API 설계 >

1) /youtuber/:id : id로 map에서 객체를 찾아서 그 객체의 정보를 뿌려줌

    - req : URL. params.id <= map에 저장된 키 값을 전달

    - res : map에서 id로 객체를 조회해서 전달

 

유튜버 등록 ❗️ => POST /youtuber

2) /youtuber

    - req : body <= channelTitme, sub = 0, VideoNum = 0

    - res : "channelTitle 님의 유튜버 생활을 응원합니다 !" 
를 반환 해 보는걸로..

 

먼저 이렇게

app.use(express.json())
app.post('/youtuber', (req, res) => {
    console.log(req.body)

    // 등록. Map(db)에 저장(set) 해야합니다
    db.set(4, req.body )

    res.json(req.body)
})

post 요청을 보낸 후 GET 으로 확인해보면

저장이..됐어욯... ㅠㅠ(감격)

그냥 갑자기 get, post 배워서 써먹는것보다 이렇게 하나하나 뜯어보면서 하니까 확실히 !! 머리에 제대로 들어오는 기분이 드네요.. ㅎㅎ

 

고도화1

app.use(express.json())
app.post('/youtuber', (req, res) => {
    console.log(req.body)

    // 등록. Map(db)에 저장(set) 해야합니다
    db.set(4, req.body)

    res.json({
        message: db.get(4).channelTitle + "님의 유튜버 생활을 응원합니다 !"
    })
})

    res.json({
        message: `${db.get(4).channelTitle} + "님의 유튜버 생활을 응원합니다 !`
    })
})

템플릿 리터럴 활용

 

고도화2

id 값을 1, 2, 3, 4.... 이렇게 넣어주고 있었는데, 이를 id = 1 로 초기화 한뒤 하나씩 증가하도록 수정해볼게요!

let db = new Map()
var id = 1

db.set(id++, youtuber1)
db.set(id++, youtuber2)
db.set(id++, youtuber3)

app.use(express.json())
app.post('/youtuber', (req, res) => {
    console.log(req.body)

    // 등록. Map(db)에 저장(set) 해야합니다
    db.set(id++, req.body)

    res.json({
        message: `${db.get(id - 1).channelTitle} + "님의 유튜버 생활을 응원합니다 !`
    })
})

이것도 완전히 동적인 id 증가 방법은 아니지만, 이제 post로 channerTitle .. 을 등록하고 url에 youtuber/id 값을 입력하면
id가 덮어씌워지지 않고 정상적으로 작동합니다!
그리고 db.get(id - 1)을 해 준 이유는, 매 턴마다 id를 ++ 시키기 때문에 등록된 값보다 큰 값이 저장되기 때문에 임의로 1을 빼 주어 제대로 아이디가 정해지도록 한 것 입니다 🙂

 

 

전체 유튜버 조회

GET/youtubers

    - req : X

    - res : map 전체 조회

 

영상이 내일로 넘어가서 먼저 한번 조회 해 보려고 해요 ◠ ̫◠

처음에는 

app.get("/youtubers", function(req, res) {
   res.json(db)
})

이렇게 db를 통째로 담아서 보내봤는데, 

빈 객체만 반환되었습니다 ! (db 객체 전체를 반환하면 될 것 같은데 왜 안되는지 의문....)

다음으로는 

app.get("/youtubers", function(req, res) {
   res.json(db.values)
})

이렇게 값을 담아서 보내봤는데 !! 아무것도 나오지 않더라구요 ,,
뭔가 배열에 담아서 보내야하나 ? 하는 생각이 들었지만 정확한 방법을 모르겠어서 ..ㅎㅎ 이건 내일 마저 해결하도록 하겠습니다