- Routing이란?
라우팅(Routing)은 URL과 페이지 컴포넌트를 연결하는 과정으로, 각 페이지의 경로를 정의하고 해당 경로에 어떤 컴포넌트를 제공할지 결정하는 것을 의미한다. - 다양한 라우팅 방식들
- 명시적 라우팅
개발자가 코드 내에서 직접 경로와 컴포넌트를 명시하는 방식이다.
예를 들어, React에서는 다음과 같이 구현한다.@Controller('users') export class Users Controller { @Get() findAll():string { return 'This is ~~'; } }
- 코드 기반 라우팅
서버 측에서 코드로 경로를 정의하는 방식이다.
Express.js에서는 다음과 같이 구현한다.app.get('/', (req, res) => { res.send('Homepage contents') })
- 데코레이터 기반 라우팅
데코레이터를 사용하여 클래스나 메서드에 경로를 부여하는 방식이다.
Nest.js에서는 다음과 같이 구현한다.<Route path=’/’ component={<Home/>} /> <Route path=’/about’ component={<About/>} />
- 파일 구조 기반 라우팅
파일 및 디렉토리 구조에 따라 자동으로 경로를 설정하는 방식이다.
Next.js에서는 pages 디렉토리 내의 파일 구조에 따라 라우팅이 이루어진다.
이 방식의 장점은 다음과 같다:- 직관성: 파일 구조만으로도 경로를 쉽게 파악할 수 있다.
- 자동 코드 스플리팅 지원: 각 페이지는 독립적으로 로드되어 초기 로딩 속도가 향상된다.
- 콜로케이션(Colocation): 관련된 코드를 한 곳에 모아두는 방식으로, 코드의 구조가 명확해지고 유지 보수가 용이하다.파일 기반 라우팅은 이러한 장점들로 인해 개발자가 프로젝트 구조를 빠르게 이해하고 효율적으로 작업할 수 있게 도와준다.
- 명시적 라우팅
'Web Development > Next.js' 카테고리의 다른 글
React에서 useEffect를 꼭 써야 할까? — 오히려 안 써도 되는 경우가 더 많다 (0) | 2025.03.23 |
---|---|
React를 쓰면서도 몰랐던 선언형 프로그래밍 이야기 (0) | 2025.03.23 |
[Next.js] 왜 우리는 Next.js를 사용하게 되었을까? (1) | 2024.12.22 |
[Next.js] 클라이언트 컴포넌트 (공식 문서 따라가기) (4) | 2024.12.14 |
[Next.js] 서버 컴포넌트(공식 문서 따라가기) (1) | 2024.12.14 |