2. twitter clone 하기 - 기본 환경 설정 하기

1. react로 시작하기

• 폴더를 생성 후 VSCode 로 실행합니다.
• 터미널을 연 후, 터미널 시작 경로가 VSCode로 연 폴더의 경로인지 확인합니다.
• create-react-app 을 사용하여 리액트 프로젝트를 생성합니다.

  create-react-app- twitterClone

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

2. Github 저장소와 연결하기

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

git 새로운 repositories 추가하기

• Repository name(저장소 이름)에 twitterClone을 입력하고 Description(설명)에는 "Cloneing Twitter with React and Firebase"를 입력합니다. (Description 은 작성을 하지 않아도 상관은 없음)

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

  git remote add origin http://github.com/yourGithubID/twitterclone

3. README.md 파일 수정하기

• 이곳에 어떤 환경으로 구축하고 어떠한 방식으로 구축했는지 설명을 작성합니다.

4. package.json 파일 수정하기

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

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

5. 기초 파일 수정하기

• 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, logo.svg, reportWebVitals.js, setupTest.js 선택해서 삭제

6. git에 업로드 하기

• 지금까지 작성한 부분을 Github에 업로드 합니다.
• git add . gt commit -m "초기 환경설정하기" git push origin master