정적 라우팅과 동적 라우팅
- 정적 라우팅: 경로가 고정되어 있어서 딱 정해진 URL만 처리합니다.
예 ) /api/one/two/three - 동적 라우팅: 경로 일부가 변수로 동작합니다.
예 ) /api/one/two/three/${id}
→ /api/one/two/three/84
→ /api/one/two/three/123
🌟 동적 라우팅을 처리하기 위해 파일 및 폴더 이름에 브라켓([])을 사용할 수 있습니다.
파일 네이밍에서 브라켓([])의 역할
- 브라켓을 사용한 파일명은 동적 라우팅을 처리하는 핵심
- 예 ) three/[id].ts
- 여기서 [id]는 동적 값, 즉 변수로 인식
- 변수 이름이 반드시 id일 필요는 없습니다.
- [userId], [teamId]처럼 파일명에 원하는 변수명을 사용할 수 있습니다.
예시 비교
파일 구조 사용되는 API 경로
| 파일 구조 | 사용되는 API 경로 |
| api/one/two/three | /api/one/two/three?id=${id} |
| api/one/two/three/[id] | /api/one/two/three/${id} |
쿼리 파라미터
- 쿼리 파라미터는 url 경로 끝에 ?로 시작해서 ? 뒤에 key=value 형식으로 데이터를 전달합니다.
- 예 ) /api/one/two/three?id=${id}
id=123은 파라미터로 전달되는 것이고, 라우팅 경로는 그대로 고정됩니다.
즉 라우팅 자체가 변하는 것이 아니라 추가적인 데이터를 넘기는 것입니다.
동적 라우팅과의 차이
- 동적 라우팅은 경로의 일부가 변수로 변경되는 형태입니다.
- 예 ) /api/one/two/three/${id}
여기서 id는 경로의 일부이므로, 경로 자체가 three/123, three/456 등으로 변하게 됩니다.
경로 자체가 동적으로 변하므로( 예. id=123, user_id=65 ) 경로 자체가 데이터를 포함하는 것입니다.
정적 라우팅 + 쿼리 파라미터 vs 동적 라우팅
정적 라우팅 + 쿼리 파라미터: 경로는 고정된 상태로, 데이터는 URL 끝의 파라미터로 전달합니다.
- /api/one/two/three?id=123
- 경로는 고정되어 있고, 파라미터로 추가 데이터를 넘겨서 서버가 처리.
동적 라우팅: 경로 자체가 동적으로 변해서, 경로 일부가 변수로 변경.
- /api/one/two/three/123
- 경로가 동적으로 변하면서, 경로에 직접 데이터를 포함.
정적 라우팅과 쿼리 파라미터는 서로 다른 개념입니다.
정적 라우팅에 쿼리 파라미터를 사용해도 그 자체는 동적 라우팅과 동일한게 아닙니다.
쿼리 파라미터는 데이터를 URL의 끝에 붙여 전달하는 방법이고, 동적 라우팅은 경로 자체가 변수를 포함해 유연하게 동작하는 방식입니다.
따라서 쿼리 파라미터는 정적 라우팅의 확장 개념일 수 있지만, 동적 라우팅과는 구분됨을 기억하시면 됩니다!
'💻 프론트엔드 : Frontend > Javascript | Typescript' 카테고리의 다른 글
| 헷갈리는 Lodash import 구문 : import * as _는 되고 import _는 안 되는 이유 (0) | 2025.06.24 |
|---|---|
| validation library 비교 (zod, class-validator, joi) (2) | 2024.10.11 |
| readExcelFile로 병합된 셀을 잘 받아오는 법 (0) | 2024.10.04 |
| zod : 원하는 message가 아닌 ‘expected ~ but got ~’ 라 alert가 뜨는 현상 (3) | 2024.10.04 |