[ReactJS로 영화 웹 서비스 만들기] #0 INTRODUCTION ~ #1 SETUP

본 내용은 노마드코더 - ReactJS로 영화 웹 서비스 만들기 를 수강하며 작성되었습니다.

1. 준비하기

우선 node.js가 깔려 있는지 확인해보았다.

node.js를 깔면 npm도 함께 깔린다고 한다. npx도 설치해야하며 설치하는 코드는 npm install npx -g 이다. 

코드 에디터는 visual code로 한다. 마지막으로 git을 설치해야한다. git --version으로 버전을 확인해보았다.

이렇게 준비가 완료되었다.

 

2. ReacJS 어플리케이션 생성

리액트를 시작하기에 앞서 원래는 babel, webpack등 브라우저를 위해 필요한 것들을 따로 설치해주어야 했는데 이제는 create-react-app으로 한번에 가능하다. 해당 명령어로 react 앱을 만들 수 있다. 이 명령어로 앱을 설치하는데 에러가 발생했다.

You are running `create-react-app` 4.0.1, which is behind the latest release (4.0.2).

We no longer support global installation of Create React App.

Please remove any global installs with one of the following commands:
- npm uninstall -g create-react-app
- yarn global remove create-react-app

이라는데 검색을 해보니 globally가 지원되지 않는다는 것인데 어제까지만해도 npx create-react-app으로 앱을 설치했어서 좀 이상했지만 어쨌든 npm을 삭제하고 다시 설치하라는 대로 해보았다.

' npm uninstall -g create-react-app && npm i -g npm@latest && sudo npm cache clean -f  '이 명령어들을 실행시키고 다시 npx create-react-app movie_app_2021를 했더니 아래와 같이 create-react-app을 설치하겠냐해서y를 넣어주고 진행했더니 설치가 무사히 완료되었다.

 

visual code를 켜고read me의 내용을 다음과 같이 바꾼다.

#Movie App 2021

React JS Fundamentals Course(2021 Update!)

그리고 package.json에 가서 "scripts"의 start와 vuild를 빼고 나머지는 지운다.

yarn.lock 파일은 삭제한다.

그리고 npm start를 터미널에 실행시켜본다.

잘 실행되는 것을 볼 수 있다.

 

3. github에 올리기

이제 이 폴더를 git에 올려보자. github에 가서 레포지토리를 하나 만들어주고 만들어진 레포지토리 주소를 복사한 후 터미널에 다음과 같이 코드를 넣는다.

git init && git remote add origin [git 레포지토리 주소] && git add . &&git commit -m "[커밋 설명]"&&git push origin master

그리고 github에 가면 코드가 성공적으로 넣어진 것을 볼 수 있다.

 

4. React에 대한 설명

public의 favicon.ico는 브라우저 상단 탭 부분에 나타는 아이콘이다. manifest.json은 PWA이다. (설명 참조)  

src에서 logo.svg와 App.css파일 index.css 파일을 모두 지우고 해당 파일을 import 하는 부부을 전부 지워주었다. App.js는 다음과 같이 파일을 수정했다.

import React from 'react';

function App() {
  return (
    <div className="App">
      
    </div>
  );
}

export default App;

react의 매력은 내가 수정한 부분들이 실시간으로 자동적으로 브라우저에 반영된다는 것이다.  

다음과 같이 App.js의 코드를 추가하면 브라우저는 다음과 같이 변한다.

import React from 'react';

function App() {
  return (
    <div>
      Hello!!!!!!
    </div>
  );
}

export default App;

브라우저의 개발자 도구를 보면 내가 root라는 클래스 이름의 div에 코드를 넣지 않았음에도 hello를 가진 div의 부모 div가 root라는 className의 div라는 것을 알 수 있다.

실제 react는 속도가 빠른데 그 이유는 virtual, 즉 존재하지 않기 때문이다.