[React] create react app 프로젝트 세팅

니콜라스 쌤의 노마드코더 'ReactJS로 영화 웹 서비스 만들기' 보면서 공부한 내용입니다.
부족한 내용이나 잘못된 내용은 댓글남겨주시면 감사하겠습니다!

출처 : https://nomadcoders.co/react-for-beginners

 

이전글에 이어,

[React] props types 자료형, 필수 값, 기본 값 지정

 

이번에는 crate react app에 대해 알아보겠습니다.

이전 글을 보면 이전에 만든 리액트 어플리케이션은 스크립트을 직접 Import함으로 써 만들었습니다.

<script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/prop-types@15.7.2/prop-types.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

 

create-react-app을 사용하면 많은 스크립트 import와 사전 설정을 알아서 해줍니다.

개발 서버 접근, 자동으로 새로고침, 즉각적으로 어플리케이션 안에 css를 포함시켜 주는 등 여러 기능이 있습니다.

 

1. node.js 설치

create-react-app을 사용하려면 먼저 node.js를 설치해주어야합니다.

 

저는 이전에 설치를 이미 하였기 때문에 자세한 내용은 아래 글 참고바랍니다.

[Next.js] 개발환경 세팅

 

설치가 완료되었다면, node -v 명령어를 통해 설치 확인과, npx 명령어가 실행되는지 확인을 해줍니다.

 

 

2. crate-react-app 프로젝트 설치

https://github.com/facebook/create-react-app

GitHub - facebook/create-react-app: Set up a modern web app by running one command.

npx create-react-app 프로젝트명
npx create-react-app react-for-beginners

3. vscode로 프로젝트 열기

code react-for-beginners

 

4. package.json

package.json을 확인해보면 사용할 수 있는 scripts가 나와있습니다.

 

5. 프로젝트 실행

npm run start

 

6. 프로젝트 설정 수정

App.test.js, App.css, index.css, logo.svg,reportWebVitals.js, setupTests.js 파일 삭제

 

App.js, index.js 수정

 

다음 글에서는 create-react-app에서 이전에 배운 것들을 활용하여 컴포넌트를 생성하고 props를 넣고, propsType도 설정해보겠습니다.

 

읽어주셔서 감사합니다.