4주차 res.params 와 map 그리고 비구조화

케케_ 2024. 9. 2. 23:10

parseInt

res.params.n : 문자열 / 하지만 , js는 연산시 숫자로 변형해주긴함
하지만! 혼란을 피하기 위해 숫자로 바꿔주는 걸 추천! / 그리고 다른 언어들과 비슷하게 사용하기 위해!
- parseInt(req.params.n) 과 같이 사용

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

app.listen(1234);

app.get("/products/:n", function (req, res) {
  let number = parseInt(req.params.n) - 10;
  console.log(number);
  console.log(req.params.n - 10);
  res.json({
    num1: number,
    num2: req.params.n,
  });
});

결과

res.params 연습하기

데이터를 url로 받아 다른 페이지를 꾸릴때 사용
유튜브로 연습해보기

1) 유튜브 채널 이름(주소)

- 엔믹스 : https://www.youtube.com/@NMIXXOfficial

- 뉴진스 : https://www.youtube.com/@NewJeans_official

req.param : '/:' 뒤에 오는 값들을 객체로 저장함

// https://www.youtube.com/@NewJeans_official
// https://www.youtube.com/@NMIXXOfficial
app.get("/:nickname/:n", function (req, res) {
  const param = req.params;
  console.log(param);
  res.json({ chaneel: param.nickname }); // 객체로 저장되기 때문에 .객체이름 으로 접근
});

res.params을 이용해 url의 채널 이름에 접근 가능!

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

app.listen(1234);

// https://www.youtube.com/@NewJeans_official
// https://www.youtube.com/@NMIXXOfficial
app.get("/:nickname", function (req, res) {
  const param = req.params;
  res.json({ chaneel: param.nickname });
});

2) 영상 클릭 주소

- https://www.youtube.com/watch?v=ySpb46dUxe4

- 위 영상의 타임라인 주소 : https://www.youtube.com/watch?v=ySpb46dUxe4&t=1332s

영상코드 & 시간=1332초
? : 쿼리(질문) : 쿼리스트링으로 파라미터를 받겠다!
req.query

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

q 객체 응용하기

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

자바스크립트 문법 객체, 배열

비구조화 : js 문법 - 대입을 할때 통째로가 아니라 각각에 맞는 값에 따라서 넣어주는 것
객체의 비구조화

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

주의) 변수이름! 객체에서 사용할 경우 원래 그대로 사용해야함

app.get("/watch", function (req, res) {
  const { q1, q2 } = req.query;
  console.log(q1);
  console.log(q2);
  res.json({
    video: q1,
    timeline: q2,
  });
});

배열의 비구조화(순서대로)
기본 배열 값 넣기

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

const num1 = array[0];
const num4 = array[3];

console.log(num1);
console.log(num4);

비구조화

//자바스크립트의 배열 비구조화 (순서대로)
const array = [1, 2, 3, 4, 5];
// , 를 이용해 빈자리 만들어줌
const [, num2, num3, , num5] = array;

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

객체 활용

api 실습

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

app.listen(1234);

// https://www.youtube.com/@NewJeans_official
// https://www.youtube.com/@NMIXXOfficial

let youtuber1 = {
  channelTitle: "뉴진스",
  sub: "764만명",
  videoNum: "630개",
};

let youtuber2 = {
  channelTitle: "엔믹스",
  sub: "278만명",
  videoNum: "962개",
};

app.get("/:nickname", function (req, res) {
  const { nickname } = req.params;
  if (nickname == "@NewJeans_official") {
    res.json(youtuber1);
  } else if (nickname == "@NMIXXOfficial") {
    res.json(youtuber2);
  }
});

youtuber1 과 youtuber2로 객체를 만들어줌
app.get 내부에 if문을 사용해 객체 전체를 출력

예외 처리하기: if문에 없는 문자열을 검색하면 무한로딩

app.get("/:nickname", function (req, res) {
  const { nickname } = req.params;
  if (nickname == "@NewJeans_official") {
    res.json(youtuber1);
  } else if (nickname == "@NMIXXOfficial") {
    res.json(youtuber2);
  } else {
    // 개발자가 예상하지 못한 에러 = 예외가 발생했다!
    res.json({
      message: "저희가 모르는 유튜버입니다.",
    });
  }
});

네이밍 케이스

[kebab-case] cf. snake_case // 둘 중 어떤 것도 좋으니 "통일"!!

폴더 demo-api

파일 object-api-demo.js

=> 특징 :

- 알파벳 소문자

- 두 개 이상의 단어를 합쳐서 쓸 땐, 첫번째 단어와 두번째 단어 사이에 하이픈 '-' 이용

[camelCase]

변수, 함수 channelTitle, vidoeNum

=> 특징 : 두 개이상의 단어를 합쳐서 쓸땐, 두번째 단어의 첫글자를 "대문자"로

클래스 : PascalCase

자바스크립트 Map (String)

: key-value 쌍을 가지고 데이터를 저장하는 형태

생성 및 확인

let db = new Map(); //데이터베이스 대신 map 사용
db.set(1, "Notebook"); //키로 벨류를 찾을 수 있는 한 쌍을 저장
db.set(2, "Cup");
db.set(3, "Chair");

console.log(db);

map 데이터 꺼내기

console.log(db.get(1)); // Notebook 출력
console.log(db.get(2)); // Cup 출력
console.log(db.get(3)); // Chair 출력

map 활용하기

- 단순하게 req.params 후 db.get()으로 map 값을 가져오면 undefined가 뜸

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

  res.send("Hello");
});

- parseInt 사용

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

  res.send("Hello");
});

- { id } = parseInt(req.params) 하면 undefined 뜸,,,(왜징)

--> (해결 중광호 삭제) id = parseInt(req.params) 하면 됨

- 페이지에 띄우기

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

  if (db.get(id) == undefined) {
    res.json({
      message: "없는 상품입니다.",
    });
  } else {
    res.json({
      id: id,
      product: db.get(id),
    });
  }
});

- 예외 처리함

- else 가 없으면

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

  if (db.get(id) == undefined) {
    res.json({
      message: "없는 상품입니다.",
    });
  }
  res.json({
    id: id,
    product: db.get(id),
  });
});

- 예외처리(undefined)에 포함되는 경우

이렇게 오류가 뜸 --> 이미 json을 보냈는데 왜 또 보내냐 --> else 필수!

신입 사원 역량 반드시 알아야 하는 자료구조: map, list