리액트로 영화 평점 웹서비스 만들기(클론코딩) 1탄

*이 게시글은 Do it! 클론 코딩 영화 평점 웹서비스를 보고 정리한 글입니다.

---

목차

1. create-react-app으로 리액트 폴더 생성

2. 파일 수정

3. git허브에 리액트 앱 업로드 하기

4. src 폴더 정리하기, index.js, App.js 수정

---

Movie App (nomadcoders.github.io)

우리가 만들고자 하는 사이트는 위와 같은 영화 평점 웹서비스 사이트이다.

---

1.  create-react-app으로 리액트 폴더 생성

원하는 위치에 이동후 아래와 같은 명령어를 cmd나 shell, 터미널에 입력

보통 폴더를 하나 만들고 그 위치에 만든다.

npx create-react-app movie_app_2020

다 완료되면 아래와 같은 메시지와 함께 폴더에 여러 파일들이 들어가진다.

아래와 같은 명령어를 또 친다.

 cd movie_app_2020
 npm start

그러면 아래와 같은 화면이 뜰 것이다.

준비단계 끝

터미널 창을 끄면 리액트 앱 연결도 끊기니 터미널은 계속 켜놔야한다.

 

다음으로 해당 폴더를 비주얼코드로 들어간다.

아래와 같이 많은 파일이 보인다.

---

2. 파일 수정

README.md 파일 다 지우고 아래와 같이 입력

package.json파일에 test, eject 삭제

---

3. git허브에 리액트 앱 업로드 하기

git없으면 git 설치 먼저 하기

Git - Downloads (git-scm.com)

 

1) 명령어 입력

cd movie_app_2020 
git init

 

2) 깃허브에 저장소 만들기

New repository · GitHub

회원 가입 후 위 사이트 접속

 

아래와 같이 입력후 create repository입력

.git으로 끝나는 주소가 저장소 주소이다.

.ㅎ

 

3) 아래와 같이 명령어 입력

git add .
git commit -m "02-2깃허브에 리액트 앱 업로드하기"
git branch -M main
git remote add origin https://github.com/windbrain/movie_app_2020.git
git push -u origin main

 

4) 잘 생성된 것을 볼 수 있다.

---

4. src 폴더 정리하기, App.js 수정

App.css

App.test.js

index.css

logo.svg

reportWebBitals.js

setupTests.js

package-lock.json

삭제

index.js 정리

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App />
);

 

App.js 정리

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

 

정리하고 화면 확인

아무것도 안나오는 것이 정상

---

출처

Do it! 클론 코딩 영화 평점 웹서비스-니꼴라스