[목 차]
▣ 00장: 환경 구성
0.0 프로그램 설치
__0.0.0 크롬 브라우저 설치
__0.0.1 Node.js와 npm 설치
__0.0.2 비주얼 스튜디오 코드 설치
0.1 프로젝트 환경 구성
__0.1.0 설정 완료 코드 활용
__0.1.1 Vite + TanStack Router 프로젝트 생성
__0.1.2 프로젝트 시작
__0.1.3 초기화 및 기본 환경 설정
__0.1.4 공통 코드 수정
__0.1.5 경로 처리
0.2 순수 자바스크립트 실행기
▣ 01장: 아코디언
1.0 공통 코드 작성
1.1 첫 번째 아코디언
1.2 CSS로 숨김/보임 처리
1.3 CSS 애니메이션 추가
__1.3.0 기본 애니메이션
1.4 순수 자바스크립트 버전
1.5 HTML만으로 작성
__1.5.0 radio input
__1.5.1 details
1.6 ctrl+F 검색 기능 추가
1.7 심화 - 명령형 프로그래밍과 선언형 프로그래밍
__1.7.0 명령형 프로그래밍
__1.7.1 선언형 프로그래밍
__1.7.2 두 패러다임 비교
1.8 정리
▣ 02장: 탭메뉴
2.0 공통 코드 작성
2.1 첫 번째 탭메뉴
2.2 CSS로 숨김/보임 처리
2.3 CSS 애니메이션 추가
__2.3.0 간단한 애니메이션 - transition
__2.3.1 복잡한 애니메이션 - animation
__2.3.2 애니메이션 종료 시 클래스 제거하기
2.4 순수 자바스크립트 버전
2.5 HTML만으로 작성 - radio input
2.6 정리
▣ 03장: 툴팁
3.0 공통 코드 작성
3.1 터치 또는 클릭으로 동작하는 툴팁
3.2 최대 하나의 툴팁만 열려 있도록 처리
__3.2.0 툴팁을 열 때 기존 툴팁을 모두 닫기 - context API 활용
__3.2.1 다른 곳 클릭 시 툴팁 모두 닫기 - 이벤트 핸들러
__3.2.2 HTML만으로 작성 - details
3.3 화면을 벗어나지 않도록 처리 (1) – 직접 계산
__3.3.0 viewportContext
__3.3.1 scroll 이벤트 관찰 대상과 resize 관찰 대상 분리하기
__3.3.2 일반 HTML 요소에 대한 좌표 정보
__3.3.3 useStyleInsideViewport 훅
__3.3.4 마무리 – 코드 적용하기
3.4 화면을 벗어나지 않도록 처리 (2) – anchor positioning
3.5 순수 자바스크립트 버전
__3.5.0 컨텍스트 대체하기 – 옵서버 패턴
__3.5.1 훅 대체하기 – 역할 축소
__3.5.2 툴팁 컴포넌트
3.6 정리
▣ 04장: 반응형 텍스트박스
4.0 공통 코드 작성
4.1 canvas로 높이 계산
4.2 레플리카 기법
4.3 원본의 scrollHeight로 조절
4.4 순수 자바스크립트 버전
4.5 정리
▣ 05장: 여러줄 말줄임
5.0 공통 코드 작성
5.1 canvas로 줄 수 계산
5.2 레플리카 기법
5.3 원본의 scrollHeight로 조절
5.4 순수 자바스크립트 버전
5.5 정리
▣ 06장: 폼 제어
6.0 공통 코드 작성
6.1 숫자 구분 기호 자동 완성 인풋
__6.1.0 구분 기호를 표기하는 방법
__6.1.1 사용자 입력 즉시 구분 기호 삽입하기
__6.1.2 커서 이동 및 백스페이스 문제 해결
__6.1.3 최초 포커스 시 커서 이동시키기
__6.1.4 유효성 검사
6.2 복잡한 폼 제어
__6.2.0 제어 컴포넌트 vs 비제어 컴포넌트, 제어 폼 vs 비제어 폼
__6.2.1 비제어 폼
__6.2.2 제어 폼
6.3 커스텀 훅
6.4 정리
▣ 07장: 지연 로딩
7.0 공통 코드 작성
7.1 직접 계산
__7.1.0 기본 코드 작성
__7.1.1 화면 안에 있는지 판단하기
7.2 Intersection Observer (+ native)
__7.2.0 Intersection Observer 훅 적용
__7.2.1 HTML loading 속성 활용
7.3 순수 자바스크립트 버전
__7.3.0 useIntersectionObserver 훅 대체하기
__7.3.1 지연 로딩 함수
__7.3.2 지연 로딩 이미지 컴포넌트
7.4 미리 보기 제공
7.5 정리
▣ 08장: 페이지네이션과 무한 스크롤
8.0 공통 코드 작성
8.1 전통적인 페이지네이션 - 내비게이션 바
__8.1.0 기본 구성
__8.1.1 서버 응답 시간 Mocking하기
__8.1.2 훅으로 추출
__8.1.3 내비게이션 바 컴포넌트 분리
__8.1.4 최대 페이지 제한 기능 추가
__8.1.5 최대 페이지를 알 수 없는 경우
8.2 무한 스크롤
__8.2.0 무한 스크롤 기능 구현
__8.2.1 원인 분석 및 문제 해결
8.3 순수 자바스크립트 버전
8.4 무한 스크롤 성능 최적화
__8.4.0 Windowing #1
__8.4.1 Windowing #2
__8.4.2 CSS content-visibility: auto;
8.5 정리
▣ 09장: 캐러셀
9.0 공통 코드 작성
9.1 기본 캐러셀
9.2 스크롤 박스
__9.2.0 화면 단위로 이동하는 스크롤 박스
__9.2.1 스크롤 박스 캐러셀
__9.2.2 기본 캐러셀 vs. 스크롤 박스
9.3 무한 캐러셀
9.4 심화 - 3D 캐러셀
9.5 정리
▣ 10장: 스크롤 스파이
10.0 공통 코드 작성
10.1 스크롤 이벤트
10.2 Intersection Observer
10.3 내비게이션에 스크롤 박스 적용
__10.3.0 스크롤 박스 컴포넌트 분리
__10.3.1 스크롤 초점 이동 1안 - ScrollBox에서 자동으로 수행
__10.3.2 스크롤 초점 이동 2안 - 상위 컴포넌트에서 명령
10.4 정리
▣ 11장: 스낵바
11.0 공통 코드 작성
11.1 순수 자바스크립트 버전
11.2 Context
11.3 Portal
__11.3.0 Portal을 컴포넌트에서 호출
__11.3.1 portal을 훅에서 전달
11.4 정리
▣ 12장: 모달
12.0 공통 코드 작성
12.1 Context
__12.1.0 컴파운드 컴포넌트 Compound Component
__12.1.1 modalContext 및 useModal 훅
__12.1.2 실제 모달 컴포넌트 작성 및 적용
__12.1.3 스크롤 이슈 파악 및 해결
__12.1.4 데이터 동기화 문제
12.2 createPortal + context + HOC
__12.2.0 기본 동작 구현
__12.2.1 스크롤 이슈 해결
12.3 순수 자바스크립트 버전
12.4 HTML dialog (1)
12.5 컨텍스트 외부에서 모달 호출
__12.5.0 외부에서 제어 가능하도록 만들기
__12.5.1 모달을 열 때 값 전달 가능하도록 변경
12.6 정리
▣ 13장: 팝오버
13.0 공통 코드 작성
13.1 콘텐츠 내부에서 그대로 렌더링
13.2 createPortal
13.3 HTML dialog
13.4 popover 속성
13.5. 정리
▣ 14장: 드롭다운
14.0 공통 코드 작성
14.1 컴파운드 컴포넌트
__14.1.0 기본 기능 구현
__14.1.1 외부 클릭 시 닫힘 처리 (1)
__14.1.2 외부 클릭 시 닫힘 처리 (2)
__14.1.3 키보드 입력 시 기능 구현
14.2 헤드리스 컴포넌트 Headless Component HTML dialog
__14.2.0 render 패턴
__14.2.1 훅 패턴
__14.2.2 컴파운드 컴포넌트 vs. 헤드리스 컴포넌트
14.3 createPortal
14.4 정리
▣ 15장: 자동완성
15.0 공통 코드 작성
15.1 정적인 자동완성
15.2 네트워크 요청에 의한 자동완성
15.3 정리
▣ 16장: 갤러리
16.0 공통 코드 작성
16.1 컴포넌트 재활용 – 지연로딩, 스크롤박스,
16.2 모달, 캐러셀
16.3 라이트박스 갤러리
16.4 정리
▣ 17장: 심화 - 경로 처리
17.0 경로 처리를 위한 routes 하위 컴포넌트
17.1 경로-컴포넌트 매핑
__17.1.0 중첩 객체(nested object)로 구성
__17.1.1 단일 깊이의 객체로 구성
__17.1.2 GNB 컴포넌트
17.3 routeMap 파일 수정 - 최종 코드
▣ 부록: 의존 파일 모음
