클론 코딩 01 안녕 리액트? 13
01-1 클론 코딩 수업 준비하기 14
01-2 왜 리액트일까? 20
01-3 무엇을 클론 코딩할까? 26
클론 코딩 02 리액트로 클론 코딩 시작하기 31
02-1 슈퍼 빠른 create-react-app 32
보일러 플레이트(boiler plate) 개발을 바로 시작할 수있도록 만든 기초 환경
Readme.md 파일 앱 소개 파일
02-2 깃허브에 리액트 앱 업로드하기 38
- windows 자격 증명 git 정보 삭제
02-3 리액트 앱 살펴보고 수정하기 43
02-4 리액트 동작 원리 알아보기 50
클론 코딩 03 리액트 기초 개념 알아보기 55
03-1 리액트 앱 실행 복습하기 56
03-2 첫 번째 리액트 기초 개념: 컴포넌트 58
03-3 두 번째 리액트 기초 개념: JSX 60
- JSX: HTML 과 javascript를 조합한 문법
- 컴포넌트 이름을 작성할 때 이름은 대문자로 시작
- export default name 을 추가하면 다른 파일에서 사용 가능
03-4 세 번째 리액트 기초 개념: props 68
props 매개변수(property 속성)
문자열인 경우를 제외하면 모두 중괄호({})로 감싸야함구조분해할달
ES6 문법 중 구조 분해 할당(destructuring-assignment)을 사용하면 점 연산자를 사용하지 않아도 됨
클론 코딩 04 슈퍼 똑똑하게 컴포넌트 만들기 79
04-1 비슷한 컴포넌트 여러 개 만들기 80
04-2 map( ) 함수로 컴포넌트 많이 만들기 84
04-3 음식 앱 이리저리 만지고, 고쳐보기 92
04-4 음식 앱에 prop-types 도입하기 101
- prop-types 자료형 검사 도구
클론 코딩 05 state와 클래스형 컴포넌트 111
05-1 state로 숫자 증감 기능 만들어 보기 112
- state: 동적데이터를 다룰 때 사용(클래스형 컴포넌트에서만 사용)
- 함수형 컴포넌트는 return 문이 JSX를 반환, 클래스형 컴포넌트는 redner()함수가 JSX를 반환
05-2 숫자 증감 기능을 제대로 만들어 보기 121
- state가 변경되면 render() 함수를 다시 실행하여 변경된 state를 화면에 출력
05-3 클래스형 컴포넌트의 일생 알아보기 129
- 생명주기
constructor -> render -> componentDidMount -> componentDidUpdate(render 시)
05-4 영화 앱 만들기 워밍업 135
- yts.lt/api 영화 데이터
클론 코딩 06 영화 앱 만들기 141
06-1 영화 API 사용해 보기 142
- axios.get 를 사용한 비동기함수를 기다리기 위해 async, await 사용
06-2 영화 데이터 화면에 그리기 153
06-3 Movie 컴포넌트 만들기 162
06-4 영화 앱 스타일링하기 — 기초 177
클론 코딩 07 영화 앱 다듬기 187
07-1 영화 앱 전체 모습 수정하기 188
07-2 영화 앱 멋지게 스타일링하기 198
클론 코딩 08 영화 앱에 여러 기능 추가하기 205
08-1 react-router-dom 설치하고 프로젝트 폴더 정리하기 206
08-2 라우터 만들어 보기 211
- Route에는 2가지 props를 전달할 수 있는데 하나는 URL을 위한 path props이고, 하나는 URL에 맞는 컴포넌트를 불러 주기 위한 component props이다
08-3 내비게이션 만들어 보기 221
- a href 사용 시 전체 페이지를 다시 그림. react-router-dom 을 이용하여 필요한 화면만 그리도록 하는 게 좋음
08-4 영화 상세 정보 기능 만들어 보기 228
08-5 리다이렉트 기능 만들어 보기 237
킴조교의 스페셜! 영화 앱 깃허브에 배포하기 244
- package.json 에 “homepage”:”” 배포 경로 작성
- script 에 “predeploy” : “yarn build”, “deploy”:”gh-pages -d build” 작성
- gh-pages 설치 “yarn add gh-pages”
- 배포 “yarn deploy”