# [[Single Page Applications (SPAs)]]

## 📌 Brief Summary
소스에 관련 정보가 부족합니다. (제공된 소스에서는 SPA의 개념을 직접적으로 정의하거나 설명하지 않으며, 특정 컴포넌트 수명 주기에서의 메모리 누수 문제 [1]나 React 앱 구조에 관한 참조 문서 제목 [2]으로만 간략히 언급되어 있습니다.)

## 📖 Core Content
소스에 관련 정보가 부족합니다. 

## ⚖️ Trade-offs & Caveats
소스에 관련 정보가 부족합니다.

## 🔗 Knowledge Connections

### Related Concepts

#### [관계 유형 A (성능 및 디버깅)]
- [[Memory Leaks]]
  - 연결 이유: 소스에서 SPA 환경의 특정 사용자 상호작용 및 컴포넌트 수명 주기 동안 발생하는 메모리 누수를 식별하는 방법을 핵심적인 성능 문제로 다루고 있기 때문입니다 [1].
  - 이 개념을 통해 더 깊게 이해할 수 있는 부분: SPA 내부에서 DOM 노드가 문서에서 제거되었음에도 JavaScript에서 참조되어 남아있는 현상(Detached DOM Nodes), 이벤트 리스너 누적, 클로저 참조 등 SPA가 장시간 실행될 때 애플리케이션의 속도를 늦추고 충돌을 일으키는 원리를 이해할 수 있습니다 [1, 3].

#### [관계 유형 B (아키텍처 및 기반 기술)]
- [[React Architecture]]
  - 연결 이유: 대규모 SPA 구축에 주로 사용되는 React 애플리케이션의 구조적 한계를 극복하고 확장성을 확보하기 위한 설계 방법론이 소스의 주요 내용이기 때문입니다 [4-6].
  - 이 개념을 통해 더 깊게 이해할 수 있는 부분: SPA 시스템을 단순히 기술적 파일 타입(components, hooks 등)으로 분리하는 것을 넘어, 비즈니스 기능(Features)과 도메인 스코프를 중심으로 분리하는 Feature-Sliced Design(FSD)과 같은 프론트엔드 설계 원칙을 이해할 수 있습니다 [5, 7, 8].

### Deeper Research Questions
- SPA 컴포넌트의 수명 주기(lifecycle) 동안 발생하는 메모리 누수의 구체적인 패턴(예: 이벤트 리스너 누적, 클로저 참조 등)을 어떻게 효과적으로 추적하고 프레임워크별(React, Vue 등)로 어떻게 예방할 수 있는가? [1, 9]
- 확장 가능한 대규모 SPA를 구축할 때, 기술적 역할 기반의 분리(MVC)가 아닌 기능(Feature) 기반의 계층형 디렉토리 구조(FSD)를 채택함으로써 얻는 유지보수성과 의존성 관리의 이점은 무엇인가? [5, 8, 10, 11]
- SPA에서 전역 상태 관리를 위해 기본 Context API를 사용할 때 발생하는 불필요한 리렌더링 문제를 Zustand나 Redux 같은 상태 관리 도구가 내부적으로 어떻게 해결하는가? [12, 13]
- SPA의 번들 크기를 줄이고 초기 로딩 성능(LCP, FCP 등)을 개선하기 위한 경로 기반의 코드 스플리팅(Code Splitting)과 지연 로딩(Lazy Loading) 전략은 실제 빌드 도구(Vite 등) 환경에서 어떻게 구현되는가? [14-16]
- SPA와 대비되는 SSR(Server Side Rendering) 또는 Native 모바일 앱 구조는 어떠한 프로젝트 요구사항에 따라 선택되어야 하는가? [2]

### Practical Application Contexts
- **Implementation:** SPA 컴포넌트가 언마운트(unmount)될 때 이벤트 리스너나 구독(subscription)이 제대로 제거되지 않으면 메모리 누수가 지속적으로 누적되므로, React의 경우 `useEffect`의 반환(cleanup) 함수에서 적절한 정리 작업을 구현해야 합니다 [1, 9, 17].
- **System Design:** 대규모 SPA 시스템 설계 시 Feature-Sliced Design(FSD) 원칙을 도입하여, 각 기능(Feature)이 명확한 퍼블릭 API(`index.ts`)를 통해서만 외부 모듈과 통신하도록 캡슐화함으로써 모듈 간 결합도(Coupling)를 낮추고 예측 가능한 시스템을 설계해야 합니다 [18-20].
- **Operation / Maintenance:** 운영 중인 SPA에서 사용 시간이 길어짐에 따라 성능이 지속적으로 저하되거나 브라우저 탭이 멈추는 현상이 보고될 경우, Chrome DevTools의 Heap Snapshot이나 Allocation Timeline을 활용해 점진적으로 증가하는 메모리 누수를 찾아 디버깅해야 합니다 [21-23].
- **Learning Path:** 소스에 관련 정보가 부족합니다.
- **My Project Relevance:** 소스에 관련 정보가 부족합니다.

### Adjacent Topics
- [[Feature-Sliced Design (FSD)]]
  - 확장 방향: SPA가 비대해질 때 발생하는 구조적 복잡성을 해결하기 위해, 계층(Layer), 슬라이스(Slice), 세그먼트(Segment)로 코드를 나누고 단방향 의존성을 강제하는 방법론 탐구 [5, 7].
- [[React Performance Optimization]]
  - 확장 방향: 대규모 SPA에서 빈번하게 일어나는 렌더링 병목 현상을 제어하기 위한 `React.memo`, `useCallback`, 가상화(Virtualization), 그리고 React Compiler를 활용한 빌드 타임 메모이제이션 기법 학습 [24-26].
- [[State Management Libraries]]
  - 확장 방향: SPA 내에서 데이터 흐름을 효율적으로 관리하기 위해 Context API, Zustand, Redux의 아키텍처적 차이와 프로젝트 규모에 따른 올바른 도구 채택 기준 비교 [27-29].

---
*Last updated: 2026-04-30*