[데브코스] 22일차 TIL

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를 사용해서 완성도를 높이자.