웹 애플리케이션을 개발할 때, 클라이언트가 서버에 데이터를 전달하는 방법은 매우 중요합니다. 특히 Express.js와 같은 Node.js 기반의 웹 프레임워크를 사용할 때, URL 파라미터와 쿼리 파라미터를 활용하는 방법을 이해하는 것은 필수적입니다. 이번 강좌에서는 URL 파라미터와 쿼리 파라미터의 개념과 함께 사용 방법을 자세히 알아보겠습니다.
1. URL 파라미터란?
URL 파라미터는 URL 경로의 일부로, 보통 리소스를 식별하는 데 사용됩니다. 예를 들어, 사용자의 프로필 정보를 조회하기 위한 URL이 /user/123라면, 123은 사용자 ID를 나타내는 URL 파라미터입니다.
1.1 URL 파라미터의 사용 방법
Express에서 URL 파라미터를 정의하는 방법은 매우 간단합니다. HTTP 요청 라우트에서 : 기호를 사용하여 URL 파라미터를 설정할 수 있습니다. 아래는 Express를 사용하여 URL 파라미터를 처리하는 간단한 예제입니다.
const express = require('express');
const app = express();
const port = 3000;
app.get('/user/:id', (req, res) => {
const userId = req.params.id; // URL 파라미터 접근
res.send(`User ID: ${userId}`);
});
app.listen(port, () => {
console.log(`Server is running on http://localhost:${port}`);
});위 예제에서 /user/:id 라우트는 사용자의 ID를 URL 경로에서 가져옵니다. 클라이언트가 /user/123에 GET 요청을 보내면, req.params.id를 통해 123이라는 값을 얻을 수 있습니다.
2. 쿼리 파라미터란?
쿼리 파라미터는 URL의 쿼리 스트링 부분에 포함된 파라미터입니다. 일반적으로 URL의 끝에 물음표(?) 다음에 “key=value” 형식으로 추가됩니다. 예를 들어, /search?keyword=express&page=1에서 keyword와 page는 쿼리 파라미터입니다.
2.1 쿼리 파라미터의 사용 방법
Express에서는 쿼리 파라미터를 req.query 객체를 통해 쉽게 접근할 수 있습니다. 다음은 쿼리 파라미터를 처리하는 예제입니다.
app.get('/search', (req, res) => {
const keyword = req.query.keyword; // 쿼리 파라미터 접근
const page = req.query.page || 1; // 기본값 설정
res.send(`Searching for: ${keyword}, Page: ${page}`);
});위 예제를 통해 /search?keyword=express&page=2에 GET 요청을 하면, req.query.keyword와 req.query.page를 사용하여 각각 express와 2의 값을 얻을 수 있습니다.
3. URL 파라미터와 쿼리 파라미터의 차이점
- URL 파라미터: URL 경로의 일부로, 주로 리소스를 식별하는 데 사용됩니다.
- 쿼리 파라미터: URL의 쿼리 스트링 부분에 포함되며, 추가적인 데이터나 옵션을 전달하는 데 사용됩니다.
4. 복합적인 사용 사례
실제 웹 애플리케이션에서는 URL 파라미터와 쿼리 파라미터를 함께 사용하는 경우가 많습니다. 예를 들어, 특정 사용자 ID에 대한 게시물 목록을 조회하는 API를 만들 수 있습니다.
app.get('/user/:id/posts', (req, res) => {
const userId = req.params.id;
const page = req.query.page || 1; // 기본값 설정
res.send(`Getting posts for user: ${userId}, Page: ${page}`);
});위 코드는 특정 사용자(userId)의 게시물 목록을 쿼리 파라미터를 통해 페이지 넘버(page)와 함께 가져오는 예시입니다.
5. 실습 프로젝트
이제까지의 내용을 종합하여, 작은 실습 프로젝트를 만들어 보겠습니다. 이 프로젝트에서는 URL 파라미터와 쿼리 파라미터를 모두 사용하는 Express 애플리케이션을 구성해보겠습니다.
const express = require('express');
const app = express();
const port = 3000;
// 사용자 데이터
const users = {
1: { name: 'Alice' },
2: { name: 'Bob' },
};
app.get('/user/:id', (req, res) => {
const userId = req.params.id;
const user = users[userId];
if (user) {
res.send(`User found: ${user.name}`);
} else {
res.status(404).send('User not found');
}
});
app.get('/user/:id/posts', (req, res) => {
const userId = req.params.id;
const page = req.query.page || 1;
res.send(`Getting posts for user ${userId} on page ${page}`);
});
app.listen(port, () => {
console.log(`Server running at http://localhost:${port}`);
});5.1 서버 실행 및 테스트
서버를 실행한 후, 브라우저 또는 Postman과 같은 API 클라이언트를 사용하여 다음과 같이 테스트할 수 있습니다.
GET /user/1-> 사용자 정보 조회GET /user/3-> 사용자 없음GET /user/1/posts?page=2-> 사용자 1의 게시물 조회 (2페이지)
마무리
이번 강좌에서는 Express.js를 사용하여 URL 파라미터와 쿼리 파라미터를 다루는 방법에 대해 자세히 살펴보았습니다. 이러한 개념은 웹 애플리케이션에서 데이터를 효과적으로 관리하고 사용자 요청에 응답하는 데 매우 유용합니다. 더 깊이 있는 이해를 위해 다양한 예제를 시도해보고, 자신만의 애플리케이션을 구축해보기를 권장합니다.
감사합니다!