CRA(Create React App)

2023.02.03

CRA란 무엇일까요?

Create React App : Set up a modern web app by running one command.

SUPER EASY!

한 줄의 명령어 입력으로 React 프로젝트 개발에 필수요소를 자동으로 구성하는 방법입니다!

• React 프로젝트를 구성하기 위해 필요한 것들은 상당히 많다! WebPack, babel, eslint 등.
• 이러한 것들을 신경쓰지 않아도 알아서 생성

CRA로 프로젝트 생성하기

윈도우는 git bash 또는 power shell에서
프로젝트용 폴더 안에 week-1 이라는 폴더를 하나 생성해주고 리액트 앱을 설치

ls #현재 내가 위치하고 있는 곳이 어디인지 확인.

cd 폴더이름 #리액트 프로젝트를 생성하고 싶은 폴더로 들어갑니다.

mkdir 폴더이름 #폴더가 없다면 폴더생성

yarn create react-app week-1 #프로젝트 생성!

CRA로 생성한 프로젝트 실행하기

cd week-1 # week-1 폴더로 이동

yarn start # 프로젝트 시작

이제는 src/App.js 파일을 수정하고 저장하면 새로고침이 없어도 UI가 자동 업데이트 된다.

프로젝트 구조를 보기

CRA로 생성한 프로젝트의 아래 캡쳐 화면을 보면 index.html이 있다.

public > index.html
→ src > index.js
→ src > App.js

위의 3가지를 주로 살펴보면된다

상대경로 import → 절대경로 지정하기

1. jsconfig.json 파일을 만든다(반드시 root 경로)
   

2. 다음 내용을 작성

{
	"compilerOptions": {
		"baseUrl": "src"
	},
	"include": ["src"]
}