Web
기초 개념에서 내부 동작과 재현 가능한 실험으로 깊이를 늘려갑니다.
React 공통 모델
1편부터 22편까지 순서대로 이어지는 학습 경로입니다.
- 1. foundation
React 렌더링의 입력: 컴포넌트는 무엇으로 다음 UI를 계산하는가
부모가 준 값, 컴포넌트가 기억한 값과 트리에서 공유된 값을 구분하고, 화면을 바꿔야 하는 데이터를 파일 바깥 변수에 둘 때 생기는 실패를 설명한다.
- 2. foundation
React Render와 Commit: 함수 실행과 화면 반영은 어떻게 다른가
컴포넌트가 다시 실행된 사실과 실제 화면 요소가 변경된 사실을 구분하고, 계산 중 외부 작업을 실행할 때 생기는 중복과 잘못된 진단을 설명한다.
- 3. foundation
React 상태와 객체 동일성: 속성이 바뀌어도 왜 같은 상태일 수 있는가
상태 설정에서 이전 값과 다음 값을 비교하는 기준을 객체의 내부 내용과 구분하고, 같은 객체를 다시 전달해 화면 갱신 신호를 잃는 실패를 진단한다.
- 4. foundation
React 상태의 불변 업데이트: Undo가 이전 값으로 돌아가게 하려면
바깥 객체만 복사하고 중첩 배열 항목을 직접 바꿀 때 과거 상태까지 훼손되는 이유를 확인하고, 변경 경로만 새로 만드는 업데이트를 설계한다.
- 5. foundation
React Effect의 역할: 채팅 연결을 렌더링에서 분리하는 이유
채팅 연결, 메시지 전송과 남은 글자 계산을 한 컴포넌트에서 구분하며 React Effect가 필요한 경계를 판단한다.
- 6. foundation
React Effect 정리: 주문을 바꿨는데 이전 위치가 다시 보이는 이유
Effect가 시작한 배송 위치 구독을 의존성 변경과 화면 제거 전에 끝내고, 타이머·이벤트·요청의 정리 계약을 판단한다.
- 7. foundation
React와 오래된 클로저: 자동 저장이 최초 초안만 읽는 이유
Render마다 만들어진 callback이 어떤 상태 스냅샷을 기억하는지 확인하고, 입력마다 다시 예약할지 고정 주기로 최신 값을 읽을지 의도에 맞춰 선택한다.
- 8. foundation
React useMemo: 상품 필터 계산을 정말 재사용해야 하는가
관련 없는 테마 변경에도 느린 상품 필터가 반복되는지 측정하고, 의존성이 같을 때 계산 결과를 재사용한 뒤 같은 상호작용을 다시 비교한다.
- 9. foundation
React useCallback: 같은 제출 함수가 느린 자식을 다시 그리게 할 때
테마 변경 때 새 함수 prop 때문에 memo 자식이 다시 Render되는지 측정하고, 필요한 동일성 경계에서만 callback 참조를 재사용한다.
- 10. foundation
React 공용 컴포넌트 계약: 내부 구조 대신 사용 의도를 props로 표현하기
계정 삭제 행동을 범용 클릭 요소로 노출했을 때 생기는 실패를 관찰하고, 같은 의도를 Web과 React Native의 올바른 기본 요소로 번역한다.
- 11. foundation
React 제어와 비제어 입력: 현재 폼 값은 누가 소유하는가
defaultValue와 React 값이 서로 달라지는 닉네임 복원 실패를 따라가며, 입력 중 조정이 필요한 값과 제출할 때만 읽을 값을 구분한다.
- 12. foundation
React 클라이언트 상태와 서버 상태: useState에 있어도 원본은 서버일 수 있다
프로필 편집값을 저장된 서버 데이터처럼 표시했다가 다시 읽을 때 되돌아오는 실패를 통해, 서버 확인 사본과 로컬 편집 초안을 분리한다.
- 13. core
TanStack Query 최신성: staleTime은 언제 다시 확인할 수 있게 하는가
재고 사본을 30분마다 요청한다고 오해해 오래된 수량을 보여 주는 실패를 관찰하고, 허용 가능한 오차 시간과 다시 가져오기 계기를 분리한다.
- 14. core
TanStack Query 보존: gcTime은 화면을 떠난 데이터를 언제 지우는가
상품 미리보기를 닫았다 다시 열 때마다 로딩이 반복되는 실패를 관찰하고, 비활성 Query의 재사용 가치와 메모리 비용으로 보존 시간을 정한다.
- 15. core
서버 변경 경쟁 상태: 늦게 끝난 요청이 최신 값을 덮지 않게 하려면
서울 다음 부산 배송지를 저장했지만 느린 서울 응답이 마지막에 도착해 되돌아가는 실패를 재현하고, 직렬 실행과 서버 버전 조건의 책임을 나눈다.
- 16. core
낙관적 업데이트: 먼저 바꾼 캐시는 실패할 때 어떻게 복구하는가
관심상품 추가가 즉시 성공한 것처럼 보였지만 서버 거절 뒤에도 남는 실패를 재현하고, 읽기 취소·이전 사본·임시 반영·복구·재확인의 순서를 연결한다.
- 17. core
React 서버 컴포넌트: 서버에서 실행한 컴포넌트는 브라우저에 무엇을 보내는가
노트 파일 읽기와 화면 펼치기를 한 컴포넌트에 섞지 않고, 서버에서 만든 렌더 결과와 브라우저 상호작용 코드를 분리해 RSC와 SSR의 차이를 확인한다.
- 18. core
React 서버·클라이언트 경계: use client는 어디에 두어야 하는가
상품 본문 전체를 클라이언트 코드로 보내지 않고, 보기 상태와 localStorage가 필요한 작은 진입점만 분리해 import 방향과 prop 전송 계약을 검증한다.
- 19. core
API 응답과 뷰 모델: 서버 필드가 바뀌어도 화면 계약을 지키려면
상품 응답의 필드·중첩·상태 값 변경이 화면 전체로 번지는 실패를 재현하고, 순수 mapper와 TanStack Query select로 캐시 원본과 화면 모델의 경계를 선택한다.
- 20. core
런타임 입력 검증: TypeScript 타입만으로 API 응답을 믿을 수 없는 이유
200 응답의 실제 JSON이 TypeScript 선언과 다른 실패를 재현하고, 확인되지 않은 입력을 Zod 스키마로 검증해 Query 오류와 화면 계약의 경계를 세운다.
- 21. core
컴포넌트 테스트: 실제 브라우저 없이 사용자 행동을 어디까지 검증할 수 있는가
저장 함수만 직접 호출하는 테스트가 놓치는 버튼 연결 실패를 재현하고, jsdom에서 실제 React 컴포넌트의 입력·제출·비동기 상태 전이를 사용자 관점으로 검증한다.
- 22. core
브라우저 흐름 테스트: 컴포넌트 테스트가 놓치는 연결을 어떻게 검증하는가
컴포넌트 테스트가 통과해도 API 경로와 페이지 이동이 끊길 수 있는 사례를 실제 Chromium에서 재현하고, 브라우저 테스트가 증명하는 범위와 남는 서버 경계를 구분한다.
다른 문서
- foundation
자바스크립트에서 같다는 것: ===, Object.is, 객체 동일성
===와 Object.is가 일반 값, 유효한 숫자가 아님을 나타내는 NaN, 부호가 다른 0, 객체를 어떻게 다르게 비교하는지 예측하고 목적에 맞는 규칙을 선택한다.
- core
자바스크립트 불변성: const, 복사, Object.freeze, React 상태
const가 이름의 재대입을 막는 범위, 복사가 중첩 객체를 다루는 범위, Object.freeze가 속성을 제한하는 범위, React에서 새 상태를 전달하는 규칙을 구분한다.
- foundation
자바스크립트의 값과 객체: 변수에는 무엇이 들어 있는가
표현식이 만드는 값, 이름과 값의 연결, 원시 값과 객체의 차이를 차례로 익혀 공유된 객체의 변경과 함수 인수의 동작을 주소나 포인터 비유 없이 예측한다.
- foundation
프론트엔드 비용 모델: 시간, 바이트와 관측량을 어떻게 비교할 것인가
총액만 보지 않고 검증한 변경·콜드 세션·성공 흐름 한 단위당 빌드 시간, 저장·전송 바이트와 관측 자료량을 같은 경계에서 비교한다.
- foundation
관측성 신호: 숫자에서 원인까지 어떤 증거를 따라갈 것인가
로그·오류·메트릭·트레이스·프로파일이 답하는 질문을 구분하고, 공통 문맥으로 연결해 사용자 문제를 릴리스와 코드 위치까지 좁힌다.
- foundation
샘플링과 카디널리티: 문제 단서는 남기고 데이터 폭증은 막는 법
샘플링이 남길 사건 수를 줄이는 일이고 카디널리티 관리가 분류 조합 수를 줄이는 일임을 구분해, 진단 가능성과 관측 비용을 함께 설계한다.
- deep-dive
가변 높이 가상 스크롤: 렌더링 범위 계산에서 스크롤 보정까지
고정 높이 목록의 보이는 범위를 손으로 계산하는 데서 시작해, 실제 높이를 측정하고 누적 위치와 스크롤을 보정하는 전체 순환을 단계별로 살펴본다.
- foundation
배포 산출물의 동일성과 승격: 테스트한 것을 그대로 배포했는가
산출물과 파일 묶음을 다이제스트로 식별하고, 검증 결과와 환경 기록을 같은 식별자에 연결해 재빌드 없이 다음 환경으로 승격한다.
- foundation
반복 작업 자동화와 공통 도구 계약: 무엇을 입력받고 어떻게 실패해야 하는가
명령줄 인터페이스(CLI)와 공통 도구를 입력 수집, 정규화, 검증, 계획, 적용, 확인, 결과 보고로 나누고 함께 의존할 계약을 설계한다.
- foundation
빌드 캐시: 이전 결과를 언제 다시 써도 되는가
결과에 영향을 주는 작업 정의와 입력을 캐시 키에 빠짐없이 담고, 올바른 적중·미적중을 구분하며, 로컬·공유 캐시의 출력 복원과 신뢰 경계를 판단한다.
- foundation
코드 분할과 트리 셰이킹: 언제 나누고 무엇을 뺄까
코드 분할은 코드를 받는 시점을 나누고 트리 셰이킹은 필요 없는 코드를 출력에서 제외한다는 차이를 이해하고, React와 React Native에서 실제 산출물을 판단한다.
- foundation
CI와 CD: 변경은 어떻게 검증되어 사용자에게 전달되는가
변경, 검증, 산출물, 환경 배포와 사용자 공개를 나누고 각 단계의 입력·출력·통과 조건으로 신뢰할 수 있는 전달 흐름을 설계한다.
- foundation
프레임워크와 의존성 업그레이드: 무엇을 함께 바꾸고 어떻게 증명할 것인가
버전 숫자가 아니라 목표 호환 조합을 정하고, 변경 기록과 잠금 파일로 실제 차이를 읽으며, 고정 픽스처와 회귀 검증으로 한 경계씩 이동한다.
- foundation
모듈 그래프: 빌드 도구는 어떤 파일이 필요한지 어떻게 찾는가
진입점에서 정적 import를 따라가며 모듈과 의존 관계를 발견하는 과정을 작은 예제로 익히고, 예상하지 못한 코드가 포함되거나 빠졌을 때 확인할 지점을 찾는다.
- foundation
모듈 해석: import 문은 어떤 파일을 가리키는가
import 문자열, 가져오는 파일의 위치, 패키지 공개 범위와 환경 조건을 분리해 보고 모듈을 찾지 못했을 때 확인할 순서를 익힌다.
- foundation
재현 가능한 빌드: 같은 소스는 왜 같은 산출물을 보장하지 않는가
소스·환경·빌드 지침과 비교할 산출물의 경계를 정하고, 시간·경로·순서·난수 같은 숨은 입력을 통제한 뒤 독립 재빌드 결과의 바이트를 비교하는 방법을 배운다.
- foundation
소스 맵: 실행 중 보고된 위치를 원본 코드로 어떻게 되돌리는가
실행 중 보고된 생성 코드의 줄과 열을 원본 TypeScript·JSX 위치로 연결하는 소스 맵의 좌표 구조를 이해하고, 정확한 코드와 맵을 짝지어 오류 위치를 복원한다.
- foundation
테스트 피라미드: 실패를 어느 테스트에 맡길 것인가
막으려는 실패를 먼저 정하고, 그 실패를 관찰하는 데 필요한 실제 경계 중 가장 작은 테스트를 선택해 빠른 피드백과 실제 환경 신뢰를 함께 설계한다.
- foundation
변환과 번들링: TypeScript와 JSX는 어떻게 실행 가능한 파일이 되는가
TypeScript와 JSX가 실행 대상 코드로 바뀌는 과정과 여러 파일의 관계가 전달할 결과로 표현되는 과정을 분리해 이해하고, 빌드 실패가 생긴 단계를 판단한다.
- foundation
Webpack·Vite·Metro: 같은 빌드 책임을 어떻게 다르게 수행하는가
세 도구를 입력 맥락·찾기·표현 바꾸기·출력·개발 피드백이라는 같은 책임으로 비교하고, Web과 React Native의 설정과 실패를 올바른 책임에 연결한다.