[노마드코더] React.js moive-app clone codeing( feat. 클론 코딩 )

안녕하십니까 다제입니다. 

 

 

저는 니꼬쌤을 정말 좋아하는데요 

오늘은 니꼬쌤의 무료강의 중 react.js로 moive-app site를 따라서 만들어 보겠습니다. 

 

 

 

[완성된 화면]

//필자의 개인적인 견해
혹시 클론 코딩에 대해 부정적인 시각을 가지고 있으신 분들을
위해 저의 의견을 간략하게 전달드리겠습니다. 

모든 학습은 모방으로 부터 시작되며,
저희처럼 프로그램 세계에 막 입문한 사람들에게
프로가 직접 구현해놓은 코드를 따라서 작성해보는 일은
코딩의 흐름과 방향을 잡는데 무척 도움이 된다고 생각합니다. 

 

저같은 경우, 코딩을 시작한지 2개월 되었습니다.

이렇게 무작정 코드를 따라쳤을때 정말 눈에 띄게 코드와 익숙해졌습니다. 

이에, 저는 6개월이 될때까지는 클론코딩을 지속적으로 진행할 예정입니다. 

 

강의는 니꼬쌤의 강의를 직접 참고 부탁드립니다. 무엇보다 공짜입니다!!!

그저 가입하고 듣기만 하면 됩니다!  -> Nomad_code_React_link

( html과 javascript의 아주 조그마한 이해가 필요 합니다... )

( 만약 없으시다면,, 이 또한 무료 javascript강좌가 있으니,,참고 부탁드립니다. -> Nomad_code_JS_Link )

 

그래서 저는 이 강좌를 수강하시는 동안 만나게 되는 "처음 배운 개념"과

"Error"와 익숙하지 않은 "Terminal 코드" & "react개념"을 주로  안내드리겠습니다.  

 

 

---

[처음 배운 개념들]

1. npm 개념과 사용방법 

2. terminal에서 vscode 키는 방법 

3. create-react-app

4. terminal에서 git commit하기 

5. jsx

6. map

7. state & propTypes

8. axios & async 

---

 

1. npm 개념과 사용방법 

저는 강의 시작하지마

npm과 npx 에러를 만났습니다...ㅜㅜ

 

보기만 해도 끔찍한 에러인데...

겁먹으실거 없습니다.

 

저희가 만나는 에러들은 정말 단순한 에러임을

마음 속에 새기고 진도를 나가시면 됩니다. 

 

에러에 대한 설명을 한 후

제가 이해한 npm과 npx에 대해 설명 드리겠습니다. 

 

아래 에러의 경우, 이미 npx가 설치되어 발생된 에러입니다.

당황스럽죠? 그럼 어떻게 해야할까요?

그냥 무시하고 넘어가면 됩니다.ㅎㅎㅎ

 

겁 먹으실거 없습니다!

우리 니꼬쌤과 함께 나아가면 됩니당 ㅎㅎㅎㅎ

위와 같은 오류가 나올 경우, npx가 이미 설치되어 있으니 바로 진행하시면 됩니다

[npm]

  -. npm : Node Packaged Manager

  -. python의 pipenv하고 비슷한 기능을 한다고 이해하시면 됩니다. 

  -. Node.js에서 사용 가능한 모듈들을 패키지화 하여 모아둔 것이다.

  -. npm은 높은 처리 성능과 내장 http 서버를 가지고 있어 별도의 웹서버가 필요하지 않다.

  

[npx]

  -. npm도 전역을 설치하면 버전별로 사용을 할 수가 없었다. 

  -. 이에, 삭제하고 재설치하는 등 번거로움이 있었다. 

  -. 이를 해결하기 위해 나온게 npx이다.

  -. npm5.2이상 버전이면 npx 명령을 사용할 수 있다. 

  -. 그러나, 개별 폴더별로 버전을 관리하기 위해 npx를 설치해주는 걸 추천한다. 

 

 

2. Terminal에서 vscode 키는 방법

  -. terminal에서 code . 을 입력하면 된다. 

  -. 만약 실행 할 수 없는 명령어를 리턴 받은 경우 아래 코드를 통해 추가적인 작업을 진행하면 된다. (접는글)

  -. ⇧⌘P (command + shift + P)를 동시에 누르시면 명령 팔레트라는 창이 뜹니다.

  -.  셸 명령: PATH에 'code' 명령 설치 클릭하여 설치를 진행합니다. 

 

  -. 다시 터미널로 이동하여 code . 을 입력하시면 vscode로 이동이 됩니다. 

 

 

 

3. create-react-app 

  -. 왜 만들어지게 되었을까?

    * 모든 환경을 직접 개발해야 했음 ( 백엔드 부분까지 ) 

    * 즉, webpack에 대한 공부가 필요함 

    * 다른 사람이 만든 데이터를 커스터마이즈하여 사용하였는데 오류가 너무 많음

 

  -.개발시기 : 2013년 5월 29일

 

  -.사용처 : React.js

 

  -.개발자 : 페이스북의 소프트웨어 엔지니어 Jordan Walke & 페이스북 

 

  -. 사용방법 

    * Node.js 8.10 이상 or npm 5.6이상이 필요합니다. 

    * terminal에 아래와 같이 입력하면 된다. 

    * npx create-react-app movie-app-2021

    * movie-app-2021는 저의 폴더명입니다. 

 

 

4. terminal git commit

  -. git install 

  -. git init

  -. github에 가서 public repository 생성 

  -. 터미널에서 git remote add origin github.com/daje0601/movie_app_2021

    * origin 뒤에는 자신의 깃허브 링크를 입력하시면 됩니다. 

  -. git add . 

  -. git commit -m "#1.0 Creating your first React App"

    * 커밋할 때 남길 메세지를 적는 곳 입니다. 

  -. git push origin master 

    ※ branch commit & commit 이동에 대해서는 생략합니다. 

 

 

[Error1]

./src/logo.svg
Error: ENOENT: no such file or directory, open '/Users/ds/Documents/movie_app_2021/src/logo.svg'

위와 같은 컴파일 에러를 만날 수 있는데 이건 react가 최신화되면서 강의에 없는 오류입니다. 

App.js에서 아래 코드를 제거하면 해당 오류가 없어집니다. 

꼭 저장을 누르고 새로고침을 해야 반영이 된다는거 아시죠?

import logo from './logo.svg';

import './App.css';

 

[Error2]

언제나, npm start를 해두고

terminal을 하나 추가해서 그곳에서 작업을 진행해야합니다.

 

 

5. jsx

 

아래 코드는 React가 component를 사용하여 HTML처럼 작성하려는 경우에 꼭 필요한 코드이다. 

이러한 javascript와 HTML 사이의 이러한 조합을 jsx라고 부른다.

이건 react에서 나온 매우 custom한 유일한 개념이다. 

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

 

 

jsx에서 알아야할 것 1

import React from "react";

react에서 component를 작성하기 위해서는 반드시 해당 코드가 필요합니다.  

또한, react application은 하나의 component만 rendering해야한다.

따라서 모든 것은 application안에 들어가야만 합니다.

 

application안에서 많은 component를 넣을 수 있고

그리고 이러한 component안에 더 많은 component를 import할 수 있습니다. 

이러한 것들이 아름답고 동적인 apllication이 될 수 있습니다.

그리고 component는 꼭 대문자로 시작해야합니다!

 

 

jsx에서 알아야할 것 2

component에 정보를 보낼 수 있다는 점이 아주 매력적입니다. 

react가 멋진 이유는 재사용 가능한 component를 만들 수 있다는 점입니다. 

그럼? 다른 js는 재사용가능한 component를 만들 수 없다는 말인가?

정보를 전달하는 방법 : <Cloth fav="long_shoes" / >라고 기재하여 정보를 전달 할 수 있습니다.  

위 코드는 food component에 fav라는 이름의 property를 kimchi라는 value로 준 것입니다! 

 

이곳에 들어올 수 있는 데이터타입 : str, boolean, list

 

그래서 Cloth(props)라는 인자를 함께 써주고

funcion을 만들면 우리가 전달한 데이터를 그대로 출력할 수 있습니다. 

 

예전에 바닐라 배울때 객체를 어떤식으로 전달해주었는지 비교해보면 좋겠죠?

function Cloth({ fav }) {
  return <h1>I like {fav}</h1>
}


function App() {
  return (
    <div>
      <h1>Heollo!</h1>
      <Cloth fav="long_shoes" />
      <Cloth fav="shirt" />
      <Cloth fav="jean" />
      <Cloth fav="panets" />
    </div>
  );
}

export default App;

그런데 이 코드에는 문제점이 있습니다. 

새로운 옷을 추가할 때마다  <Cloth fav="panets" /> 를 추가해야한다구...

안그래도 생각하고 있었는데 딱 그 문제점에 대한 해결방법을 설명해주셔서 놀랬다..!

 

이걸 하기 위해서는 javascript의 map이라는 개념을 알아야합니다.  

 

map은 callback 함수를 각각의 요소에 대해 한번씩 순서대로 불러 그 함수의 반환값으로 새로운 배열을 만드는 함수입니다.

즉, 원래 리스트가 있다면 그 리스트의 원소를 개별적으로 순회하면서 특정한 작업을 한 후 다시 리스트로 리턴해주는 함수입니다.  

cloths = ["123","234","345","456"]

cloths.map(function(cloth){
	return friend + "🎖"
})

# 출력값 -> ["123🎖","234🎖","345🎖","456🎖"]

 

좋아 우리는 map까지 잘 이해했습니다. 

그렇다면 한가지 생각을 해보자!

 

 

6. map

저 map들이 잘 적용되었는지 이 큰 페이지에서 어떻게 일괄적으로 관리할 수 있을까?

우리는 언제나 생각해야해! 잘되었나? 어떻게 이것을 점검할 수 있지?  관리 할 수 있는 방법은 무엇이 있을까?

 

그래서 니꼬가 알려준 Protypes를 설치해보겠습니다. 

이것은 내가 전달한 props가 내가 원하는 props인지 확인해 주는 프로그램입니다. 

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

pro types에 대해서는 니꼬쌤이 꼭 잘 읽어보라고 했으니 우리도 공식문서를 정독해볼 필요가 있겠지요?

 

 

[Error3]

혹시 이러한 에러를 만나신 분들이 있으신가요?ㅎ

# 수정전 
import ProTypes from "prop-types";

# 수정후 
import PropTypes from "prop-types";


#[결론] prop에 p를 적지 않아 생긴 오류이니... 다같이 주의하시죠..ㅠ

 

 

7. state * proptypes

  -. react Component에서 빠질 수 없는 개념인 state에 대해 알고 넘어가야 합니다.

  -. state는 컴포넌트의 스코프 안의 지역변수라고 할 수 있습니다.

  -. 이 state가 변경되면 이 state를 참조하고 있는 컴포넌트의 다른 부분들도 영향을 받아 업데이트 됩니다.

  -. state중 setSate를 예를 들어드리겠습니다.

  -. setSate를 사용하지 않으면 새 state와 함께 render function이 호출되지 않습니다. 

  -. 음...매 순간 제가 setState를 호출할 때마다 React는 새로운 state와 함께 render function을 호출해야되는데요 

  -. state를 쓰지 않으면 매번 render를 호출할 수 없습니다. ( 혹시 이해가 안가시면 강의를 참고 부탁드립니다. )

import React from "react";
import PropTypes from "prop-types";


class App extends React.Component{
  state = {
    count: 0
  };
  add = () => {
    this.setState(current => ({ count: current.count+1 }));
  };
  minus = () => {
    this.setState(current => ({ count: current.count-1 }));
  };
  render() {
    return (
      <div>
        <h1>The number is:{this.state.count}</h1>
        <button onClick={this.add}>Add</button>
        <button onClick={this.minus}>Minus</button>
      </div>
    );
  }
}
export default App;

  -. 많은 곳에서 this.state를 사용하여 코드를 작성하는데요

  -. 우리는 this.state보다 current를 사용하여 훨씬 react 답게 코드를 작성하는 것을 권장드립니다.

  -. 왜냐하면 큰 프로젝트를 진행할때 this.state.count를 쓰면 내가 생각한대로 기능이 작동하지 않고 문제를 찾는데 매우 오랜 시간이 걸리기 때문입니다. 

 

 

8. axios & asyns

일반적으로 자바스크립트에서 fetch를 하는 방법은 fetch를 사용합니다. 

그러나 우리 니꼬는 Axios를 사용합니다. 이게 더 좋다는데.. 왜좋은지는.....

 

axios & asyns는 강아지 앞에 먹이를 두고 기다려! 하는거랑 똑같습니다. 

javascript가 막막막 코드를 읽으려고 하는데 API를 불러올 시간을 벌기 위해 axios & asyns가 API를 불러올 때까지 실행을 중단 시킵니다. 

//기존 방식 
getMoives = async () => {
    const moives = await axios.get("https://yts-proxy.nomadcoders1.now.sh/list_movies.json")
    console.log(moives.data.data.moives);
  }

//ES6 방식 
getMoives = async () => {
    const { data:{data:{moives}}} = await axios.get("https://yts-proxy.nomadcoders1.now.sh/list_movies.json")
    console.log(moives);
  }

 

 

[Error4]

 

오류 원인은 깃허브 링크를 1000%로 잘못써서 발생됩니다. 

이에, 이 강의에서 404 에러를 내는 원인은 없습니다. 

부디 하나하나 잘 뜯어서 봐보시길...

 

 

이후 강의에서는 큰 오류 없이 바로 해결할 수 있었습니다.  

 

 

휴~ 이틀동안 5시간에 걸쳐 저 사이트를 만들었는데 

블로그 적고 개념을 알아보는데 5시간이 걸리네요... 정말.....

 

먼가 억울하지만 이렇게 만들어보므로써 또 새로운 것들을 알고 

기존에 것들을 복습하는 귀한 시간을 갖을 수 있었습니다. 

 

또한, 중요한 인사이트를 저는 얻었는데요!

여러분께서도 니꼬와 함께 공부하면서 코딩실력을 키워보시는건 어떨까요?

 

 

정말 니꼬는 사랑스럽고 너무너무 고마운 존재입니다..!

 

 

지금까지 읽어주셔서 감사드립니다.