1. params
1.1. parseInt
자바스크립트 문자열을 정수로 변환하는 함수로, 문자열의 앞부분부터 숫자를 읽어서 정수로 변환한다. 만약 숫자가 아닌 문자가 나타나면 그 지점에서 변환을 중지한다. 기본적으로 10진수로 변환하지만, 다른 진수를 지정할 수도 있다.
parseInt(string, radix); // 문자열, 진수(선택사항)
기본적으로 req.params 로 전달되는 URL 경로 매개변수들은 모두 문자열로 처리된다.
URL 경로는 문자열로 처리된다고 했으니 이렇게 코드를 짰을 때 콘솔문은 출력이 안될 것이라고 생각할 수 있다. 하지만, URL 경로로 products/10 을 넣으면 콘솔문은 출력이 된다.
-> 자바스크립트는 비교 연산시 자동으로 타입 변환이 이루어지기 때문이다.
app.get('/products/:n', function(req, res) {
if (req.params.n > 5) {
console.log('5보다 큼'); // 출력
}
res.json({
num: req.params.n
})
});
하지만, 의도치 않은 결과를 방지하려면 명시적으로 문자열을 숫자로 변환하는 것이 좋다.
Number 또는 ParseInt 를 써서 의도적으로 형 변환을 할 수 있다. 이렇게 형 변환을 하면, 화면에서도 문자열이 아니라 숫자로 표시되는 것을 확인할 수 있다.
app.get('/products/:n', function(req, res) {
let number = parseInt(req.params.n);
if (number > 5) {
console.log('5보다 큼');
}
res.json({
num: number
})
});
1.2. params 변수에 넣어 사용하기
받아온 URL 경로 매개변수를 변수에 저장하여 사용하면 가독성이 높아지고 재사용성이 좋아진다.
app.get('products/:id', function(req, res) {
const params = req.params; // 변수에 넣어 사용
res.json({
product: params.id
})
})
2. query
URL 에서 ? 뒤에 key=value 형태로 붙으며, & 으로 구분할 수 있다.
https://URL경로/params?key=value&key=valueapp.get('/watch', function(req, res) {
const q = req.query;
console.log(q);
res.json({
video: q.v,
timeline: q.t
});
});
// URL: https://www.youtube.com/watch?v=SjclCCS-5Og&t=291s
3. 자바스크립트 객체, 배열 비구조화
객체/배열의 비구조화는 Destructuring 문법이라고도 불리며, 객체/배열에 포함된 객체/배열의 속성을 손쉽게 추출하는 자바스크립트 문법이다.
3.1. 객체의 비구조화
// JSON 객체의 비구조화
app.get('/watch', function(req, res) {
const q = req.query;
const {v, t} = req.query;
console.log(v);
console.log(t);
console.log(q);
res.json({
video: v,
timeline: t
});
});
3.1. 배열의 비구조화
배열의 요소는 변수에 순서대로 들어간다. 중간에 요소를 건너뛰고 추출하고 싶다면 필요없는 요소는 변수 이름을 써주지 않고 콤마로만 구분하고 넘어가면 된다.
// 배열 비구조화
const array = [1, 2, 3, 4, 5];
const [num1, num2] = array; // num1 = 1, num2 = 2
const [, num2, num3, , num5] = array; // num2 = 2, num3 = 3, num5 = 5
4. URL 경로에 따라 다른 객체 주기
// 강의 코드
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('/watch/: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: '모르는 유튜버임'
});
}
})
강의 코드는 이해하기 쉽게 if-else 문으로 처리를 했지만, 조금 아쉬워서 객체를 사용한 코드로 고쳐보았다.
const express = require('express'); // 외부 모듈 express 가져옴
const app = express(); // 서버 담음
// 서버 셋팅: 포트 넘버를 1234 로 셋팅
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('/watch/:nickname', function(req, res) {
// nickname : 객체이름
const youtubers = {
'@15ya.fullmoon' : youtuber1,
'@ChimChakMan_Official' : youtuber2,
'@TEO_universe' : youtuber3
};
const youtuber = youtubers[req.params.nickname];
if (youtuber) { // 찾는 값이 있다면 객체 담아줌
res.json(youtuber);
} else {
res.json({ // 찾는 값이 없다면 예외처리
message: '모르는 유투버임'
});
}
})
// https://www.youtube.com/watch?v=SjclCCS-5Og
// https://www.youtube.com/watch?v=SjclCCS-5Og&t=291s
query 별로 객체에 넣어 놓은 다른 정보들이 화면에 출력됨을 확인할 수 있다.
5. 자바스크립트 Map
- map 은 key : value 쌍으로 이루어진 데이터 저장 형태
- key 를 가지고 value 를 찾을 수 있다면 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));
5.1. express + map
URL 로 받은 id 값에 따라 map 객체에 저장된 value 들을 화면에 뿌려주려고 한다.
이 부분을 조심해야 하는데, URL 로 들어온 경로 파라미터 값은 기본적으로 문자열이므로 parseInt 를 통해 숫자로 타입 변환을 해줘야한다. map 객체는 숫자 1과 문자열 "1" 을 구분하기 때문이다. map 객체에 key 값이 숫자로 저장되어 있으므로 map 객체의 값을 꺼내려면 숫자로 타입 변환을 해준 뒤 꺼내야 올바른 값을 꺼낼 수 있다.
만약 숫자로 타입 변환을 하지 않고 map 객체에서 값을 꺼내려 하면 map 객체는 값을 찾을 수 없기 때문에 undefined 를 반환하고, 화면에는 아무것도 나타나지 않는다.
let {id} = req.params;
id = parseInt(id);
// ...
// 키로 벨류를 찾을 수 있는 한 쌍을 저장
let db = new Map();
// 숫자 1과 문자열 1은 다른 값!
db.set(1, "NoteBook");
db.set("1", "문자열");
db.set(2, "Cup");
db.set(3, "Chair");
전체 코드
app.get('/:id', function(req, res) {
let {id} = req.params;
id = parseInt(id);
if (db.get(id)) {
res.json({
id: id,
productName: db.get(id)
});
} else { // 예외처리
res.json({
message: "없는 상품임"
});
}
})
let db = new Map();
db.set(1, "NoteBook"); // 키로 벨류를 찾을 수 있는 한 쌍을 저장
db.set(2, "Cup");
db.set(3, "Chair");
아래 코드는 먼저 예외 처리를 하는 if 문을 넣고 if 문에 걸리지 않는다면 밑에 코드를 실행하도록 코드를 짠 것이다. 코딩을 하면서 이런 식으로 코드를 짠 것을 많이 보았을 것이다. 하지만, 이렇게 코드 짜는 것이 좋지 않다.
정상적으로 실행되는 것 같지만 없는 id 값을 넣었을 때 콘솔창에는 아래와 같은 에러가 난다. 이 에러는 이미 클라이언트에게 보냈는데 (if문에서) 또 보내라고 했기 때문에 나는 에러이기 때문에 if-else 문을 원래의 형태로 사용하는 것을 추천한다-!
-> Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client
const express = require('express'); // 외부 모듈 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: "없는 상품임"
})
}
res.json({
id: id,
productName: db.get(id)
});
})
let db = new Map();
db.set(1, "NoteBook"); // 키로 벨류를 찾을 수 있는 한 쌍을 저장
db.set(2, "Cup");
db.set(3, "Chair");
추가 - 네이밍 케이스
- 폴더/파일 -> 케밥 또는 스네이크 둘 중 아무거나 사용해도 됨 but 통일 중요
[kebab-case]
- 알바벳 소문자
- 두 개 이상의 단어를 합쳐서 쓸 때, 단어 사이에 하이픈 '-'
ex) demo-api, object-api-demo.js
[snake_case]
- 두 개 이상의 단어를 합쳐서 쓸 때, 단어 사이에 언더바 '_'
ex) demo_api, object_api_demo.js
- 변수/함수 [camelCase]
- 두 개 이상의 단어를 합쳐서 쓸 때, 두번째 단어의 첫글자를 대문자로
ex) channerTitle, videoNum
- 클래스 [PascalCase]
- 두 개 이상의 단어를 합쳐서 쓸 때, 맨 앞글자를 대문자로
ex) MyClass
'TIL with Programmers' 카테고리의 다른 글
| [TIL] 9/4 GET, POST, API, postman (2) | 2024.09.04 |
|---|---|
| [TIL] 9/3 express, Map, express generator, 자바스크립트 함수 (0) | 2024.09.03 |
| [회고록] 3주차 회고록 (0) | 2024.08.30 |
| [TIL] Node.js 생태계, npm(node pakage manager) (1) | 2024.08.30 |
| [TIL] 8/30 express 사용하기, json 객체, params (0) | 2024.08.29 |
