ABOUT ME

-

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

    const, params는 무조건 문자열 그치만 JS의 마법(feat.parseInt)

    • JS에서는 문자로 된 숫자를 진짜 숫자로 취급한다.
    • 아래 코드 처럼
    // params-demo.js
    const express = require('express')
    const app = express()
    
    app.listen(3000)
    
    app.get('/products/:n', function (req, res) {
            //: => 어? 나한테 URL로 매개변수를 전달해줄 건가 보다
            // req.params
            //products/__빈칸에 오는 값을 n이라는 변수에 담아줘
        // console.log(req.params)
        // console.log(req.params.n)
        if (req.params.n > 10){
            console.log("url로 전달받은 숫자가 10보다 크네요.")
        }
        res.json({
            num : req.params.n
        })
    })
    
    • 하지만 parseInt를 사용해서 정수형으로 바꿔주자.
    // params-demo.js
    const express = require('express')
    const app = express()
    
    app.listen(3000)
    
    app.get('/products/:n', function (req, res) {
            //: => 어? 나한테 URL로 매개변수를 전달해줄 건가 보다
            // req.params
            //products/__빈칸에 오는 값을 n이라는 변수에 담아줘
        // console.log(req.params)
        // console.log(req.params.n)
        let number = parseInt(req.params.n) - 10
        console.log(number);
    
        res.json({
            num : req.params.n
        })
    })
    

    req.params 연습 - 유튭(1)

    //params-demo.js
    const express = require('express')
    const app = express()
    
    app.listen(3000)
    
    app.get('/products/:n', function (req, res) {
            //: => 어? 나한테 URL로 매개변수를 전달해줄 건가 보다
            // req.params
            //products/__빈칸에 오는 값을 n이라는 변수에 담아줘
        // console.log(req.params)
        // console.log(req.params.n)
        let number = parseInt(req.params.n) - 10
        console.log(number)
    
        res.json({
            num : req.params.n
        })
    })
    
    app.get('/:nickname', function(req,res){
    
        const param =req.params
    
        res.json({
            channel : param.nickname   //req.params.nickname 해도되지만.
        })
    })
    
    • 채널명 연습

    req.params 연습 - 유튭(2) 쿼리스트링

    //params-demo.js
    const express = require('express')
    const app = express()
    
    app.listen(3000)
    
    app.get('/products/:n', function (req, res) {
            //: => 어? 나한테 URL로 매개변수를 전달해줄 건가 보다
            // req.params
            //products/__빈칸에 오는 값을 n이라는 변수에 담아줘
        // console.log(req.params)
        // console.log(req.params.n)
        let number = parseInt(req.params.n) - 10
        console.log(number)
    
        res.json({
            num : req.params.n
        })
    })
    // 이 부분 영상시청 시간과 타임라인을 알 수 있음.
    app.get('/watch', function(req,res){
        const query = req.query
        console.log(query.v)
        console.log(query.t)
        
        res.json({
            video : query.v,
            timeline : query.t
        })
    })
    

    자바스크립트 객체, 배열 비 구조화

    // params-demo.js
    const express = require('express')
    const app = express()
    
    app.listen(3000)
    
    app.get('/products/:n', function (req, res) {
            //: => 어? 나한테 URL로 매개변수를 전달해줄 건가 보다
            // req.params
            //products/__빈칸에 오는 값을 n이라는 변수에 담아줘
        // console.log(req.params)
        // console.log(req.params.n)
        let number = parseInt(req.params.n) - 10
        console.log(number)
    
        res.json({
            num : req.params.n
        })
    })
    
    app.get('/watch', function(req,res){
        // const query = req.query  // q = {v:___, t:___}
        // console.log(query.v)
        // console.log(query.t)
        
        // JS객체(JSON)의 비구조화
        const{v, t} = req.query
        console.log(v)
        console.log(t)
    
        res.json({
            video : v,
            timeline :t
        })
    })
    
    • 객체는 변수 이름을 맞추어줘야함. watch?v=cp4aUznNvJ0&t=1414s 객체 v, t 로 쓰였으니 json에서도 v, t
    • 하지만 JS 배열의 비구조화는 아래 코드 참고
    // array-demo.js
    // JS 배열 비 구조화
    // 객체와는 상관 없이 순서대로 들어감. 
    
    const array = [1, 2, 3, 4, 5]
    const [ , num2, num3, , num5] = array
    
    console.log(num2)
    console.log(num3)
    console.log(num5)
    
    // const num1 = array[0]
    // const num4 = array[3]
    
    // console.log(num1)
    // console.log(num4)
    
    // JS 배열의 비구조화 출력
    2
    3
    5
    

    객체 2개 만들어서 api 테스트

    //object-api-demo.js
    const express = require('express')
    const app = express()
    
    app.listen(3000)
    
    let youtuber1 = {
        channelTitle : "십오야",
        sub : "593만명",
        videoNum : "993개"
    }
    
    let youtuber2 = {
        channelTitle : "침착맨",
        sub : "227만명",
        videoNum : "6.6천개"
    }
    
    let youtuber3 = {
        channelTitle : "테오",
        sub : "54.8만명",
        videoNum : "7260개"
    }
    
    app.get('/:nickname', function (req, res) {
    
        const {nickname} = req.params
        
        if (nickname == "@15ya.fullmoon"){
            res.json(youtuber1)
        } else if(nickname == "ChimChackman_Offical"){
            res.json(youtuber2)
        } else if(nickname == "@TEO_universe"){
            res.json(youtuber3)
        } else{
            res.json({
                message : "저희가 모르는 유튜버입니다."
            })
        }
        // 개발자가 예상하지 못한 에러 = 예외가 발생했다! -> 예외처리
    })
    
    

    자바스크립트 네이밍 룰

    [kebab-case] cf. snake_case / 중요한건 통일 해주라

    • 폴더 : ex) demo-api
    • 파일 : ex) object-demo.js

    특징 → 알파벳 소문자, ‘하이픈 - ’ 두 개 이상의 단어를 합쳐서 쓸 땐, 첫번째 단어와 두번째 단어 사이에 하이픈

    [camelCase]

    • 변수이름 : ex) videoNum, channelTitle

    특징 → 두개이상의 단어를 합쳐서 쓸 땐, 두 번째 단어의 첫 글자를 “대문자로”

    클래스 → PascalCase

    자바스크립트 Map(String)

    // map-demo.js
    let db = new Map()
    db.set(key,value) // key로  value를 찾을 수 있는 한 쌍을 저장
    
    // map-demo.js
    let db = new Map()
    db.set(1, "NoteBook") // key로  value를 찾을 수 있는 한 쌍을 저장
    db.set(2,"Cup")
    db.set(3, "Chair")
    
    console.log(db)
    console.log(db.get(1))
    console.log(db.get(2))
    console.log(db.get(3))
    
    // 출력 
    Map(3) { 1 => 'NoteBook', 2 => 'Cup', 3 => 'Chair' }
    NoteBook
    Cup
    Chair
    

    신입 사원 역량 반드시 알아야 하는 자료구조

    Map / List

    //map-demo.js
    const express = require('express')
    const app = express()
    app.listen(3000)
    
    app.get('/:id', function (req, res) {
      const {id} = req.params 
      console.log(id)
      console.log(db.get(id))
    
      res.send(db.get(id))
    })
    
    // localhost:1234/1 => NoteBook
    
    let db = new Map()
    db.set(1, "NoteBook") // key로  value를 찾을 수 있는 한 쌍을 저장
    db.set(2,"Cup")
    db.set(3, "Chair")
    
    console.log(db)
    console.log(db.get(1))
    console.log(db.get(2))
    console.log(db.get(3))
    
    //출력
    Map(3) { 1 => 'NoteBook', 2 => 'Cup', 3 => 'Chair' }
    NoteBook
    Cup
    Chair
    2
    undefined
    
    • 왜 indefined 일까? map은 문자열과 숫자를 구분하기 때문이다. 여기서 db는 숫자로 받는 데 localhost에선 문자로 주기 때문이다. 따라서 parseInt를 사용해주면 된다.
    // map-demo.js
    const express = require('express')
    const app = express()
    app.listen(3000)
    
    app.get('/:id', function (req, res) {
      const {id} = req.params 
      console.log(id)
      **console.log(db.get(parseInt(id)))**
    
      res.send(db.get(id))
    })
    
    // localhost:1234/1 => NoteBook
    
    let db = new Map()
    db.set(1, "NoteBook") // key로  value를 찾을 수 있는 한 쌍을 저장
    db.set(2,"Cup")
    db.set(3, "Chair")
    
    console.log(db)
    console.log(db.get(1))
    console.log(db.get(2))
    console.log(db.get(3))
    

    만약에 id : 7 즉, 우리 db에 없는 거임 그러면 예외처리 해줘야지.

    // map-demo.js
     if (db.get(id) == undefined){
            res.json({
                message : "없는 상품입니다."
            })
        }else{
            res.json({
                id : id,
                productName : db.get(id)
            })
        }
    
    • undefined 는 “undefined” 말고 그냥 undefined
    • else 안써도 돌아가기는 하는 데 오류 발생 else를 사용해서 완성도를 높이자.
Designed by Tistory.