이 지도는 선행 관계, 학습 깊이, 맥락을 보여줍니다. 처음부터 끝까지 따라가거나, 현재 수준에서 시작하거나, 알고리즘을 병행하는 내비게이션으로 사용하세요.
선행 개념이 이미 자연스럽다면 반드시 01단계부터 시작할 필요는 없습니다.
Scope, Closures, Prototypes, 비동기 동작, Browser APIs가 아직 고르게 익숙하지 않다면 이 지점이 좋습니다.
01단계부터 시작 →JavaScript가 익숙함Closures, Promises, Event Loop, Objects, Modules를 큰 어려움 없이 설명할 수 있다면 이 경로를 사용하세요.
03단계부터 시작 →이미 React 앱을 만들고 있음Render 주기, Effects, Refs, Context, Composition, Server/Client 경계가 이미 자연스럽다면 이 지점에서 시작하세요.
05단계부터 시작 →세션 수는 규모를 가늠하기 위한 기준일 뿐입니다. 유용하거나 흥미로운 주제에서는 더 오래 머물러도 됩니다.
프레임워크의 복잡도를 더하기 전에 Values, Scope, Functions, Objects, Prototypes, Coercion, Modules에 대한 신뢰할 수 있는 멘탈 모델을 만드세요.
React와 Next.js는 계속 JavaScript 동작에 의존합니다. 이 레이어가 흐리면 프레임워크 규칙이 임의적으로 느껴집니다.
JavaScript 코드가 무엇을 출력하는지뿐 아니라 왜 그렇게 동작하는지 설명할 수 있습니다.
Scope, References, Object Lookup을 추측하지 않고 낯선 코드를 읽을 수 있습니다.
문법에서 Runtime 동작으로 넘어갑니다: Event Loop, Promises, async/await, 네트워크, DOM, Storage, 오류, 성능.
어려운 프런트엔드 버그의 대부분은 문법보다 Timing, Lifecycle, Network, Browser State 문제입니다.
비동기 코드의 실행 순서를 추적하고 Microtasks와 Tasks를 구분할 수 있습니다.
Cancellation, Cleanup, Storage, Event Propagation, 성능 비용 같은 브라우저 이슈를 인식할 수 있습니다.
긴 저장소 답변 사이에서 더 짧고 선별된 설명이 필요할 때 JavaScript 노트를 사용하세요.
React를 Hooks 모음이 아니라 Rendering 모델로 배우세요. Components, State, Identity, Render/Commit, Events, Composition부터 시작합니다.
Render 모델이 명확해지면 Hooks는 고립된 규칙이 아니라 예측 가능한 도구가 됩니다.
무엇이 Render를 유발하고 React가 Render 사이에서 무엇을 유지하거나 초기화하는지 설명할 수 있습니다.
습관이 아니라 Data Flow를 기준으로 컴포넌트 경계와 State Ownership을 선택할 수 있습니다.
Synchronization, Escape Hatches, Shared State, Memoization, Suspense, Server Components, Routing, Testing, Legacy Context를 더 깊게 학습합니다.
여기서부터 프로덕션 React는 아키텍처 문제입니다. 또 하나의 API를 아는 것보다 올바른 경계를 선택하는 일이 더 중요합니다.
Effect가 필요한 때와 Derived State 또는 Event Handler가 더 나은 때를 구분할 수 있습니다.
성능과 State Management 선택을 고정된 정답이 아니라 트레이드오프로 설명할 수 있습니다.
React 라이브러리에서 Custom Hooks 또는 Project Patterns로 이동해 개념이 코드에서 어떻게 조립되는지 확인하세요.
아키텍처 관점에서 App Router를 학습합니다: Layouts, React Server Components, Client 경계, Route Handlers, Server Actions, Caching, Streaming, Metadata, Rendering 선택.
Next.js 혼란의 대부분은 Browser, React, Server, Cache, Request-time 관심사를 섞는 데서 옵니다. 이 단계는 그 레이어를 분리합니다.
코드가 어디에서 실행되어야 하는지 결정하고 그 경계가 왜 중요한지 설명할 수 있습니다.
Static, Dynamic, Cached, Streamed, Mutation 흐름을 서로 무관한 기능처럼 보지 않고 비교할 수 있습니다.
JavaScript 기초가 익숙해지면 이 트랙을 병행하세요. 자료구조, 검색, 정렬, Recursion, Hashing, 복잡도부터 시작합니다.
알고리즘을 외워야 할 퍼즐이 아니라 표현 방식과 트레이드오프의 선택으로 보면 더 쉬워집니다.
Access, Insertion, Ordering, 메모리 요구사항에 따라 자료구조를 선택할 수 있습니다.
암기한 코드가 아니라 Invariants, 단계, 복잡도로 알고리즘을 설명할 수 있습니다.
개별 알고리즘에서 재사용 가능한 패턴으로 이동합니다: Traversal, Shortest Paths, Connectivity, Greedy, Backtracking, Memoization, Dynamic Programming.
먼저 문제 유형을 식별하고 그다음 구체적인 알고리즘을 고르면 고급 문제도 다루기 쉬워집니다.
코드를 쓰기 전에 Graph, Greedy, Backtracking, DP 문제 형태를 인식할 수 있습니다.
여러 유효한 해법을 비교하고 특정 Constraint에서 왜 하나가 더 적합한지 설명할 수 있습니다.
최종 시험은 없습니다. 이 단계에서 이제 서로 연결되는 주제를 다시 살펴보세요: Closures와 Hooks, Event Loop와 Effects, Caching과 Next.js, Trees와 UI, Complexity와 Performance.
숙련은 연결에서 나옵니다. 하나의 개념을 언어, 프레임워크, 아키텍처, 알고리즘 관점에서 볼 수 있을 때 오래 남습니다.
저수준 JavaScript 동작과 고수준 애플리케이션 아키텍처 사이를 오갈 수 있습니다.
전체 경로를 다시 시작하지 않고도 약하거나 흥미로운 영역을 다시 방문할 수 있는 지도를 갖게 됩니다.
일정표가 아닙니다. 수동적인 스크롤과 과도한 학습 세션을 피하기 위한 방법일 뿐입니다.
하나의 개념과 완전한 답변부터 시작하세요. 양을 최적화하지 마세요.
작은 예제를 한 줄씩 읽고 각 줄을 개념과 연결하세요.
관련 주제 하나를 따라가며 개념을 고립된 사실이 아니라 네트워크의 일부로 만드세요.
간격을 두고 다시 읽는 것은 유용합니다. 한 번에 하나의 서가를 끝낼 필요는 없습니다.
멘탈 모델을 이해하고 작은 예제로 설명할 수 있어야 합니다.
일반적인 트레이드오프, 엣지 케이스, 실제 코드에서 어떻게 나타나는지 알아두세요.
업무나 호기심과 관련된 주제라면 내부 동작이나 고급 변형까지 읽어보세요.
길을 잃었다고 느낄 때마다 이 페이지로 돌아오세요. 가장 가까운 명확한 선행 개념을 고르고 조금 읽은 뒤, 자연스럽게 이어지는 연결을 따라가세요.