데브코스 TIL - Day 15

23년 12월 7일 강의를 들은 내용과 추가로 더 학습한 내용을 기록한 글입니다.

req.params 연습

유튜브 채널 주소 활용해서 params 값 가져오기

• https://www.youtube.com/@15ya.fullmoon
• https://www.youtube.com/@ddeunddeun
• https://www.youtube.com/@starcoding
• 유튜브 주소 + @아이디

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

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

결과

유튜브 영상 주소 활용해서 query 값 가져오기

• https://www.youtube.com/watch?v=S6POUU2-tr8
• https://www.youtube.com/watch?v=rXqPRxKQ3eg

• https://www.youtube.com/watch?v=FQfEqIGMF7Q&list=PLE7NSUpyv6SWUghI2uuPHc_lrE4mvPK5y&index=1&t=2363s

• req.query 콘솔 로그로 찍어보기
  • http://localhost:3000/watch?v=FQfEqIGMF7Q&list=PLE7NSUpyv6SWUghI2uuPHc_lrE4mvPK5y&index=1&t=2363s

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

PS C:\Users\user\Desktop\non-blocking> node paramsDemo.js
{
  v: 'FQfEqIGMF7Q',
  list: 'PLE7NSUpyv6SWUghI2uuPHc_lrE4mvPK5y',
  index: '1',
  t: '2363s'
}

• videoId, timeline으로 값 반환하기

app.get("/watch", function (req, res) {
  const { v, t } = req.query;
  res.send({ videoId: v, timeline: t });
});

결과

const youtuber1 = {
  channelTitle: "십오야",
  subscriber: 5930000,
  videoNum: 993
};
const youtuber2 = {
  channelTitle: "뜬뜬",
  subscriber: 1510000,
  videoNum: 168
};

app.get("/:nickname", function (req, res) {
  const { nickname } = req.params;
  if (nickname === "@15ya.fullmoon") {
    res.send(youtuber1);
  } else if (nickname === "@ddeunddeun") {
    res.send(youtuber2);
  } else {
    // 개발자가 예상하지 못한 에러 = 예외가 발생했다!
    res.send("유튜버를 찾을 수 없습니다.");
  }
});

결과

express + map

map

• new Map :새로운 map 생성
• .set : 값 생성
• .get : 값 조회(가져오기)

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

const db = new Map();

// set : 값 생성
db.set(1, "notebook");
db.set(2, "cup");
db.set(3, "chair");

app.get("/:id", function (req, res) {
  const { id } = req.params;
  if (db.get(parseInt(id)) === undefined) {
    res.send("없는 상품입니다");
  } else {
    res.send(db.get(parseInt(id)));
  }
});

결과

자바스크립트에서 문자열을 숫자로 변환하는 방법

유튜브 주소 /watch?v=아이디

parseInt()

mdn 문서 - parseInt()

자바스크립트 객체

객체의 비 구조화

• 객체는 변수의 이름을 맞춰서 가져와야 함

app.get("/watch", function (req, res) {
  const { v, t } = req.query;
  res.send({ videoId: v, timeline: t });
});

배열의 비 구조화

• 배열은 변수의 이름을 마음대로 설정해서 가져와도 됨
• 순서는 맞춰서 가져와야 함 (배열의 index 값 때문에)

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

console.log(`num2: ${num2}, num3: ${num3}`); // num2: 1, num3: 2
console.log(`num4: ${num4}`); // num4: 4

자바스크립트 네이밍

kebab-case

• 알파벳 소문자로 작성
• 두 개 이상의 단어를 합쳐서 쓸 때 하이픈(-) 사용

demo-api;
object-api-demo;

snake_case

• 알파벳 소문자로 작성
• 두 개 이상의 단어를 합쳐서 쓸 때 언더바(_) 사용

demo_api
object_api_demo

camel Case

• 두 단어를 합쳐서 쓸 때 두 단어의 첫글자를 대문자로 작성

channelTitle
videoNum

PascalCase

• 첫번째 글자도 대문자로 작성
• 두 단어를 합쳐서 쓸 때 두 단어의 첫글자를 대문자로 작성

BackgroundColor
TypeName
PowerPoint