티스토리 뷰
req.params란?
req.params는 URL 경로에서 동적으로 전달된 값을 추출하는 객체이다.
이를 활용하면 특정 경로에서 변수 값을 받아 원하는 데이터를 처리할 수 있다.
req.params의 동작 원리
예를 들어, /products/:n과 같은 경로를 설정하면
사용자가 /products/3으로 접근했을 때 req.params는 {"n": "3"} 형태로 데이터를 저장한다.
즉, req.params.n을 사용하면 "3"이라는 값을 가져올 수 있다.
req.params의 데이터 타입
- req.params로 전달된 값은 문자열(string) 타입으로 저장된다.
- 하지만 자바스크립트의 자동 형 변환 덕분에 숫자와 비교 연산, 덧셈·뺄셈 연산 등이 가능하다.
- 보다 명확한 숫자 변환이 필요하면 parseInt() 같은 변환 함수를 사용할 수 있다.
req.params 활용 예시
1️⃣ 유튜브 채널 주소 구조
- 유튜브의 채널 주소는 https://www.youtube.com/@채널명 형식으로 구성된다.
- 여기서 @채널명이 params로 전달되어 해당 채널 페이지로 연결된다.
2️⃣ 유튜브 영상 URL
- 유튜브의 영상 URL은 https://www.youtube.com/watch?v=비디오ID&t=시작시간 형태로 구성된다.
- v=비디오ID는 특정 비디오를 식별하며, t=시작시간은 몇 초부터 재생할지를 지정한다.
- 이러한 방식으로 URL의 특정 값을 params를 통해 전달받아 처리할 수 있다.
req.params 정리
- URL 경로에서 변수 값을 추출하는 역할
- 기본적으로 문자열(string) 타입이지만 연산 시 자동 변환 가능
- 명확한 숫자 변환이 필요하면 parseInt() 사용
- 유튜브 채널, 영상 URL 등 다양한 웹 서비스에서 활용됨
이처럼 req.params를 사용하면 사용자의 입력값을 동적으로 받아 원하는 페이지나 데이터를 제공할 수 있다.
자바스크립트 객체, 배열 비구조화
객체 두개 만들어서 api테스트
const express = require("express");
const app = express();
app.listen(1234)
let youtuber1 = {
channelTitle : "십오야",
sub : "593만명",
videoNum : "993개"
}
let youtuber2 = {
channelTitle : "침착맨",
sub : "227만명",
videoNum : "6.6천개"
}
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({
massage : "저희가 모르는 유튜버입니다"
})
}
//개발자가 예상하지 못한 에러 = 예외가 발생했다!
})
'✅ 코드 상세 설명
이 코드는 Express.js를 이용하여 간단한 웹 서버를 구현한 것이다.
특정 유튜버의 정보(JSON 데이터)를 제공하는 API 역할을 한다.
- express 모듈을 불러와서 웹 서버를 생성
- app.listen(1234) → 포트 1234에서 서버를 실행
- 이 상태에서 http://localhost:1234로 접속 가능
- youtuber1, youtuber2, youtuber3 → 3명의 유튜버 정보를 저장한 객체
- channelTitle → 채널명
- sub → 구독자 수
- vidioNum → 영상 개수 (videoNum 오타 있음)
- /:nickname → URL에서 nickname 값을 가져온다
- 예: http://localhost:1234/@15ya.fullmoon → nickname = "@15ya.fullmoon"
- nickname 값이 특정 유튜버와 일치하면 해당 정보를 JSON 형식으로 응답
🚀 정리
- Express 서버 실행 (app.listen(1234))
- 유튜버 정보를 객체에 저장
- URL의 nickname 값을 받아 해당 유튜버 정보를 반환
- JSON 데이터 형식으로 응답 (res.json())
디텍토리 정리 + 자바스크립트 네이밍룰
- 폴더,파일(demo-a, a.js) : 알파벳 소문자, 두개 이상의 단어를 합쳐서 쓸땐 첫번째와 두번째 단어 사이에 하이픈
- 변수, 함수(chnnelTitle) → 두개 이상의 단어를 합쳐서 쓸땐 ,두번째 단어의 첫글자를 "대문자"로
자바스크립트 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))
-> 출력
[Running] node "c:\node-base\demo-apt\map-demo.js"
Map(3) { 1 => 'NoteBook', 2 => 'Cup', 3 => 'Chair' }
NoteBook
Cup
Chair
📌 JavaScript Map 객체 요약
✅ 키-값(key-value) 저장 자료구조
✅ 모든 타입을 키로 사용 가능 (객체 {} 는 문자열·심볼만 가능)
✅ 키의 삽입 순서 유지
✅ 크기 확인: size 사용
const map = new Map();
// 값 추가
map.set("name", "Alice").set(123, "Number Key");
// 값 가져오기
console.log(map.get("name")); // Alice
// 값 존재 확인
console.log(map.has(123)); // true
// 값 삭제
map.delete(123);
// 전체 삭제
map.clear();
자바스크립트 Map
const express = require("express");
const app = express();
//서버 셋팅 : 포트 넘버(번호) 1234로 셋팅
app.listen(1234)
//GET + "/"
app.get('/:id', function(req, res) {
let {id} = req.params
console.log(id)
id = parseInt(db.get(id))})
if (db.get(id) == undefined){
res.json({
message : "없는 상품 입니다."
})
}else{
res.json({
id : id,
productName : db.get(id)
})
}
//localhost:1234//1 => NoteBook
//localhost:1234//2 => Cup
//localhost:1234//3 => Chair
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))
-> 전코드 오류났음
const express = require("express");
const app = express();
//서버 셋팅 : 포트 넘버(번호) 1234로 셋팅
app.listen(1234);
//GET + "/"
app.get('/:id', function(req, res) {
let { id } = req.params; // id 가져오기
id = parseInt(id); // 숫자로 변환
console.log(id);
if (db.get(id) == undefined) { // 없는 상품 처리
res.json({
message: "없는 상품 입니다." // 오타 수정 (massage -> message)
});
} else { // 존재하는 상품 처리
res.json({
id: id,
productName: db.get(id)
});
}
});
//localhost:1234/1 => NoteBook
//localhost:1234/2 => Cup
//localhost:1234/3 => Chair
let db = new Map();
db.set(1, "NoteBook"); // 키로 값을 찾을 수 있는 한 쌍을 저장
db.set(2, "Cup");
db.set(3, "Chair");
-> 완성
원래 코드와 달라진 점
- 잘못된 변수명 수정
- let { p } = req.params → let { id } = req.params
- id를 가져와야 하는데 p를 사용하고 있었음.
- id 숫자 변환 방식 수정
- id = parseInt(db.get(id)) → id = parseInt(id)
- db.get(id)가 아니라 id 자체를 숫자로 변환해야 함.
- console.log(id) 위치 수정
- 기존 코드에서는 id가 선언되기 전에 console.log(id)를 실행하여 오류 발생 가능.
- if-else 구조 적용
- 기존 코드에서는 if (db.get(id) == undefined) { ... }가 app.get 바깥에 있어서 실행되지 않았음.
- if-else를 app.get 내부로 이동하여 정상 작동하도록 수정.
- res.json() 응답 오류 수정
- 기존 코드에서는 res.json()을 실행하기 전에 if 문이 app.get 바깥에 있어서, 실행되지 않았음.
- 올바른 위치로 이동하여 정상적으로 응답하도록 수정.