create-react-app

React SPA(Single Page Application)를 빠르게 개발할 수 있게 하는 툴 체인

사전준비사항

• node, npm, npx 설치 유무 확인

> node -v
v16.15.0

> npm -v
8.9.0

> npx -v
8.9.0

node modules 폴더 안에 설치돼 있는 것들

• 바벨
  JSX를 JS로 변환

• Jest
  테스트돕는

• Post CSS
  css transfiler

• Webpack
  모듈 번들러(Module Bundler)입니다. 코딩할 때 편의를 위해 여러 개의 모듈로 나눠서 작업하는 경우가 많습니다. 하지만 브라우저에서 파일 단위 모듈 시스템을 이용하는 것은 많은 네트워크 비용 낭비를 유발할 수 있습니다. 이러한 문제 때문에 여러 개의 모듈을 하나의 파일로 묶어서 보낼 모듈 번들러가 필요합니다.
  여기서 웹팩이 등장합니다. 웹팩에서는 자바스크립트, 스타일시트, 이미지 등 모든 것을 모듈로 봅니다. 이런 웹팩에는 중요한 속성이 4가지 있습니다.

시작하기

cd Documents  // 새 프로젝트 설치할 폴더로 이동 (똑같이 안해도 됨)
npx create-react-app 만들폴더명아무거나 // 생성
code 만든폴더명 // 만든폴더로 vscode 에디터 열기
npm start // vscode 터미널에서 실행. 페이지 열림

• 설치 후 깔려있는 폴더,파일들
  

my-app만든폴더
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js
    └── setupTests.js

• 필요없는 파일 삭제 / 수정
  1.README.md 파일 내용 전부 삭제 후 재작성
  2.yarn.lock 삭제. npm으로 하면 되므로 삭제.

• package.json 삭제

// package.json
"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",  // 삭제
  "eject": "react-scripts eject" // 삭제
},

• App.js와 index.js 필요없는 부분 삭제 후, 최종으로 남은 것
  App.js 에서 작성한 것은 index.html의 body에 <div id="root"></div> 로 들어간다. 이를 index.js가 넣어주는 역할을 한다.
  document.getElementById('root')에 <App />을 넣어준다.

// index.js
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />); // index.html에 <App />을 넣어줌

            
            
// App.js
import React from 'react';

function App() {
  return (
    <div className="App">
      Hello World!
    </div>
  );
}

export default App;

• src폴더 내 파일 삭제

- 삭제할 것들
src/logo.svg
src/reportWebVitals.js
src/setupTests.js
src/index.css
App.test.js
App.css

• 최종적으로 남는 src폴더 내부

src
├── App.js
└── index.js