백엔드 기초 3-3 ~ 3-9(Express, params, map)

3 나에게 Express란?

3-3 const, params는 무조건 문자열 그치만 자바스크립트의 마법.. (feat.parseInt)

1️⃣ const, params는 문자열이지만 숫자는 정수로 인식함

const express = require('express')
const app = express()
app.listen(3000) 

app.get('/product/:n', function (req, res) {
  res.json({
    num : req.params.n
  })
})

app.get('/test/1', function (req, res) {
  res.json({
    test : 1 // 위 prams를 썼을 때 숫자가 문자열로 표현되었지만 여기서는 정수로 표현
  })
})

2️⃣ 정말 정수인가? 확인 해보기

app.get('/product/:n', function (req, res) {
  
  if (req.params.n - 10) {
    console.log("url로 전달 받은 숫자가 10보다 큼")
  } // prams에서 밸류값이 숫자임에도 문자로 표현되지만 log의 조건()이 돌아감
// 자바스크립트는 문자열 숫자도 숫자로 판단하는 오류가 있음

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

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

  let number = req.params.n - 10
  
  if ((req.params.n - 10) >5) {
    console.log("url로 전달 받은 숫자가 10보다 큼")
  } // 마찬가지로 로그 값을 보면 정수로 판단할 수 있음
  
  res.json({
    num : req.params.n
  })
})

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

  let number = req.params.n - 10
    console.log(number)

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

3️⃣ 그렇다면 문자열을 정수로 바꾸는 정석적인 방법은?

• parseInt 사용하기

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

  let number = parseInt(req.params.n) - 10 // 파라미터를 정수로 바꿔주기
    console.log(number)

  res.json({
    num : number
  })
})

• 결과를 보면 value도 정수로 바뀐 것을 확인할 수 있음

---

3-4 req.params 연습 - 유튜브

1️⃣ 유튜브 계정의 URL은?

• 유튜브의 채널주소는 https://www.youtube.com/@jocoding 와 같이 유튜브홈/채널핸들링 구조로 되어 있음
• req.params를 이용한 구조와 같은 것을 알 수 있음

app.get('/:nickname', function (req, res) {
  
  const param = req.params // params는 자주 사용되기 때문에 상수로 지정해두면 코드가 깔끔해질 것

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

• 그냥 위에서 배운 것을 응용하여 만들어봄

  let youtube = "https://www.youtube.com/" + param.nickname
  const param = req.params
  res.json({
    channel : youtube.nickname
  })
})

2️⃣ 유튜브 영상 페이지의 URL은?

• 영상을 재생하는 페이지의 경우 https://www.youtube.com/watch?v=pLBJgvC_ZUA 와 같이 유튜브홈/watch?v=~~ 의 구조로 되어있음을 확인 할 수 있음
• 영상 페이지 내 영상 타임라인의 링크는 https://www.youtube.com/watch?v=pLBJgvC_ZUA&t=9s 로 표현되는데 & 연산자 뒤 시간을 나타내는 t변수를 확인할 수 있음
  
• ?는 하나의 데이터만이 아닌 여러 데이터를 전달할 때 사용되는 것을 알 수 있음

3️⃣ ?(query) string 방식

• url 중 ?(query) 뒤에 오는 내용을 query string이라고 함

app.get('/watch', function (req, res) {
  
  const q = req.query
  console.log(q); // 콘솔로그로 query 값(영상, 타임라인)을 확인해 볼 수 있음
  res.json({
    
  })
})

• 영상과 타임라인 두가지 값이 출력됨

app.get('/watch', function (req, res) {  
  const q = req.query
  res.json(q) // json에 query값을 그대로 전달하여 확인할 수 있음 q상수에서 req로 정의(키:밸류 형식)하였기 때문에 {}는 필요 없음
})

• 아래와 같이 query값 중 일부를 가져오고, json의 key값을 바꿀 수도 있음

app.get('/watch', function (req, res) {  
  const q = req.query // q = {v: _, t: _}

  res.json({
    video : q.v,
    time : q.t // value와 key를 각각 사용할 수 있음
  })
})

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

1️⃣ 자바스크립트 문법의 비구조화를 알아보자

• 상수를 하나의 단어로만 지정하지 않고 객체 값을 각각 지정해줄 수도 있음

  const {v, t} = req.query // 이런 식으로 v 와 t 값을 객체로 지정하여 각각 넣어줄 수도 있음
  console.log(v)
  console.log(t)

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

  const {v1, t1} = req.query // 객체의 이름을 변경해도 될까?
  console.log(v1)
  console.log(t1)

  res.json({
   video : v1,
   timeline : t1
  })
})

• 객체명을 바꾸고 작동해보니 객체값을 못 찾는다. 왜 객체는 이름을 맞춰야 하고 배열을 왜 안 맞춰도 되는가? 이는 객체의 비구조화 때문임

2️⃣ JS객체(json)의 비구조화

• 자바스크립트 객체를 각각 골라서 사용할 수 있음

3️⃣ 배열의 비구조화

• 1부터 5까지의 정수를 num으로 표현하면서 알아보자

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

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

• 위에서 num과는 상관없이 배열을 순서대로 표현해주는 결과가 나옴

const array = [1, 2, 3, 4, 5];
const [ ,num2, num3, , num5] = array // 첫번째와 네번째 자리를 빈공간으로 채워주면 순서가 같아짐

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

• 배열의 비구조화는 객체와는 상관없이 인덱스 값을 가지고 있기 때문에 순서대로 들어가게 됨
  따라서 원하는 숫자가 있다면 그 배열의 순서를 맞춰주면 됨

• 배열을 잘 활용하면 아래처럼 변수들을 하나씩 지정해서 필요가 없음

const num1 = array[0];
const num2 = array[1];
const num3 = array[2];
const num4 = array[3];
const num5 = array[4];

• 또한, 순서대로 표기해주면 세부적으로 객체를 지정하지 않아도 됨

const q = req.query // q = {v: _, t: _}

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

const {v, t} = req.query

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

3-6 객체 2개 만들어서 api테스트 해보기

1️⃣ api에 따라 서로 다른 객체를 불러오기

• 각기 다른 변수에 따라 다른 객체를 불러오기 위해서는 if else 문을 활용하는 것이 좋음

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

let youtuber1 = {
  title : "조코딩",
  sub : "609k",
  videonum : "111개"
}

let youtuber2 = {
  title : "침착맨",
  sub : "2270k",
  videonum : "6600개"
}

let youtuber3 = {
  title : "아무개",
  sub : "300k",
  videonum : "50개"
}

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

  if (nickname == "@jocoding") {
    res.json(youtuber1)
  } else if (nickname == "@chimchack") {
    res.json(youtuber2)
  } else if (nickname == "@amugea") {
    res.json(youtuber3)
  } else { // 예외처리(개발자가 예측하지 못한 로직을 처리하는 모든 것, 문법은 상관 없음)
    res.json({
      message : "무명인인데?"
    })
  }
})
// 만약 등록되지 않은 닉네임은? 서버가 무한로딩 됨 ㅠㅠ
// 개발자가 예상하지 못한 에러 = 예외가 발생함!! -> 이 떄 사용해야 되는 것이 예외처리임

---

3-7 디렉토리 정리 + 자바스크립트 네이밍 룰

1️⃣ 디렉토리를 정리하는 법

• 한가지 테마, 주제를 가지고 폴더별로 묶게되면 정리가 수월해짐
  
• 폴더를 생성할 떄도 폴더명을 통일해주면 가독성이 좋아짐(패키지 파일과 분리)
  
• 여기서 TIP
  • 파일명을 만들 때 자세히 보면 소문자와 하이픈 위주로 사용함(반면 js의 변수는 하이픈 대신 대문자로 띄어쓰기를 대체)

2️⃣ 자바스크립트 네이밍 케이스

[kebab-case] cf.snake_case

• 특징: 두개 이상의 단어를 합쳐서 쓸 때는 소문자와 띄어쓰기 자리에 하이픈을 사용
  • 폴더: demo-api
  • 파일: object-api-demo.js

[camelCase]

• 특징: 두개 이상의 단어를 합쳐서 쓸 때는 띄어쓰기 대신 이어지는 첫 글자를 대문자로
  • 변수, 함수: channelTitle, videoNum

---

3-8 자바스크립트 Map(String)

1️⃣ Map이란?

• 아래는 데이터베이스의 Table인데 Map 또한 비슷한 형태를 띄고 있음
  
• Map또한 key:value로 이루어진 데이터의 집합이라고 보면 됨

2️⃣ Map 사용해보기

let db = new Map()
db.set(1, "NoteBook") // 키(id)로 밸류를 찾을 수 있는 한 쌍을 저장함
db.set(2, "Cup")
db.set(3, "Chair") 

console.log(db)
console.log(db.get(1)) // get을 쓰면 매개변수()가 꼭 필요함
console.log(db.get(2))
console.log(db.get(3)) // 밸류값을 하나씩 꺼내서 사용할 수 있음

// 키:밸류 쌍으로 저장하지만, 저장 결과를 보면 : 대신 =>를 사용

• 신입사원이 꼭 알아야 하는 데이터 베이스
  

3️⃣ Map 고도화 해보기

• map 객체를 생성하고 로그로 출력을 확인해 보자

let db = new Map()
db.set(1, "NoteBook") // 키(id)로 밸류를 찾을 수 있는 한 쌍을 저장함
db.set(2, "Cup")
db.set(3, "Chair") 
db.set("3", "FakeChair")

console.log(db)
console.log(db.get(1)) // get을 쓰면 매개변수()가 꼭 필요함
console.log(db.get(2))
console.log(db.get(3)) // 밸류값을 하나씩 꺼내서 사용할 수 있음
console.log(db.get("3")) // db에서는 문자열 숫자를 정수로 인식하지 않음 주의해야 함 

// 키:밸류 쌍으로 저장하지만, 저장 결과를 보면 : 대신 =>를 사용

• Map을 express에 연결해서 api를 받아오는 것을 확인해보면 특징들을 알 수 있음

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

app.get('/:id', function (req, res) { // 코드를 작성할 때 id 값을 받을 경우

  let {id} = req.params // 원래 {id} 변수를 const로 지정하였으나 뒤에서 id를 정수로 변경하게 되어 let으로 선언
  console.log(id) // id 값을 받을 경우 id 값이 잘 들어오는지 테스트 먼저 해야함
  id = parseInt(id) // db에서는 문자열 숫자를 정수로 인식하지 않으므로 "숫자" -> 정수

  if (db.get(id) == undefined){ // 이전에 배운 여러객체들과는 다르게 if문 없이 사용도 가능하지만, db에 존재하지 않는 id의 예외처리를 위해 if else문 작성
    res.json({
      message : "없는 상품이네영"
    })
  } else {
    res.json({ // 웹페이지 뒤에서 받아오는 id 값을 그대로 표출하고 get으로 그대로 가져오니 코드가 간단해짐
      id : id,
      productName : db.get(id)
    }) 
  }
})


let db = new Map()
db.set(1, "NoteBook") 
db.set(2, "Cup")
db.set(3, "Chair")