[리액트프로젝트 시작하기] 1. 설정하기

[1] 회사에서 하는 프로젝트이므로, private로 만들고, Add a README file을 추가한다.

[2] 프로젝트를 생성 할 경로로 CD 명령어로 이동한다.

git clone 생성한 레포

레포 폴더 

   -README.md 

이런 구조의 프로젝트가 클론되고 자동 remote된다.

[3] 리액트 프로젝트 생성하기.

cd 생성된레포폴더

npx create-react-app .
//현재 경로에 리액트앱을 생성한다.

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

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

 

이런 에러가 나온다. 내가 처음 공부할려고 create-react-app을 글로벌로 설치해서 그런듯? 지우고 다시 시도

-'Y' 선택한 후에 리액트를 설치해주자.

 

npm run start
//위 명령어로 리액트 앱을 띄워보자

성공한 내용으로 git에 올려보자.

 

git add .
//작업 대기열에 올린다

git status
//잘 올라갔는지 확인

git commit -m "Feat: 리액트 앱 생성"

git push -u origin main
//저장소에 푸시!!!

[4] 깃허브에서 확인하기.

 

[5] 이걸 내집 로컬 PC에 클론 한 뒤에 git pull로 서버에선 적용만 되도록 하자.

내 로컬 컴퓨터에 git clone했을때, 주의할점

npm install

이거 최초일 때 해준다. 그런 뒤에

npm run start
//잘된다!!

[6] App.js에 다 지우고 초기만 만들고 push한 다음에 배포서버에 pull해보자

//App.js
import React from "react";

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

export default App;

git add .
git commit -m "Fix: 프로젝트 default init"
git push -u origin main

//github에서 확인

 

성공!!!!!!!!!

[6] 배포서버에서 pull로 변경된 코드를 적용해보자

이런식으로 로그가 나오게 되고

npm run start
//시작해보면 정상적으로 반영 되는걸 알 수 있다!!!!