백엔드(5) - express(2)

req.params 연습(1) : 유튜브 채널 주소

const express = require('express')
const app = express() // 서버를 담음
app.listen(3000)

// 채널 주소: https://www.youtube.com/@ChimChakMan_Official
app.get('/:nickname' , function (req, res) {

  const param = req.params;

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

➡️ url 에 입력된 값에 따라 값이 잘 가져와지는 것을 확인할 수 있다. 

 

req.params 연습(2) : 유튜브 영상 타임라인 주소

영상 타임라인 주소: https://www.youtube.com/watch?v=qgR9Bu5EZPk&t=1396s

app.get('/watch' , function (req, res) {
  const q = req.query
  console.log(q.v)
  console.log(q.t)

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

변수 q에 저장되어 있는 값 => { v: 'qgR9Bu5EZPk', t: '1396s' }

➡️ 영상의 코드와 타임라인이 잘 가져와지는 것을 확인할 수 있다.

 

 JS객체(JSON) 의 비구조화

app.get('/watch' , function (req, res) {
  const {v,t} = req.query
  console.log(v)
  console.log(t)

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

 

➡️값을 하나씩 꺼내서 사용할 수 있음, 객체의 변수명과 맞춰줘야 한다. 

 

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

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

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

 

➡️ [ ] 에 입력된 변수에 array 배열의 값이 차례대로 저장되는데, 값 저장을 원하지 않는 부분은 콤마(,)로 비워두면 된다. 따라서 num2에는 array[1]의 값이, num3에는 array[2]의 값이, 그리고 num5에는 array[4]의 값이 저장된다. 

 

자바스크립트 Map

let db = new Map();
db.set(1, "NoteBook") //키로 벨류를 찾을 수 있는 한 쌍을 저장
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 은 key 와 value 의 형태로 저장되고, key 를 통해 value 값을 가져올 수 있다.

 

express + map

const express = require('express');
const app = express();
app.listen(1234)

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

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

let db = new Map();
db.set(1, "NoteBook") //키로 벨류를 찾을 수 있는 한 쌍을 저장
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 의 key 값을 문자열이 아닌 숫자로 저장해놨으므로 req.params 의 값을 id 에 저장하고 난 후 parseInt 를 통해 숫자로 바꿔주어야 한다. (parseInt 를 하기 전에는 문자열 형태이다)

/1 이 입력됐을 때

 

➡️map 의 key 값 1에 해당하는 값이 화면에 출력된다. 

/7 이 입력됐을 때

 

➡️map에 7을 key로 가진 값이 없기 때문에 예외 처리를 해주어 위와 같은 화면이 출력된다. 

---

👩🏻‍💻 실습해보기

: 객체 생성 후 api 테스트 

const express = require('express')
const app = express() // 서버를 담음
app.listen(3000)

//채널 주소: https://www.youtube.com/@ChimChakMan_Official

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

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

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

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

  const {nickname} = req.params

  if(nickname == "@15ya.fullmoon") {
    res.json (youtuber1)
  }
  else if(nickname == "@ChimChakMan_Official"){
    res.json (youtuber2)
  }
  else if(nickname == "@TEO_universe"){
    res.json (youtuber3)
  }
  else { // 예외 처리
    res.json ({
      message : "저희가 모르는 유튜버입니다."
    })
  }
})

 

➡️객체 youtuber 1, youtuber2, youtuber3을 생성하고 url 에 입력된 nickname 에 따라 객체를 전달해주었다. 

@15ya.fullmoon 를 입력했을 때

@ChimChakMan_Official 를 압력했을 때

이외의 경우

 

입력된 닉네임에 맞게 올바른 객체가 화면에 출력되는 것을 확인할 수 있다. 조건문에 없는 경우에는 "저희가 모르는 유튜버입니다."라는 메시지가 나오도록 예외처리를 해주었다. 

---

번외

자바스크립트의 네이밍 케이스

 

[kebab-case]

폴더 ex. demo-api

파일 ex. object-api-demo.js

 

➡️특징:

- 알파벳 소문자

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

 

[camelCase]

변수, 함수 ex) channelTitle ,videoNum

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

 

---

🌟 배운 점

오늘 학습을 통해 객체를 만들고, 그것을 서버에 전달하는 방법에 좀 익숙해졌다. 저번에는 처음이라 낯설고 어렵다고 생각했는데 계속 반복해서 해보니 별 거 아니라는 생각이 들었고, 이제서야 이해가 된 것 같다. 그리고 오늘 객체의 비구조화에 대해 배웠는데 되게 유용하다는 생각이 들었다. 잊지 말고 자주 써먹어야겠다!