[React] 개발환경 설정 및 프로젝트 생성

Development/React

도롱뇽도롱 2022. 7. 31. 18:00

지금까지 Vue.js 다큐먼트를 따라 하였는데 입사하게 된 회사는 Vue.js를 제외한 Angular와 React를 사용하기에 React부터 공부해보기로 하였다.

개발자의 길이란 멀고도 험하고 배움엔 끝이 없다.

React는 Meta(구 Facebook)가 개발한 JavaScript UI 라이브러리이다.

1. Node.js 설치

Vue와 마찬가지로 React 프로젝트를 생성하기 위해선 Node.js를 설치해주어야 한다.

먼저 터미널을 켜 node -v를 입력한다.

위와 같이 node의 버전이 나온다면 이미 설치되었다는 것이기에 설치할 필요가 없으며 node의 버전이 나오지 않는다면 설치를 해줘야 한다.

Node.js의 설치과정은 기존 Vue.js 개발환경 설정에서 진행했었기에 해당 링크의 2번까지 진행해주면 된다.

[Vue.js] 개발환경 설정

개발자라면 프론트엔드와 백엔드를 구분하지 않고 영역을 끊임없이 넓혀나가야 하지 않을까. 지난 회사에서 다루었던 Vue.js, 이직 후 머릿속 한편 구석에 박아두었지만 다시 꺼낼 때가 된 것 같

galaxyuliana.tistory.com

2. 작업하고자하는 폴더로 이동한 후 프로젝트 생성

npm create-react-app react-exercises

여기서의 npx는 Node Package Execute로 npm 5.2+ 버전의 패키지 실행 도구이다.

create-react-app 패키지가 설치되어 있지 않았기에 설치해준다.

설치가 완료된 모습.

3. 프로젝트 실행하기

React 프로젝트를 로컬에서 실행하기 위해선 아주 간단한 명령어를 입력해주면 된다.

npm start

4. Chrome React Developer Tools 설치

React는 Vue와 마찬가지로 chrome의 확장 프로그램인 React Developer Tools를 제공해주는데, 이 확장 프로그램을 이용하여 React 앱의 계층 구조를 확인하는 등 개발에 도움을 받을 수 있다.

Life.Contains("Coding");