🔵 Today
- req.params, req.query
- 자바스크립트 객체와 배열의 비구조화
- 객체 2개 생성 후 api 테스트
- 자바스크립트 네이밍 룰
- Map
📘 Learned
자바스크립트와 자료형
자바스크립트 언어는 동적타입 언어입니다.
- 자료형을 지정하지 않아도 변수를 선언할 수 있습니다.
- 실행 중 한 변수에 다른 자료형의 값이 들어갈 수 있습니다. <- 숫자, 문자 등
- 의도하지 않은 자료형의 값이 들어갈 수 있습니다. (타입변환)
- 숫자+문자 = 문자, 문자"5"와 숫자3이 ("5" - 3) => 2로 숫자로 계산되는 경우// (자동으로 형변환)
문자열을 숫자로 변환
parseInt("문자열")- 정수parseFloat("문자열")- 실수Number()- Number의 경우는 문자가 포함되어 있는 경우는 안됩니다. ex) "1234"는 가능하지만 "ab34"는 안됨.
숫자를 문자열로 변환- String(숫자)
req.params
라우트 매개변수가 담긴 객체
======================================================
url : http://localhost:1234/products/2
======================================================
app.get('/products/:n', function(req, res) { // products뒤에 오는 값을 n이라는 변수에 담습니다.
res.json({
num : req.params.n // req 요청한 params 변수들 중 n 의 값에 해당하는 값을 가져옵니다.
})
})
===>
{"num":"2"}url 의 :n은 해당하는 부분의 값을 req.params.n로 조회할 수 있습니다.
:id 이면 req.params.id 로 조회할 수 있습니다.
❗ 그러면 :n이 변수처럼 url 에서 해당 부분의 값을 담는다고 했는데 왜 num : n 으로 작성하면 오류가 나는지?
변수니까 값이 담겨있는거 아닌가?
- n을 사용하려면 변수 n을 선언하고 값음 담아야 합니다. ex)
const n = req.params.n// n값을 받았지만 n에 대해서 정의하지 않았습니다.
n 선언 -> n 에 값 대입 -> n 사용 req.parmas.n은 요청을 받을 때 자동으로req.params객체를 생성, n에 해당하는 값을 저장합니다. (express가 제공하는 기능)
요청 -> 사용
req.query
쿼리스트링에 대한 정보가 담긴 객체
======================================================
url : https://localhost:1234/watch?v=abcdefg&t=100s
======================================================
app.get('/watch', function(req, res) {
const q = req.query // query 요청을 받았을 때
console.log(q.v) //query 안의 v값
console.log(q.t) //query 안의 t값
//res.json(q)
res.json({ // 각 query의 값을 받아 json 형태로
video : q.v,
timeline : q.t,
// video : videoName,
// playtime : videoTime,
})
})
===>
{"video":"abcdefg", "timeline":"100s"}- 쿼리는 질문이라는 뜻. (원하는 데이터를 요청하는 것)
- url에서
?이후 부터를쿼리 스트링이라고 합니다. ?뒤의 내용들을쿼리 스트링을 통해 데이터를 보냅니다.키-값(파라미터)들은&으로 구분합니다.- 쿼리스트링 부분의 키에 해당하는 값을 객체의 형태로 가져올 수 있습니다. req.query에 저장 //=쿼리스트링으로 파라미터를 받는다.
- 쿼리스트링의 값들은
문자열로 저장됩니다
자바스크립트 객체 비구조화
url : https://www.youtube.com/watch?v=abcdefg&t=100s
======================================================
app.get('/watch', function(req, res) {
// js객체(json)의 비구조화 할당(구조 분해 할당)
const {v, t} = req.query
// const videoName = query.v
// const videoTime = query.t
console.log(v)
console.log(t)
//res.json(q)
res.json({
video : v,
timeline : t,
// video : videoName,
// timelne : videoTime,
})
})
===>
{"video":"abcdefg", undefined}- 위(req.query)에서
const q = req.query를 선언, 쿼리 데이터마다 변수를 생성해서 할당할 경우 비효율적. (낮은 가독성, 수가 많을 때 코드 수 증가) - 객체(json)을 만들어서 그 안에 변수를 만들어 두고, 그 변수에 해당하는 값을 찾아서 사용
ex)const {v, t} = req.query에서 쿼리 데이터에 해당하는 값이 있다면 값을 저장후, 필요할 때 v, t를 꺼내서 사용.
자바스크립트 배열의 비구조화
비구조화 할당: 객체의 속성이나 값을 해ㅔ체하여 그 값을 변수에 각각 할당하여 사용하는 표현식
const array = [1, 2, 3, 4, 5]
const [num2, num3] = array
console.log(num2)
console.log(num3)
==> 1
2- 배열의 경우 각 요소마다 인덱스를 가지고 있습니다.
- 변수명과 관계없이 인덱스에 해당하는 값을 기져옵니다.
(*객체의 경우는 '키-값' 한쌍 이므로 값을 가져오려는 키와 변수의 이름이 일치해야합니다.)
const array = [1, 2, 3, 4, 5]
const [ , num2, num3, , num5] = array
const num1 = array[0]
const num4 = array[3]
console.log(num2)
console.log(num3)
console.log(num5)
=======================
2
3
5- 위에서 순서에 맞게 값을 가져오려면, 인덱스 위치를 맞춰주면 됩니다.
// youtuber의 객체생성
let youtuber1 = {
channelTitle : "A",
sub : "10만명",
videoNum : "100개",
}
let youtuber2 = {
channelTitle : "B",
sub : "100만명",
videoNum : "210개",
}app.get("/:nickname", function (req, res) {
const {nickname} = req.params // 객체에서 nickname 값을 추출하여 변수 nickname에 저장
if (nickname == "@A" {
res.json(youtuber1)
} else if (nickname == "@B" {
res.json(youtuber2)
} else {
res.json({
message : "모르는 유튜브 입니다"
})
}
})
- url에서 nickname값을 추출하여 json 형태로 nickname에 저장합니다.
- if 조건문으로 각 조건에 맞는 yotuber에 해당하는 내용을 출력합니다.
1) url에서 파라미터(:nickname)의 값은 req.params에서 객체 형태로 받습니다. { nickname : a }
2) req.params에서 nickname키의 값(a)을 변수 { nickname }에 저장
3) 해당 nickname에 맞는 객체를 조건문에서 검색, 출력
