웹풀사이클 13일차 - js의 특징,url 쿼리와 파라미터 사용, 네이밍 규칙, Map

문자를 숫자처럼 취급하는 javascript

const express = require("express");
const app = express();

app.listen(3003);

app.get(`/products/:n`, function (req, res) {
  //products/__빈칸에 오는 값을 n에 담아준다.

  res.json({
    num: req.params.n,
  });

  if (req.params.n > 10) {
    console.log("10보다 크다.");
  }
});

결과

왼쪽에서 결과를 보면 문자열로 인식했지만 계산이 된 것을 볼 수 있다.

javascript는 계산할 때, 문자로 된 숫자를 숫자처럼 취급하고 계산한다!

이런 것은 위험할 수도 있으므로 parseInt를 이용해서 숫자로 바꿔주는 것을 추천한다. 

 

app.get(`/products/:n`, function (req, res) {
  let number = parseInt(req.params.n);
  res.json({
    num: number,
  });
});

 

이제는 이렇게 숫자로 보내지는 것을 확인할 수 있다

 

url 이용하기

1. 파라미터를 사용하기

=> http://localhost:3003/sungeun

app.get(`/:nickname`, function (req, res) {
  const param = req.params;
  res.json({
    channel: param.nickname,
  });
});

 

2. 쿼리 사용하기

=> http://localhost:3004/watch?v=Kb2_njd7jJg&t=11630s

app.get(`/watch`, function (req, res) {
  const query = req.query;
  res.json({
    video: query.v,
    timeline: query.t,
  });
});

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

비구조화를 통해서 코드의 길이를 대폭 줄이고 가독성을 올릴 수 있다.

 

1. 객체의 비구조화

app.get(`/watch`, function (req, res) {
  // const query = req.query;
  const { v, t } = req.query; //url에서 v,t로 오기 때문에 변수명을 바꿀 수 없다.
  res.json({
    video: v,
    timeline: t,
  });
});

=> http://localhost:3004/watch?v=Kb2_njd7jJg&t=11630s

객체는 변수명을 똑같이 써줘야한다(v,t)  . 이를 객체의 비구조화라고 한다.

 

2. 배열의 비구조화

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

console.log(num5);

각 순서의 정보를 저장한다.

 

3. 참고

app.get(`/:nickname`, function (req, res) {
  const param = req.params;
  res.json({
    channel: param.nickname,
  });
});

위를 비구조화 한다면 아래와 같다.

app.get(`/:nickname`, function (req, res) {
  const {param} = req.params;
  res.json({
    channel: param,
  });
});

 

js 네이밍케이스

[kebab-case]

폴더 ex. demo-api

파일 ex. object-api-demo.js

 

[camelCase]

변수명, 함수명 ex. channelTitle, videoNum

 

[PascalCase]

ex. PascalCase

 

[snack_case]

ex. snack_case

 

express에서 map 사용하기

• map 정의하기

let db = new Map();

• map에 데이터 넣기

db.set(1,"book");
db.set(2,"note");
db.set(3,"pen");

 

map에 저장하면 다음과 같은 형태로 저장된다.

map은 key값의 숫자, 문자를 구분하는 것을 알아두자.

• map 사용하기

=> http://localhost:3000/5

위와 같이 파라미터로 5가 들어온 경우 map의 key가 5인 정보를 보내주는 코드이다.

파라미터는 처음에 문자로 인식되기 때문에  id=parseInt(id);를 통해서 숫자로 바꿔준다.

 

Map에 해당 키에 대한 내용이 없는 경우에는 undefined가 나오므로 이를 이용해서 예외처리를 한다.

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

app.get('/:id', function (req, res) {
  let {id} = req.params;
  id=parseInt(id);
  console.log(id);
  if( db.get(id) == undefined){
    res.json({
      data: "no data"
    });
  }
  else{
    res.json({
      id: parseInt(id),
      data: db.get(parseInt(id))
  });
  }
});

app.listen(3000)


let db = new Map();

db.set(1,"book");
db.set(2,"note");
db.set(3,"pen");

console.log(db);