본문 바로가기

리디 접속이 원활하지 않습니다.
강제 새로 고침(Ctrl + F5)이나 브라우저 캐시 삭제를 진행해주세요.
계속해서 문제가 발생한다면 리디 접속 테스트를 통해 원인을 파악하고 대응 방법을 안내드리겠습니다.
테스트 페이지로 이동하기

코어 프런트엔드 UI 상세페이지

코어 프런트엔드 UI

리액트와 순수 자바스크립트로 키우는 실무 사고력

  • 관심 0
소장
종이책 정가
38,000원
전자책 정가
20%↓
30,400원
판매가
30,400원
소장
출간 정보
  • 2026.03.31 전자책 출간
  • 2026.03.10 종이책 출간
듣기 기능
TTS(듣기) 미지원
파일 정보
  • PDF
  • 596 쪽
  • 25.6MB
지원 환경
  • 앱
  • 웹
  • PC뷰어
  • PAPER
ISBN
9791158396770
UCI
-
코어 프런트엔드 UI

작품 정보

[프런트엔드 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 로직 구현
- 컴파운드 컴포넌트와 헤드리스 패턴을 적용한 재사용 가능한 설계 구조

작가 소개

정재남
늦은 나이에 개발에 입문한, 호기심 많은 예비 아빠입니다. 인프런 지식공유자(inflearn.com/users/46840)이며, 유튜브(youtube.com/@FERoy)도 운영하고 있습니다. 웹 퍼블리셔로 시작해 프런트엔드 개발자로 성장하는 동안, 디자이너, 기획자, 개발자와 협업하고 조율하며 다양한 UI 문제를 해결해 왔습니다. 늘 더 간단하거나 정확한 방법은 없을지 고민하며, 정답이 정해지지 않은 문제는 여러 대안을 놓고 비교하며 풀어가는 과정을 좋아합니다. 그 과정에서 얻은 시행착오와 통찰을 이 책에 담았습니다.

리뷰

0.0

구매자 별점
0명 평가

이 작품을 평가해 주세요!

건전한 리뷰 정착 및 양질의 리뷰를 위해 아래 해당하는 리뷰는 비공개 조치될 수 있음을 안내드립니다.
  1. 타인에게 불쾌감을 주는 욕설
  2. 비속어나 타인을 비방하는 내용
  3. 특정 종교, 민족, 계층을 비방하는 내용
  4. 해당 작품의 줄거리나 리디 서비스 이용과 관련이 없는 내용
  5. 의미를 알 수 없는 내용
  6. 광고 및 반복적인 글을 게시하여 서비스 품질을 떨어트리는 내용
  7. 저작권상 문제의 소지가 있는 내용
  8. 다른 리뷰에 대한 반박이나 논쟁을 유발하는 내용
* 결말을 예상할 수 있는 리뷰는 자제하여 주시기 바랍니다.
이 외에도 건전한 리뷰 문화 형성을 위한 운영 목적과 취지에 맞지 않는 내용은 담당자에 의해 리뷰가 비공개 처리가 될 수 있습니다.
아직 등록된 리뷰가 없습니다.
첫 번째 리뷰를 남겨주세요!
'구매자' 표시는 유료 작품 결제 후 다운로드하거나 리디셀렉트 작품을 다운로드 한 경우에만 표시됩니다.
무료 작품 (프로모션 등으로 무료로 전환된 작품 포함)
'구매자'로 표시되지 않습니다.
시리즈 내 무료 작품
'구매자'로 표시되지 않습니다. 하지만 같은 시리즈의 유료 작품을 결제한 뒤 리뷰를 수정하거나 재등록하면 '구매자'로 표시됩니다.
영구 삭제
작품을 영구 삭제해도 '구매자' 표시는 남아있습니다.
결제 취소
'구매자' 표시가 자동으로 사라집니다.

프로그래밍 & 프랙티스 시리즈더보기

  • 프랙티컬 C# (이데이 히데유키, 김범준)
  • 두들낙서의 C/C++ 한꺼번에 배우기 (최지훈)
  • 시작하세요! C# 10 프로그래밍 (정성태)
  • C++ 소프트웨어 디자인 (클라우스 이글베르거, 이상주)
  • 모던 리액트 Deep Dive (김용찬)
  • 시작하세요! C# 12 프로그래밍 (정성태)
  • 문제풀이로 완성하는 알고리즘+자료구조 (요네다 마사타카, 김모세)
  • npm Deep Dive (전유정, 김용찬)

개발/프로그래밍 베스트더보기

  • 이게 되네? 제미나이 완전 미친 활용법 81제 (오힘찬)
  • 요즘 바이브 코딩 안티그래비티 완벽 가이드 (최지호(코드팩토리))
  • “좋아 보여” (에이드리엔 브라간자, 이춘혁)
  • 우리, 프로그래머들 : AI 시대에 잊혀 가는 ‘프로그래머 정신’을 다시 깨우다 (로버트 C. 마틴)
  • 요즘 바이브 코딩 코덱스 완벽 가이드 (윤재원(단테))
  • 미니멀리즘 프로그래머 (데이비드 토머스, 이민석)
  • 혼자 공부하는 바이브 코딩 with 클로드 코드 (조태호)
  • 올라마와 오픈소스 LLM을 활용한 AI 에이전트 개발 입문 (서영배, 김병규)
  • 요즘 바이브 코딩 클로드 코드 완벽 가이드 (최지호(코드팩토리))
  • 코어 프런트엔드 UI (정재남)
  • 파이토치로 배우는 LLM & AI (로런스 모로니, 박해선)
  • 팔란티어처럼 해체하고 연결하고 장악하라 (정관영)
  • 데이터 엔지니어링 디자인 패턴 (바르토시 코니에치니, 김인범)
  • 강력한 러스트 매크로 작성법 (샘 밴 오버마이어, 김찬빈)
  • 러스트로 갈아타기 (릴리 마라, 조엘 홈즈)
  • 요즘 바이브 코딩 제미나이 CLI 완벽 가이드 (김진환)
  • 요즘 당근 AI 개발 (당근 팀)
  • 밑바닥부터 만들면서 배우는 LLM (세바스찬 라시카, 박해선)
  • 바이브 코딩 너머 개발자 생존법 (애디 오스마니, 강민혁)
  • AI 프로덕트 기획과 운영 (마릴리 니카, 오성근)

성인 인증 안내

성인 재인증 안내

성인 인증 안내

성인 재인증 안내

청소년보호법에 따라 성인 인증은 1년간
유효하며, 기간이 만료되어 재인증이 필요합니다.
성인 인증 후에 이용해 주세요. 해당 작품은 성인 인증 후 보실 수 있습니다.
성인 인증 후에 이용해 주세요.

청소년보호법에 따라 성인 인증은 1년간
유효하며, 기간이 만료되어 재인증이 필요합니다.
성인 인증 후에 이용해 주세요. 해당 작품은 성인 인증 후 선물하실 수 있습니다.
성인 인증 후에 이용해 주세요.

본문 끝 최상단으로 돌아가기

도움말

코어 프런트엔드 UI

  • - 본 작품은 1일마다 1편씩 무료입니다.
  • - 최근 10편은 해당 이용권으로 볼 수 없습니다.
  • - 해당 이용권으로는 무료로 3일간 볼 수 있습니다.
이어보기

작품 제목

대여 기간이 만료되었습니다.
다음화를 보시겠습니까?

앱으로 연결해서 다운로드하시겠습니까?
닫기 버튼
대여한 작품은 다운로드 시점부터 대여가 시작됩니다.
앱으로 연결해서 보시겠습니까?
닫기 버튼
앱이 설치되어 있지 않으면 앱 다운로드로 자동 연결됩니다.
모바일 버전