코어 프런트엔드 UI(위키북스 프로그래밍 & 프랙티스 시리즈 39)
리액트와 순수 자바스크립트로 키우는 실무 사고력
Regular price
$42.70
Sale price
Regular price
✈️
Estimated delivery date 예상 배송일
Standard Shipping
불러오는 중...
주문일로부터 8-12 영업일
Express Shipping
불러오는 중...
주문일로부터 6-8 영업일
프런트엔드 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 로직 구현
◎ 컴파운드 컴포넌트와 헤드리스 패턴을 적용한 재사용 가능한 설계 구조
프런트엔드 개발은 단순한 라이브러리 활용을 넘어, 브라우저 메커니즘을 이해하고 제어하는 과정입니다. 다만 매일 쓰는 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 로직 구현
◎ 컴파운드 컴포넌트와 헤드리스 패턴을 적용한 재사용 가능한 설계 구조
Couldn't load pickup availability
출판사 리뷰
출판사 리뷰
목차
목차
▣ 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 파일 수정 - 최종 코드
▣ 부록: 의존 파일 모음
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 파일 수정 - 최종 코드
▣ 부록: 의존 파일 모음
저자
저자
정재남
정재남
늦은 나이에 개발에 입문한, 호기심 많은 예비 아빠입니다. 인프런 지식공유자(inflearn.com/users/46840)이며, 유튜브(youtube.com/@FERoy)도 운영하고 있습니다. 웹 퍼블리셔로 시작해 프런트엔드 개발자로 성장하는 동안, 디자이너, 기획자, 개발자와 협업하고 조율하며 다양한 UI 문제를 해결해 왔습니다. 늘 더 간단하거나 정확한 방법은 없을지 고민하며, 정답이 정해지지 않은 문제는 여러 대안을 놓고 비교하며 풀어가는 과정을 좋아합니다. 그 과정에서 얻은 시행착오와 통찰을 이 책에 담았습니다.
늦은 나이에 개발에 입문한, 호기심 많은 예비 아빠입니다. 인프런 지식공유자(inflearn.com/users/46840)이며, 유튜브(youtube.com/@FERoy)도 운영하고 있습니다. 웹 퍼블리셔로 시작해 프런트엔드 개발자로 성장하는 동안, 디자이너, 기획자, 개발자와 협업하고 조율하며 다양한 UI 문제를 해결해 왔습니다. 늘 더 간단하거나 정확한 방법은 없을지 고민하며, 정답이 정해지지 않은 문제는 여러 대안을 놓고 비교하며 풀어가는 과정을 좋아합니다. 그 과정에서 얻은 시행착오와 통찰을 이 책에 담았습니다.
Payment & Security
Payment methods
Your payment information is processed securely. We do not store credit card details nor have access to your credit card information.
$99 이상 무료 배송
3% 리워드 크레딧 적립
Secure Payment
