Nomad Coder의 'ReactJS로 웹 서비스 만들기' 강의정리

• 강의 링크

https://academy.nomadcoders.co/courses/216871/lectures/10881270

#0.0 Introduction

---

• 이걸 보게 된 이유, 이 강의 첫인상

풀스택 개발을 한번 해서 전체적인 개괄을 보고 싶기에 인스타클론코딩을 목표로 잡았다. 그 강의를 바로 들을 수는 없기에 일단은 리엑트 기초강의를 들어보고자 이걸 듣게 되었다.

---

• 강의 정리

#0-1. Requirements

1. 콘솔창을 이용해서 node.js와 npm 버전을 확인하는 단계에서 콘솔이 뭔지 몰랐다. 알고보니 cmd를 말하는 것이다.
2. cmd창을 클리어할때에는 cls를 사용하면 된다.

#1-0. Creating your first React App

1. 리엑트를 설치하고 사용하는 과정에서 url을 받을 수 있다. 하나는 우리 컴퓨터에서 사용할 때 다른 하나는 같은 와이파이를 쓰는 핸드폰, 노트북에게 사용할 수 있다.
2. 비주얼 코드 터미널은 cmd와 같은 역할을 한다. 사용하는 법은 터미널에서 새로운 터미널을 선택하면 사용가능

#1-2. How does React work?

1. favicon은 크롬 작업표시줄에 뜨는 아이콘을 의미한다.
2. 리엑트는 이곳에 쓰는 모든 요소를 생성한다는 것을 의미한다. index.js에서 app.js의 내용을 받아오는 것이다.

#2-0. Creating your first React Component

1. react를 사용하는 도중 서버에 도달하지 못했다고 하는 경우는 터미널에 npm start를 하지 않았기 때문이다. react는 서버가 항시 열려있어야한다.
2. App은 component다. component는 HTML을 반환하는 함수이다.
3. js와 HTML이 합쳐진 것을 jsx라고 한다. 리엑트가 특화되어 있다.
4. component를 만들고 index에서 렌더링을 할 수는 없다. 렌더링은 하나만 할 수 있다. 모든 구성은 App에 포함되어야한다.
5. component를 만들고 누군가 사용할 수 있도록 export 해야한다.

import React from "react";

function Potato() {
  return <h3>I love potato</h3>;
}

export default Potato;//export로 내보내줘야함

function App() {
  return (
    <div className="App">
      Hello!
      <Potato />//이렇게 사용한다.
    </div>
  );
}

#2-1. Reusable Components with JSX + Props

1. fav가 변수 이름이고 그 안의 내용이 kimchi로 들어간 상태이고 이것들을 props라고 한다. 이것을 arg로 사용할 수 있다. props.fav 또는 {fav}로 꺼내 올수 있다. 이렇게 재사용이 가능하다.

#2-2. Dynamic Component Generation

1. map은 배열을 랜더링하는 자바스크립트의 함수다. 각 item에 함수를 대입해주는 것. 각 연산의 결과는 0이 된다.
2. map을 component에서 사용할 수 있다.

function App() {
  return (
    <div className="App">
      {foodILike.map(dish => (
        <Food name={dish.name} picture={dish.image} />
      ))}
    </div>
  );

#2-2. Dynamic Component Generation

1. map은 배열을 랜더링하는 자바스크립트의 함수다. 각 item에 함수를 대입해주는 것. 각 연산의 결과는 0이 된다.
2. map을 component에서 사용할 수 있다.

function App() {
  return (
    <div className="App">
      {foodILike.map(dish => (
        <Food name={dish.name} picture={dish.image} />
      ))}
    </div>
  );

#2-3. Dynamic Component Generation

1. 하지만 위와 같이 실행하면 key props가 없다고 한다. 그럴때를 대비해서 'id : 1'과 같이 값을 넣어주어야 한다.
2. 사진을 읽을 수 없는 사람들에게 이 사진이 어떤 사진인지 알려주기 위해 alt:{name}의 값을 넣어주어야한다.

#2-4. Protection with PropTypes

1. proptypes은 내가 알맞은 prop타입을 가지고 왔는지 알려준다. 
2. 아래의 링크에서 다양한 타입을 확인하는 방법을 알 수 있다.

Food.propTypes = {
  name: PropTypes.string.isRequired,
  picture: PropTypes.string.isRequired,
  rating: PropTypes.number
};

https://ko.reactjs.org/docs/typechecking-with-proptypes.html

PropTypes와 함께 하는 타입 확인 – React

#2-4. Protection with PropTypes

1. proptypes은 내가 알맞은 prop타입을 가지고 왔는지 알려준다. 

#3-0. Class Components and State

1. 우리가 이미지를 넣은 것들은 하드 코딩을 한 것이다.
2. function component를 class component로 만들려고 한다. react component는 많은 것을 가지고 있다.
3. react component는 return 하지 않는다. 그대신 render에 넣어서 사용한다.
4. 왜 우리는 class component를 사용해야하는가? state를 사용하기 위해서
5. state는 object다. state에는 변경되는 data를 넣는다.
6. this.add인 상태는 클릭할때만 이고 this.add()은 즉시 실행한다.

#3-1. All you need to know about State

1. state를 변경한다면 state를 직졉변겅은 하지 않는다. 왜냐하면 변경된 count를 refresh를 해주려면 render을 실행해주어야하는데 그걸 알려주는 것이 setState 함수다. 이걸 통해서 바로 react가 refresh하도록 알려준다.
2. react가 변화가 있는 부분만 render을 실행해서 html을 변경해준다.
3.  react에서 왜부의 상태에 의존하지 않는 방법을 current 함수를 통해서 사용해야한다.

#3-2. Component Life Cycle

1. Life cycle method 는 기본적으로 react가 component를 생성하는 그리고 없애는 방법이다. render을 실행하기 전이나 실행하고 나서 많은 함수들이 실행된다.
2. mounting 은 태어나는 것에 관한 것이다. 그 중 constructor은 render전에 실행되는 함수이다. componentDidMount는 render이후에 Mount되었다는 것을 알려준다.
3. Update는 setState할 때 사용되는 함수들이다. 그 중 componentDidUpdate는 render링이 setState를 통해서 실행되었으면 실행된다.
4. unmount는 componentWillunmount는 페이지를 이동하거나 새롭게 페이지를 열 경우 발생한다.

#3-3. Planning the Movie Component

1. state에 미래에 쓰고자하는 것을 setState에 선언하는 것은 에러가 아니다. 처음부터 선언할 필요는 없다.

#4-0. Fetching Movies from API

1. javascript에서 data를 fetch대신 axios를 사용할 것이다. axios는 fetch의 하나의 layer다.
2. axios.get이 느리기에 componentDidMount함수가 끝날 때까지 약간 시간이 걸릴 수 있다고 알려줘야한다. async, await를 사용한다. 함수가 다 되면 진행할 수 있도록한다.

#4-1. Rendering the Movies

1. component에 state가 구지 필요없을 경우에는 function으로 사용하면 된다.
2. key ip는 api의 data안의 id를 사용하면된다.

#4-2. Styling the Movies

1. style component를 통해서 css를 사용한다.

#4-2. Adding Genres

1. javascript의 class는 className으로 사용해야 html의 class와 혼동하지 않는다..? -> 잘 모르겠다.

#5-1. Are we done?

1. 현재 state를 쓰기 위해서 class component를 사용할 필요는없다. 왜냐하면 react hook이라는 것 때문이다

 

---

• 강의 총평

react가 얼마나 좋은 언어이고 맛보기 느낌으로 시작을 할 수 있었다는 것에 매우 만족한다. 물론 이걸로 끝날 내용은 아니고 이후로 3개정도의 react강의가 있기에 전부 해보고 정리할만 한 것 같다. 우리 같은 초보자들에게는 넓고 다양한 언어를 알고 생각을 넓혀가는 게 필요한 것 같다. 깊게 들어가는 것은 이후에도 충분히 할 수 있는 일이다.

이 강의를 마치고 사실 react를 깊게 배웠다고는 절대 어디가서 말하지 못한다. 하지만 일단 겉핥기 식이더라도 보고 '아 이런 방법이 있었지' 라는 생각이 드는 게 더 중요하다고 생각된다. 피드백도 빠르고 강의의 질과 같이 공부하는 사람들의 질문이 너무 좋은 강의다.

P.S 서식을 바꾸고 처음쓰는 프로젝트 글인데 굉장히 잘 바꾼것 같다 이후로도 이렇게 정리한다면 나중에 내가 보기에도 편하고 강의를 직접 찾아보지 않아도 되니 편할 것 같다.

---

• 깃허브 링크

https://github.com/Burugi/movie_app_2019.git

Burugi/movie_app_2019