[TIL] Day12 - Express, JS 객체

💡parseInt

자바스크립트는 숫자와 문자, 자동을 형변환을 해준다. 편리한 점이지만, 어느정도 문제가 생길 가능성이 있다!

"숫자" `문자` 숫자 `숫자`

parseInt(`변환할 변수(문자상태)`)

parseInt() - JavaScript | MDN

 

Params , Query String

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

  const param = req.params

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

링크 채널, 영상, 타임라인 모두 url params 로 처리함 = query string

https://www.youtube.com/watch?v=cQtSJgbOnbA&t=237s

req.query로 요청하면 `{ v: 'cQtSJgbOnbA', t: '237s' }` 바로 가져온다!!!!!! json 형태

q.v, q.t 로 하면 각각의 쿼리 값을 가져올 수 있다.

 

JS 객체 비구조화

json을 구조분해할당 하는 방법과 비슷하다.

const {v,t} = req.query;

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

그런데 객체에서는 query에서 사용되는 변수 이름 그대로 사용해야 한다.

 

배열의 비구조화

//자바스크립트 배열의 비구조화
const arr = [1,2,3,4,5];
const [ ,num2, num3, , num5]=arr;

console.log(num2, num3, num5);

//console
2 3 5

인덱스 순서대로 변수에 할당된다. 빈자리 설정 가능

 

객체 api 할당, 예외처리

객체 하드코딩 생성해서

let youtuber1 = {
    channelTitle : "십오야",
    sub : "593만명",
    vidioNum : "993개"
}

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

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

각 api 마다 객체를 할당해준다. + 예외처리

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

  if (nickname == "@15ya.fullmoon") {
    res.json(youtuber1);
  } else if (nickname == "@ChiumChakMan_Official") {
    res.json(youtuber2);
  } else if (nickname == "@TEO_universe") {
    res.json(youtuber3);
  } //예외처리
  else {
    res.json({
      message: "누구세요?",
    });
  }
});

 

💡JS 네이밍 케이스

폴더, 파일명 : 소문자, 하이픈 `-` ⇒ 케밥 or snake_case  `둘중 어떤 것도 좋으니 통일`

변수, 함수 : 카멜 ⇒  두개 이상의 단어를 합쳐서 쓸땐, 더번째 단어의 첫글자를 "대문자"로

클래스 : PascalCase

 

JS map()

key-value 형태 == map 형태

let db = new Map();
db.set(1, "nodebook");
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(3) { 1 => 'nodebook', 2 => 'cup', 3 => 'chair' }` 화살표 형태

Map / List 신입에게 중요한 자료구조!

 

숫자 vs 문자열

키 값의 숫자와 문자열을 구분한다. `parseInt` 처리

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

  if (!db.get(id)) {
    res.json({ message: "없는 상품" });
  } else {
    res.json({
      id: id,
      productName: db.get(id),
    });
  }
});

 

☑️ 배운 점

플젝에서 가져온 api가 query string으로 가져오고, 쿼리를 각각 처리할 수 있게 하는 방법!

Json 비구조화, 배열의 비구조화. JS 구조분해할당과 유사하게 작동하지만, query의 변수값으로 설정해주어야 동작한다는 것이 다른점이다.

백엔드는 예외처리가 중요한 것 처럼 보인다. 잊지말자!