리액트 Next.js로 완성하는 프론트엔드 - TypeScript 기본기부터 React Next.js를 활용한 프로젝트 Git/GitHub까지

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

이 책은 단순히 리액트와 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 기반 프로젝트를 운영 중인 개발팀

- 프론트엔드 전반을 아우르는 체계적 학습을 원하는 개발자

[목 차]
  

1장 리액트(React)란

1.1 리액트의 인기

1.2 리액트의 철학과 등장

1.3 리액트의 한계

리액트(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 에필로그

마무리 인사말