ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [데브코스] 24일차 TIL
    TIL/교육 내용 정리 2024. 5. 4. 22:29

    post는 웹 브라우저로 테스트가 안됩니다. postman의 등장

    // app.js
    const express = require('express')
    const app = express()
    const port = 1234
    
    app.get('/',(req, res)=>{
        res.send('Hello World')
    })
    
    **app.post('/test', (req, res)=>{
        res.send('Hello POST!!!')
    })**
    
    app.listen(port, () =>{
        console.log(`Example app listening on port ${port}`)
    })
    
    • API(웹브라우저 입장)에서 POST(생성=등록) ex) 회원가입 id, pw, name, email, contact,… 데이터를 주기로 했는데 POST는 URL 로 안되지 왜냐면 주소창에 pw 등 개인정보를 볼 수 있으니깐,,…숨겨서 보내야지 Body에 숨겨서 와야지, 그러면 테스트를 어떻게 할 수 있을까?
    • GET(조회) ex) URL로 데이터로 보냈는 데….
    • postman 프로그램을 다운 받아서 실행

    postman get test, post 간단 테스트

    • Body라는 탭에 Hello World가 나오는 걸 볼 수 있음.

    POST 테스트 해보기

    • 웹 브라우저에서는 안됐는 데 postman에서는 테스트 가능

    post req, res 구현 & 테스트

    <aside> 💡 body에 숨겨져서 들어온 데이터를 화면에 뿌려줘볼까?

    </aside>

    ❓ body에 어떻게 숨겨져 오지

    // app.js
    const express = require('express')
    const app = express()
    const port = 1234
    
    app.get('/',(req, res)=>{
        res.send('Hello World')
    })
    
    **app.use(express.json())** //미들웨어 라고 다른 모듈들을 사용함. use 
    app.post('/test', (req, res)=>{
        // body에 숨겨져서 들어온 데이터를 화면에 뿌려줘볼까?
        console.log(req.body)
    })
    
    app.listen(port, () =>{
        console.log(`Example app listening on port ${port}`)
    })
    
    • app.use(express.json()) 을 사용해준다.

    백엔드에서 프론트엔드로 던져주는 res.json은 message라는 걸 key값을 문자열로 바꾸지 않았었는 데 자동으로 웹브라우저에서 바꿔줬다.

    따라서 postman에서는 문자열로 바꿔준다.

    postman

    1. URL : localhost:1234/test
    2. Body → raq → JSON
    3. { ”message” : “Bye POST!!!” }

    app.js

    app.use(express.json()) //미들웨어 라고 다른 모듈들을 사용함. use 
    app.post('/test', (req, res)=>{
        // body에 숨겨져서 들어온 데이터를 화면에 뿌려줘볼까?
        console.log(req.body.message) // message의 value 값만 볼 때
    	  res.send(req.body.message) // postman에서도 확인
    })
    
    // 출력
    Example app listening on port 1234
    { message: 'Bye Post!!!' }
    

    유튜버 등록

    고도화

    1. 현재까지는 기존 유튜버 3명만 정보를 반호나할 수 있었고, 새로운 유튜버를 등록할 수가 없었음.
    2. 1,2,3 유튜버에 대한 api만 존재

    🔥따라서 post를 활용해서 !

    <aside> 💡 <API 설계 (URL, method)>

    1. **전체 유튜버 “조회” GET /youtubers
    • req : X
    • res : map을 전체 조회**
    1. 개별 유튜버 “조회”GET /youtubers/:id :id로 map에서 객체를 찾아서, 그 객체의 정보를 뿌려줌 req : params.id ← map에 저장된 key 값을 전달 res : req에서 받은 전달 값 기준으로 map 에서 id로 객체를 조회해서 전달.
    2. 유튜버 등록 → POST /youtubers req : body에 channelTitle, sub = 0, videoNum = 0 (channelTitle만 있고, 처음엔 구독자,비디오수 = 0, 신규유튜버 정보를 전달) db에 저장까지 해줌 !! res : “channelTitle 님, 유튜버 생활을 응원합니다!” </aside>
    //youtuber-demo.js
    // express 모듈 셋팅
    const express = require('express')
    const app = express() 
    app.listen(1234)
    
    // 데이터 셋팅
    let youtuber1 = {
        channelTitle : "십오야",
        sub : "593만명",
        videoNum : "993개"
    }
    
    let youtuber2 = {
        channelTitle : "침착맨",
        sub : "227만명",
        videoNum : "6.6천개"
    }
    
    let youtuber3 = {
        channelTitle : "테오",
        sub : "54.8만명",
        videoNum : "7260개"
    }
    
    let db = new Map()
    db.set(1, youtuber1) 
    db.set(2,youtuber2)
    db.set(3, youtuber3)
    
    // REST API 설계
    app.get('/youtuber/:id', function (req, res) {
        let {id} = req.params
        id = parseInt(id)
        
        const youtuber = db.get(id)
        
        if (youtuber == undefined){
            res.json({
                message : "유튜버 정보를 찾을 수 없습니다."
            })
        }else{
            res.json(youtuber)
        }
    })
    
    **app.use(express.json()) // http의 모듈인 미들웨어 : 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}님, 유튜버 생활을 응원합니다.`
        }) 
    })**
    

    등록 고도화

    • 현재는 새로운 유튜버를 등록하면 덮어쓰기가 됨. map 을 사용하기 때문에
    // youtuber-demo.js
    {생략}
    let db = new Map()
    let id = 1
    
    db.set(id++, youtuber1) 
    db.set(id++,youtuber2)
    db.set(id++, youtuber3)
    {생략}
    app.use(express.json()) // http의 모듈인 미들웨어 : json 설정
    app.post('/youtuber', (req, res)=>{
        
        console.log(req.body)
        // 등록이란 Map(db)에 저장(set)해줘야된다.
        db.set(id++, req.body) //id++해줌으로 3저장 3++ 4저장 4++,..
    
        res.json({
            message : `${db.get(id-1).channelTitle}님, 유튜버 생활을 응원합니다.`
        }) 
    })
    

    전체 조회 : 오류남! 해결해야함

    //youtuber-demo.js
    app.get('/youtubers', (req, res)=>{
        res.json(db)
    })
    

     

    'TIL > 교육 내용 정리' 카테고리의 다른 글

    [데브코스] 26일차 TIL  (0) 2024.05.04
    [데브코스] 25일차 TIL  (0) 2024.05.04
    [데브코스] 23일차 TIL  (0) 2024.04.30
    [데브코스] 22일차 TIL  (1) 2024.04.29
    [데브코스] (20일차자체휴식)21일차 TIL  (0) 2024.04.28
Designed by Tistory.