2nd/10_Wiki/Topics/File-based_Routing.md

---
category: Unified
tags: [auto-wikified, technical-documentation]
title: File-based Routing
description: "**File-based Routing(파일 기반 라우팅)** 은 프로젝트의 폴더 및 파일 구조가 애플리케이션의 라우팅(내비게이션) 구조와 일대일로 매핑되는 라우팅 패러다임입니다 [1]."
last_updated: 2026-05-02
---

# File-based Routing

## 📌 Brief 시 Summary
**File-based Routing(파일 기반 라우팅)** 은 프로젝트의 폴더 및 파일 구조가 애플리케이션의 라우팅(내비게이션) 구조와 일대일로 매핑되는 라우팅 패러다임입니다 [1]. 명시적인 라우트 설정(Configuration) 코드를 작성할 필요 없이, 정해진 디렉토리에 파일을 생성하는 것만으로 자동으로 라우트가 생성되어 개발의 직관성과 생산성을 크게 향상시킵니다 [2, 3].

## 📖 Core Content
* **구조와 라우팅의 일치:** 파일 기반 라우팅은 **"폴더 구조 = 내비게이션 구조"** 라는 철학을 따릅니다 [1]. 특정 디렉토리(예: `app` 폴더) 내의 모든 파일이 자동으로 애플리케이션의 라우트로 변환되어 구조의 투명성이 보장됩니다 [2, 4]. 
* **모바일로의 패러다임 확장:** 웹 프레임워크인 Next.js에서 영감을 받아 모바일 생태계(React Native)에 도입되었습니다 [1]. 대표적인 구현체인 Expo Router는 이 개념을 이식하여 모바일 앱 개발에서도 명시적인 내비게이션 설정 코드를 없애고 개발 경험을 혁신하였습니다 [5].
* **자동화된 딥 링크(Deep Linking):** 파일 기반 라우팅 시스템의 가장 강력한 기능 중 하나는 별도의 설정 없이 모든 화면이 자동으로 링크 가능(Linkable)해진다는 점입니다 [2]. 덕분에 오류가 발생하기 쉬운 수동 딥 링크 매핑 작업과 보일러플레이트를 대폭 줄일 수 있습니다 [6].
* **자동 중첩 라우팅(Nested Navigation):** 폴더의 계층 구조를 기반으로 중첩 라우트를 자동으로 처리합니다 [7]. 기존 라우팅 라이브러리(예: React Navigation)에서는 중첩 네비게이터를 일일이 명시적으로 정의해야 했으나, 파일 기반 방식에서는 이를 자동화합니다 [3, 7].
* **웹 호환성 및 타입 추론:** 파일 시스템을 바탕으로 라우트 타입이 자동으로 추론되어 타입스크립트 지원이 용이합니다 [8, 9]. 또한 정적 사이트 생성(SSG) 및 API 라우트 등 웹 최우선(Web-first) 컨벤션을 지원하여 모바일과 웹 간의 코드 공유를 극대화하는 유니버설 앱 구축에 적합합니다 [5, 10].

## ⚖️ Trade-offs & Caveats
* **유연성의 한계 (Limited Flexibility):** URL 구조가 프로젝트의 물리적 파일 구조에 단단히 종속되므로, 파일 기반 시스템에 깔끔하게 매핑되지 않는 **복잡한 동적 라우팅 규칙**을 구현할 때는 한계가 존재합니다 [11]. 예를 들어, 사용자의 특정 상태에 따라 화면이 존재하거나 존재하지 않아야 하는 상태 머신 기반의 복잡한 내비게이션에서는 설정 기반 방식보다 유연성이 떨어집니다 [11].
* **기본 경로 설계의 제약:** 도구(예: Expo Router)가 `app` 폴더와 같은 특정 디폴트 경로를 가정하고 작동하기 때문에, 팀의 관례에 따라 코드를 `src` 폴더 등에 격리하려는 기존의 폴더 아키텍처와 충돌할 수 있으며 이를 억지로 변경할 경우 버그가 발생할 수 있습니다 [4].
* **학습 곡선과 마이그레이션 비용:** 기존의 설정/컴포넌트 기반 라우팅(예: React Navigation) 방식에 익숙한 개발자에게는 새로운 패러다임을 이해하고 적용하기 위한 학습 곡선이 따릅니다 [11]. 또한 기존 프로젝트에서 파일 기반 라우팅으로 마이그레이션하려면 애플리케이션의 폴더 구조를 전면적으로 재조정(Restructuring)해야 하는 큰 작업이 필요합니다 [12].
* **고급 사용 사례에서의 한계:** 아주 고도화되고 세밀한 제어가 필요한 내비게이션 시나리오에서는 결국 기존의 명시적인 라우팅 API(예: react-navigation API)로 회귀해야 할 수도 있습니다 [13].

## 🔗 Knowledge Connections

### Related Concepts

#### [관계 유형 A (아키텍처/기반 기술)]
- [[Configuration-based Routing]]
  - 연결 이유: 파일 기반 라우팅과 대척점에 있는 명시적 설정(또는 컴포넌트) 기반의 라우팅 패러다임입니다.
  - 이 개념을 통해 더 깊게 이해할 수 있는 부분: 라우트와 내비게이터를 개발자가 직접 정의함으로써 얻을 수 있는 '세밀한 제어(Fine-grained control)'와 '높은 유연성'이 무엇인지 비교 이해할 수 있으며, 왜 복잡한 프로젝트에서는 설정 기반 라우팅이 여전히 강력한지 파악할 수 있습니다 [1, 10, 14].
- [[Deep Linking]]
  - 연결 이유: 파일 기반 라우팅이 제공하는 가장 큰 혜택 중 하나가 딥 링크 설정의 자동화입니다.
  - 이 개념을 통해 더 깊게 이해할 수 있는 부분: 모바일 앱의 특정 화면으로 URL을 통해 직접 접근하는 메커니즘을 이해하고, 파일 구조가 곧 URL 경로가 됨으로써 매핑 관리가 얼마나 단순해지는지 이해할 수 있습니다 [1, 2, 6].

#### [관계 유형 B (구현/활용 도구)]
- [[Expo Router]]
  - 연결 이유: React Native 생태계에서 파일 기반 라우팅을 구현한 대표적 프레임워크입니다.
  - 이 개념을 통해 더 깊게 이해할 수 있는 부분: 웹의 파일 기반 라우팅 패러다임이 어떻게 모바일 네이티브 환경의 내비게이션(스택, 탭 등)으로 치환되어 동작하는지 실제 구현 사례를 확인할 수 있습니다 [1, 5, 15].
- [[Next.js]]
  - 연결 이유: 파일 기반 라우팅 패러다임을 웹 프론트엔드 생태계에 널리 보급하고 Expo Router 등에 직접적인 영감을 준 프레임워크입니다.
  - 이 개념을 통해 더 깊게 이해할 수 있는 부분: 파일 시스템 기반의 라우팅이 어떻게 정적 사이트 생성(SSG)이나 API 라우트와 매끄럽게 연결되는지 근본적인 철학을 배울 수 있습니다 [1, 2, 5].

### Deeper Research Questions

- 파일 기반 라우팅 시스템에서 사용자의 권한이나 인증 상태에 따른 동적 접근 제어(Auth Guards)는 구조적으로 어떻게 구현하는 것이 가장 효율적인가?
- 대규모 엔터프라이즈 애플리케이션에서 파일 기반 라우팅의 '엄격한 폴더 구조 강제성'이 도메인 주도 설계(DDD)나 클린 아키텍처의 파일 분리 원칙과 충돌할 때, 이를 어떻게 조율할 수 있는가?
- 설정 기반 라우팅(예: React Navigation)에서 파일 기반 라우팅(예: Expo Router)으로 대규모 서비스를 마이그레이션할 때 예상되는 주요 병목 현상과 이를 최소화하기 위한 점진적 마이그레이션 전략은 무엇인가?
- 파일 기반 라우팅과 정적 사이트 생성(SSG)이 결합된 유니버설 앱 구축 시, 모바일과 웹 간의 실질적인 코드 공유율(Code Reuse Rate)을 높이기 위한 컴포넌트 설계 전략은 무엇인가?
- 복잡한 탭 내비게이션이나 스크롤 위치가 유지되어야 하는 중첩 라우트(Nested Routes) 상황에서, 파일 기반 라우팅 시스템은 내부적으로 상태(State)를 어떻게 보존하고 관리하는가?

### Practical Application Contexts

- **Implementation:** 새로운 프로젝트를 시작하거나 MVP를 제작할 때, 별도의 라우팅 보일러플레이트 코드 작성 없이 `app` 디렉토리에 파일을 추가하는 것만으로 신속한 프로토타이핑과 화면 구현이 가능합니다 [10, 16].
- **System Design:** 프로젝트의 파일 관리 디렉토리 구조 자체가 시스템의 내비게이션 흐름을 그대로 보여주는 단일 진실 공급원(SSOT) 역할을 하여, 새로운 개발자가 합류했을 때 시스템 구조를 빠르게 파악할 수 있도록 돕습니다 [2, 17].
- **Operation / Maintenance:** 수십 개의 화면을 가진 앱에서 딥 링크(Deep Link) 매핑 룰을 유지보수하는 대신, 파일 시스템에 맡김으로써 휴먼 에러를 줄이고 라우팅 맵의 유지보수 비용을 절감할 수 있습니다 [6].
- **Learning Path:** Next.js를 통해 파일 기반 라우팅에 익숙해진 웹 개발자가 모바일 크로스 플랫폼 앱(React Native) 개발로 전환할 때, 익숙한 컨벤션을 그대로 사용할 수 있어 진입 장벽과 램프업 시간을 크게 단축시킵니다 [16, 17].
- **My Project Relevance:** 모바일 앱과 웹 플랫폼 모두를 단일 코드베이스로 타겟팅해야 하는 유니버설 애플리케이션(Universal Apps)을 구축할 때, 통합된 라우팅 경험과 SEO 최적화를 동시에 만족시키는 핵심 기반 아키텍처로 활용할 수 있습니다 [5, 18].

### Adjacent Topics

- [[Universal Apps]]:
  - 확장 방향: 파일 기반 라우팅을 기반으로 모바일 앱과 웹사이트에서 동일한 URL 구조 및 라우팅 로직을 공유하여, 완벽한 크로스 플랫폼 사용자 경험을 제공하는 아키텍처 구축 방법론 탐구 [5, 18].
- [[Server-Side Rendering (SSR)]] 및 [[Static Site Generation (SSG)]]:
  - 확장 방향: 단순한 화면 이동(Navigation)을 넘어, 라우트 단위로 데이터를 서버에서 미리 렌더링하거나 정적 파일로 생성하여 웹 환경에서의 성능과 SEO를 극대화하는 기술적 연관성 파악 [2, 5].

---
*Last updated: 2026-05-02*