WEB & WEBAPP
Frontend (React)
브라우저가 코드를 화면으로 그려내는 과정부터, 컴포넌트가 상태를 받아 다시 그려지는 흐름까지 데이터가 흐르는 방향을 눈으로 좇는 훈련입니다. React 문법을 외우는 것이 아니라 “왜 이 시점에 리렌더링이 일어나는가”를 스스로 설명할 수 있게 되는 것이 목표입니다.
전체 12건
1. OT
HTML/CSS/JS가 화면이 되기까지의 파이프라인을 먼저 그리고 12주 로드맵을 확인합니다
브라우저가 HTML을 DOM 트리로, CSS를 CSSOM 트리로 파싱한 뒤 이 둘을 합쳐 렌더 트리를 만들고 화면에 그리는 전체 파이프라인을 다이어그램으로 살펴봅니다. 앞으로 12주 동안 어떤 순서로 개념이 쌓이는지 미리 확인해 학습 방향을 잡습니다.
2. HTML/CSS 구조화
의미를 담은 태그 선택과 Flexbox/Grid로 레이아웃을 구성하는 기초를 다집니다
div만으로 쌓은 마크업과 header/nav/main/section 같은 시맨틱 태그를 비교하며 왜 의미 있는 구조가 접근성·SEO에 영향을 주는지 확인합니다. Flexbox의 주축/교차축 개념과 Grid의 2차원 배치를 실습으로 익혀 박스 모델을 완전히 통제하는 감각을 기릅니다.
3. JavaScript 핵심 문법과 이벤트 루프
클로저와 비동기 처리, 이벤트 루프가 UI를 막지 않고 동작하는 원리를 이해합니다
함수가 자신이 정의된 스코프를 기억하는 클로저의 동작을 직접 확인하고, 콜백·프로미스·async/await로 비동기 코드를 다루는 세 가지 방식을 비교합니다. 콜스택·태스크 큐·마이크로태스크 큐가 이벤트 루프 안에서 어떻게 실행 순서를 결정하는지 시각 자료로 추적합니다.
4. DOM 조작과 이벤트 처리
순수 JS로 DOM 트리를 직접 다루고, 이벤트 위임 패턴으로 효율적으로 처리합니다
createElement/appendChild 같은 DOM API로 화면을 직접 조작해보며 React가 내부적으로 무엇을 대신 해주는지 체감합니다. 자식 요소마다 리스너를 다는 대신 부모에서 이벤트를 위임받아 처리하는 패턴으로 리스너 수를 줄이는 이유도 함께 다룹니다.
5. 네트워크 요청과 데이터 흐름 (fetch)
클라이언트와 서버가 데이터를 주고받는 왕복 과정과 로딩·에러 상태 관리를 다룹니다
fetch로 서버에 요청을 보내고 응답을 받는 과정을 네트워크 탭으로 직접 관찰하며, 요청이 진행 중일 때와 실패했을 때 화면에 무엇을 보여줘야 하는지 상태별로 설계합니다. 이 흐름이 이후 React의 데이터 페칭 패턴의 기초가 됩니다.
6. React 컴포넌트와 JSX
컴포넌트 기반으로 UI를 나누고, props로 데이터를 아래로 흘려보내는 단방향 흐름을 익힙니다
화면을 재사용 가능한 컴포넌트 단위로 쪼개는 기준을 세우고, JSX가 실제로는 React.createElement 호출로 컴파일된다는 사실을 확인합니다. 부모가 props로 자식에게 데이터를 전달하는 단방향 데이터 흐름이 왜 예측 가능한 UI를 만드는지 다룹니다.
7. 상태 관리 (useState / useReducer)
상태 변화가 리렌더링을 트리거하는 원리와 불변성을 지켜야 하는 이유를 다룹니다
setState 호출이 왜 즉시 값을 바꾸지 않고 다음 렌더링을 예약하는 방식으로 동작하는지 확인하고, 객체·배열 상태를 직접 수정하지 않고 새로 만들어야 하는 이유(불변성)를 버그 재현으로 체감합니다. 복잡한 상태 전이는 useReducer로 옮겨 액션 기반으로 관리하는 패턴도 다룹니다.
8. 사이드 이펙트와 useEffect
컴포넌트 생명주기에 맞춰 구독·타이머·데이터 페칭 같은 부수효과를 안전하게 다룹니다
useEffect의 의존성 배열이 언제 이펙트를 다시 실행할지 결정하는 원리를 직접 실험하고, 클린업 함수로 구독을 해제하지 않아 발생하는 메모리 누수를 재현해봅니다. 렌더링 로직과 부수효과를 분리해야 컴포넌트가 예측 가능해지는 이유를 정리합니다.
9. 전역 상태와 Context
prop drilling 문제를 확인하고 Context API로 여러 컴포넌트가 상태를 공유하는 법을 익힙니다
깊은 컴포넌트 트리에 props를 계속 전달해야 하는 prop drilling의 불편함을 직접 겪어본 뒤, Context API로 중간 단계를 건너뛰고 상태를 공유하는 방법을 익힙니다. Context 남용이 리렌더링 범위를 넓힐 수 있다는 트레이드오프도 함께 다룹니다.
10. 라우팅과 페이지 구조 (React Router)
SPA에서 URL과 화면 상태를 동기화하는 방법과 페이지 단위 코드 분할을 다룹니다
페이지 전체를 새로고침하지 않고 URL만 바뀌는 SPA 라우팅의 원리(History API)를 이해하고, 라우트별로 컴포넌트를 지연 로딩해 초기 번들 크기를 줄이는 코드 분할까지 실습합니다.
11. 폼 처리와 검증
제어 컴포넌트 패턴으로 입력을 관리하고, 사용자 입력을 검증해 에러를 표시합니다
input의 value를 상태로 제어하는 제어 컴포넌트 패턴을 익히고, 제출 시점과 입력 중 실시간으로 검증 결과를 보여주는 두 가지 전략의 UX 차이를 비교합니다. 에러 메시지를 접근성 있게 노출하는 방법도 함께 다룹니다.
12. 미니 프로젝트
API에서 받은 데이터를 컴포넌트 트리로 흘려보내는 대시보드 UI를 직접 설계·구현합니다
12주 동안 배운 컴포넌트 설계·상태 관리·비동기 데이터 페칭·라우팅을 하나로 엮어, 외부 API 데이터를 여러 위젯 컴포넌트로 나눠 보여주는 대시보드를 처음부터 구현합니다. 로딩·에러·빈 상태까지 빠짐없이 설계해 실전 감각을 기릅니다.