1. Disney plus clone 하기 - 기본 환경 설정 하기

1. react로 시작하기

• 명령 프롬프트 또는 터미널을 실행 후 원하는 위치에 create-react-app을 사용하여 리액트 프로젝트를 생성합니다.

create-react-app disney_plus_clone

• 생성된 폴더를 기준으로 VSCode를 실행합니다.

2. Github 저장소와 연결하기

• Github에 로그인 후 왼쪽 상단에 보이는 New를 눌러서 저장소 만들기 화면으로 이동합니다.

github에 새로운 repositories 추가하기

• Repository name(저장소 이름) 에 disney_plus_clone을 입력한 후 Create repository를 누릅니다.

repository 설정하기

• 아래의 코드로 Github 저장소와 diseyplusclone 폴더를 연결합니다.

git remote add origin //[HTTPS주소 or SSH 주소]

3. 기초 파일 수정하기

• index.js 파일을 열어서 필요하지 않은 코드를 삭제합니다.

import React from "react" 
import ReactDOM from "react-dom" 
import "./index.css" // 삭제 
import App from "./App" 
import reportWebVitals from "./reporWebVitals" // 삭제 
React DOM.render( 
<React.StricMode> 
  <App />
</React.StricMode>,
document.getElementById("root") ) 
// If you want to start meauring performance in your app, pass a function // 삭제 
// to log results (for example: reporWebVitals(console.log)) // 삭제 
// or send to an analyties endpoint. Learn more: http://bit.ly/CRA-vitals // 삭제 
reportWebVitals() // 성능 측정을 위한 함수 => 삭제

• App,js 파일을 전체 삭제하고 아래와 같이 새로운 코드를 입력합니다.

const App = () => {
  return <div>App</div>
}

export default App

• 불필요한 파일을 삭제합니다. 
  => App.css, App.test.js, index.css, log.svg, reportWebVitals.js, setpuText.js

4. git에 업로드 하기

• 지금까지 작성한 부분을 아래 코드로 Github에 업로드 합니다.

git add .
git commit -m "docs: 불필요한 파일 삭제"

5. package.json 파일 수정하기

• package.json 파일을 열어 script의 test와 eject 명령어를 삭제합니다.

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

• 지금까지 작성한 부분을 아래 코드로 Github에 업로드 합니다.

git add .
git commit -m "chore:package.json 수정"

6. README.md 파일 수정하기

• 이곳에 어떤 환경으로 구축하고 어떠한 방식으로 구축했는지 설명을 작성합니다.
• 수정후에 아래의 코드로 Github에 업로드 합니다.

git add .
git commit -m "feat: README.md 수정"

7. Githup에 전체 업로드 하기

• 지금까지 작성한 부분을 Github저장소에 업로드합니다.

git push origin master