도서 소개

현명한 프론트엔드 개발자로 가는 실무서. 이 책은 단순히 리액트와 Next.js를 사용하는 법을 설명하는 것이 아니다. 실제 서비스를 만드는 프론트엔드 개발자의 시선에서, ‘어떻게 구성하고’, ‘왜 이렇게 설계하는지’에 대한 이유와 기준을 함께 제시한다. 컴포넌트와 훅의 구조화, 서버/클라이언트 컴포넌트 분리, fetch 전략, 타입 안정성 확보, 메타데이터 구성, 번역 처리, 캐싱 전략, 데이터 페칭 등 실무에서 부딪히는 이슈들을 단순 기능이 아닌 “판단 가능한 설계”로 발전시키는 길을 보여준다.

  출판사 리뷰

현명한 프론트엔드 개발자로 가는 실무서!

이 책은 단순히 리액트와 Next.js를 사용하는 법을 설명하는 것이 아닙니다.
실제 서비스를 만드는 프론트엔드 개발자의 시선에서, ‘어떻게 구성하고’, ‘왜 이렇게 설계하는지’에 대한 이유와 기준을 함께 제시합니다.

컴포넌트와 훅의 구조화, 서버/클라이언트 컴포넌트 분리, fetch 전략, 타입 안정성 확보, 메타데이터 구성, 번역 처리, 캐싱 전략, 데이터 페칭 등 실무에서 부딪히는 이슈들을 단순 기능이 아닌 “판단 가능한 설계”로 발전시키는 길을 보여줍니다.

총 14장으로 구성된 이 책은 크게 세 가지 파트로 전개됩니다.
1~6장: 프론트엔드 개발의 기초
프론트엔드 개발자로서 반드시 이해하고 넘어가야 할 언어적 기초와 핵심 개념들을 다룹니다.
JavaScript와 TypeScript의 주요 개념은 물론, 리액트의 컴포넌트 구조, 상태 관리, 렌더링 방식 등
리액트 철학의 근간이 되는 기초 기술과 설계 사고방식을 배울 수 있습니다
7장~10장: 프론트엔드 개발의 실무
실제 서비스를 구성하는 관점에서, 컴포넌트 스타일링과 디자인 시스템의 구현, Next.js를 통한
프로젝트 구성까지 실질적인 앱 구조 설계와 프레임워크 응용을 중심으로 다룹니다. 특히 9~10
장은 하나의 프로젝트를 시작부터 배포 직전까지 직접 구현해보는 실습형 구성입니다.
11장~14장: 프론트엔드 개발의 협업과 미래
프론트엔드 개발자로서의 실력을 완성도 있게 끌어올리는 도구 사용법과, 개발자로서의 성장 전
략을 중심으로 구성되어 있습니다. Git과 CI/CD, 디버깅 도구 등 실무 환경에서 필요한 생산성
도구의 활용법을 다루며, 마지막 14장에서는 AI 시대에 개발자가 어떤 철학과 기준을 가져야 하
는지에 대한 저자의 고찰이 담겨있습니다.

【 대상 독자층 】
리액트와 Next.js를 익히고 실무에 써보고 싶은 입문자
리액트, Next.js 기반 프로젝트를 운영 중인 개발팀
프론트엔드 전반을 아우르는 체계적 학습을 원하는 개발자

■ 출판사 리뷰
프론트엔드 개발자로서 갖춰야 할 기본 역량은 HTML, JavaScript, CSS를 자유롭게 다루는 능력입니다. 여기에 더해 사용자의 사용성과, 유지보수성, 그리고 팀원 간 원활한 소통을 통해 관리와 배포를 자연스럽게 넘길 수 있어야 합니다.

이 책은 단순히 따라 하며 만드는 수준을 넘어 “스스로 판단하고 결정할 수 있는 개발자”가 되고 싶은 사람들에게 정말 강렬하게 추천드립니다.

  작가 소개

지은이 : 강경석
“편리함을 추구하는 개발자”라는 철학을 바탕으로 개발 세계에 발을 담구고 있습니다. 2025년 현재 가우디오랩에서 프론트엔드 리드로 재직 중이며, B2B, B2C 서비스 및 내부 툴 개발을 총괄하고 있습니다.또한 재학시절 친구들과 창업을 시작으로 다양한 제품과 서비스를 기획해보고 개선하고 폐기하는 루틴을 끊임없이 경험했으며 앞으로 많은 사랑을 받는 서비스를 만드는 개발자를 꿈꾸며 계속 도전하고 있습니다.

  목차

1장 리액트(React)란
리액트의 인기
리액트의 철학과 등장
리액트의 한계
리액트(React)란 정리

2장 자바스크립트
2.1 자바스크립트 역할
2.2 자바스크립트 현황
2.3 변수와 함수
2.4 객체와 배열
2.5 클래스와 프로토타입
2.6 비동기와 싱글 스레드
2.7 모듈 시스템과 import/export
자바스크립트 정리

3장 타입스크립트
3.1 타입스크립트 개요
3.2 타입스크립트 도입
3.3 타입 시스템
3.4 타입 별칭과 인터페이스
3.5 제네릭(Generic)
3.6 덕 타이핑(Duck Typing)
3.7 유틸리티 타입
타입스크립트 정리

4장 리액트 기초편
4.1 리액트 앱을 만드는 방법
4.2 컴포넌트
4.3 State와 Props
4.4 JSX
리액트 기초편 정리

5장 리액트 심화편
5.1 함수 컴포넌트 vs 클래스 컴포넌트
5.2 Props Drilling
5.3 Built-in Hooks
5.4 Custom Hooks
5.5 Rendering
리액트 심화편 정리

6장 리액트 실무편(패턴과 상태 관리)
6.1 디자인 패턴(Design Pattern)
6.2 상태 관리 라이브러리(상)
6.3 상태 관리 라이브러리(하)
리액트 실무편(패턴과 상태 관리) 정리

7장 리액트 실무편(컴포넌트)
7.1 특이한 컴포넌트
7.2 CSS와 스타일링
7.3 모듈화된 스타일링
7.4 컴포넌트 스타일링
7.5 컴포넌트 라이브러리
리액트 실무편(컴포넌트) 정리

8장 Next.js
8.1 Next.js를 사용해야 하는 이유
8.2 SPA와 MPA
8.3 CSR과 SSR
8.4 Next.js 톺아보기
Next.js 정리

9장 Next.js 실전 프로젝트(상)
9.1 소프트웨어 개발 방법론
9.2 기술 스택(tech stack)
9.3 프로젝트 시작하기
9.4 Next.js로 서비스 만들기
9.5 전기차 충전소 검색 서비스
Next.js 실전 프로젝트(상) 정리

10장 Next.js 실전 프로젝트(하)
10.1 기능 정의 및 계획
10.2 데이터 페칭과 관리
10.3 UI 개선 작업
10.4 서버 상태와 클라이언트 상태
Next.js 실전 프로젝트(하) 정리

11장 Git과 GitHub
11.1 버전 관리 시스템
11.2 Git
11.3 GitHub
11.4 브랜치 관리 전략
Git과 GitHub 정리

12장 CI/CD
12.1 CI/CD 개요
12.2 프론트엔드의 CI/CD
12.3 테스트 코드
CI/CD 정리

13장 개발자 도구와 디버깅
13.1 리액트 개발자 도구
13.2 개발자 도구
개발자 도구와 디버깅 정리

14장 AI와 개발자
14.1 AI
14.2 에필로그
마무리 인사말

  회원리뷰