리액트 입문(개발 환경 세팅 및 CRA)

CRA란(Create React App) 

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

 

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

---

명령어 실행 후 터미널 모습

1. 폴더 생성 후 오른쪽 클릭으로 폴더에서 터미널 열기 클릭

 

2. yarn create react-app week-1(프로젝트명)

 

3. 폴더 내부에 터미널에서 입력한 프로젝트명으로 폴더가 하나 생성돼있는데 vscode로 생성된 폴더를 열어주면 위와 같은 모습을 볼 수 있음. 

 

4. 폴더 우클릭 후 터미널을 열어서 cd week-1(프로젝트명) 실행 후 yarn start 실행하면 live server와 같은 페이지를 열 수 있음

 

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

결국, 중요한 것은 [우리의 플레이그라운드는 ‘App.js’라는 것] 

---

# 상대경로 => 절대경로 지정

 

1. jsconfig.json 파일 생성(반드시 root 경로에 만들기)

 

2. jsconfig.json 파일에 아래 내용 작성, src 아래 있는 파일은 모두 절대 경로로 바로 지정하겠다는 의미이다.

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

 

3. 'App.css'와 같은 형태로 작성해도 지정이 됨