리액트 앱 생성

CRA vs Vite

CRA : webpack, node.js, express server, source build, process.env.KEY, HMR
빠르게 React앱을 생성하도록 도와줍니다. 표준적으로 널리 사용되고 있습니다. HMR할때 소스 전체를 build합니다.
npx create-react-app 프로젝트명 --template typescript (타입스크립트로 생성시)

Vite : ESBuild, Golang, koa server, modile build, import.meta.env.KEY. HMR
빠른속도와 효율때문에 많이 사용합니다. HMR할때 모듈단위로 build합니다.
npm create vite@latest 프로젝트명 -- --template react-ts(타입스크립트로 생성시)
노드 모듈 설치를 생략하기에 npm install로 node.js를 설치해 줍니다.

pages - 라우트에 대응하는 페이지 컴포넌트
components - 공통 컴포넌트, 각 페이지에서 사용되는 컴포넌트
utils - 유틸리티
hooks - 리액트 훅
model - 모델(타입)
api - api 연동을 위한 fetcher등

//Home.tsx 
import { formatNumber } from "../components/format";
import Header from "../components/Header";

const COUNT = 100;

function Home() {
    return (
        <>
        <Header/>
        <div>book body</div>
        <div> count : {formatNumber(COUNT)}</div>
        </>
    )
}

export default Home;

//format.ts
export const formatNumber = (number : number) => {
    return number.toLocaleString();
};

//Header.tsx
function Header() {
    return (
        <header>
            <h1>book store</h1>
        </header>
    );
}

export default Header;

React CLI
package.json에 모듈버젼과 명령어들이 나와있습니다.
npm run build를 하면 작성한 프로젝트앱이 마운트하고 번들링해서 만들어 집니다.

"typecheck": "tsc --noEmit --skipLibCheck"
tsc : 타입스크립트 컴파일 명령어 타입오류를 찾을수 있고 알려줍니다.
no Emit : 출력파일을 비활성화 시킵니다.
skipLibCheck : 외부라이브러리 타입체크를 생략합니다.

tsconfig파일 : 컴파일 옵션, 컴파일러가 참조할 라이브러리등 컴파일 과정에서 사용하는 기능들이 있습니다.