리액트와 타입스크립트로 배우는 웹 개발

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

 

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

 

리액트는 함수형 컴포넌트와 Hooks를 활용해 직관적이고 간결한 코드 작성을 가능하게 하며, 실무에서 자주 접하는 패턴과 모범 사례를 통해 더 나은 개발 습관을 길러줍니다. 

이 책을 통해 리액트와 타입스크립트를 깊이 있게 배우며, 웹 개발의 근본 원리를 이해하고 실력 있는 개발자로 성장할 수 있습니다.

[목 차]

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

 

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 리액트 배포하기 

현재 소스 코드의 리소스 용량  

배포 파일 생성하기 

내부에서 수행되는 작업 

배포 파일 실행하기  

 

찾아보기