데브코스 웹풀스택 과정/TIL

[8기 9회차] 0917 Express - 파라미터, 쿼리 가져오기 / 객체,배열 비구조화 / map

thinktank911 2025. 9. 17. 09:06

parseInt 메서드

  • parseInt() 함수는 문자열 인자를 파싱하여 특정 진수(수의 진법 체계에서 기준이 되는 값)의 정수를 반환
    app.get('/products/:n', (req, res) => {
      // 자바스크립트는 문자를 숫자로 자동으로 인식하지만
      // 그러지 않을 경우 parseInt를 사용해 문자를 숫자로 바꿔줘야 함
      let number = parseInt(req.params.n) - 10;
      console.log(number); // 숫자 "숫자"
      res.json({
          num : number
      })
    })

Route Parameter와 Query String 받기

  • 파라미터
    • req.params
// 파라메터
// 채널 주소 : https://www.youtube.com/@KoreanCryingGuy
app.get('/:nickname', (req, res) => {

    const param = req.params;

    res.json({
        channel : param.nickname
    })
})
  • 쿼리스트링
    • req.query
// 쿼리
// 영상 클릭 주소 : https://www.youtube.com/watch?v=_ttuPeDExTo
// 영상 타임라인 주소 : https://www.youtube.com/watch?v=_ttuPeDExTo&t=357s
app.get('/watch', (req, res) => {
    // {v: '_ttuPeDExTo', t: '357s'}
    // const q = req.query;
    // console.log(q.v);
    // console.log(q.t);

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

자바스크립트 객체, 배열 비구조화

  • 객체 비구조화(구조분해 할당) : 객체의 속성 값을 추출하여 개별 변수에 할당하는 자바스크립트 표현식
app.get('/watch', (req, res) => {
    // {v: '_ttuPeDExTo', t: '357s'}
    // 객체 비구조화 : 변수 이름 그대로 사용
    const {v, t}= req.query
    console.log(v);
    console.log(t);

    res.json({
        video : v,
        time : t
    })
})
  • 배열 비구조화 : 자바스크립트(JavaScript)에서 배열의 요소들을 쉽게 해체하여 개별 변수에 할당하는 문법으로, ES6부터 도입된 비구조화 할당(Destructuring Assignment)의 한 종류. 이 문법을 사용하면 배열의 요소를 순서대로 변수에 할당하거나, 특정 요소는 건너뛰고, 나머지 요소들을 새로운 배열로 묶을 수 있다.
// 자바스크립트 배열 비구조화 : 배열의 순서대로 변수 대입
const array = [1, 2, 3, 4, 5]
const [ , num2, num3, , num5]= array

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

객체 여러개 호출하는 api 테스트

// CommonJs 방식
const express = require('express');
// ES module 방식. package.json에 "type": "module" 추가
// import express from 'express'
// express 호출해 app변수에 서버 담음
const app = express()
// 서버 셋팅. 순서 상관 없음
// 포트넘버 3000으로 설정함
app.listen(3000)

// 파라메터
// 채널 주소 : https://www.youtube.com/@KoreanCryingGuy

let youtuber1 = {
    channelTitle : "KoreanCryingGuy",
    sub : "168만명",
    videoNum : "573개"
}

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

let youtuber3 = {
    channelTitle : "테오",
    sub : "54.8만명",
    videoNum : "726개"
}

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

    const {nickname} = req.params;

    if(nickname === "@KoreanCryingGuy"){
        res.json(youtuber1)
    }else if(nickname === "@ChimChakMan_Official"){
        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-api-demo.js
  • 특징 :
    • 알파벳 소문자
    • 두 개 이상 단어 합쳐서 쓸 땐, 첫번째 단어와 두번째 단어 사이에 -(하이픈)

[camelCase]

  • 변수, 함수 channelTitle, videoNum
  • 특징 : 두 개이상의 단어를 합쳐서 쓸 땐, 두번째 단어의 첫글자를 대문자로

[PascalCase]

  • 클래스

 

자바스크립트 Map (String)

  • 키:밸류 쌍으로 이루어진 데이터 저장 형태
    • map을 데이터베이스 대신 사용한다
  • db.set(키, 밸류) : 키로 밸류를 찾을 수 있는 한 쌍을 저장
    • 키 값은 숫자와 문자열을 명확히 구분함
  • db.get(키) : 키로 찾은 밸류 출력
// map을 데이터베이스 대신 사용
let db = new Map()
// db.set(키, 밸류) : 키로 밸류를 찾을 수 있는 한 쌍을 저장
// 키 값은 숫자와 문자열을 명확히 구분함
db.set(1, "NoteBook")
db.set(2, "Cup")
db.set(3, "Chair")
db.set("1", "Ssonga");
// 키가 화살표로 밸류 가리킴 { 1 => 'NoteBook', 2 => 'Cup', 3 => 'Chair' }
console.log(db);
// db.get(키) : 키로 찾은 밸류 출력
console.log(db.get(1));
console.log(db.get(2));
console.log(db.get(3));
console.log(db.get("1"));

 

express + map (String)

  • map 사용해 param 값을 화면에 출력한다.
  • db의 id값의 데이터타입이 number이므로 parseInt로 id값 변환
  • id가 db에 없을 경우 undefiened 활용하여 예외 처리
  • db.get(id)로 값 꺼내 json 형태로 출력
const express = require('express');

const app = express();

app.listen(3000);

// localhost:3000/1 => NoteBook
app.get('/:id', (req, res) => {
    let {id} = req.params;
    // id를 데이터 타입 숫자로 표현
    id = parseInt(id);

    // 예외처리 필요
    if(db.get(id) === undefined){
        res.json({
            message : "없는 상품입니다."
        })    
    }else{
        // if 밖으로 빼내면 에러 발생함. 이미 클라이언트한테 보냈다.
        res.json({
            id : id,
            product : db.get(id)
        })
    }
})