[데브코스] Express URL 핸들링 (req.query(), 비구조화, Map)

이전 시간에 Express에서 req.params()를 활용해서 URL에서 정보를 추출하고, 이를 서버 응답에 활용하는 방법을 배웠다. 오늘은 URL에서 정보를 추출하는 새로운 방법을 배우고, 비구조화를 사용해서 코드를 간단하게 하는법과 Map 자료구조를 Express에 적용하는 방법을 배웠다.

---

💉URL에서 정보 추출하기

req.query

URL의 쿼리 스트링, ? 뒤에 붙는 key=value 쌍

app.get("/watch", function (req, res) {
  const q = req.query;
  console.log(q);
  res.json(q);
});

app.listen(3001);

• 클라이언트 요청이 http://localhost:3001/watch?v=abc123&t=42 형식으로 들어온다면,
• 콘솔을 확인했을 때 { v: 'abc123', t: '42' }가 출력된다.

특징

• 여러 값을 한 번에 전송할 수 있다(?a=1&b=2)
• URL에 노출되기 때문에 민감한 정보에는 적절하지 않다.
• GET 방식에서 주로 사용된다.

유튜브 링크를 뜯어보면,

https://www.youtube.com/watch?v=RFawCm5J26s&t=1s

이런 식으로 URL이 구성되어 있다. 따라서 유튜브 URL만으로도 영상에 대한 정보(쿼리와 시간)를 추출할 수 있다.
 

req.params

URL 경로 일부에서 값을 추출

app.get("/:nickname", (req, res) => {
  const { nickname } = req.params;
  res.send(nickname);
});

• 클라이언트 요청이 http://localhost:3001/@TEO_universe 형식으로 들어온다면,
• 콘솔에는 @TEO_universe가 출력된다.

특징

• RESTful URL에서 자원 식별자로 주로 사용된다.
• URL 경로 자체에 포함되어 있어서 깔끔하고, 클라이언트 입장에서 직관적이다.

 

req.query vs req.params

params는 자원을 식별하고, query는 어떻게 보여줄지를 결정한다!

	req.params	req.query
위치	URL 경로 /user/:id	URL 쿼리 ?id=123
사용 목적	식별자, 경로 기반 API	검색 조건, 정렬 등 옵션
노출 여부	경로에 그대로 노출	?key=value로 노출
예시	/product/3	/product?category=shoes

---

🔩비구조화 할당(Destructuring)

객체나 배열의 내부 값을 변수에 빠르게 추출 할 수 있게 한다.

객체 비구조화

const {v, t} = req.query

• req.query에 있는 v, t 값을 개별 변수로 꺼낸다.
• JS 내부적으로는 `{v:'abc', t:'123'}에서 key 이름을 기준으로 값을 매칭시킨다.

배열 비구조화

const [v, t] = ["abc", "123"];

• 배열 값이 순서대로 할당된다.
• v = 'abc', 't = '123'`

---

📹실습: 유튜버 정보 API

const express = require("express");
const app = express();

let youtuber1 = {
  channelName: "십오야",
  subscriber: "593만명",
  videoNum: "993개",
};

let youtuber2 = {
  channelName: "침착맨",
  subscriber: "227만명",
  videoNum: "6.6천개",
};

let youtuber3 = {
  channelName: "테오",
  subscriber: "54.8만명",
  videoNum: "726개",
};

app.get("/:nickname", (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: "찾을 수 없습니다." });
  }
  res.json({ channel: nickname });
});

app.listen(3000);

 

⭐ 예외 처리
정상적이지 않은 상황을 미리 예측하고, 상황을 대비한 코드(오류 메시지 등)

 
닉네임이 존재하지 않을 경우에도 서버가 정상적으로 응답하게 하기 위해 메시지를 전달했다.

예외처리

---

🗺️Map

key value 쌍으로 데이터를 저장하는 내장 객체

let db = new Map();

db.set(1, "NoteBook");
db.set(2, "Mouse ");
db.set(3, "Keyboard");

console.log(db);
console.log(db.get(1));

//결과: Map(3) { 1 => 'NoteBook', 2 => 'Mouse ', 3 => 'Keyboard' }
//        NoteBook

• set으로 데이터를 저장하고, get으로 각 데이터를 추출해 출력한다.

🤔Map 전체를 JSON으로 보내고 싶을 때는 변환이 필요하다.

res.json(Object.fromEntries(db));​

 

Map vs Object

	Map	Object
키 타입	어떤 타입이든 가능	문자열, 심볼만 가능
순서	삽입 순서 유지	순서 없음
성능	대량 데이터에 유리	소량 데이터

• 빈도 낮은 키 접근, 동적 데이터 추가/삭제 많은 경우에는 Map이 성능 상 유리하다.
• JSON 직렬화, 네트워크 송수신 등에서는 Object가 더 적합하다.

 

express에 Map 한스푼

const express = require("express");
const app = express();

app.get("/favicon.ico", (req, res) => res.status(204).end());

let db = new Map();

db.set(1, "NoteBook");
db.set(2, "Mouse ");
db.set(3, "Keyboard");

//localhost:3001/1 => NoteBook
//localhost:3001/2 => Mouse
//localhost:3001/3 => Keyboard
app.get("/:id", (req, res) => {
  let { id } = req.params;
  console.log(id);
  id = parseInt(id);

  console.log(db.get(id));

  if (db.get(id) == undefined) {
    res.json({ message: "상품이 없습니다" });
  } else {
    res.json({
      id: id,
      product: db.get(id),
    });
  }
});

app.listen(3002);

• 만약 입력한 id에 대응하는 값이 없다면, id만 출력한다.
• undefined인 경우에 대한 예외처리를 추가했다.

 

❌오류: params.id와 Map 키 타입 불일치

URL 경로로 받은 req.params.id는 문자열이다. 하지만 Map의 키는 숫자로 저장되어 있다. 따라서 db.get("2") -> undefined로 출력되는 것이다.

 

✅해결
parseInt(id)로 명시적 타입변환하여 사용

 

❌오류: favicon 요청으로 인한 undefined 출력

타입 불일치로 undefined 가 출력되는 문제는 타입을 변환하여 해결하였다. 하지만 콘솔을 보면, 여전히 undefined가 하나 더 출력되고 있다.

console.log(db.get(id));

  if (db.get(id) == undefined) {
    res.json({ message: "상품이 없습니다" });
  } else {
    res.json({
      id: id,
      product: db.get(id),
    });
  }

위 코드의 console.log(db.get(id))가 두 번 실행되어서 발생하는 문제이다. 더 정확히는, favicon 요청에 대해서도 /:id라우트가 실행되고 있어서 발생하는 문제였다.

 

✅해결

app.get("/favicon.ico", (req, res) => res.status(204).end());​

 

위 코드를  추가하여 파비콘 요청을 무시하도록 했다. 다시 출력해보면 id=2 에 대한 정보만 출력되는 것을 확인할 수 있다.