# 은행 앱 만들기 1부: 웹 앱에서 HTML 템플릿과 라우트
```mermaid
journey
title 당신의 뱅킹 앱 개발 여정
section SPA 기초
싱글 페이지 앱 이해하기: 3: Student
템플릿 개념 학습하기: 4: Student
DOM 조작 마스터하기: 4: Student
section 라우팅 시스템
클라이언트 사이드 라우팅 구현하기: 4: Student
브라우저 히스토리 처리하기: 5: Student
내비게이션 시스템 만들기: 5: Student
section 전문가 패턴
모듈형 아키텍처 구축하기: 5: Student
모범 사례 적용하기: 5: Student
사용자 경험 만들기: 5: Student
```
1969년 아폴로 11호의 유도 컴퓨터가 달을 향해 항해할 때, 전체 시스템을 재시작하지 않고도 여러 프로그램 간에 전환해야 했습니다. 현대의 웹 애플리케이션도 비슷하게 작동합니다 – 모든 것을 처음부터 다시 로드하지 않고 보이는 내용을 변경합니다. 덕분에 오늘날 사용자가 기대하는 부드럽고 반응성 높은 경험이 만들어집니다.
모든 상호작용마다 전체 페이지를 다시 로드하는 전통적인 웹사이트와 달리, 현대 웹 앱은 변경이 필요한 부분만 업데이트합니다. 이 방식은 미션 컨트롤이 여러 화면을 전환하면서도 지속적으로 통신하는 것과 유사해 우리가 기대하는 유연한 경험을 만들어냅니다.
이 차이가 극명한 이유는 다음과 같습니다:
| 전통적 다중 페이지 앱 | 현대 싱글 페이지 앱 |
|----------------------------|-------------------------|
| **탐색** | 각 화면마다 전체 페이지 재로딩 | 즉각적인 콘텐츠 전환 |
| **성능** | 전체 HTML 다운로드로 느림 | 부분 업데이트로 빠름 |
| **사용자 경험** | 갑작스러운 페이지 깜박임 | 부드럽고 앱 같은 전환 |
| **데이터 공유** | 페이지 간 공유 어려움 | 상태 관리 용이 |
| **개발** | 여러 HTML 파일 유지 필요 | 동적 템플릿을 가진 단일 HTML |
**변화 이해하기:**
- **전통적인 앱**은 탐색할 때마다 서버 요청 필요
- **현대 SPA**는 한 번 로드 후 JavaScript로 동적으로 콘텐츠 업데이트
- **사용자 기대**는 즉각적이고 매끄러운 상호작용 선호
- **성능 이점**은 대역폭 감소와 빠른 응답 포함
이번 수업에서는 여러 화면이 매끄럽게 연결된 은행 앱을 만들겠습니다. 과학자들이 다양한 실험에 맞게 모듈식 기기를 재구성하는 것처럼, HTML 템플릿을 재사용 가능한 컴포넌트로 사용하여 필요에 따라 화면을 표시할 것입니다.
HTML 템플릿(다양한 화면을 위한 재사용 설계도), JavaScript 라우팅(화면 전환 시스템), 그리고 브라우저의 히스토리 API(뒤로 가기 버튼 작동 유지)를 다루게 됩니다. 이 기본 기술들은 React, Vue, Angular 같은 프레임워크에서 사용하는 것과 동일합니다.
끝나면 전문적인 싱글 페이지 앱 원리를 보여주는 작동하는 은행 앱을 갖게 될 것입니다.
```mermaid
mindmap
root((싱글 페이지 애플리케이션))
Architecture
Template System
Client-side Routing
State Management
Event Handling
Templates
재사용 가능한 컴포넌트
동적 콘텐츠
DOM 조작
콘텐츠 전환
Routing
URL 관리
히스토리 API
네비게이션 로직
브라우저 통합
User Experience
빠른 네비게이션
부드러운 전환
일관된 상태
최신 상호작용
Performance
감소된 서버 요청
더 빠른 페이지 전환
효율적인 자원 사용
더 나은 반응성
```
## 강의 전 퀴즈
[강의 전 퀴즈](https://ff-quizzes.netlify.app/web/quiz/41)
### 준비물
은행 앱을 테스트할 로컬 웹 서버가 필요합니다 – 걱정 마세요, 생각보다 쉽습니다! 이미 없다면 [Node.js](https://nodejs.org)를 설치하고 프로젝트 폴더에서 `npx lite-server`를 실행하세요. 이 명령은 로컬 서버를 띄우고 자동으로 브라우저에서 앱을 열어줍니다.
### 준비 작업
컴퓨터에 `bank`라는 폴더를 만들고 그 안에 `index.html` 파일을 생성하세요. 다음 HTML [보일러플레이트](https://en.wikipedia.org/wiki/Boilerplate_code)부터 시작합니다:
```html
Bank App
```
**이 보일러플레이트가 제공하는 것들:**
- **HTML5 문서 구조**를 적절한 DOCTYPE 선언과 함께 설정
- **문자 인코딩**을 UTF-8로 설정해 국제 문자 지원
- **뷰포트 메타 태그**로 모바일 호환성을 위한 반응형 디자인 가능
- **브라우저 탭에 표시될** 설명적인 타이틀 설정
- **앱을 빌드할 깔끔한 본문 영역** 생성
> 📁 **프로젝트 구조 미리보기**
>
> **이 수업이 끝나면 프로젝트에는 다음이 포함됩니다:**
> ```
> bank/
> ├── index.html
> ├── app.js
> └── style.css
> ```
>
> **파일 역할:**
> - **index.html**: 모든 템플릿을 포함하며 앱의 기본 구조 제공
> - **app.js**: 라우팅, 내비게이션, 템플릿 관리를 담당
> - **템플릿**: 로그인, 대시보드 및 기타 화면의 UI 정의
---
## HTML 템플릿
템플릿은 웹 개발에서 근본적인 문제를 해결합니다. 1440년대 구텐베르크가 활자 인쇄를 발명했을 때, 그는 전체 페이지를 새로 파는 대신 재사용 가능한 활자 블록을 만들어 필요할 때 배열하는 방식을 발견했습니다. HTML 템플릿도 같은 원칙입니다 – 각각의 화면마다 별도의 HTML 파일을 만드는 대신, 재사용 가능한 구조를 정의해 필요할 때 표시하는 것입니다.
```mermaid
flowchart TD
A["📋 템플릿 정의"] --> B["💬 DOM에 숨김"]
B --> C["🔍 자바스크립트가 템플릿을 찾음"]
C --> D["📋 템플릿 내용 복제"]
D --> E["🔗 보이는 DOM에 첨부"]
E --> F["👁️ 사용자가 내용 확인"]
G["로그인 템플릿"] --> A
H["대시보드 템플릿"] --> A
I["미래의 템플릿"] --> A
style A fill:#e3f2fd
style D fill:#e8f5e8
style F fill:#fff3e0
style B fill:#f3e5f5
```
템플릿은 앱의 여러 부분을 위한 설계도로 생각하세요. 마치 건축가가 똑같은 방을 여러 번 다시 그리기보다 설계도를 한 번 만들어 여러번 사용하는 것처럼, 템플릿을 한 번 만들고 필요에 따라 인스턴스화합니다. 브라우저는 JavaScript가 활성화할 때까지 이 템플릿들을 숨겨 둡니다.
웹 페이지에 여러 화면을 만들고 싶다면, 각 화면마다 HTML 파일을 만드는 방법도 있습니다. 그러나 이런 방식에는 불편함이 있습니다:
- 화면 전환 시 전체 HTML을 다시 로드해야 하므로 느려질 수 있습니다.
- 서로 다른 화면 간에 데이터를 공유하기 어렵습니다.
또 다른 방법은 HTML 파일을 하나만 두고 `` 요소를 사용해 여러 HTML 템플릿을 정의하는 것입니다. 템플릿은 브라우저가 직접 표시하지 않는 재사용 가능한 HTML 블록이며, JavaScript를 통해 런타임에 인스턴스화하여 사용합니다.
### 만들어봅시다
로그인 페이지와 대시보드, 두 개의 주요 화면을 가진 은행 앱을 만들겠습니다. 먼저 HTML 본문에 자리 표시자 요소를 추가합니다 – 여기에 여러 화면이 표시될 것입니다:
```html
Loading...
```
**이 자리 표시자 이해하기:**
- 모든 화면이 표시될 ID가 "app"인 컨테이너를 생성
- JavaScript가 첫 화면을 초기화할 때까지 로딩 메시지를 보여줌
- 동적 콘텐츠를 위한 단일 마운트 포인트 제공
- `document.getElementById()`로 쉽게 접근 가능하도록 지원
> 💡 **노하우**: 이 요소 내용이 교체되므로 앱이 로딩되는 동안 보여줄 메시지나 인디케이터를 넣어도 좋습니다.
다음으로, 로그인 페이지의 HTML 템플릿을 본문 하단에 추가합시다. 지금은 제목과 내비게이션에 사용할 링크가 있는 섹션만 넣을 겁니다.
```html
Bank App
```
**로그인 템플릿 설명:**
- JavaScript가 식별할 수 있도록 고유 ID "login"을 가진 템플릿 정의
- 앱 브랜드를 확립하는 주요 제목 포함
- 관련 내용을 묶는 의미론적 `` 요소 포함
- 대시보드로 이동할 내비게이션 링크 제공
다음으로 대시보드 페이지를 위한 HTML 템플릿을 추가합니다. 이 페이지는 여러 섹션을 포함합니다:
- 제목과 로그아웃 링크가 있는 헤더
- 은행 계좌의 현재 잔액
- 테이블로 표시되는 거래 내역 목록
```html
```
**대시보드 각 부분 이해하기:**
- 내비게이션이 포함된 의미론적 `` 요소로 페이지를 구성
- 앱 제목을 일관되게 표시해 브랜드 유지
- 로그인 화면으로 돌아가는 로그아웃 링크 제공
- 별도 섹션에 현재 계좌 잔액 표시
- 거래 데이터를 적절한 HTML 테이블로 정리
- 날짜, 대상, 금액 열에 대한 테이블 머리글 정의
- 테이블 본문은 나중에 동적 콘텐츠를 주입할 수 있도록 비워 둠
> 💡 **노하우**: HTML 템플릿 내용을 직접 보고 싶다면 ``와 `` 태그를 `` 주석으로 감싸 주석 처리할 수 있습니다.
### 🔄 **교육적 확인**
**템플릿 시스템 이해도**: JavaScript를 구현하기 전에 확실히 알아야 할 것들:
- ✅ 템플릿이 일반 HTML 요소와 다른 점
- ✅ 템플릿이 JavaScript가 활성화할 때까지 숨겨지는 이유
- ✅ 템플릿에서 의미론적 HTML 구조가 중요한 이유
- ✅ 템플릿이 재사용 가능한 UI 컴포넌트를 가능하게 하는 방법
**간단한 자가 점검**: `` 태그를 HTML 주위에서 제거하면 어떻게 될까요?
*답변: 콘텐츠가 즉시 보여지고 템플릿 기능을 잃게 됩니다*
**구조상의 이점**: 템플릿이 제공하는 것:
- **재사용성**: 하나의 정의로 여러 인스턴스 생성
- **성능**: 중복 HTML 파싱 없음
- **유지관리성**: UI 구조 중앙 집중화
- **유연성**: 동적 콘텐츠 전환 가능
✅ 템플릿에 `id` 속성을 사용하는 이유는? 클래스 같은 다른 것을 써도 될까요?
## JavaScript로 템플릿 활성화하기
이제 템플릿을 동작하게 만들어야 합니다. 3D 프린터가 디지털 설계도를 물리적 형상으로 만들 듯, JavaScript가 숨겨진 템플릿을 사용자에게 보이고 사용할 수 있는 상호작용 요소로 바꿉니다.
이 과정은 현대 웹 개발의 기초를 이루는 세 단계로 이루어져 있습니다. 이 패턴을 이해하면 많은 프레임워크와 라이브러리에서도 쉽게 알아볼 수 있습니다.
현재 HTML 파일을 브라우저에서 열면 `Loading...` 메시지가 계속 표시됩니다. 이는 HTML 템플릿을 인스턴스화하고 보여줄 JavaScript 코드를 추가해야 하기 때문입니다.
템플릿 인스턴스화는 보통 3단계로 이루어집니다:
1. DOM에서 템플릿 요소를 찾기, 예: [`document.getElementById`](https://developer.mozilla.org/docs/Web/API/Document/getElementById) 사용
2. 템플릿 요소 복제, [`cloneNode`](https://developer.mozilla.org/docs/Web/API/Node/cloneNode) 사용
3. 복제본을 가시적 요소 아래 DOM에 붙이기, 예: [`appendChild`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) 사용
```mermaid
flowchart TD
A[🔍 1단계: 템플릿 찾기] --> B[📋 2단계: 템플릿 복제]
B --> C[🔗 3단계: DOM에 첨부]
A1["document.getElementById('login')"] --> A
B1["template.content.cloneNode(true)"] --> B
C1["app.appendChild(view)"] --> C
C --> D[👁️ 사용자에게 템플릿 보임]
style A fill:#e1f5fe
style B fill:#f3e5f5
style C fill:#e8f5e8
style D fill:#fff3e0
```
**과정 시각화:**
- **1단계** 숨겨진 템플릿을 DOM 구조 내에서 찾음
- **2단계** 안전하게 수정할 수 있는 작업 복사본 생성
- **3단계** 복제본을 보이는 페이지 영역에 삽입
- **결과** 사용자가 상호작용할 수 있는 기능적 화면 완성
✅ DOM에 붙이기 전에 템플릿을 복제하는 이유는? 이 단계를 건너뛰면 어떻게 될까요?
### 과제
프로젝트 폴더에 `app.js`라는 새 파일을 만들고 HTML의 `` 섹션에 해당 파일을 임포트하세요:
```html
```
**이 스크립트 임포트 이해하기:**
- JavaScript 파일을 HTML 문서에 연결
- HTML 파싱 후 스크립트 실행을 보장하는 `defer` 속성 사용
- 스크립트 실행 전에 모든 DOM 요소가 로드되어 접근 가능하도록 함
- 스크립트 로딩과 성능을 위한 최신 모범 사례 따름
이제 `app.js`에서 `updateRoute`라는 함수를 만듭니다:
```js
function updateRoute(templateId) {
const template = document.getElementById(templateId);
const view = template.content.cloneNode(true);
const app = document.getElementById('app');
app.innerHTML = '';
app.appendChild(view);
}
```
**단계별 설명:**
- 고유 ID로 템플릿 요소를 찾음
- `cloneNode(true)`로 템플릿 내용을 깊게 복제
- 콘텐츠가 표시될 앱 컨테이너를 찾음
- 컨테이너 내 기존 콘텐츠를 모두 제거
- 복제한 템플릿 콘텐츠를 보이는 DOM에 삽입
이 함수를 템플릿 중 하나로 호출하고 결과를 확인하세요.
```js
updateRoute('login');
```
**이 함수 호출의 결과:**
- 로그인 템플릿을 ID로 전달해 활성화
- 프로그래밍적으로 앱 화면 전환 방법 시연
- "Loading..." 메시지 대신 로그인 화면 표시
✅ `app.innerHTML = '';` 코드의 용도는? 이 부분이 없으면 어떻게 될까요?
## 라우트 만들기
라우팅은 본질적으로 URL을 올바른 콘텐츠에 매핑하는 것입니다. 초기 전화 교환원이 통화를 연결하기 위해 교환판으로 접속을 관리한 것처럼, 웹 라우팅도 URL 요청을 받아 어떤 콘텐츠를 보여줄지 결정합니다.
```mermaid
flowchart LR
A["🌐 URL 경로
/dashboard"] --> B["🗺️ 라우트 객체
조회"]
B --> C["🎯 템플릿 ID
'dashboard'"]
C --> D["📌 템플릿 찾기
getElementById"]
D --> E["👁️ 화면 표시
복제 & 추가"]
F["📍 /login"] --> G["🎯 'login'"]
H["📍 /unknown"] --> I["❌ 찾을 수 없음"]
I --> J["🔄 /login 으로 리디렉션"]
style B fill:#e3f2fd
style E fill:#e8f5e8
style I fill:#ffebee
style J fill:#fff3e0
```
과거 웹 서버는 다른 URL에 대해 각기 다른 HTML 파일을 제공해 처리했습니다. 우리는 싱글 페이지 앱을 만들고 있으므로, JavaScript로 직접 라우팅을 처리해야 합니다. 이렇게 하면 사용자 경험과 성능을 더욱 세밀하게 제어할 수 있습니다.
```mermaid
flowchart LR
A["🌐 URL 경로
/dashboard"] --> B["🗺️ 경로 객체
조회"]
B --> C["🎯 템플릿 ID
'dashboard'"]
C --> D["📄 템플릿 찾기
getElementById"]
D --> E["👁️ 화면 표시
복제 & 추가"]
F["📍 /login"] --> G["🎯 'login'"]
H["📍 /unknown"] --> I["❌ 찾을 수 없음"]
I --> J["🔄 /login으로 리디렉션"]
style B fill:#e3f2fd
style E fill:#e8f5e8
style I fill:#ffebee
style J fill:#fff3e0
```
**라우팅 흐름 이해:**
- URL 변화가 라우트 구성에서 조회를 유발
- 유효한 라우트는 렌더링할 특정 템플릿 ID로 매핑
- 유효하지 않은 라우트는 깨진 상태를 방지하기 위한 폴백 동작 실행
- 템플릿 렌더링은 이전에 배운 3단계 프로세스를 따름
웹 앱에서는 *라우팅*이란 **URL**을 특정 화면과 연결하는 의도를 말합니다. 여러 HTML 파일을 가진 웹사이트에서는 파일 경로가 URL에 반영되어 자동으로 이루어집니다. 예를 들어, 프로젝트 폴더에 이러한 파일이 있다면:
```
mywebsite/index.html
mywebsite/login.html
mywebsite/admin/index.html
```
`mywebsite`를 루트로 하는 웹 서버를 만들면 URL 매핑은 다음과 같습니다:
```
https://site.com --> mywebsite/index.html
https://site.com/login.html --> mywebsite/login.html
https://site.com/admin/ --> mywebsite/admin/index.html
```
하지만 우리 웹 앱은 모든 화면을 포함하는 단일 HTML 파일을 사용하기 때문에, 이 기본 동작으로는 부족합니다. 이 매핑을 수동으로 만들고 JavaScript로 표시할 템플릿을 업데이트해야 합니다.
### 과제
간단한 객체를 이용해 URL 경로와 템플릿 간의 [맵](https://en.wikipedia.org/wiki/Associative_array)을 구현합니다. 이 객체를 `app.js` 파일 상단에 추가하세요.
```js
const routes = {
'/login': { templateId: 'login' },
'/dashboard': { templateId: 'dashboard' },
};
```
**이 라우트 구성 이해하기:**
- URL 경로와 템플릿 식별자를 연결하는 매핑 정의
- 키는 URL 경로, 값은 템플릿 정보가 포함된 객체 사용
- 지정된 URL에 대해 어떤 템플릿을 표시할지 쉽게 조회 가능
- 앞으로 새로운 라우트를 추가하기에 확장 가능한 구조 제공
이제 `updateRoute` 함수를 조금 수정해봅시다. `templateId`를 직접 인자로 전달하는 대신, 먼저 현재 URL을 확인하여 해당하는 템플릿 ID 값을 가져오도록 하겠습니다. URL의 경로 부분만 가져오기 위해 [`window.location.pathname`](https://developer.mozilla.org/docs/Web/API/Location/pathname)을 사용할 수 있습니다.
```js
function updateRoute() {
const path = window.location.pathname;
const route = routes[path];
const template = document.getElementById(route.templateId);
const view = template.content.cloneNode(true);
const app = document.getElementById('app');
app.innerHTML = '';
app.appendChild(view);
}
```
**여기서 일어나는 작업을 분해해 보면:**
- **브라우저의 URL에서 현재 경로를 추출**하기 위해 `window.location.pathname` 사용
- **경로에 해당하는 라우트 설정을 조회**하기 위해 routes 객체 확인
- **라우트 설정에서 템플릿 ID를 가져옴**
- **이전과 같은 템플릿 렌더링 프로세스를 따름**
- **URL 변경에 반응하는 동적인 시스템 생성**
여기서 선언한 라우트들을 대응하는 템플릿에 매핑했습니다. 브라우저에서 URL을 수동으로 변경해 보면서 제대로 동작하는지 확인할 수 있습니다.
✅ 만약 URL에 알 수 없는 경로를 입력하면 어떻게 될까요? 이를 어떻게 해결할 수 있을까요?
## 내비게이션 추가
라우팅이 설정되었으니, 사용자가 앱 내를 이동할 방법이 필요합니다. 전통적인 웹사이트는 링크를 클릭할 때 전체 페이지를 새로고침하지만, 우리는 페이지 새로고침 없이 URL과 내용을 동시에 업데이트하고자 합니다. 이는 데스크톱 애플리케이션에서 다른 뷰로 전환하는 것과 비슷하게 부드러운 경험을 만듭니다.
우리는 두 가지를 조율해야 합니다: 사용자가 즐겨찾기를 하고 링크를 공유할 수 있도록 브라우저 URL을 업데이트하는 것, 그리고 적절한 콘텐츠를 표시하는 것입니다. 올바르게 구현하면 사용자가 기대하는 현대적인 애플리케이션의 무결점 내비게이션을 만들 수 있습니다.
```mermaid
sequenceDiagram
participant User
participant Browser
participant App
participant Template
User->>Browser: "로그인" 링크 클릭
Browser->>App: onclick 이벤트 발생
App->>App: preventDefault() & navigate('/dashboard')
App->>Browser: history.pushState('/dashboard')
Browser->>Browser: URL이 /dashboard 로 업데이트됨
App->>App: updateRoute() 호출됨
App->>Template: 대시보드 템플릿 찾기 및 복제
Template->>App: 복제된 내용 반환
App->>Browser: 앱 내용을 템플릿으로 교체
Browser->>User: 대시보드 화면 표시
Note over User,Template: 사용자가 브라우저 뒤로가기 버튼 클릭
User->>Browser: 뒤로가기 버튼 클릭
Browser->>Browser: 히스토리가 /login 으로 이동
Browser->>App: popstate 이벤트 발생
App->>App: updateRoute() 자동 호출
App->>Template: 로그인 템플릿 찾기 및 복제
Template->>App: 복제된 내용 반환
App->>Browser: 앱 내용을 템플릿으로 교체
Browser->>User: 로그인 화면 표시
```
### 🔄 **학습 점검**
**싱글 페이지 애플리케이션 아키텍처**: 전체 시스템에 대한 이해를 확인해 봅시다:
- ✅ 클라이언트 사이드 라우팅은 전통적인 서버 사이드 라우팅과 어떻게 다른가요?
- ✅ 올바른 SPA 내비게이션을 위해 History API가 왜 중요한가요?
- ✅ 템플릿은 페이지 새로고침 없이 어떻게 동적 콘텐츠를 가능하게 하나요?
- ✅ 내비게이션 가로채기에서 이벤트 핸들링은 어떤 역할을 하나요?
**시스템 통합**: 당신의 SPA가 보여주는 것:
- **템플릿 관리**: 동적 콘텐츠가 포함된 재사용 가능한 UI 컴포넌트
- **클라이언트 사이드 라우팅**: 서버 요청 없이 URL 관리
- **이벤트 중심 아키텍처**: 내비게이션과 사용자 상호작용에 반응
- **브라우저 통합**: 히스토리 및 뒤로/앞으로 버튼 지원
- **성능 최적화**: 빠른 전환과 서버 부하 감소
**전문가 패턴**: 구현한 것:
- **모델-뷰 분리**: 애플리케이션 로직과 분리된 템플릿
- **상태 관리**: 표시되는 콘텐츠와 동기화된 URL 상태
- **점진적 개선**: 기본 HTML 기능을 향상시키는 자바스크립트
- **사용자 경험**: 페이지 새로고침 없는 부드러운 앱 같은 내비게이션
> � **아키텍처 인사이트**: 내비게이션 시스템 구성 요소
>
> **당신이 만드는 것:**
> - **🔄 URL 관리**: 페이지 새로고침 없이 브라우저 주소 표시줄 업데이트
> - **📋 템플릿 시스템**: 현재 경로에 따라 콘텐츠를 동적으로 교체
> - **📚 히스토리 통합**: 브라우저 뒤로/앞으로 버튼 기능 유지
> - **🛡️ 오류 처리**: 잘못된 경로나 누락된 경우 우아한 대체 처리
>
> **구성 요소 동작 방식:**
> - **내비게이션 이벤트(클릭, 히스토리 변경) 수신**
> - **History API로 URL 업데이트**
> - **새 경로에 맞는 템플릿 렌더링**
> - **전체적으로 매끄러운 사용자 경험 유지**
다음 단계는 URL을 수동으로 변경하지 않고도 페이지 간 내비게이션이 가능하도록 하는 것입니다. 이는 다음 두 가지를 의미합니다:
1. 현재 URL 업데이트
2. 새 URL에 따라 표시되는 템플릿 업데이트
`updateRoute` 함수로 두 번째 부분은 이미 해결했으니, 이제 현재 URL을 어떻게 업데이트할지 알아봐야 합니다.
`history.pushState` 메서드를 사용해야 하는데, 이 메서드는 URL을 업데이트하고 브라우징 히스토리에 새 항목을 추가할 수 있으면서 HTML 페이지를 새로고침하지 않도록 해줍니다.
> ⚠️ **중요 참고**: HTML 앵커 요소 [``](https://developer.mozilla.org/docs/Web/HTML/Element/a)는 별도로 다양한 URL로 하이퍼링크를 생성하는 데 사용되지만, 기본적으로 브라우저가 HTML을 새로고침하게 합니다. 커스텀 자바스크립트로 라우팅을 처리할 때는 클릭 이벤트에서 preventDefault() 함수를 이용해 이 동작을 막아야 합니다.
### 과제
앱 내에서 내비게이션을 하기 위한 새 함수를 만들어 봅시다:
```js
function navigate(path) {
window.history.pushState({}, path, path);
updateRoute();
}
```
**이 내비게이션 함수 이해하기:**
- **`history.pushState`로 브라우저 URL을 새 경로로 업데이트**
- **적절한 뒤로/앞으로 버튼 동작을 위해 브라우저 히스토리 스택에 새 항목 추가**
- **`updateRoute()` 함수 호출로 대응하는 템플릿 표시**
- **페이지 새로고침 없는 싱글 페이지 앱 경험 유지**
이 메서드는 먼저 주어진 경로에 따라 현재 URL을 업데이트하고, 다음에 템플릿을 업데이트합니다. `window.location.origin` 속성은 URL의 루트 부분을 반환해 경로에서 전체 URL을 재구성할 수 있게 합니다.
이제 이 함수를 썼으니, 정의된 라우트와 일치하지 않는 경로가 있을 때 문제가 생기는 것을 해결해 봅시다. `updateRoute` 함수에 기존 라우트 중 하나로 돌아가는 폴백(fallback) 기능을 추가할 것입니다.
```js
function updateRoute() {
const path = window.location.pathname;
const route = routes[path];
if (!route) {
return navigate('/login');
}
const template = document.getElementById(route.templateId);
const view = template.content.cloneNode(true);
const app = document.getElementById('app');
app.innerHTML = '';
app.appendChild(view);
}
```
**기억할 주요 사항:**
- **현재 경로에 해당하는 라우트가 존재하는지 체크**
- **유효하지 않은 경로 접근 시 로그인 페이지로 리다이렉트**
- **고장난 내비게이션을 방지하는 폴백 메커니즘 제공**
- **잘못된 URL에도 항상 유효한 화면 제공 보장**
라우트를 찾지 못할 경우 이제 `login` 페이지로 리다이렉트합니다.
이제 링크를 클릭했을 때 URL을 얻고 브라우저 기본 링크 동작을 막는 함수도 만들어 봅시다:
```js
function onLinkClick(event) {
event.preventDefault();
navigate(event.target.href);
}
```
**이 클릭 핸들러 분해:**
- **`preventDefault()`로 브라우저 기본 링크 동작 차단**
- **클릭된 링크 엘리먼트에서 목적지 URL 추출**
- **페이지 새로고침 대신 커스텀 내비게이션 함수 호출**
- **부드러운 싱글 페이지 앱 경험 유지**
```html
Login
...
Logout
```
**이 `onclick` 결합이 수행하는 일:**
- **각 링크를 커스텀 내비게이션 시스템에 연결**
- **클릭 이벤트를 처리하기 위해 `onLinkClick` 함수로 전달**
- **페이지 새로고침 없이 부드러운 내비게이션 가능**
- **사용자가 즐겨찾기하거나 공유할 수 있는 올바른 URL 구조 유지**
[`onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) 속성은 `click` 이벤트를 자바스크립트 코드에 바인딩하는데, 여기서는 `navigate()` 함수 호출을 바인딩한 것입니다.
이 링크들을 클릭해 보세요. 이제 앱의 서로 다른 화면 사이를 내비게이션 할 수 있을 것입니다.
✅ `history.pushState` 메서드는 HTML5 표준의 일부이며 [모든 최신 브라우저](https://caniuse.com/?search=pushState)에서 구현되어 있습니다. 만약 구형 브라우저용 웹 앱을 만드는 경우, 이 API 대신 사용할 수 있는 트릭이 있습니다: [해시(`#`)](https://en.wikipedia.org/wiki/URI_fragment)를 경로 앞에 사용해 일반 앵커 내비게이션이 가능하면서도 페이지를 새로고침하지 않는 라우팅을 구현하는 것입니다.
## 뒤로 및 앞으로 버튼 작동시키기
웹 브라우징에서 뒤로 및 앞으로 버튼은 매우 중요한데, 마치 NASA 임무 담당자가 우주 임무 동안 이전 시스템 상태를 검토할 수 있는 것과 같습니다. 사용자는 이 버튼들이 제대로 작동하기를 기대하고, 작동하지 않으면 브라우징 경험이 깨집니다.
우리 싱글 페이지 앱은 이를 지원하려면 추가 설정이 필요합니다. 브라우저가 `history.pushState`로 히스토리 스택을 유지하지만, 사용자가 이 히스토리를 탐색할 때 앱이 이에 맞춰 표시 중인 콘텐츠를 업데이트해야 합니다.
```mermaid
sequenceDiagram
participant User
participant Browser
participant App
participant Template
User->>Browser: "로그인" 링크 클릭
Browser->>App: onclick 이벤트 발생
App->>App: preventDefault() & navigate('/dashboard')
App->>Browser: history.pushState('/dashboard')
Browser->>Browser: URL이 /dashboard로 업데이트됨
App->>App: updateRoute() 호출됨
App->>Template: 대시보드 템플릿 찾기 및 복제
Template->>App: 복제된 내용 반환
App->>Browser: 템플릿으로 앱 내용 교체
Browser->>User: 대시보드 화면 표시
Note over User,Template: 사용자가 브라우저 뒤로 가기 버튼 클릭
User->>Browser: 뒤로 가기 버튼 클릭
Browser->>Browser: 히스토리가 /login으로 이동
Browser->>App: popstate 이벤트 발생
App->>App: updateRoute() 자동 호출
App->>Template: 로그인 템플릿 찾기 및 복제
Template->>App: 복제된 내용 반환
App->>Browser: 템플릿으로 앱 내용 교체
Browser->>User: 로그인 화면 표시
```
**주요 상호작용 포인트:**
- **사용자 동작**은 클릭이나 브라우저 버튼 내비게이션을 유발
- **앱이 링크 클릭을 가로채서 페이지 새로고침 방지**
- **History API가 URL 변경과 브라우저 히스토리 스택 관리**
- **각 스크린의 콘텐츠 구조를 템플릿이 제공**
- **이벤트 리스너가 모든 종류의 내비게이션에 앱이 반응하도록 함**
`history.pushState`를 사용하면 브라우저 내비게이션 히스토리에 새 항목이 만들어집니다. 브라우저의 *뒤로 버튼*을 길게 누르면 다음과 같은 내비게이션 히스토리 목록을 볼 수 있습니다:
뒤로 버튼을 몇 번 눌러 보면 현재 URL은 바뀌고 히스토리가 업데이트되지만, 여전히 같은 템플릿만 표시되는 것을 볼 수 있습니다.
이는 애플리케이션이 히스토리가 변경될 때마다 `updateRoute()`를 호출해야 한다는 사실을 알지 못하기 때문입니다. [`history.pushState` 문서](https://developer.mozilla.org/docs/Web/API/History/pushState)를 보면, 상태가 변경되어 다른 URL로 이동하면 [`popstate`](https://developer.mozilla.org/docs/Web/API/Window/popstate_event) 이벤트가 트리거된다고 합니다. 이를 이용해 문제를 해결할 것입니다.
### 과제
브라우저 히스토리가 변경될 때 표시되는 템플릿이 업데이트되도록 `updateRoute()`를 호출하는 새 함수를 추가합시다. 이 코드는 `app.js` 파일 하단에 넣겠습니다:
```js
window.onpopstate = () => updateRoute();
updateRoute();
```
**이 히스토리 통합 이해하기:**
- **사용자가 브라우저 버튼으로 내비게이트할 때 발생하는 `popstate` 이벤트 수신**
- **간결한 이벤트 핸들러 문법을 위해 화살표 함수(arrow function) 사용**
- **히스토리 상태가 변경될 때마다 자동으로 `updateRoute()` 호출**
- **페이지가 처음 로드될 때도 `updateRoute()` 호출하여 앱 초기화**
- **사용자 내비게이션 방식과 상관없이 올바른 템플릿 표시 보장**
> 💡 **전문 팁**: 여기서 `popstate` 이벤트 핸들러를 선언할 때 [화살표 함수](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions)를 사용해 간결하게 작성했지만, 일반 함수도 동일하게 작동합니다.
화살표 함수에 대한 복습 영상입니다:
[](https://youtube.com/watch?v=OP6eEbOj2sc "Arrow Functions")
> 🎥 위 이미지 클릭 시 화살표 함수 관련 영상이 재생됩니다.
이제 브라우저의 뒤로 및 앞으로 버튼을 사용해 보고, 이번에는 표시되는 경로가 올바르게 업데이트되는지 확인하세요.
### ⚡ **다음 5분 동안 해볼 수 있는 일**
- [ ] 브라우저 뒤로/앞으로 버튼을 사용해 은행 앱 내비게이션 테스트
- [ ] 주소 표시줄에 다양한 URL을 수동으로 입력해 라우팅 테스트
- [ ] 브라우저 개발자 도구 열고 템플릿이 DOM에 복제되는 과정 확인
- [ ] 라우팅 흐름 추적을 위해 console.log 문 추가해 실습
### 🎯 **이번 시간 내 달성할 수 있는 목표**
- [ ] 수업 후 퀴즈 완료하고 SPA 아키텍처 개념 이해
- [ ] CSS 스타일링 추가해 은행 앱 템플릿을 전문적으로 꾸미기
- [ ] 404 에러 페이지 과제 구현 및 적절한 에러 처리
- [ ] 추가 라우팅 기능을 갖춘 크레딧 페이지 과제 만들기
- [ ] 템플릿 전환 중 로딩 상태 및 전환 효과 추가
### 📅 **1주일간의 SPA 개발 여정**
- [ ] 폼, 데이터 관리, 지속성 포함한 완전한 은행 앱 완성
- [ ] 라우트 파라미터 및 중첩 라우트 같은 고급 라우팅 기능 추가
- [ ] 내비게이션 가드 및 인증 기반 라우팅 구현
- [ ] 재사용 가능한 템플릿 컴포넌트와 컴포넌트 라이브러리 제작
- [ ] 부드러운 사용자 경험을 위한 애니메이션 및 전환 효과 추가
- [ ] 호스팅 플랫폼에 SPA 배포하고 라우팅 적절히 구성
### 🌟 **1개월간의 프론트엔드 아키텍처 마스터리**
- [ ] React, Vue, Angular 같은 현대 프레임워크로 복잡한 SPA 구축
- [ ] 고급 상태 관리 패턴과 라이브러리 학습
- [ ] SPA 개발을 위한 빌드 도구와 개발 워크플로우 숙련
- [ ] 프로그레시브 웹 앱 기능 및 오프라인 동작 구현
- [ ] 대규모 SPA 성능 최적화 기법 연구
- [ ] 오픈소스 SPA 프로젝트에 기여하고 지식 공유
## 🎯 당신의 싱글 페이지 애플리케이션 마스터리 타임라인
```mermaid
timeline
title SPA 개발 및 현대 웹 아키텍처 학습 진행
section 기초 (20분)
템플릿 시스템: HTML 템플릿 요소
: DOM 조작
: 콘텐츠 복제
: 동적 렌더링
section 라우팅 기초 (30분)
클라이언트 측 네비게이션: URL 관리
: 히스토리 API
: 경로 매핑
: 이벤트 처리
section 사용자 경험 (40분)
네비게이션 다듬기: 브라우저 통합
: 뒤로 가기 버튼 지원
: 오류 처리
: 부드러운 전환
section 아키텍처 패턴 (50분)
전문 SPA: 컴포넌트 시스템
: 상태 관리
: 성능 최적화
: 오류 경계
section 고급 기법 (1주)
프레임워크 통합: React Router
: Vue Router
: Angular Router
: 상태 라이브러리
section 생산성 기술 (1개월)
엔터프라이즈 개발: 빌드 시스템
: 테스트 전략
: 배포 파이프라인
: 성능 모니터링
```
### 🛠️ 당신의 SPA 개발 도구 모음 요약
이 수업을 마친 후, 이제 다음을 완벽하게 다룰 수 있습니다:
- **템플릿 아키텍처**: 동적 콘텐츠 렌더링을 지원하는 재사용 가능한 HTML 컴포넌트
- **클라이언트 사이드 라우팅**: 페이지 새로고침 없는 URL 관리 및 내비게이션
- **브라우저 통합**: History API 사용과 뒤로/앞으로 버튼 지원
- **이벤트 기반 시스템**: 내비게이션 처리 및 사용자 상호작용 관리
- **DOM 조작**: 템플릿 복제, 콘텐츠 전환, 엘리먼트 관리
- **오류 처리**: 잘못된 라우트 및 누락된 콘텐츠에 대한 우아한 대처
- **성능 패턴**: 효율적인 콘텐츠 로딩 및 렌더링 전략
**실제 적용 사례**: 당신의 SPA 개발 기술은 다음에 직접 적용 가능합니다:
- **현대 웹 애플리케이션**: React, Vue, Angular 등 프레임워크 개발
- **프로그레시브 웹 앱**: 앱 같은 오프라인 사용 가능한 애플리케이션
- **기업용 대시보드**: 다중 뷰를 가진 복잡한 비즈니스 애플리케이션
- **전자상거래 플랫폼**: 상품 카탈로그, 쇼핑 카트, 결제 흐름
- **콘텐츠 관리**: 동적 콘텐츠 생성 및 편집 인터페이스
- **모바일 개발**: 웹 기술을 이용한 하이브리드 앱
**획득한 전문 기술**: 당신은 이제
- **관심사의 분리를 적절히 하여** 단일 페이지 애플리케이션을 설계합니다
- **애플리케이션 복잡도에 맞게 확장 가능한** 클라이언트 측 라우팅 시스템을 구현합니다
- **브라우저 개발자 도구를 사용하여** 복잡한 내비게이션 흐름을 디버깅합니다
- **효율적인 템플릿 관리를 통해** 애플리케이션 성능을 최적화합니다
- **네이티브처럼 반응성이 뛰어난** 사용자 경험을 설계합니다
**마스터한 프런트엔드 개발 개념**:
- **컴포넌트 아키텍처**: 재사용 가능한 UI 패턴과 템플릿 시스템
- **상태 동기화**: URL 상태 관리 및 브라우저 히스토리
- **이벤트 중심 프로그래밍**: 사용자 상호작용 처리 및 내비게이션
- **성능 최적화**: 효율적인 DOM 조작 및 콘텐츠 로딩
- **사용자 경험 디자인**: 부드러운 전환과 직관적인 내비게이션
**다음 단계**: 이제 현대적인 프런트엔드 프레임워크, 고급 상태 관리, 또는 복잡한 엔터프라이즈 애플리케이션 구축에 도전할 준비가 되었습니다!
🌟 **업적 달성**: 최신 웹 아키텍처 패턴을 통해 전문적인 단일 페이지 애플리케이션 기반을 구축했습니다!
---
## GitHub Copilot 에이전트 챌린지 🚀
에이전트 모드를 사용하여 다음 챌린지를 완료하세요:
**설명:** 잘못된 경로에 대해 오류 처리 및 404 페이지 템플릿을 구현하여 사용자 경험을 향상시키는 은행 앱 기능을 확장하세요.
**프롬프트:** user-friendly한 404 오류 페이지를 스타일과 함께 표시하는 id가 "not-found"인 새 HTML 템플릿을 만듭니다. 그런 다음 사용자가 유효하지 않은 URL로 이동할 때 이 템플릿을 보여주도록 자바스크립트 라우팅 로직을 수정하고, 로그인 페이지로 돌아가는 "Go Home" 버튼을 추가하세요.
[agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode)에 대해 자세히 알아보세요.
## 🚀 챌린지
이 앱의 크레딧을 보여주는 세 번째 페이지에 대한 새 템플릿과 라우트를 추가하세요.
**챌린지 목표:**
- **적절한 콘텐츠 구조를 갖춘** 새로운 HTML 템플릿 생성
- **라우트 구성 객체에** 새 라우트 추가
- **크레딧 페이지로의** 내비게이션 링크 포함 및 역방향 링크 추가
- **브라우저 히스토리를 이용한** 모든 내비게이션이 올바르게 작동하는지 테스트
## 강의 후 퀴즈
[강의 후 퀴즈](https://ff-quizzes.netlify.app/web/quiz/42)
## 복습 및 자기 주도 학습
라우팅은 웹 개발에서 의외로 까다로운 부분 중 하나입니다. 특히 웹이 페이지 새로고침 방식에서 단일 페이지 애플리케이션의 페이지 새로고침 방식으로 이동할 때 더욱 그렇습니다. [Azure Static Web App 서비스가 어떻게 라우팅을 처리하는지](https://docs.microsoft.com/azure/static-web-apps/routes/?WT.mc_id=academic-77807-sagibbon) 조금 읽어보세요. 그 문서에 설명된 결정들이 왜 필요한지 설명할 수 있나요?
**추가 학습 자료:**
- **React Router, Vue Router 같은 인기 프레임워크들이** 클라이언트 측 라우팅을 어떻게 구현하는지 탐색하기
- **해시 기반 라우팅과 히스토리 API 라우팅의 차이점 조사하기**
- **서버 사이드 렌더링(SSR)이 라우팅 전략에 미치는 영향 알아보기**
- **프로그레시브 웹 앱(PWA)이 라우팅과 내비게이션을 어떻게 처리하는지 조사하기**
## 과제
[라우팅 개선하기](assignment.md)
---
**면책 조항**:
이 문서는 AI 번역 서비스 [Co-op Translator](https://github.com/Azure/co-op-translator)를 사용하여 번역되었습니다. 정확성을 위해 노력하고 있으나, 자동 번역에는 오류나 부정확성이 포함될 수 있음을 알려드립니다. 원문은 해당 언어의 원본 문서가 권위 있는 출처로 간주되어야 합니다. 중요한 정보의 경우, 전문가의 인간 번역을 권장합니다. 본 번역 사용으로 인한 오해나 잘못된 해석에 대해서는 당사가 책임지지 않습니다.