🎯 URL 파라미터와 쿼리를 활용하여 Map 객체로 동적 데이터 관리를 학습합니다.

📙 Today I Learned

Express 요청 처리 및 URL 파라미터 활용

URL 파라미터로 데이터 전달

express 예제 코드에서 req.params.n은 문자열로 출력됩니다.

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

app.get('/products/:n', function (req, res) {
  console.log(req.params);
  console.log(req.params.n);
  res.json({
    num: req.params.n,
  });
});

app.listen(3000);

---

🚨 EADDRINUSE 오류 발생 및 해결

다시 코드를 실행시켰더니 갑자기 오류가 발생했습니다. 😦

⚠️ 발생한 오류

코드를 실행하니 Error: listen EADDRINUSE: address already in use :::3000 라는 오류가 발생했습니다. 해당 포트 번호가 이미 사용 중이기 때문에 사용하지 못 한다는 의미였습니다.

💡 해결 과정 1 ( Windows 해결 방법 )

1️⃣ 포트넘버에 해당하는 네트워크 상태를 표현해달라고 요청하기

netstat -ano | findstr :<포트넘버>

2️⃣ 해당 포트에서 사용 중인 프로세스 강제 종료하기

taskkill /PID <프로세스ID> /F

| 프로토콜 | 로컬 주소 | 원격 주소 | 상태 | PID |

⇒ 이를 통해서 문제를 해결하였습니다.😊

---

💡 해결 과정 2
요청하는 포트 번호를 변경해서 요청하기
app.listen(1234);

---

req.params.n의 연산 적용

req.param.n을 연산식에 넣어 실행하면 숫자로 강제 변환된 것을 확인할 수 있습니다.

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

app.get('/products/:n', function (req, res) {
  let number = req.params.n - 10;
  console.log(number);

  res.json({
    num: number,
  });
});

app.listen(3000);

자동 형변환 (Type coercion)
데이터 타입에서 다른 데이터 타입으로 값을 자동으로 변환되는 현상을 말합니다.

const value1 = "5";
const value2 = 9;
let sum = value1 + value2;

console.log(sum); // 59 (string)

parseInt()로 숫자 변환

이를 방지하기 위하여 parseInt() 로 문자열을 숫자로 바꾸어 연산합니다.

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

app.get('/products/:n', function (req, res) {
  let number = parseInt(req.params.n) - 10;
  console.log(number);

  if (number > 5) {
    console.log('url로 전달받은 숫자가 10보다 크네요.');
  }

  res.json({
    num: number,
  });
});

app.listen(3000);

출력 결과 value값도 숫자로 표현된 것을 볼 수 있습니다.

실전 예제 : 유튜브 URL

• 유튜브 채널명( https://www.youtube.com/@15ya_egg )으로 주소 불러오기

app.get('/:nickname', function (req, res) {
  res.json({
	channel: req.params.nickname,
  });
});

• 영상 쿼리(https://www.youtube.com/watch?v=hO2HO3iAb9k&t=245s)로 파라미터 받아보기

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

• 객체의 비구조화를 활용하여 출력

app.get('/watch', function (req, res) {
  const { v, t } = req.query;
  res.json({
    video: v,
    timeline: t,
  });
});

객체와 배열의 구조 분해 할당(Destructuring assignment)

✅ 객체의 비구조화

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, num3, num5); // 2, 3, 5

Map 객체를 활용한 데이터 관리

Map 객체를 사용하여 특정 id에 해당하는 상품 정보를 반환하는 API를 구현합니다.

const express = require('express');
const app = express();
app.listen(3000);

app.get('/:id', function (req, res) {
  let { id } = req.params;
  id = parseInt(id);
  if (db.get(id) === undefined) {
    res.json({
      message: '없는 상품입니다.',
    });
  } else {
    res.json({ id: id, productName: db.get(id) });
  }
});

let db = new Map();
db.set(1, 'NoteBook');
db.set(2, 'Cup');
db.set(3, 'Chair'); 
console.log(db); // { 1 => 'NoteBook', 2 => 'Cup', 3=> 'Chair' }

• req.params.id를 가져올 때 id는 문자열이기 때문에 parseInt()를 사용하여 숫자로 변환합니다.
• db.get(id)를 이용해 해당 id의 상품명을 조회하고, JSON 응답을 보냅니다.
• Map 객체에 저장되지 않은 값이 요청되면, if문을 통해 '없는 상품입니다'가 출력됩니다.

Map 객체

• 키-값(key-value) 쌍을 저장하는 JavaScript 내장 객체입니다.
• Object와 다르게 키의 타입 제한이 없습니다.
• .set()으로 값을 추가합니다.
• .get()으로 값을 가져옵니다.
• .size로 크기를 가져옵니다.

---

추가 개념 : 네이밍 규칙

🍢kebab-case (또는 🐍snake_case)

• 대상 : 폴더, 파일
• 규칙
  • 알파벳 소문자로 작성합니다.
  • 두 개 이상의 단어를 합쳐 쓸 때 하이픈(-)을 사용합니다.
• 예시 : project-demo
  
  

🐪camelCase

• 대상 : 변수, 함수
• 규칙
  • 첫 단어는 소문자 이후 단어는 대문자로 작성합니다.
  • 공백 없이 이어서 작성합니다.
• 예시 : getName()
  
  

🧑PascalCase

• 대상 : 클래스
• 규칙
  • 첫 단어 대문자 이후 단어 또한 대문자로 작성합니다.
  • 공백 없이 이어서 작성합니다.
• 예시 : UserModel

---

✏️ 한 줄 회고

실제 유튜브 URL을 활용하면서 자동 형변환 등 많이 고려해야 할 점을 이해할 수 있었습니다.😀