자바스크립트 네이밍 룰
camelCase
- 두 번째 이상의 단어는 첫 글자를 대문자로 사용
- 주요 용도 -> 변수명, 함수명
getElementById
PascalCase
- camelCase에서 첫 번째 단어의 첫 글자도 대문자로 사용
- 주요 용도 -> 클래스(Class), 리액트 컴포넌트명
AboutMe.jsx
snake_case
- _(언더바)를 이용해 단어를 구분
- 주요 용도 -> DB 필드명, 서버 설정 파일, 상수
user_profile_image
kebab-case
- -(하이픈)을 이용해 단어를 구분
- 주요 용도 -> URL 주소, CSS 클래스명, 파일명
.user-profile-image
req.params 연습
유튜브 채널 이름 출력해보기
app.get("/:nickname", function (req, res) {
const parmas = req.params;
res.json({
chanel: parmas.nickname,
});
});/:nickname (Route Parameter)
- 주소창에 직접 입력되는 가변적인 값을 의미
- 앞의 콜론(:)은 "여기에는 아무 값이나 올 수 있고, 그 값을 nickname이라는 이름으로 저장하겠다"라는 약속
- 예: localhost:3001/SSGLANDERS라고 치면 nickname은 SSGLANDERS가 됨
req.params
- 라우트 파라미터로 들어온 값들을 담고 있는 객체
- 만약 경로가 /:nickname이면, req.params 안에는 { nickname: "입력값" }이 들어있게 됨
유튜브 영상 주소와 시간 출력해보기
app.get("/watch", function (req, res) {
const { v, t } = req.query;
console.log(v, t);
res.json({
video: v,
time: t,
});
});req.query
-
URL에서 ? 뒤에 오는 키=값 쌍들을 담는 객체
-
여러 개의 데이터를 보낼 때는 &로 구분 (예: ?v=1&t=2)
-
특징: 경로(/:id)와 달리 서버 코드에서 경로를 미리 지정할 필요가 없고, 어떤 값이 들어와도 req.query가 다 받아줌
비구조화 할당 (const { v, t } = req.query)
-
원래는 const v = req.query.v;, const t = req.query.t;라고 써야 하는 것을 한 줄로 줄인 자바스크립트 최신 문법
-
코드의 가독성이 좋아져서 실무에서 매우 많이 사용
객체, 배열 비구조화
const array = [1, 2, 3, 4, 5];
const [, num2, num3, , num5] = array;
console.log(num2);
console.log(num3);
console.log(num5);배열 비구조화 할당은 순서(Index)를 찾아감
-
[ : 첫 번째 요소(1)는 받을 변수가 없어서 무시
-
, num2 : 두 번째 요소(2)를 num2 변수에 담음
-
, num3 : 세 번째 요소(3)를 num3 변수에 담음
-
, : 네 번째 요소(4)는 쉼표만 있으므로 무시
-
, num5] : 다섯 번째 요소(5)를 num5 변수에 담음
객체 여러 개 생성 후 테스트
let youtuber = {
user01: {
channelTitle: "SSG랜더스",
subscribers: "21.4만명",
videoNum: "4.2천개",
},
user02: {
channelTitle: "튜브김민교",
subscribers: "77.6만명",
videoNum: "1.9천개",
},
user03: {
channelTitle: "두치와뿌꾸",
subscribers: "88.7만명",
videoNum: "1.9만개",
},
};
app.get("/:nickname", (req, res) => {
const { nickname } = req.params;
if (nickname == "@SSGLANDERS") {
res.json({ youtuber: youtuber.user01 });
} else if (nickname == "@Onepunchk1ng_mk") {
res.json({ youtuber: youtuber.user02 });
} else if (nickname == "@두치와뿌꾸") {
res.json({ youtuber: youtuber.user03 });
} else {
res.json({ message: "등록되지 않은 유튜버입니다." });
}
});데이터 정의 (youtuber 객체)
- user01, user02, user03이라는 키(Key) 안에 각각의 유튜버 정보가 객체 안의 객체(Nested Object) 구조로 들어있습니다.
요청 처리 (app.get)
-
const { nickname } = req.params;: 브라우저 주소창에 친 /값을 nickname이라는 변수에 담음
-
조건문 (if...else if):
- 입력받은 nickname이 특정 문자열(아이디)과 일치하는지 하나씩 검사
- 일치하면 youtuber 객체에서 해당 데이터를 꺼내서 응답
- 예외 처리 (else):
- 준비된 데이터에 없는 이름이 들어오면 "등록되지 않은 유튜버"라는 메시지를 보냄
map, 형변환
app.get("/:id", function (req, res) {
let { id } = req.params;
id = parseInt(id);
res.json({
id: id,
food: db.get(id),
});
});
let db = new Map();
db.set(1, "Kimchi");
db.set(2, "Bibimbap");
db.set(3, "Bulgogi");Map 객체 생성 및 데이터 저장
-
일반 객체({})와 비슷하지만, Map은 set으로 저장하고 get으로 불러온다는 차이가 있음
-
중요: 여기서 저장된 Key는 문자열 "1"이 아니라 숫자 1
왜 parseInt(id)가 반드시 필요한가?
브라우저 주소창(req.params)을 통해 들어오는 모든 값은 문자열(String)
-
만약 localhost:3001/1로 접속하면, 서버는 id = "1" (문자열)로 받음
-
그런데 우리가 db.set(1, ...)으로 저장한 Key는 숫자 1
-
자바스크립트의 Map은 데이터 타입을 엄격하게 구분하기 때문에, 문자열 "1"로 찾으면 데이터를 찾지 못하고 undefined를 반환
오늘 배운 점
1. Params vs Query: 주소창 데이터 추출
- Path Params(
/:id): 게시글 번호처럼 리소스의 고유한 식별이 필요할 때 사용(req.params) - Query String(
?v=): 검색어나 필터링처럼 추가 옵션을 보낼 때 사용(req.query)
2. 비구조화 할당
- 객체({}): 정해진 Key(이름)를 기준으로 데이터를 추출
- 배열([]): 정해진 Index(순서)를 기준으로 데이터를 추출하며, 불필요한 값은
,로 건너뛸 수 있음
3. Map 자료구조와 형변환
Map은 Key의 데이터 타입을 엄격하게 구분- 주소창으로 들어오는 모든 값은 문자열이므로, 숫자로 저장된 데이터를 찾으려면 반드시
parseInt()로 형변환을 해줘야 함
