[React] ReactJS로 영화 웹 서비스 만들기 (2)

---

ReactJS로 영화 웹 서비스 만들기 (1)

ReactJS로 영화 웹 서비스 만들기 (3)

ReactJS로 영화 웹 서비스 만들기 (4)

ReactJS로 영화 웹 서비스 만들기 (5)

ReactJS로 영화 웹 서비스 만들기 (6)

ReactJS로 영화 웹 서비스 만들기 (7)

 

---

#1 SET UP

설치가 제일 힘든 법

• Win+R 로 cmd(명령 프롬프트) 를 실행시키고 프로젝트를 시작할 경로로 이동한다.
• 여기선 ‘내 문서’로 정했다.

cd documents

 

• 다음으로 npx create-react-app + 프로젝트 폴더명을 입력한다.

npx create-react-app movie_app_2021

 

• movie_app_2021 폴더 안에 create-react-app이 설치된다.
• 몇 분 후, 설치가 끝나면 VSCode로 해당 폴더를 연다.
• package.json 안에 scripts 부분을 수정해야 한다.

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
},

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build"
},

• test와 eject를 지우고 저장한다.
• 이제 vscode의 터미널을 열어서 npm start 를 입력한다.
• 강의에서는 짜-잔하고 리액트가 실행되지만 나는 아니었다.

• eslint 버전 문제가 있는 것으로 추측데는 에러 메시지인데 eslint를 지우고 다시 설치해봐도 같은 오류가 반복됐다.

eslint 삭제는 cmd에 npm list -g --depth=0 를 입력하면 설치된 패키지 리스트가 보이고 npm uninstall -g 패키지명 을 입력하면 삭제된다.

C:\Users\KANG> npm list -g --depth=0
C:\Users\KANG\AppData\Roaming\npm
+-- eslint-config-airbnb-base@14.2.1
+-- jshint@2.12.0
+-- node-sass@4.14.1
`-- npm@7.5.2

* 오류 당시 리스트가 아닙니다.

 

다시 처음부터 설치

• 다시 설치해보고 이것저것 해봐도 소용 없길래 모든 걸 삭제하고 처음부터 시작하기로 했다.
• 먼저 Node.js를 삭제하고 최신 버전으로 재설치했다. (물론 LTS버전으로!) (다만 결과적으로 Node.js 설치는 뻘짓이었다. 같은 오류일 경우 여기는 넘겨라.)

첫 스샷에서는 모두 설치하고, 아래 스샷은 체크 해제하면 된다.

우리는 C, C++을 사용하지 않기 때문에 Python이나 비주얼 스튜디오를 괜히 설치할 필요 없다.

 

• 재설치 후에도 같은 오류가 발생했다.
• 분명 eslint 오류인 거 같아서 C:\Users\계정명\node_modules 폴더 안에서 eslint와 관련된 폴더를 모두 지웠다.
• 그랬더니 이번에는 인터넷 브라우저로 React가 실행되긴 하지만 새로운 오류가 떴다.

이 오류는 생각보다 쉽게 해결했는데 프로젝트 폴더에 .eslintrc.js를 삭제하면 된다.

 

마침내 반가운 React 로고 등장!

 

Git 연결

• git 계정이 필요하다.
• 강의에서는 git init git remote add origin "git주소" 로 리포지토리 생성
• 현재 디렉토리의 모든 파일들을 스테이징 영역으로 넘기기 git add .
• 커밋 메시지 작성 git commit -m "메시지 내용" 
• 원격저장소에 올리기 git push origin master
• 위 과정을 거쳤지만 나는 VSCode에서 지원하는 소스제어 기능을 사용했다.

 

초기화

• 본격적으로 들어가기 전에 삭제할 코드들이 있다.
• src/index.js 3행, 5행 삭제 

import './index.css';

import reportWebVitals from './reportWebVitals';

 

• 같은 파일 하단 주석처리된 부분부터 마지막까지 삭제

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

• src 폴더에서 App.js 와 index.js 를 제외하고 모두 삭제
• logo와 css를 삭제했기 때문에 App.js 1행, 2행 코드 삭제
• 그리고 <header>부터 </header>까지 모두 삭제

import logo from './logo.svg';
import './App.css';


<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
  Edit <code>src/App.js</code> and save to reload.
</p>
<a
  className="App-link"
  href="https://reactjs.org"
  target="_blank"
  rel="noopener noreferrer"
>
  Learn React
</a>
</header>

 

• App.js의 <div className="App"> </div> 사이에 내용을 입력하면 개발자도구 #root > .App 에 입력된다.

 

• 하지만 페이지소스를 보면 내가 입력한 내용은 보이지 않는다.
• 빈 html을 먼저 로드하고 React가 필요한 html을 푸시한다.
• Virtual DOM. 페이지소스에 존재하지 않지만 React가 생성하는 방식이다.