Do it! 클론 코딩 영화 평점 웹서비스

http://www.yes24.com/Product/Goods/90344496

Do it! 클론 코딩 영화 평점 웹서비스

 

위 책을 보면서 실습했다.

 

1. 클론 코딩 준비하기

1-1. cmd 창에서 node.js 설치 확인

node -v

설치 전인 경우, nodejs.org에 접속하여 <LTS 버전> 설치

Node.js

1-2. npm 설치 확인

npm -v

1-3. npx 설치

npx란, 1회성으로 최신 버전의 노드 패키지를 내려받아 설치시켜주는 노드 패키지. npm으로 설치해야함.

npm install npx -g

---

2. create-react-app

2-1. cmd 창에서 원하는 경로에 리액트 앱 만들어보자. (cd로 이동)

npx create-react-app movie_app_2021

2-2. VScode 설치하고 생성한 프로젝트(movie_app_2021) 열기

- 참고로 나는 webstorm으로 실행함.

 

3. 파일 수정 (package.json, README.md)

 

2-4. 리액트 앱 실행하기

- cmd창이나 IDE의 terminal 창에서 다음을 입력.

npm start

terminal 실행 결과

npm start 후 브라우저 결과

위와 같이 결과창이 나온다면 성공. 

 

2-5. 리액트 앱 종료(ctrl+c)

---

3. Github 업로드

하던대로...

1. git 저장소 만들기

- github 페이지에서 create repository

2. git init

3. git add .

4. git commit -m "원하는 메세지"

5. git remote add origin (repository 주소)

6. git push origin master

 

---

4. 실습하기 

1. map  함수

- map()은 배열의 모든 원소마다 특정 작업을 하는 함수를 적용하고, 그 함수가 반환한 결과를 모아서 배열로 반환해 줌

const friends = ["dal", "mark", "lynn"]

friends.map(current => {
	console.log(current);
    return 0;
})

- map() 함수의 인자로 전달한 함수는 전달된 배열의 원소를 대상으로 실행됨. 위의 코드로 설명하자면, 함수는 3번 실행됨. 즉, 인자의 배열에 들어있는 원소가 1개씩 전달되면서 함수가 반복 실행됨.

- map() 함수가 반환한 값이 모여 배열이 되고, 그 배열이 map() 함수의 반환값이 됨. 

 

2. prop-types

- 컴포넌트가 전달받은 props가 원하는 값인지 확인

- terminal로 설치

npm install prop-types

- javascript에서 import

import PropTypes from 'prop-types';

- 더 많은 사용 예시는 공식 문서 참고

 

3. state

- 동적 데이터 다룰 때 사용

- 클래스형 컴포넌트에 사용 가능

- state를 사용하려면 반드시 클래스형 컴포넌트 안에서, 소문자를 이용하여 state라고 적으면 됨

- 리액트는 state를 직접 변경하는 코드를 허용하지 않음

- 리액트는 state가 변경되면 render() 함수를 다시 실행하여 변경된 state를 화면에 출력함

 

3.1. setState()

- 리액트는 setState() 함수의 호출을 감시함

- setState() 함수가 동작하면 state가 업데이트되고, 이어서 render() 함수를 동작시켜 화면을 업데이트

- 리액트는 이전 state와 새로운 state를 비교하여 바뀐 데이터만 업데이트함

 

4. constructor()

- render() 함수보다 먼저 실행

- 함수의 실행 순서만 알아도 리액트 앱을 만들 때 무슨 작업을 할지 결정 가능

 

5. componentDidMount()

- render() 함수가 실행된 다음 실행됨

- 리액트에서 마운트(mount)로 분류하는 생명주기 함수(생명 주기 함수란, 컴포넌트의 생성과 소멸을 관리하는 함수)

- counstructor() > render() > componentDidMount() 실행

 

6. componentDidUpdate()

- componentDidUpdate()는 화면이 업데이트되면 실행됨

- setState() 함수가 실행되어 바뀐 state를 반영하기 위해 render()가 실행되고 나면 componentDidUpdate()가 실행됨

 

7. componentWillUnmount()

- 리액트에서 컴포넌트가 죽을 때를 언마운트(Unmount)라 함

- 보통 컴포넌트에 적용한 이벤트 리스너를 제거할 때 많이 사용

 

8. 삼항연산자

- 삼항연산자는 조건이 true이면 : 왼쪽의 문장을, false이면 : 오른쪽의 문장을 실행 or 반환함  

const load = this.state;
load ? 'Loading..' : 'Ready~'

- 위와 같은 예시에서 load라는 변수가 true이면 'Loading..'이 반환, false라면 'Ready~'가 반환될 것임

 

9. axios 설치하기

npm install axios

 

10.  노마드 코더 영화 API 사용하기

- 크롬의 JSON Viewer 확장 도구 설치하기

 

11. Movie 컴포넌트 만들기

12. .slice(0, 180)

- 시놉시스가 180자로 제한되고 생략 표시는 ...로

 

13. react-router-dom 설치

npm install react-router-dom

- 화면 이동 시켜주는 장치라고 생각하면 편함

 

14. HashRouter, Route 사용

- /home/introduction 에 접속하면,  /, /home, /home/introduction 순서로 path props를 찾음 -> exact={true} 속성으로 해결 가능

 

15. react-router-dom

- react-router-dom의 link 컴포넌트 사용하여 a 엘리먼트의 href 속성 대신하기

 

---

5. React 동작 원리 및 요소들

1. 동작원리

간단히 설명하자면,

리액트는 작성한 프로젝트 폴더에 있는 코드를 자바스크립트를 이용하여 해석함.

그리고 해석한 결과물을 index.html에 끼워넣음.

App.js를 해석하면서 일부만 그려진 HTML에 element를 추가하거나 제거하는 방식으로 화면을 그림.

리액트는 화면에 표시될 모든 HTML을 처음부터 그리지 않으므로 빠르다는 장점이 있음!

 

2. 컴포넌트

- 컴포넌트의 이름은 대문자로 시작해야 함

3. JSX

- HTML과 javascript 조합한 것.

- 엄밀히 말하자면 단순히 HTML과 javascript를 조합한 것만은 아님.

 

4. props

- 컴포넌트에서 컴포넌트로 전달하는 데이터

- 컴포넌트에 데이터를 전달할 때는 props 사용

- props를 사용하면 컴포넌트를 효율적으로 재사용 가능 (함수의 매개변수와 비슷함)

<Food fav="kimchi"/>

- 위 코드는 Food 컴포넌트에 fav라는 이름의 props를 이용해 fav에 kimchi라는 값을 담아 Food 컴포넌트에 보냄

- props에는 불리언 값(true, false), 숫자, 배열과 같은 다양한 형태의 데이터 담을 수 있음

- 주의할 점: props에 있는 데이터는 문자열인 경우를 제외하면 모두 중괄호({ })로 값을 감싸야함

 

5. 개발자도구로 확인하기

console로 props 확인

6. 구조 분해 할당(Destructuring-assignment)

- 자바스크립트 ES6의 문법 중 구조 분해 할당 사용

- 위의 문법 사용 시, 점 연산자 사용하지 않아도 됨

- 구조 분해 할당은 객체에 있는 키 값을 편하게 추춘할 수 있게 해주는 자바스크립트 문법임

- 예전에는 객체에 접근하기 위해 객체.객체.객체 이런식으로 접근했다면, ES6을 사용하는 지금, 구조 분해 할당을 이용하여 객체에 접근함. 

 

7. async, await

---

6. 오류

1. class 속성 관련 메시지

- JSX에서 반환할 엘리먼트에 'class'라는 이름으로 class 속성을 사용했기 때문

- 이는 HTML에서는 class 속성 사용 시, 'class' 라고 지정하지만, 리액트에서는 'className'을 사용하기 때문

 

 

+) 추가로 봐야할 것

 

1. 자바스크립트 => 할당 방법 (ecmascript 6 arrow functions)