리액트의 정석 with 타입스크립트(프론트엔드 입문자를 위한)

이 책은 크게 네 개의 마당(파트)으로 나뉩니다.

첫째 마당 - 프로그래밍의 기본 원리
컴퓨터 시스템의 기본 동작 원리와 메모리 구조, 프로그래밍의 핵심 개념을 다룹니다. 이
를 통해 코드가 실제로 어떻게 실행되는지 이해할 수 있습니다.

둘째 마당 - 객체지향 개념의 이해
객체지향 프로그래밍(OOP)의 개념과 자바스크립트에서의 객체지향 구현 방식을 살펴봅
니다. 여기서는 클래스, 프로토타입, 상속, 캡슐화 등 객체지향의 개념을 다룹니다.

셋째 마당 - 타입스크립트의 기초
타입스크립트의 핵심 문법과 개념을 정리하고, 정적 타입 시스템이 코드의 안정성과 유지
보수성을 어떻게 향상시키는지 설명합니다.

넷째 마당 - 타입스크립트 기반의 리액트
타입스크립트를 적용한 리액트 개발 방식에 대해 학습하고, 실무에서 자주 접할 수 있는
패턴과 모범 사례를 소개합니다.

《리액트의 정석 with 타입스크립트》는 "왜 리액트를 사용하는가?", "왜 타입스크립트가 필요한가?", "프로그래밍의 기본 원리는 무엇인가?"라는 근본적인 질문에 대한 답을 찾는 과정에서 이 책을 모두 읽고 나면, 단순한 웹 개발자가 아닌, 진정한 소프트웨어 개발자로 성장할 수 있을 것입니다


리액트와 타입스크립트로 배우는 웹 개발
리액트는 단순한 UI 라이브러리를 넘어, 소프트웨어 개발의 핵심 개념을 깊이 있게 이해하고 적용할 수 있는 강력한 도구입니다. 이 책에서는 리액트를 배우는 과정에서 왜 타입스크립트가 필요한지, 객체지향 개념이 어떻게 리액트에 적용되는지를 상세히 설명합니다. 또한, 리액트를 통해 코드가 실제로 어떻게 실행되는지, 컴퓨터 시스템과 메모리 구조가 어떻게 연결되는지를 이해할 수 있습니다.

무엇보다 리액트와 타입스크립트의 결합은 단순히 개발 효율을 높이는 것 이상의 의미를 지닙니다. 정적 타입 시스템을 통해 코드의 안정성과 유지 보수성을 향상시킬 수 있으며, 객체지향 프로그래밍의 개념을 적용하여 코드 구조를 더욱 깔끔하고 효율적으로 만들 수 있습니다.

리액트는 함수형 컴포넌트와 Hooks를 활용해 직관적이고 간결한 코드 작성을 가능하게 하며, 실무에서 자주 접하는 패턴과 모범 사례를 통해 더 나은 개발 습관을 길러줍니다.
이 책을 통해 리액트와 타입스크립트를 깊이 있게 배우며, 웹 개발의 근본 원리를 이해하고 실력 있는 개발자로 성장할 수 있습니다.

Step 1 프로그래밍의 기본 원리
컴퓨터 시스템의 동작 원리와 메모리 구조, 프로그래밍 학습

Step 2 객체지향 개념의 이해
클래스, 프로토타입, 상속, 캡슐화 등 객체지향의 개념 학습

Step 3 타입스크립트의 기초
타입스크립트의 핵심 문법과 개념, 정적 타입 시스템 학습

Step 4 타입스크립트 기반의 리액트
타입스크립트를 적용한 리액트 개발 방식과 실무 패턴 사례

첫째 마당. 프로그래밍의 기본 원리

1장 | 프로그래밍을 시작할 결심
1.1 왜 컴파일 기반의 언어를 학습해야 하는가
모든 프로그래밍 언어의 동작 원리는 거의 동일하다
왜 컴파일 기반의 언어를 학습해야 하는가
1.2 프로그래밍의 개념
프로그래밍이란
프로그래밍 언어란
컴퓨터 언어와 사람을 위한 언어
프로그래밍 작성 과정
1.3 개발 환경 구축하기
어떤 컴파일러를 사용해야 할까?
Visual Studio Community 설치하기
새 프로젝트 만들기
1.4 생애 최초 C 언어로 Hello World 출력하기
Hello World를 출력하는 의미
Hello World 무작정 작성하기
헤더 파일에 관하여
프로그래밍의 기본 구성 요소 함수
출력 함수 printf에 대한 이해
문장의 끝 세미콜론(;)
리턴값에 관하여
주석문을 사용하자

2장 | 꼭 알아두어야 할 기본 문법과 원리
2.1 변수와 자료형
변수란
자료형이란
2.2 연산자
연산자란
산술 연산자
대입 연산자
증감 연산자
관계 연산자
논리 연산자
2.3 조건문
조건문이란
if 문의 기본 원리
if~else 문
if~else if~else 문
2.4 반복문
반복문이란
for 문의 기본 원리
for 문의 활용
이중 반복문
무한 반복
while 문의 기본 원리
2.5 함수
함수란 무엇인가
함수를 왜 사용할까
함수형 기반 언어의 구조
함수형 종류
함수의 기본 형태
함수 정의 및 호출하기
2.6 배열
배열이란 무엇인가
배열은 왜 사용할까
배열의 구조
배열의 복사
문자열 변수
%00; 문자에 관하여

3장 | 코드 안에서 일어나는 동작 원리
3.1 포인터
포인터를 알아야 하는 이유
변수 선언 시 메모리 구조
포인터의 개념
포인터의 기본 사용법
3.2 포인터와 배열
배열 이름의 의미
배열의 이름과 포인터 변수의 차이점
3.3 함수 포인터
함수 포인터 사용
함수 포인터를 사용하는 이유
3.4 구조체, 공용체, 열거형
구조체란
공용체
열거형
3.5 동적 메모리 할당
동적으로 메모리를 할당해야 하는 이유
동적 메모리 할당 및 해제
동적 메모리의 구조
동적 메모리를 알아야 하는 이유

둘째 마당. 객체지향에 대한 이해

4장 | 객체지향 철학의 이해
4.1 객체지향 철학에 관하여
객체지향 철학을 왜 이해해야 하는가
객체지향이란
4.2 추상화
추상화(抽象化)와 추상화(抽象?)
추상화란 무엇인가
추상화를 사용하는 이유
플라톤의 이데아론
4.3 캡슐화
캡슐화란
은닉된 데이터의 인터페이스
4.4 전통적인 클래스의 구조와 사용 이유
클래스란
클래스의 선언 형식
접근 지정자
객체의 선언
객체의 생성
생성자의 개념
클래스를 사용하는 이유

5장 | 객체지향 기반의 재사용과 유연한 동작
5.1 상속성
현실 세계에서의 상속
클래스의 상속
프로젝트 관점의 상속
5.2 다형성
다형성의 의미
오버로딩의 개념
오버로딩의 구현
오버라이딩
5.3 자바스크립트 기반의 클래스 구조와 사용 방법
자바스크립트의 클래스 구조
자바스크립트 클래스의 사용 방법
자바스크립트 클래스의 상속과 오버라이딩
5.4 인터페이스
인터페이스란
인터페이스 구현
인터페이스를 사용하는 이유
추상 클래스를 상속하는 경우
인터페이스를 상속하는 경우
5.5 람다를 통한 화살표 함수의 이해
익명 메소드
람다식이란
람다식 표현
자바스크립트 기반 화살표 함수
화살표 함수를 사용하는 이유

셋째 마당. 타입스크립트의 기초

6장 | 타입스크립트와 실행 환경
6.1 타입스크립트
타입스크립트란
데이터 타입을 표기하면 좋은 점
타입스크립트의 컴파일
타입스크립트의 사용 이유
6.2 타입스크립트 실행 환경
Node.js와 npm 설치하기
명령 프롬프트로 Node.js 확인하기
타입스크립트 설치하기
Visual Studio Code 다운로드 및 설치하기
Visual Studio Code 실행하기
6.3 타입스크립트 기반 프로젝트
첫 번째 타입스크립트 코드 만들기
중복 선언 문제 해결하기
자동 컴파일하기

7장 | 기본 데이터 타입 사용하기
7.1 데이터 타입과 추론
자바스크립트의 데이터 타입
타입스크립트의 데이터 타입과 추론
배열 타입 추론
함수 리턴 타입 추론
객체 리터럴 타입 추론
타입스크립트의 데이터 타입 종류
7.2 타입 명시
기본 데이터 타입 명시
%00;과 undefined 타입 명시
7.3 함수의 데이터 타입
함수 매개변수와 반환 타입 명시
함수에서 매개변수를 생략할 수 없는 경우
선택적 매개변수 사용
매개변수 기본값 설정
나머지 매개변수
7.4 배열과 튜플 타입
배열 타입
튜플 타입

8장 | 객체 데이터 타입 사용하기
8.1 객체의 데이터 타입
기본 객체 타입 선언하기
중첩된 객체 타입
선택적 속성
읽기 전용 속성
객체의 타입과 함수 결합
8.2 인터페이스
인터페이스 만들기
선택적 속성이 있는 인터페이스
읽기 전용 속성이 있는 인터페이스
인터페이스로 함수 타입 정의
인터페이스 간 상속
클래스와 인터페이스 구현
객체 리터럴과 클래스 사용의 차이점
8.3 열거형과 유니온 타입
열거형 타입
유니온 타입
8.4 타입 별칭과 리터럴 타입
타입 별칭
리터럴 타입
8.5 타입 가드
타입 가드란
typeof를 사용한 타입 가드
instanceof를 사용한 타입 가드
in 연산자를 사용한 타입 가드
%00; 체크를 사용한 타입 가드

넷째 마당. 타입스크립트 기반의 리액트

9장 | 리액트 시작하기
9.1 리액트
리액트란
리액트의 특징
리액트 공식 사이트
9.2 리액트의 동작 원리
컴포넌트란
렌더링이란
가상 DOM
초기 렌더링과 재렌더링
재조정 과정
9.3 리액트에서 타입스크립트를 사용하는 이유
9.4 타입스크립트 기반의 리액트 환경 설정
프로젝트 생성하기
프로젝트 파일 구조 확인하기
타입스크립트 설정 파일(tsconfig.json) 확인하기
리액트 빌드 및 실행하기
9.5 리액트 기본 앱의 실행 구조
index.html 파일 확인하기
main.tsx 파일 확인하기
App.tsx 파일 확인하기
스타일 설정하기

10장 | 리액트의 기본 개념
10.1 일정 관리 앱 프로젝트 만들기
무엇을 만들 것인가
프로젝트 생성하기
10.2 반드시 알아두어야 할 JSX 기본 문법
JSX란
JSX로 화면에 Hello React 출력하기
출력 내용 감싸기
변수의 데이터 바인딩, 중괄호
클래스 선택자, className
인라인 스타일링, style
태그 꼭 닫기
주석
10.3 컴포넌트 만들기
컴포넌트의 종류
클래스형 컴포넌트
함수형 컴포넌트
TodoList 컴포넌트 만들기
함수형 컴포넌트 타입 React.FC
10.4 변수와 상태
상태란
상태를 사용하는 방법
상태 코드 반영하기
상태 데이터 여러 개 저장하기
상태 변경 함수
상태 함수를 사용해야만 하는 이유
스타일 추가 및 수정하기
할 일 목록 타입 확장하기
10.5 구조 분해 할당 이해하기
구조 분해 할당
배열의 구조 분해 할당
객체의 구조 분해 할당
10.6 반복 루틴 처리하기
map 함수 사용하기
key 속성 사용하기
10.7 이벤트 처리와 상태 업데이트하기
체크 박스 추가하기
체크 이벤트 처리하기
체크 여부에 따라 취소선 출력하기
10.8 부트스트랩을 사용하여 UI 적용하기
부트스트랩 설치하기
부트스트랩 CSS 파일 추가하기
현재 코드에 부트스트랩 적용하기

11장 | 리액트의 활용
11.1 게시물 입력하기
입력 텍스트 박스와 추가 버튼 배치하기
새로운 할 일을 목록에 추가하기
스프레드(...) 연산자
11.2 타이머로 현재 시각 출력하기
타이머 컴포넌트 만들기
시계 컴포넌트 만들기
11.3 게시물 삭제하기
게시물 삭제 버튼 배치하기
게시물 삭제 기능 구현하기
11.4 상세보기 대화상자 만들기
모달 대화상자 추가하기
게시물을 선택했을 때 이벤트 등록하기
게시물을 선택했을 때 상세 페이지 출력하기
11.5 다른 컴포넌트에 데이터 전달하기: props
프롭스란
함수형 컴포넌트에서 프롭스 사용하기
클래스형 컴포넌트에서 프롭스 사용하기
태그 사이의 내용을 보여주는 children
구조 분해 할당 문법을 통해 props 내부 값 추출하기
프롭스로 함수 전달하기
상세 페이지 컴포넌트화하기
상세 페이지에 프롭스로 데이터 전달하기

12장 | 리액트 라우팅
12.1 도서 쇼핑몰 프로젝트 만들기
타입스크립트 기반의 새 프로젝트 생성하기
리액트 부트스트랩 환경 설정하기
리액트 부트스트랩 컴포넌트 사용하기
레이아웃 만들기
12.2 메인 화면 구성하기
상단 바 만들기
이미지 넣기
이미지를 캐러셀에 적용하기
12.3 도서 상품 데이터 가져오기
베스트 도서 상품 데이터 만들기
데이터 가져오기
BookItem 컴포넌트 만들기
12.4 푸터 만들기
Footer 컴포넌트 내용 추가하기
12.5 라우팅하기
라우터로 페이지 나누기
상세 페이지 만들기
URL 파라미터로 여러 개의 상세 페이지 만들기
404 페이지 오류 처리하기

13장 | 리액트 훅
13.1 컴포넌트 라이프 사이클
컴포넌트 라이프 사이클이란
클래스형 컴포넌트 기반 라이프 사이클
13.2 함수형 컴포넌트
라이프 사이클과 useEffect
useEffect란
함수형 컴포넌트 기반 라이프 사이클
useEffect를 이용한 타이머 사용하기
useEffect를 사용하지 않았다면
useEffect를 이용한 API 데이터 요청하기
useEffect를 이용한 팝업 페이지 출력하기
13.3 훅(Hooks)에 관하여
훅이란
훅의 종류
useRef 사용 방법
useMemo 사용 방법
useCallback 사용 방법
useCallback을 사용하는 이유

14장 | 데이터 통신과 페이지 구현하기
14.1 Ajax를 활용한 데이터 송수신하기
Ajax를 사용한 비동기 통신
14.2 도서 목록 페이지 구현하기
리액트에서의 Ajax 호출 방식
Ajax로 불러온 데이터 바인딩하기
14.3 About 페이지 구현하기
About 페이지 레이아웃 설계하기
About 페이지 기능 구현하기
14.4 Contact 페이지 구현하기
Contact 페이지 UI 구현하기
14.5 로그인 페이지 구현하기
로그인 페이지 UI 구현하기
로그인 아이콘 추가하기

15장 | 리덕스 툴킷을 사용한 상태 관리
15.1 카트 페이지 만들기
카트 페이지 구성 요소
라우터 추가하기
CartPage 컴포넌트 작성하기
15.2 리덕스를 사용하는 이유 및 리덕스 설치
카트 페이지에 데이터 바인딩하기
이 코드에서 생각해 볼 구조 문제점 및 개선점
리덕스를 사용하는 이유
리덕스 툴킷 설치하기
리덕스 툴킷 설정하기
15.3 리덕스 store에 상태 저장하고 사용하기
리덕스 store에 상태 저장하기
리덕스 store에서 상태 가져오기
도서 데이터를 store에 저장하고 바인딩하기
15.4 리덕스 store의 상태 변경하기
상태 변경 함수 정의하기
상태 변경 함수 사용하기
리덕스 상태 사용 방법
왜 디스패치(dispatch)를 사용할까?
15.5 상태가 object 또는 Array일 경우 변경하기
상태가 object인 데이터 변경하기
15.6 전달 인자를 활용한 상태 업데이트
상태 변경 함수에 전달 인자 전달하기
카트 페이지 상품의 수량 변경하기
15.7 카트 페이지 기능 개선하기
useMemo를 사용한 성능 개선하기
카트 메뉴 추가하기
〈카트에 담기〉 버튼을 클릭했을 때 카트에 상품 추가하기
카트의 도서 수량 변경하기
카트의 데이터 유지하기
카트 비우기
15.8 리액트 배포하기
현재 소스 코드의 리소스 용량
배포 파일 생성하기
내부에서 수행되는 작업
배포 파일 실행하기

찾아보기

이창현 이창현
컴퓨터공학을 전공하고 20여 년 간 다양한 산업체에서 소프트웨어(SW) 개발자로 활동했다. 최근에는 AI 활용 솔루션 및 데이터 보안 연구에 깊은 관심을 가지고 있으며, 평소에도 연구한 기술을 정리하고 소통하는 것을 즐긴다. 이러한 성향 덕분에 집필, 번역, 강의 등을 통해 독자 및 학생들과 활발히 소통하고 있으며, 특히 미래의 IT 개발자를 꿈꾸는 학생들을 교육하는 데 주력하고 있다.

현) 이창현코딩연구소 대표
전) 성신여자대학교 융합보안공학과 겸임교수
전) 서울시중부기술교육원 응용소프트웨어과 교수
전) ㈜SK 이노에이스 모바일엔진개발
전) ㈜웹젠 3D엔진 개발

대표 저서
『백엔드 입문자를 위한 모던 자바스크립트&Node.js』 길벗캠퍼스, 2023
『나혼자 C언어』 디지털북스, 2021
『나혼자 파이썬』 디지털북스, 2020
『C# 프로그래밍의 정석』 혜지원, 2019 등 총 9권

번역서
『스파크를 이용한 자연어 처리』 한빛미디어, 2021
『데이터 익명화를 위한 파이프라인』 한빛미디어, 2022

블로그 : https://blog.naver.com/jamsuham75
유튜브 : https://www.youtube.com/@jamsuham75