CRA (Create React App)

📖 CRA ( create React App )

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

• 보일러플레이트 : 원래는 어마어마하게 세팅할게 많았지만,
  이제는 CRA가 알아서 척척 해준다.
  세상 편해졌네

  탕후루 만드는 것과 비슷하다고 생각하면 된다!
  1. 🤴가 탕후루 가서 완제품 구매 = CRA
  2. 재료와 도구 구매하여 하나씩 직접 제작 (모든 세팅을.... 혼자)

CRA로 프로젝트 생성하기

1. Ls 로 파일 확인
2. Cd로 원하는 파일 이동
3. Yarn create react-app *프로젝트 이름*
   4. CD *프로젝트 이름*
4. Yarn start 입력하면 프로젝트 생성 완료!

도메인 만들어서 배포하면 우리가 흔히 아는
www. ~~ 주소의 웹사이트가 만들어진다고 한다!

---

🤔 구조 파악하기

src 파일의 App.js에 들어가보면

import "./App.css";

상단에 이 친구가 있다.
여기서 /. 는 상대경로이다. /.는 여기로 부터 한단계 위를 의미한다.

• 가독성 떨어져서 상대경로 말고 절대경로 사용을 권장한다.

✋ 절대경로로 바꾸는 방법

1. Root 경로에 jsconfig.json 생성
   주의할 점 : src 파일 안에 만들면 안 됨!!!
2. 아래의 코드 입력

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

Src 폴더 밑에 있는 것들을 다 절대경로로 써주세요 ~ 라는 의미이다.
import "./app.css" 앞에 있는 ./를 생략해도 정상 작동한다.

---

public 파일에 있는 index.html에 들어가면,

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

root라는 친구가 있는데 , 이 div 안에서 React가 다 그려준다고 보면 된다.

index.js를 보면 확인할 수 있다.

const root = ReactDOM.createRoot(document.getElementById("root"));

아이디가 root인 친구를 getelementbyid로 찾아서,
ReactDom API를 이용해서 CreateRoot를 해줘
즉 , React 관련된 화면들을 만들어주세요~ 라는 의미이다 !

---

우리는 이 안에서 놀면 된당 !

import logo from "./logo.svg";
import "/App.css";

function App() {
  return (
    <div className="App">
    // 여기가 Playground!
      <p>Hello world!</p>
    </div>
  );
}

export default App;