React 입문 : CRA ( Create React App )

CRA란 ?

Create React App : Set up a modern web app by running one command.
[출처 : 공식문서]

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

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

CRA로 프로젝트 생성하기

나같은 경우에는 폴더를 일단 만들고 powershell을 열어 vscode를 연 다음

VsCode안 terminal에서 실행한다. 그것이 편하다.

yarn create react-app [프로젝트 명]

yarn 명령어로 생성된 프로젝트를 실행해보자

yarn start

어디서 내가 html css javascript를 작성 하는가?

• src > App.js 가 홈그라운드이다.

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

언제나 import와 export가 남발하게 되는데 그럴 때 src 폴더 안의 모든 경로를 절대경로로 바꾸어 편하게 import export를 해보자

1. jsconfig.json 파일을 root경로에 만들자 - root 경로 모르면 .gitignore옆에 나란히 있어야한다고 생각하자

2. 내용을 작성하자

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

// 의미는 src밑에 있는 모든 것들은 절대경로로 쓰겠습니다. 라는 말이다.

이러면 무엇이 편한고 하냐면

< App.jsx>

import "./App.css"; // jsconfig.json 쓰기전
import "App.css"; // jsconfig.json 쓴 후 

./ 이런거 써줄 필요가 없다. 컴포넌트, router ,styled-component 등이 앞으로 폴더별로 많아질텐대. 편할거 같지 않는가?