express를 사용하여 웹 애플리케이션을 개발할 때, 클라이언트로부터 전달받은 데이터를 URL로 부터 쉽게 추출할 수 있다. 이때 주로 사용되는 방법인 req.params와 req.query에 대해 알아보자

req.params

req.params는 라우트 경로에 콜론(:)을 사용하여 지정한 동적 매개변수를 의미합니다. 예를 들어, 아래와 같이 경로를 정의하면 URL의 특정 위치에 전달된 값을 매개변수로 받을 수 있습니다. 이때 전달되는 매개변수는 기본적으로 문자열이므로 이점을 주의해야한다.

해당 코드에서는 제품이 여러개가 된다면/products/1, /products/2,... 하는 식으로 하드 코딩을 하지않고 /products/:n로 표현할 수 있다.

🤨 parseINt 랑 Number랑 map(number)랑은 무슨차이가 있지?
코드에서 보면 제품의 id값에 해당하는 것을 넘겨주는 것을 확인할 수 있다. 넘겨받은 id값이 문자열이기에 parseInt()함수를 사용하여 숫자로 변경하는 걸 볼 수 있다.
내가 아는 방법중 문자열로 된 숫자를 Number를 통해서도 바꿀 수 있기에 어떤 차이가 있는지 궁금해져서 찾아봤다.

• parseInt(): 문자열의 앞부분에서 숫자만 추출하여 정수로 변환 (진법 설정 가능).
  예시: "10.5" → 10, "123abc" → 123, "abc1234" → NaN
• Number(): 문자열 전체를 평가하여 숫자(정수 혹은 실수)로 변환.
  예시: "10.5" → 10.5, "123abc" → NaN

req.query

req.query는 URL의 쿼리 스트링에 포함된 매개변수를 추출할 때 사용됩니다. 쿼리 스트링은 URL에서 ? 뒤에 나타나는 key=value 쌍으로 이루어집니다. 쿼리는 params와 달리 경로에 따로 추가하는게 없기에 포함될 수도있고 아닐수도있다. 기본적으로 key=value 쌍으로 되어있기에 req.query 내부로 파싱되는 key값에 영향을 받는다.

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

앞에서 말한 key=value쌍으로 되어있는 객체에서 내부 값을 추출할 때, 이름이 일치하는 값만을 가져올 수 있는 것을 말한다.

객체뿐만 아니라 배열도 비구조화의 특성을 가지고 있다. 배열은 인덱스 기반으로 값이 정해져 있으므로, 배열 비구조화는 순서에 따라 값을 추출할 수 있다.

✚ 네이밍 케이스
폴더와 파일, 그리고 클래스등등에 이름을 짓는 규칙같은게 있다. 팀 내에서 규칙으로 정하기도 하니 알아만두자

• Kebab-case:
  보통 폴더명, 파일명, 패키지 이름으로 쓰인다.
  ex) demo-api, object-api-demo.js
• Snake_case:
  데이터베이스 테이블명, 일부 파일명, 또는 언어/프로젝트별 변수명으로 쓰이며, python에서 잘쓰인다.
  ex) user_profile, order_history
• camelCase:
  변수명, 함수명
  ex) channelTitle, calculateTotalPrice()
• PascalCase:
  클래스명, 컴포넌트명
  ex) UserProfile, MyComponent

Map

앞에서 설명한 JSON 형식과 비슷한 개념으로 key, value로 이루어져 데이터를 저장하는 자료구조이다.
데이터베이스의 테이블과 비슷한 형태로, 각 key에 대응하는 value를 빠르게 조회할 수 있는 장점이 있다.
list와 더불어 신입 개발자가 반드시 알아야 할 기본 자료구조중 하나라고 한다.

🤨 왜 굳이 Map이랑 list일까?
map과 list는 다른 자료구조들의 기초가 되기 때문이다.

• list: 데이터를 순차적으로 저장하고 인덱스로 접근하는 기본 구조로 스택, 큐, 힙 등 선형 자료구조의 기반이 된다. 그렇기에 List를 이해하면 다른 선형 자료구조의 동작 원리와 성능 특성을 파악하는데 큰 도움이 되기 때문이다.
  • 스택: list에 LIFO(후입선출) 정책을 통해 구현
  • 큐: list에 FIFO(선입선출) 정책을 통해 구현
  • 힙(완전 이진 트리): list의 인덱스 번호를 활용하여 구현된다.
  • 그외에도 list의 기본개념인 데이터 순서와 인덱스는 ArrayList, LinkedList등을 구현하는데도 쓰인다.
• Map: 키-값 쌍을 저장해 빠른 검색과 연관관계 관리하는 것으로 해시테이블, 트리맵의 기반이 된다.
  • 해시테이블: 키를 해싱하여 데이터(값)을 저장함
  • 트리맵: 키를 정렬된 상태로 관리하여 범위 검색 등 정렬된 데이터 처리에 유리한 자료구조이다.
  • 그외에 캐시, 세션 관리, 설정 값 저장등의 필수 기능에 활용된다.

map 인스턴스 메서드

map에는 여러 인스턴스 메서드가 존재한다. 다음 map 객체를 만들었을 때, 각각 명령어가 어떤 역할을 하는지 알아보자

• set: Map에서 명시진 키와 값을 추가하거나 갱신합니다.

const map1 = new Map();

map1.set("bar", "baz");
map1.set(1, "foo");

• clear: Map의 모든 요소를 제거한다.

console.log(map1.size);
// Expected output: 2

map1.clear();

console.log(map1.size);
// Expected output: 0

• delete: Map에서 특정 요소를 제거한다.

console.log(map1.delete("bar"));
// Expected result: true
// True indicates successful removal

console.log(map1.has("bar"));
// Expected result: false

• entreis: Map의 각 요소의 [key,value]쌍을 삽입 순서대로 가지는 새로운 맵 반복자 객체

const iterator1 = map1.entries();

console.log(iterator1.next().value);
// Expected output: Array ["0", "foo"]

console.log(iterator1.next().value);
// Expected output: Array [1, "bar"]

• forEach: Map 객체의 키/값 쌍마다 각각 제공된 함수를 삽입되었던 순서대로 실행

function logMapElements(value, key, map) {
  console.log(`m[${key}] = ${value}`);
}

new Map([
  ["foo", 3],
  ["bar", {}],
  ["baz", undefined],
]).forEach(logMapElements);

// Expected output: "m[foo] = 3"
// Expected output: "m[bar] = [object Object]"
// Expected output: "m[baz] = undefined"

• get: Map 객체에서 key에 대한 value를 반환합니다.

console.log(map1.get("bar"));
// Expected output: "foo"

console.log(map1.get("baz"));
// Expected output: undefined

• has: 주어진 키에 해당하는 요소의 존재 여부를 가리키는 불리언 값을 반환

console.log(map1.has("bar"));
// Expected output: true

console.log(map1.has("baz"));
// Expected output: false

• keys: 맵에서 각 요소의 키를 삽입 순서대로 가지는 새로운 맵 반복자 객체를 반환.

const iterator1 = map1.keys();

console.log(iterator1.next().value);
// Expected output: "0"

console.log(iterator1.next().value);
// Expected output: 1

• values: Map에서 명시진 키와 값을 추가하거나 갱신합니다.

const iterator1 = map1.values();

console.log(iterator1.next().value);
// Expected output: "foo"

console.log(iterator1.next().value);
// Expected output: "bar"

express + map

Map을 사용하여 node.js안에서 데이터 저장소 역할을 하게 할 수 있다.

• .set(key, value): Map에 키-값 쌍을 저장하는 명령어
• .get(key): 키에 대응하는 값을 출력하는 명령어
• .has(key): 키값이 Map에 있는지 확인하는 명령어

String만 담던 Map에 객채 담기

위에 처럼 키에 대응하는 하나의 값 말고 객체를 담아서 보낼 수 있다.

객체를 만들어 문자열 대신 넣기만 하면 바로 만들 수 있다.

또한 이미 객체로 만들었기에 기존의

res.json({
  db.get(id)
});

이 코드에서 중괄호를 빼고 위의 그림처럼 만들 수 있다.

🤨 중괄호를 빼고 넣는 이유가 뭘까?
gpt한테 물어보니 딱히 어떻게 보내든 상관없다고는 하는데 보통 API 응답을 일관된 구조로 유지하기 위해 객체로 감싸는 경우가 많다고 한다.
이때 중괄호 없이 그냥 보내는게 아니라 다음과 같이 정정해서 보내야 함은 잊어서는 안된다. json은 기본적으로 key: value형태를 지원하기에 그렇다.

res.json(
  item: db.get(id)
);

이렇게 입력하면 다음과 같이 위의 그림과틑 형태가 달라지는 것을 볼 수 있다.

만약 db에서 받은값 외에 다른값을 추가해서 프론트에게 보내야 한다면 다음과 같이 추가할 수 있다.

이는 자스에서만 가능한 것으로 객체에 빠르게 값을 추가할 수 있다.
왜냐하면 json의 모든 값은 문자열로 작성되기에 가능한 것이다.