Routing
기본 정보
개요
라우팅(Routing)은 사용자가 요청한 URL을 적절한 페이지나 기능으로 연결하는 과정을 의미한다.
예를 들어 사용자가 /login으로 접속하면 로그인 페이지를 보여주고, /board/1로 접속하면 게시글 번호 1을 출력하도록 연결하는 것이 라우팅이다.
현대 웹 개발에서는 서버뿐만 아니라 프론트엔드 프레임워크에서도 라우팅 기능을 제공한다.
라우팅 구조
사용자
↓
URL 요청
↓
Router
↓
Controller 또는 Component
↓
응답(Response)동작 과정
브라우저
↓
URL 입력
↓
웹 서버
↓
Router
↓
해당 기능 실행
↓
결과 반환URL 예시
/
/login
/register
/board
/board/15
/profile/cloud각 URL은 서로 다른 기능으로 연결된다.
서버 라우팅
서버가 요청을 처리하는 방식이다.
브라우저
↓
웹 서버
↓
PHP
↓
HTML 생성
↓
브라우저대표 기술
PHP 라우팅 예시
<?php
$uri = $_SERVER['REQUEST_URI'];
switch ($uri) {
case "/":
include "home.php";
break;
case "/login":
include "login.php";
break;
case "/board":
include "board.php";
break;
default:
http_response_code(404);
include "404.php";
}MVC 라우팅
URL
↓
Router
↓
Controller
↓
Model
↓
View
↓
사용자MVC 패턴에서는 Router가 Controller를 선택하는 역할을 한다.
프론트엔드 라우팅
SPA에서는 JavaScript가 페이지를 변경한다.
Browser
↓
JavaScript Router
↓
Component 변경
↓
화면 변경페이지를 새로고침하지 않고 화면만 변경한다.
React Router 예시
import { BrowserRouter, Routes, Route } from "react-router-dom";
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/login" element={<Login />} />
</Routes>
</BrowserRouter>
);
}Next.js 파일 기반 라우팅
app/
├── page.tsx
├── login/
│ └── page.tsx
├── board/
│ └── page.tsx폴더 구조만으로 URL이 생성된다.
| 폴더 | URL |
|---|---|
| app/page.tsx | / |
| app/login/page.tsx | /login |
| app/board/page.tsx | /board |
동적 라우팅
URL의 일부를 변수처럼 사용할 수 있다.
/board/15
↓
15Next.js
app/
└── board/
└── [id]/
└── page.tsxURL
/board/15id = 15
PHP 예시
$id = $_GET["id"];
echo "게시글 번호 : " . $id;URL
/board.php?id=15REST API 라우팅
라우팅은 API에서도 사용된다.
| Method | URL | 설명 |
|---|---|---|
| GET | /users | 회원 조회 |
| GET | /users/1 | 회원 상세 |
| POST | /users | 회원 생성 |
| PUT | /users/1 | 회원 수정 |
| DELETE | /users/1 | 회원 삭제 |
URL 파라미터
/products/100100은 상품 ID이다.
Query String
/products?page=2&sort=price| 이름 | 값 |
|---|---|
| page | 2 |
| sort | price |
정적 라우팅
미리 정의된 URL
/login
/about
/contact동적 라우팅
실행 중 생성되는 URL
/post/10
/post/11
/post/12리다이렉트
다른 URL로 이동한다.
header("Location: /login");
exit;404 라우팅
존재하지 않는 URL 처리
사용자
↓
없는 URL
↓
404 페이지라우팅과 URL Rewrite
라우팅은 URL Rewrite와 함께 자주 사용된다.
예시
기존
board.php?id=10
↓
Rewrite
↓
/board/10SEO와 가독성을 향상시킬 수 있다.
장점
- URL 구조 관리 용이
- 유지보수 향상
- 사용자 경험 개선
- SEO 최적화
- 코드 구조 개선
단점
- 초기 설계가 중요
- 잘못된 라우팅은 유지보수가 어려움
- SPA에서는 History API 이해 필요
대표 활용 분야
- 웹사이트
- 관리자(Admin) 시스템
- 쇼핑몰
- 커뮤니티
- 블로그
- SaaS
- 모바일 API
- CMS
실무 메모
실무에서는 다음과 같은 방식이 권장된다.
- RESTful URL 설계
- URL은 의미 있게 작성
- 동적 라우팅 최소화
- 404 페이지 제공
- URL Rewrite 적용
- Query String 남용 금지
- 라우터와 Controller 역할 분리
- 권한 검사(Middleware) 적용
- HTTPS 사용
- SEO를 고려한 URL 설계
라우팅과 함께 사용하는 기술
대표 활용 사례
- 로그인 페이지
- 게시판
- 쇼핑몰 상품 상세
- 회원 프로필
- 관리자 페이지
- REST API 서버
- 블로그 글 조회
- 커뮤니티 게시글
관련 문서
출처
- MDN Web Docs
- React Router 공식 문서
- Next.js 공식 문서