Do it 클론코딩 영화 평점 웹서비스 : 스터디

리액트 앱 클론코딩으로 리액트 빠르게 맛보기. 
2일안에 끝내보자. 스타트! 

---

1. 준비하기

1) Node.js 설치 (확인 cmd, node -v)
2) npm (확인 cmd, npm -v)
3) npx (설치 cmd, npm install npx -g) (확인 cmd, npx -v)

4) 크롬 웹스토어에서 "React Developer Tools" 설치

---

1-3. 니꼬쌤의 영화 웹 사이트 확인
https://nomadcoders.github.io/movie_app_2019/#/

Movie App

---

2-1. create-react-app 으로 리액트 웹 만들기

cmd 루트폴더에서, 
> npx create-react-app movie_app_2020

설치완료 후, 설치판 폴더(movie_app_2020)에서 npm start 입력후 리액트 앱 실행하기. 
종료는 Ctrl+C

 

---

3-3. 리액트 기초개념 : JSX (자바스크립트+HTML 조합)

해당 코드를 입력해야 리액트가 JSX를 이해할 수 있음. 

export default를 추가해야 다른 파일에서 Potato 컴포넌트를 사용할 수 있음. 

 

---

3-4. 리액트 기초개념 : props

컴포넌트에서 컴포넌트로 전달하는 데이터. 
함수의 매개변수와 비슷함. 

props에 있는 데이터는 문자열인 경우를 제외하면 모두 중괄호로 값을 감싸야 한다.

 

---

5-1. state

동적 데이터를 다룰 때 사용.
클래스형 컴포넌트에서 사용.

우선 App클래스가 React.Component클래스를 반드시 상속. 
App 컴포넌트가 클래스이기때문에 return문 사용불가. -> JSX반환불가 -> render()함수 사용. 

state 정의 . 

---

5-3. 클래스형 컴포넌트의 일생 알아보기.

constructor() 함수는 생명주기 함수는 아니지만 클래스형 컴포넌트가 생성될 때 호출된다. 

1) render(), constructor(), componentDidMount(); 함수가 리액트에서 마운트(Mount)로 분류하는 생명주기 함수.

 

render() 함수 실행 된 다음 ComponentDidMount() 함수 실행됨. 

 

 

2) componentDidUpdate() 함수는 업데이트(Update)로 분류되는 리액트 생명주기 함수. 

 

3)  componentWillUnmount() 함수는 컴포넌트가 죽을때 언마운트(Unmount)로 분류되는 리액트 생명주기 함수. 

화면에서 떠날때 실행됨. 
컴포넌트에 적용한 이벤트 리스너를 제거할 때 많이 사용함. 

 

---

5-4. 영화 앱 만들기 워밍업

isLoading state와 삼항연산자 추가하여 로딩 구현!

 

 

---

6-1. 영화 API 사용해 보기.

1) cmd에서
> npm install axios 명령으로 axios 설치. 
App.js에서 import axios from 'axios';

2) YTS 영화 데이터 API 살펴보기
https://yts.mx/api

3) 크롬브라우저 JSON Viewer 설치해서 json 데이터 편하게보기 

4) 아래 2개 json 데이터 사용. 
https://yts-proxy.now.sh/list_movies.json     /    https://yts-proxy.now.sh/movie_details.json?movie_id=*

movie_details는 list_movies에서 movie_id가 있어야 표시됨. 

 

---

6-2 ~ 7.2  영화 앱 만들기 실전. 
책보고 코드 따라 적으면서 이해하면된다 .

 

---

8-1. react-router-dom 설치. 

화면 이동을 시켜주는 장치 ! 라우터. 

 

---

스페셜! 깃허브로 배포. 

1) 우선 최종 코드를 깃허브에 업로드.

2) cmd에서 아래 입력후 설치. 
   > npm install gh-pages

3) 깃허브 저장소 다시 확인하기. 
  > git remote -v

4) 영화 앱 깃허브에 배포하기
  > npm run deploy

5) 깃허브 페이지에 접속하여 영화 앱 확인하기
  > https://[깃허브계정].github.io/[저장소이름]

 

---

끗. 

 

HTML, CSS, JAVASCRIPT를 이해하고있고 REACT를 큰그림으로 보고싶다면 이 책을 1 to z 따라해보는것이 괜찮을듯 하지만, 리액트 기본을 다른책으로 이해하고 이 책을 봐야할 것 같다. 기본 설명은 매우 부족한것 같다. 그리고 책에 수록된 유튜브 영상은 우선 책 실습코드를 따라하고 나서 보는것이 좋다.

이지스퍼블리싱의 it책은 전체적으로 가볍고 쉽게 1번 해보기 좋게 나와있다. 
정리겸 보는건 좋을듯한데 배우기위해서 보기에는 너무 가볍다. = 내용을 알고 있으면서 정리삼아 보기 좋음..

솔직히 말하자면 Do-it 시리즈 중에서 제일 별로였던 책. 
클론코딩+ 저자분 강의는 들으면 안되겠다는 확신은 생겨서 다행이었다.