CRA (Create React App)

CRA

• 한 줄의 명령어 입력으로 React 프로젝트 개발에 필요한 필수요소를 자동으로 구성하는 방법이다.
• React 프로젝트를 구성하기 위해 필요한 것들은 매우 많다. (WebPack, babel, eslint 등)
• 이러한 것들을 신경쓰지 않아도 알아서 해준다. → 보일러플레이트

CRA 생성

• 윈도우는 git bash 또는 power Shell에서 입력한다.
• power Shell은 윈도우 터미널 프로그램이고 git bash는 우리가 git을 설치했을 때 같이 설치되는 프로그램이다.

yarn create react-app week-1

cd week-1

yarn start

• App.js 에서 기존내용(코드 7번째 줄부터)을 삭제하고 Hello React!를 넣고 저장하면 새로고침 없이 화면이 바뀐다.
• public에 있는 index.html에 들어가보자.
• SPA이기때문에 서버로부터 페이지를 index.html하나만 받고 나머지는 동적으로 계속해서 그려지기 때문에 SEO에 약하다고 했다.

public > index.html이 말하고 있는 내용

<div id="root"></div>

• 태그 하나 있는데 id가 root인 친구가 있다.

• 이 root인 친구가 뭐냐면 src > index.js 로 가서

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

• id가 root인 친구를 getElementById로 찾아서 creatRoot를 해라. ReactDom을 이용해서 리액트 관련된 화면들을 만들어라. 그리고 render(화면에 그린다)를 해라.
• App 이라는 것은 아까 수정했었던 src> App.js 파일을 가리키는데 결국 App.js가 우리의 플레이 그라운드라는 것을 말한다!

import "./App.css";

• . /는 상대 경로(relative path) 폴더가 많아지면 관리가 어렵다. (././././ 같이 써야 함)
• 절대 경로 지정하기 : root경로에 jsconfig.json 파일을 하나 만든다.

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

//src 폴더 밑에 있는 것들은 다 절대 경로로 써달라는 뜻

• App.js

//import "./App.css";
import "App.css";

./ 없이도 경로 설정이 가능해진다.