공부블로그

React 시작하기 본문

리액트/리액트 공부

React 시작하기

떠어영 2021. 7. 14. 16:03
1. 작업환경 준비

 

Node.js ( 자바스크립트 런타임 ) 와 Yarn ( 자바스크립트 매니저 도구 )를 설치한다.

 

설치 확인 ) 

명령 프롬프트에서 

> node -v
v14.17.2

> yarn -v
1.22.10

 

git을 사용할 경우에는 Git Bash를 설치하고,

VS Code를 사용할 것이므로 VS Code도 설치한다.

 

 

 

2. VS Code에서 내 git repository 연결

 

1) VS Code에서 F1을 누르고 git clone입력 -> Git: Clone 메뉴 선택

 

2) 내 Git에서 생성한 레포지터리 URL을 입력

 

3) 클론 시킬 폴더 선택하면 끝!

 

 

 

3. 새로운 리액트 프로젝트 만들기

 

npx create-react-app begin-react

 

위 명령어를 입력하면 begin-react 라는 디렉터리가 생기고 그 안에 리액트 프로젝트가 생성된다.

 

생성이 끝나면 cd 명령어를 사용하여 해당 디렉터리에 들어가고, yarn start 입력 ( yarn 이 없다면 npm start )

 

$ cd begin-react
$ yarn start

 

 

실행하면 다음과 같이 브라우저에 http://localhost:3000/ 이 열리고위와 같은 화면이 뜬다. 

 

 

 

4. git에 commit, push 하기

 

새롭게 만들어진 리액트 프로젝트를 Git에 올려보자.

 

 1 ) VS Code에서 왼쪽 바 3번째 아이콘( Git )을 선택

 

 2 ) Commit 메세지를 입력하고, 체크를 누르고, push를 해준다. ( 푸시는 점3개 아이콘을 우클릭하면 나온다 )

 

 3 ) 내 레포지터리에 가서 커밋 확인!

 

 

 

중간에 npm start 오류가 떳었는데, 나는 npm install을 다시 해줘서 해결했다. 

git을 복제해오고 실행하는 과정에서 오류가 뜬 것 같다ㅠ