[데브코스][3-4] res.query

단·2024년 4월 27일

데브코스

목록 보기

12/20

1. 타입변환, parseInt

const express = require('express')
const app = express()
// express command+클릭하면 파일 확인 가능

app.listen(3000)

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

    if (req.params.n > 10){
        console.log('url로 전달받은 숫자가 10보다 크네요.')
    }
    res.json({
        num: req.params.n
    })
})

이렇게, req.params.n이 숫자 10보다 큰 경우, 콘솔에 url로 전달받은 숫자가 10보다 크네요.라는 문구를 출력하도록 코딩해보자.

req.params.n은 “11”로 문자열인데, 콘솔에는 문구가 출력됨

즉, if 문의 조건을 돌릴 때, req.params.n과 숫자10을 비교하느라, req.params.n의 타입을 문자열에서 숫자로 자동으로 타입 변환을 한 것

이렇게 자동으로 타입 변환하는 건, 편리하지만, 오류나 문제를 일으킬 수 있기에, parseInt를 활용해 명시적으로 변환해줘야 한다.

const express = require('express')
const app = express()
// express command+클릭하면 파일 확인 가능

app.listen(3000)

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

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

    res.json({
        num: number
    })
})

2. 유튜브로 req.params 연습하기

2.1 채널 닉네임 불러오기

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

//채널: https://www.youtube.com/@NewJeans_official
//채널: https://www.youtube.com/@essentialme
//채널: https://www.youtube.com/@MBCNEWS11

app.get('/:nickname', function(req,res){
    const param = req.params

    console.log(param);
    
    res.json({
        channel : param.nickname,
    })
    
});

express 모듈 불러오기
app 상수에 express 모듈 할당
app.get 메서드를 통해서 url 닉네임 부분 긁어오고 화면에 띄우기
1. 1번째 매개변수는 Url
2. 2번째는 콜백함수
  1. 콜백함수의 첫 매개변수인 req의 params 메서드 결과를 param 상수에 할당
    - console.log한 결과
```
{ nickname: '@newjeansofficial' }
{ nickname: 'favicon.ico' }
```
  2. res.json으로 param 객체 상수의 값을 channel이라는 키 값에 할당 후 화면에 띄우기

2.2 채널 query 사용해보기

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

// 뉴진스 무대: https://www.youtube.com/watch?v=P3HxnZckrEo&t=887s
// /watch 뒤에 ?부터는 query의 영역
// v 키와 P3HxnZckrEo 값, t 키와 887s 값
// 이 두 가지의 값은 req.query 객체로 저장됨

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

    console.log(param);

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

const q = req.query;에 v=P3HxnZckrEo&t=887s 저장됨

res.json() 으로 video : q.v, time: q.t 객체로 전달됨

(참고) URL 간단 구조

https://www.youtube.com/watch?v=P3HxnZckrEo&t=887s

https://www.youtube.com/watch?v=P3HxnZckrEo&t=887s - URL

https - 프로토콜

www.youtube.com - 도메인

/watch - Path (/)(파일의 경로)

?v=P3HxnZckrEo&t=887s - parameter (?)(key=value 형태로 이루어져있고, & 기호로 구분되어서 여러 개 존재 가능)(req.query로 관리)

(참고) query, params

2.3 구조분해할당

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

const [, num2, num3, , num5] = array
console.log(num2) //2
console.log(num5) //5

자바스크립트 배열 비구조화
배열은 인덱스값을 가지기에, 순서대로 구조분해할당이 됨

//구조분해할당 X
app.get('/:nickname', function(req,res){
    const param = req.params
    
    res.json({
        channel : param.nickname
    })
    
});

//구조분해할당 O
app.get('/:nickname', function(req,res){
    const {nickname} = req.params;

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

2.4 유튜브 실습 2 - 객체 생성 후 테스트

let youtuber1 = {
    channelTitle : 'MBCnews',
    sub : '434만명',
    videoNum : '24만개'

}

let youtuber2 = {
    channelTitle : 'essential',
    sub : '137만명',
    videoNum : '391개'

}

let youtuber3 = {
    channelTitle : '뉴진스',
    sub : '600만명',
    videoNum : '500개'

}

app.get('/:nickname', function(req,res){
    const {nickname} = req.params;

    if (nickname == '@MBCNEWS11'){
        res.json(youtuber1)
    } else if (nickname == '@essentialme'){
        res.json(youtuber2)
    } else if (nickname == '@NewJeans_official'){
        res.json(youtuber3)
    } else {
        res.json('찾으시는 채널이 없습니다.')
    }

})

http://localhost:3000/@NewJeans_official

검색 하면, 다음의 화면 나옴

2.6 네이밍 룰

파스칼(PascalCase) - 첫 글자, 두번째 단어 첫 글자 모두 대문자
낙타(camelCase) - 두번째 단어 첫글자 대문자
케밥(kebab-case) - 단어 사이 연결은 하이픈(-)
스네이크(snakecase) - 단어 사이 연결은 언더바()

네이밍 관행

파일, 폴더

두 개 이상의 단어 합쳐서 쓰면, 첫 번째 단어와 두 번째 단어 사이에 알파벳 소문자, 하이픈 - 사용

예시) demo-api

변수, 함수

두 개 이상의 단어 합쳐서 쓰면, 두번째 단어의 첫 글자를 대문자 사용

예시) channelTitle

3. Map

3.1 map이란

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 생성자 함수로 db 변수 생성

set 메서드로 Map 안에 key, value 추가

get 메서드로 Map 안의 key, value 가져오기

3.2 express + map

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

let db = new Map();

db.set(1, "notebook") 
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));

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