4주차-파트 01: js에서의 형변환, 쿼리, 객체와 배열의 비구조화할당, 네이밍케이스, js의 Map구조

CHAPTER 1. 자바스크립트에서 문자를 숫자로

저번 시간 마지막에 실습했던 코드를 보자. 다음코드는 url로 이용자가 입력한 값을 웹 페이지에 출력한다.

 

 

 

사용자가 999라 입력하였으니 웹페이지에 출력되는 값도 999이다. 그런데 자세히 보면 ""가 숫자를 감싸고 있다. 이는 자바스크립트가 입력받은 값을 문자로 인식하고 있단 뜻이다.

 

 

 

 

그런데 신기한 점은 자바스크립트는 필요에 따라 자동적으로 자료형을 변환시켜준다. 원래 숫자를 출력하는 부분에 -20을 추가해주었다.

 

 

 

 

실행시켜보니 979가 출력되고 감싸고 있던 큰 따음표("")가 사라진 것을 보아 정수형으로 자동적으로 형변환 된 것을 알 수 있다.

 

 

 

개발자가 직접 형변환을 시켜줄 수도 있다.

✔️parseInt( ): 괄호 안의 문자열 변수를 정수형 변수로 변환시켜준다. (문자열 -> 정수)

res.params.n을 parseInt로 감싸주었다.

 

 

정수형으로 변환되어 숫자의 큰따음표가 사라졌다.

 

 

 

CHAPTER 2. req.params 연습 - 유튜브

 

URL뒤에 입력받은 이용자 ID출력하기

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

app.listen(1234)   //port번호 1234으로 설정



//채널 주소: https://www.youtube.com/@sabrinacarpentervevo

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

    const param = req.params

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

})

 

---

이번에는 유튜브 영상중 타임라인의 url을 가져와보자. 다음은 무한도전 영상 모음집 영상의 12:37에서 시작하는 영상이다.

https://www.youtube.com/watch?v=JfYYzK1Utv0&t=757s 

자세히 링크를 뜯어보면 watch뒤에 ?가 하나 있다. 이걸 query라고 한다. 물음표 뒤의 값들은 query parameter로

위 링크에서는 두개의 키- 밸류쌍인 v=JfYYzK1Utv0, t=757s 로 나뉜다. 여러개의 query parameter쌍들은 앰퍼샌드(&)를 이용하여 구분한다.

다음링크에서 자세히 설명되어있다.

https://docs.tosspayments.com/resources/glossary/query-param

쿼리 파라미터(Query Parameter) | 토스페이먼츠 개발자센터

 

 

이제 영상의 query parameter를 출력해보자.

✔️req.qeury : url의 쿼리 매개변수를 포함하느 객체.(키-밸류 형태로 전달된다)

다음 코드 입력후 서버를 돌리면

// 영상 타임 라인 주소: https://www.youtube.com/watch?v=JfYYzK1Utv0&t=757s

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

 

콘솔창에 알아서 각 키-밸류쌍이 출력된다.

 

 

이제 웹페이지에 출력해보자.

// 영상 타임 라인 주소: https://www.youtube.com/watch?v=JfYYzK1Utv0&t=757s

app.get('/watch',function(req,res){
    const q = req.query
    console.log(q)

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

})

 

 

잘 출력된다.

 

 

 

 

CHAPTER 3. 객체와 배열의 비구조화

 

✅비구조화할당

배열이나 객체 속성을 해제하여 개별 변수에 값을 담을 수 있는 자바스크립트 표현식을 말한다. 비구조화할당 또는 구조 분해 할당이라고 한다.

 

 

위에서 이 코드로 query parameter의 값을 키 밸류쌍 // q= { v:____, t:____ } 으로 입력받았었다.

const q = req.query

 

 

 

✔️객체의 비구조화 할당

객체의 비구조화 할당을 이용하여 값을 바로바로 개별 변수에 담을수 있다.

※ 주의할 점은 객체의 비구조화 할당에서 const {v, t} =req.query처럼 입력받을때 원래의 키값으로 값을 입력받아야한단 것이다.

다른 변수명을 이용할 경우 undefined된다.

app.get('/watch',function(req,res){
    
    //객체의 비구조화
    const {v, t} = req.query
    console.log(v)
    console.log(t)

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

})

 

 

 

 

콘솔창

 

실행화면

 

 

 

✔️배열의 비구조화 할당

배열의 경우 할당시킬 때 변수명과 아무런 관련이 없고 오직 순서의 의해서 값이 들어간다.

//배열 비구조화

const array =  [1, 2, 3, 4, 5]
const [ ,num2, num3, ,num5] = array

console.log(num2)
console.log(num3)
console.log(num5)

 

 

 

실행창

 

 

 

CHAPTER 4. 객체를 만들어 API 테스트

 

url로 입력받는 유튜버 닉네임에 따라 웹페이지에 채널명, 구독자 수 , 비디오 개수를 출력하게 만들었다.

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

app.listen(1234)   //port번호 1234으로 설정


//채널 주소: https://www.youtube.com/@sabrinacarpentervevo
//채널 주소: https://www.youtube.com/@PiggyBoy
//채널 주소: https://www.youtube.com/@ChimChakMan_Official

let youtuber1 = {
    channelTitle : "사브리나 카펜터",
    sub:"904만명",
    videoNum: "163개"
}

let youtuber2 = {
    channelTitle : "피기보이",
    sub:"127만명",
    videoNum: "722개"
}

let youtuber3 = {
    channelTitle : "침착맨",
    sub:"258만명",
    videoNum: "7.2천개"
}

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

    const {nickname} = req.params
    
    if (nickname=="@sabrinacarpentervevo"){
        res.json(youtuber1)
    }
    else if (nickname=="@PiggyBoy"){
        res.json(youtuber2)
    }
    else if (nickname=="@ChimChakMan_Official"){
        res.json(youtuber3)
    }
    else{
        res.json({
            message: "저희가 모르는 유튜버입니다."
        })
    }

})

 

 

 

 

CHAPTER 5. 자바스크립트의 네이밍 케이스

네이밍 케이스를 쓸 때는 끝까지 하나의 케이스를 쓰도록 통일성 유지를 위해 노력해야한다.

 

✔️[kebab-case]     cf.snake_case

      폴더: ex) demo-api

      파일: ex) object-api-demo.js

     

   <특징>

• 알파벳 소문자
• 두 개 이상의 단어를 합쳐서 쓸 땐, 첫 번째 단어와 두번째 단어 사이에 '하이픈(-)'

 

 

✔️[camelCase]

      변수, 함수 : ex) channelTitle, videoNum

 

   <특징>

• 두 개 이상의 단어를 합쳐서 쓸 땐, 두번째 단어의 첫 글자를 "대문자"로

 

 

✔️[PascalCase]

    클래스

 

   <특징>

• 첫 글자 "대문자"

 

 

 

CHAPTER 6. 자바스크립트의 Map(String)

✔️Map

key-value쌍으로 이루어진 데이터 저장하는 형태

ex) 테이블, json

new Map() - 맵을 생성한다

map.set(키, 밸류) - 키와 밸류값 한쌍 저장

map.get(키) - 키 값을 이용하여 밸류 값 반환

 

 

map을 사용하여 데이터베이스처럼 쓸 수 있다.

let db = new Map()

db.set(1, "NoteBook")      //set(키,밸류)  키로 밸류를 찾을 수 있는 한 쌍을 저장
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))

 

 

CHAPTER 7. Express에서의 Map(string)

 

url로 입력받는 번호에 따라 상품의 키와 value값 출력하는 프로그램

 

 

 

id값이 1,2,3 중 하나일때

 

 

그 이외의 수일때