express 기초(2): URL 매개변수

 

자바스크립트 형 변환 (type conversion)

자바스크립트에서, 함수와 연산자에 전달되는 값들은 대부분 적절한 자료형으로 자동 변환된다. 

let a = "5";
let b = "10";

// 자바스크립트는 문자열을 숫자로 변환한 후 비교함
console.log(a > b); // false ("5"와 "10"을 숫자로 변환하여 5 > 10을 비교)

alert( "6" / "2" ); // 3, 문자열이 숫자형으로 자동변환된 후 연산이 수행

let result = 5 + "10"; // "510"이 됨

https://ko.javascript.info/type-conversions

형 변환

 

 

 

 

parseInt

자동으로 형 변환을 해줄 때가 많지만, 코드의 명확성과 예측 가능한 동작을 위해 정수를 표현하기 위해서는 parseInt를 통해 명시적으로 다루는 것이 좋다. 

let num = parseInt("10"); // 10
let num2 = parseInt("10px"); // 10
let num3 = parseInt("abc10"); // NaN
let binary = parseInt("1010", 2); // 2진수 "1010"을 10진수로 변환 -> 결과는 10
let hexadecimal = parseInt("1F", 16); // 16진수 "1F"를 10진수로 변환 -> 결과는 31

 

 

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

// 자바스크립트 배열 비구조화
const array = [1, 2, 3, 4, 5];
const [, a, , b] = array;
console.log(a, b); // 2 4

배열 비구조화는 순서에 따라 값을 할당한다.

const keyboard = {
    brand: "Happy Hacking",
    model: "Professional 2",
    layout: "60%",
    switchType: "Topre",
};

// 객체 비구조화
const { brand, model, layout, switchType } = keyboard;

객체 비구조화에서 사용되는 변수 이름은 객체의 속성 이름(키)와 정확히 일치해야 한다.

 

URL 경로 매개변수 (req.params)

app.get('/keyboard/:brand', function (req, res) {
    const queryBrand = req.params.brand; // URL 경로 매개변수로 브랜드를 받음
    // ... 
});

경로 매개변수(req.params): 데이터가 URL의 일부로 들어간다.

경로 자체가 데이터를 포함하기 때문에 구조적으로 더 명확한 경우가 많다. 

 

URL 쿼리 매개변수 (req.query)

app.get('/keyboard', function (req, res) {
    const queryBrand = req.query.brand; // URL 쿼리로 브랜드를 받음
	...
});

/keyboard/brand=HappyHacking

app.get('/search', function (req, res) {
    const query = req.query.q;
    const page = req.query.page || 1; // 기본값 1
    const limit = req.query.limit || 10; // 기본값 10

    res.json({
        searchQuery: query,
        page: page,
        limit: limit
    });
});

데이터가 URL 경로 뒤에 ?로 시작하는 쿼리 스트링의 형태로 전달된다.

복수의 필터나 검색 조건 등을 전달할 때 유용하고, 경로가 정적이면서도 추가적인 정보를 덧붙일 수 있다.

 

req.query는 Expree.js에서 URL의 쿼리 스트링 파라미터를 파싱하여 객체 형태로 제공한다.

http://localhost:3000/search?q=keyboard&page=2

이 경우 아래와 같은 객체로 표현된다. (쿼리 스트링을 파싱한 결과인 자바스크립트 객체)

{
    q: "keyboard",
    page: "2"
}

 

 

자바스크립트 네이밍 케이스

• [kebab-case] cf. snake_case // 둘중 하나로. 통일
  • 폴더, 파일
• [camelCase]
  • 변수, 함수
• [PascalCase]
  • 클래스

 

자바스크립트 Map

자바스크립트 Map 객체는 데이터를 키-값 쌍으로 저장할 수 있는 도구이다. 

특징

• 모든 자료형(숫자, 문자열, 객체 등)을 키로 사용 가능 (일반적인 객체 {}는 
• 삽입된 순서 유지: 반복문 (for...of 또는 forEach)를 통해 순회 시 삽입된 순서대로 반환
• 키 비교의 엄격함 : 숫자 1과 문자열 1을 서로 다른 키로 구분함. 

const myMap = new Map();

// 키-값 쌍 추가
myMap.set(1, "Number One");      // 숫자 키
myMap.set("1", "String One");    // 문자열 키
myMap.set(true, "Boolean True"); // 불리언 키
myMap.set({ name: "Alice" }, "Object Value"); // 객체 키

// 키-값 쌍 조회
console.log(myMap.get(1)); // "Number One"
console.log(myMap.get("1")); // "String One"
console.log(myMap.get(true)); // "Boolean True"

// Map 크기 확인
console.log(myMap.size); // 4

// Map 순회
myMap.forEach((value, key) => {
    console.log(`Key: ${key}, Value: ${value}`);
});