웹 풀사이클 데브코스 TIL 15일차

req.params

app.get('/products/:n', function(req, res){
    // : -> URL로 매개변수를 전달해줄 건가 보다
    // req.params
    // products/____ 빈칸에 오는 값을 n이라는 변수에 담아줘
    res.json({
        num : req.params.n
    })
})

이 코드는 한가지 문제가 있다. 바로 자료형이 문자열이라는 점이다. params에서는 무조건 문자열을 반환한다.

if(req.params.n > 10) {
    console.log("url로 전달받은 숫자가 10보다 크다.");
}

민약 위와같은 코드를 넣고 url로 13을 입력했다고 치자. 분명 params의 자료형은 문자라고 했고 조건문이 맞지 않아야 한다고 생각할 수 있지만 콘솔에 로그가 잘 찍히는 것을 확인할 수 있다. 이는 자바스크립트이기 때문에 가능한 것이지 다른 언어라면 불가능한 표현이고 우리는 다른 언어와 통일성을 위해 무언가 조치를 취해야한다.

parseInt

let number = parseInt(req.params.n) - 10
console.log(number)

parseInt 함수를 쓰면 문자열을 숫자로 바꾸어준다. 이것을 사용하는 습관을 들이는 것이 좋을 것 같다.

app.get('/:nickname', function(req,res) {

    const param = req.params

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

이와 같이 변수에 req.params를 담아서 사용할 수도 있다.

쿼리 스트링

// 쿼리 스트링
app.get('/watch', function(req,res) {

    const q = req.query
    console.log(q)

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

쿼리 스트링을 사용하는 예제이다. req.query 라는 함수를 사용하고 마찬가지로 json 형식으로 사용할 수 있다.

객체, 배열 비구조화

객체 비구조화

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

이와 같이 선언하면 v와 t에 객체의 v와 t에 해당하는 값이 들어간다. 이때 변수 이름은 객체의 속성이름과 맞춰주어야한다.

배열 비구조화

const array = [1,2,3,4,5]

const [num2, num3, num5] = array

console.log(num2)
console.log(num3)
console.log(num5)
//출력결과
// 1
// 2
// 3

배열의 비구조화를 사용하면 앞에서부터 순서대로 변수에 값이 들어가는 것을 볼 수 있다.

const array = [1,2,3,4,5]

const [, num2, num3, , num5] = array

console.log(num2)
console.log(num3)
console.log(num5)
//출력결과
// 2
// 3
// 5

이와 같이 빈 콤마를 찍어주면 의도대로 num2, num3, num5에 각각 2, 3, 5가 들어가는것을 확인할 수 있다.

자바스크립트 네이밍

자바스크립트의 코딩 컨벤션에 대해서 알아보겠다.

kebab-case 형식

• 폴더, 파일: 알파벳 소문자, 두개 이상의 단어 조합에는 하이픈 '-'
• ex) demo-api ex) objec-demo.js

camelCase 형식

• 변수, 함수: 두개 이상의 단어를 조합할때는 두번째 단어의 첫글자를 대문자로
• ex) channelTitle, videoNum

PascalCase

카멜 케이스와 같지만 첫글자도 대문자.
클래스명에 사용함.

snake_case

두 단어 사이에 언더바 '_'.
폴더와 파일에 사용가능.

Map

Key-Value 쌍으로 이루어진 데이터 구조

let db = new Map();
db.set(1, "Laptop") //key value 순서로 저장
db.set(2, "Cup")
db.set(3, "Chair")

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

자바스크립트에서 Map을 사용하는 예제이다. new Map으로 객체를 생성하고, set get등의 함수를 통해 사용할 수 있다.

Map Express 적용

app.get('/:id', function(req,res){
    let {id} = req.params
    id = parseInt(id)

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

id로 상품을 요청해면 map에서 찾아서 돌려주는 예제이다. 이때 없는 상품의 경우를 예외처리해주었다. 이때 주의할 점은 map의 key int 타입을 사용해 데이터를 넣었지만 req.params로 반환받는 값은 문자열이란 점이다. 따라서 올바르게 사용하기 위해서는 parseInt를 사용해서 id 타입을 int로 바꿔주어야 한다.

후기

URL 파라미터와 쿼리 스트링을 사용하는 방법에 대해서 알아보았다. 또한 자바스크립트 객체와 배열의 비구조화에 대해서도 학습하였다. 자바스크립트 네이밍 규칙과 Map 에 대해서도 알아보았다.

키워드: 프로그래머스 데브코스, 국비지원교육, 코딩부트캠프