[TIL-백엔드] 4주차 Part3. 나에게 Express란?

📌 params

const express = require('express')
const app = express()

// 서버 셋팅 : 포트 넘버(번호) 3000로 셋팅
app.listen(3000)

app.get('/products/:n', function(req, res) {
    // : => 어? 나한테 URL로 매개변수를 전달해줄 건 가보다 
    // 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
    })
})

app.get('/test/1', function(req, res) {
    res.json({
        test : 1
    })
})

• console.log(req.params)는 문자열로 출력, console.log(req.params.n)는 숫자로 출력
• 그러나 문자열과 숫자 모두 숫자로 판단하고 if문 출력함 ⇒ 자바스크립트라서 가능한 것.
• 자바스크립트는 문자열로 받은 숫자를 알아서 숫자로 바꾸는 계산도 해줌
• 그러나 다른 언어를 위해 다른 언어와 똑같이 사용하면 좋음... parseInt 사용하기

const express = require('express')
const app = express()

// 서버 셋팅 : 포트 넘버(번호) 3000로 셋팅
app.listen(3000)

app.get('/products/:n', function(req, res) {
    // : => 어? 나한테 URL로 매개변수를 전달해줄 건 가보다 
    // products/_ 빈칸에 오는 값을 n이라는 변수에 담아줘 
    // console.log(req.params)
    // console.log(req.params.n)

    let number = parseInt(req.params.n) - 10    // parseInt : 문자열을 숫자로 바꿔줌
    if (number > 5) {
        console.log(number) // 숫자 "숫자"
        console.log("url로 전달받은 숫자가 10보다 크네요.")
    }
    res.json({
        num : number
    })
})

app.get('/test/1', function(req, res) {
    res.json({
        test : 1
    })
})

📌 req.params

• req.params : 데이터를 url로 하나씩 받아서 각각 다른 페이지를 꾸릴 때 사용 (ex. 블로그, 유튜브)
• 영상 클릭 주소 : 하나의 영상을 나타내는 유니크한 키 값

const express = require('express')
const app = express()

// 서버 셋팅 : 포트 넘버(번호) 3000로 셋팅
app.listen(3000)

// 채널 주소 : https://www.youtube.com/@15ya.fullmoon
// 채널 주소 : https://www.youtube.com/@ChimChakMan_Official
// 채널 주소 : https://www.youtube.com/@TEO_universe
app.get('/:nickname', function(req, res) {
    const param = req.params 

    res.json({
        channel : param.nickname
    })
})

// 영상 클릭 주소 : https://www.youtube.com/watch?v=BmC1cmItiGs
// 영상 클릭 주소 : https://www.youtube.com/watch?v=8oWfdWSyKb4

• 하나의 데이터가 아니라 여러 개의 데이터를 던질 때 사용하는 것 : ?
  • 물음표 : 쿼리, 즉 질문을 한다

// 영상 타임라인 주소 : https://www.youtube.com/watch?v=KMhf4ex3d-E&t=291s
app.get('/watch', function(req, res) {
    const q = req.query
    console.log(q)
    res.json(q)
})

• { v: 'KMhf4ex3d-E', t: '291s' }로 출력

// 영상 타임라인 주소 : https://www.youtube.com/watch?v=KMhf4ex3d-E&t=291s
app.get('/watch', function(req, res) {
    const q = req.query
    console.log(q.v)
    console.log(q.t)

    res.json({
        video : q.v,
        timeline : q.t
    })
})

• {"video":"KMhf4ex3d-E","timeline":"291s"} 로 출력

📌 비구조화

• 자바스크립트 객체의 비구조화

//params-demo.js 
const express = require('express')
const app = express()

// 서버 셋팅 : 포트 넘버(번호) 3000로 셋팅
app.listen(3000)

app.get('/watch', function(req, res) {
    // const q = req.query // q = {v:___, t:___}
    // console.log(q.v)
    // console.log(q.t)

    // JS객체(JSON)의 비구조화 
    const {v, t} = req.query
    console.log(v)
    console.log(t)

    res.json({
        video : v,
        timeline : t
    });
    //v와 t 이름을 바꾸면 출력 안 됨. 변수 이름의 영향이 있음.
    //객체에서는 변수 이름을 그대로 사용해야 됨. 
})

• 자바스크립트 배열 비구조화

//array-demo.js
// 자바스크립트 배열 비구조화 
const array = [1, 2, 3, 4, 5]
const [ , num2, num3, , num5] = array

console.log(num2)   // 2 출력
console.log(num3)   // 3 출력
console.log(num5)   // 5 출력
// const num1 = array[0]
// const num4 = array[3]

// console.log(num1)    // 1 출력
// console.log(num4)    // 4 출력 

📌 예외 처리

• 예외 처리 : 개발자가 예상하지 못한 에러를 처리해주는 모든 로직

let youtuber1 = {
    channelTitle : "십오야",
    sub : "593만명",
    videoNum : "993개"
}

let youtuber2 = {
    channelTitle : "침착맨",
    sub : "227만명",
    videoNum : "6.6천개"
}

let youtuber3 = {
    channelTitle : "테오",
    sub : "54.8만명",
    videoNum : "726개"
}
app.get('/:nickname', function(req, res) {
    const {nickname} = req.params 

    if (nickname == "@15ya.fullmoon") {
        res.json(youtuber1) //{"channelTitle":"십오야","sub":"593만명","videoNum":"993개"}로 출력 
    } else if (nickname == "@ChimChakMan_Official"){
        res.json(youtuber2) //{"channelTitle":"침착맨","sub":"227만명","videoNum":"6.6천개"}로 출력
    } else if (nickname == "@TEO_universe"){
        res.json(youtuber3) //{"channelTitle":"테오","sub":"54.8만명","videoNum":"726개"}로 출력
    } else {
        res.json({
            message : "저희가 모르는 유튜버입니다."
        })
    }
    // 개발자가 예상하지 못한 에러 = 예외가 발생했다!
})

📌 자바스크립트 네이밍 룰

• 자바스크립트의 네이밍 케이스
  • [kebab-case] cf. snake_case(하이픈이 아니라 언더바 사용) // 둘 중 어떤 것도 좋으니 "통일"
    • 폴더 ex. demo-api
    • 파일 ex. object-api-demo.js
      • ⇒ 특징 :
        • 알파벳 소문자
        • 두 개 이상의 단어를 합쳐서 쓸 땐, 첫 번째 단어와 두 번째 단어 사이에 '하이픈'
  • [camelCase] 낙타의 등
    • 변수, 함수 ex. ChannelTitle, videoNum
      • ⇒ 특징 : 두 개 이상의 단어를 합쳐서 쓸 땐, 두 번째 단어의 첫 글자를 '대문자'로
  • 클래스 : PascalCase - 첫 글자도 대문자

📌 자바스크립트 Map (String)

• map
  • key로 value를 찾을 수 있으면 map임.
  • key : value 쌍으로 이루어진 데이터 저장하는 형태
  • json도 map 형태

let db = new Map();
db.set(1, "NoteBook")    // 키로 벨류를 찾을 수 있는 한 쌍을 저장 
db.set(2, "Cup")
db.set(3, "Chair")

console.log(db)  // Map(3) { 1 => 'NoteBook', 2 => 'Cup', 3 => 'Chair' }
console.log(db.get(1)) // NoteBook 출력
console.log(db.get(2)) // Cup 출력
console.log(db.get(3)) // Chair 출력 

• map을 데이터베이스 대신으로 사용할 것임
• 신입 사원 역량 반드시 알아야 하는 자료 구조
  • Map/List
• express + map (String)

const express = require('express')
const app = express()
app.listen(3000)

app.get('/:id', function (req, res) {
    let {id} = req.params
    if (id === 'favicon.ico')
        return;
    console.log(id)
    id = parseInt(id)   // "숫자" => 숫자
    console.log(db.get(id))

    res.send('Hello World')
})
// localhost:3000/1 => NoteBook
// localhost:3000/2 => Cup
// localhost:3000/3 => Chair

let db = new Map();
db.set(1, "NoteBook")    // 키로 벨류를 찾을 수 있는 한 쌍을 저장 
db.set(2, "Cup")
db.set(3, "Chair")
db.set("1", "LimHanbi")

console.log(db)  // Map(3) { 1 => 'NoteBook', 2 => 'Cup', 3 => 'Chair' }
console.log(db.get(1)) // NoteBook 출력
console.log(db.get("1")) // LimHanbi 출력
// console.log(db.get(2)) // Cup 출력
// console.log(db.get(3)) // Chair 출력 

• id를 문자로 받기 때문에 parseInt를 이용하여 숫자로 바꾸기

app.get('/:id', function (req, res) {
    let {id} = req.params
    if (id === 'favicon.ico')
        return;
    id = parseInt(id)   // "숫자" => 숫자

    res.json({
        id : id,
        productName : db.get(id)
    })
})
// localhost:3000/1 => NoteBook
// localhost:3000/2 => Cup
// localhost:3000/3 => Chair

let db = new Map();
db.set(1, "NoteBook")    // 키로 벨류를 찾을 수 있는 한 쌍을 저장 
db.set(2, "Cup")
db.set(3, "Chair")
db.set("1", "LimHanbi")

// console.log(db)  // Map(3) { 1 => 'NoteBook', 2 => 'Cup', 3 => 'Chair' }
// console.log(db.get(1)) // NoteBook 출력
// console.log(db.get("1")) // LimHanbi 출력
// console.log(db.get(2)) // Cup 출력
// console.log(db.get(3)) // Chair 출력 

• {"id":3,"productName":"Chair"} 출력
• 없는 아이디 예외 처리(고려하지 않은 객체가 들어오면 처리) → 없는 아이디 값이 들어오면...

app.get('/:id', function (req, res) {
    let {id} = req.params
    if (id === 'favicon.ico')
        return;
    id = parseInt(id)   // "숫자" => 숫자

    if (db.get(id) == undefined) {
        res.json({
            message : "없는 상품입니다."
        })
    } else {
        res.json({
            id : id,
            productName : db.get(id)
        })
    }
})

• {"message":"없는 상품입니다."}
• else를 사용하지 않으면 오류가 발생한 후 다시 json 보내는 것처럼 보여서 오류 발생함.

📌 map object

• String만 담던 Map
  • 객체를 담을 수 있도록 바꿀 것임.

const express = require('express')
const app = express()
app.listen(3000)

app.get('/:id', function (req, res) {
    let {id} = req.params
    if (id === 'favicon.ico')
        return;
    id = parseInt(id)   // "숫자" => 숫자

    if (db.get(id) == undefined) {
        res.json({
            message : "없는 상품입니다."
        })
    } else {
        res.json({
            id : id,
            productName : db.get(id)
        })
    }
})
// localhost:3000/1 => NoteBook
// localhost:3000/2 => Cup
// localhost:3000/3 => Chair

let db = new Map();

let notebook = {
    productName : "Notebook",
    price : 2000000
}
let cup = {
    productName : "Cup",
    price : 3000
}
let chair = {
    productName : "Chair",
    price : 100000
}
let poster = {
    productName : "Poster",
    price : 20000
}

db.set(1, notebook)    // 키로 벨류를 찾을 수 있는 한 쌍을 저장 
db.set(2, cup)
db.set(3, chair)
db.set(4, poster)

console.log(db)  // Map(3) { 1 => 'NoteBook', 2 => 'Cup', 3 => 'Chair' }
console.log(db.get(1)) // NoteBook 출력
// console.log(db.get("1")) // LimHanbi 출력
console.log(db.get(2)) // Cup 출력
console.log(db.get(3)) // Chair 출력 

• api에 객체를 던져보는 것을 map이랑 연동할 것임

app.get('/:id', function (req, res) {
    let {id} = req.params
    if (id === 'favicon.ico')
        return;
    id = parseInt(id)   // "숫자" => 숫자

    if (db.get(id) == undefined) {
        res.json({
            message : "없는 상품입니다."
        })
    } else {
        res.json(db.get(id))
    }
})

• 자바 스크립트 객체에 필드 추가 방법

// express 모듈 셋팅 
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 : "726개"
}

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)
    }
})