프런트엔드 UI의 핵심, 순수 자바스크립트부터 리액트 심화 패턴까지!

프런트엔드 개발은 단순한 라이브러리 활용을 넘어, 브라우저 메커니즘을 이해하고 제어하는 과정입니다. 다만 매일 쓰는 React 훅과 컴포넌트 이면에 있는 순수 자바스크립트(Web API)의 작동 원리와 효율적인 UI 설계 구조를 제대로 이해하기는 쉽지 않습니다.

 

이 책은 같은 UI를 React와 순수 자바스크립트 두 방식으로 구현하며, 각 접근법의 장단점을 비교해 이해할 수 있도록 돕습니다. 나아가 현대 프레임워크 환경 속에서 자바스크립트 생태계를 다루는 데 필요한 실무 통찰을 제공합니다.

 

《코어 프런트엔드 UI》는 기능별 작성법이나 사용법을 나열하고 소개하는 데 그치지 않고, UI가 동작하는 원리와 설계 기준을 깊이 있게 다룹니다. Intersection Observer를 활용한 가시성 제어, customValidity를 통한 폼 검증 등 최신 Web API와 리액트 기술을 다루고, HTML과 CSS만으로 해결할 수 있는 영역까지 아우르며, 폭넓고 유연한 시야를 가질 수 있도록 돕습니다.

 

이 책은 정답을 제시하기보다 해결 과정에서의 고민과 시도, 그리고 문제 해결을 위한 실마리를 공유합니다. 초보 개발자라면 복잡한 UI 개념을 단계적으로 이해하며 자신감을 얻을 수 있고, 숙련된 개발자라면 프레임워크에 기대지 않고 문제를 해결하는 역량을 기를 수 있습니다. 코드를 따라 치는 것을 넘어, 스스로 생각하고 설계하는 힘을 길러 보시기 바랍니다.

 

★ 이 책에서 다루는 내용 ★

 

◎ 리액트와 순수 자바스크립트로 동일한 UI를 구현하며 각 패러다임을 이해하기

◎ 아코디언, 탭 메뉴, 툴팁 등 필수 UI 컴포넌트의 밑바닥 설계

◎ Intersection Observer, scrollIntoView 등 순수 자바스크립트 API 실전 활용

◎ useRef, createPortal을 활용한 DOM 직접 제어 및 레이어 관리 기법

◎ 무한 스크롤, 캐러셀 등 UX를 좌우하는 핵심 UI 로직 구현

◎ 컴파운드 컴포넌트와 헤드리스 패턴을 적용한 재사용 가능한 설계 구조

[목 차]

▣ 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 파일 수정 - 최종 코드

 

▣ 부록: 의존 파일 모음