리액트의 정석 with 타입스크립트

이창현

이창현
컴퓨터공학을전공하고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

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

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

2장|꼭알아두어야할기본문법과원리
2.1변수와자료형
변수란
자료형이란
2.2연산자
연산자란
산술연산자
대입연산자
증감연산자
관계연산자
논리연산자
2.3조건문
조건문이란
if문의기본원리
if~else문
if~elseif~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확인하기
타입스크립트설치하기
VisualStudioCode다운로드및설치하기
VisualStudioCode실행하기
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로화면에HelloReact출력하기
출력내용감싸기
변수의데이터바인딩,중괄호
클래스선택자,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.1Ajax를활용한데이터송수신하기
Ajax를사용한비동기통신
14.2도서목록페이지구현하기
리액트에서의Ajax호출방식
Ajax로불러온데이터바인딩하기
14.3About페이지구현하기
About페이지레이아웃설계하기