[Legacy][React] CRA를 이용하여 프로젝트 생성 및 정리

[React] CRA를 이용하여 프로젝트 생성 및 정리

해당 게시글에서는 CRA(create-react-app)을 이용하여 React 프로젝트를 생성하는 방법을 알아보자. React 프로젝트를 생성하는 방법은 크게 2가지 방법이 있다고 볼 수 있다.

첫번째는 프로젝트에서 사용할 webpack, gulp 등 설정을 내가 원하는 것만 추가하여 프로젝트를 생성하는 방법이 있다.

두번째는 CRA(create-react-app)을 이용하여 간단하게 프로젝트를 생성할 수 있는 방법이 있다.

기본 셋팅 - npx 설치하기

우선 npx를 설치하여야 한다. yarn or npm으로 설치할 수 있고 사용하고 있는 것으로 간단하게 설치하면 된다. 아래 설치 명령어를 참고해보자.

yarn 명령어 : yarn global add npx

npm 명령어 : npm i npx -g

npx를 이용하여 React 프로젝트 생성

설치한 npx를 이용하여 react 프로젝트를 생성할 것이다. 생성하는 방법은 아주 간단하다.

• 1. termianl을 실행하고 프로젝트를 생성하고자 하는 위치로 이동
• 2. 명령어 입력 : npx create-react-app “프로젝트 명”

React 프로젝트 생성 시 주의할 점

CRA 명령어를 이용하여 프로젝트를 생성하는 경우, 대문자를 사용하면 안된다. 자세한 내용은 첨부된 링크에서 확인해보자.

[React] CRA 에러, create-react-app 에러

React 프로젝트 정리 및 실행하기

프로젝트 실행하는 방법은 매우 간단하다. 터미널을 실행한 후 npm을 사용하는 경우 npm start, yarn을 사용하는 경우 yarn start를 이용하여 실행하면 된다. 필자와 같은 화면이 표시되면 성공적으로 실행이 된 것이다.

이제 폴더구조와 간단하게 코드를 정리해보자. 기본적인 폴더구조는 아래와 같이 되어 있다. 그러나 디폴트로 생성된 모든 파일과 코드를 사용하는 것이 아니기 때문에 간단하게 정리해보자. 필자는 아래 파일을 모두 삭제해주었다. 삭제하고 코드를 정리해주면 아래와 같은 페이지로 변하게 된다. (코드는 아래 링크 확인)

• App.css
• App.test.js
• index.css
• logo.svg
• reportWebVitals.js
• setupTests.js

이제 깔끔하게 기본 프로젝트가 완성되었다. 다음 게시글부터는 React의 기본을 쉽고 빠르게 배워볼 수 있도록 하자. 더 자세한 코드는 해당 링크를 확인해보자.

마지막

해당 내용은 틀릴 수도 있다는 것을 감안하여 봐주세요. 틀린 내용 및 오탈자 수정 요청 환영입니다.