여러분 리액트 cra 권장하지 않는다는 사실.. 저만 이제서야 ....정말 튱귁적임니다.
제가 이걸 알게 된 계기는 웹 심화 스터디 pnpm 실습을 준비하고
레퍼런스를 보며 cra 를 통해 실습 준비를 하는데 진짜 머리가 지끈한 에러를 마주하게 되어 이 에러에 대해 찾아보게 되었고, 그 과정에서 cra는 더 이상...이하 생략 는 사실을 알게 되었습니다.

이건 pnpm 실습하다가 에러 발생해서 원인을 찾아보게 된 결과
pnpm을 사용한 create-react-app
여기에서 확인하게 되었습니다.
(근데 이 dev 커뮤니티 넘 좋아서 바로 회원가입 해버림)

번역체가 진짜 왕 웃기긴한데 ㅋㅋㅋㅋ ㅜㅜ
아무튼 이 분은 어떠한 경로로 cra 와 그 오류와의 연관성을 알게되었는지 궁금하다..

⚠️ 문제 원인 : Create React App (CRA)와 pnpm을 사용하여 프로젝트를 설정했을 때 Jest 테스트 스위트에서 발생하는 문제 그리고 Jest의 타입 관련 문제로 인해 발생하는 것 으로 이해하였다

🤯 문제 해결 :

pnpm add -D @types/testing-library__jest-dom

유형 패키지를 설치하면 해결된다 하였으나 본인은 계속된 에러 이슈를 겪었고 결국 app.test.tsx를 삭제하였다.
추가적 정보 >

그래서 이대로도 가능하나 더욱 완벽한 구조를 위해서 pnpm + vite + ts 를 이용해서 실습을 해보겠다.

✌️ VITE?

Vite는 프론트엔드 개발을 위한 툴이다. 한글로는 비트라는 발음에 가깝다.
Vue에 종속되어 있는 툴이 아니라 React, Vanilla, Svelte 등 프론트엔드 개발 어디서든 사용될 수 있다.

Vite의 가장 큰 특징이라고 한다면 Dev Server에서 Native ESM을 사용하여 소스를 제공한다는 점이다.
ESM (EcmaScript Modules)이란 ES6에서 도입되었으며, import/export를 사용하여 모듈을 동적으로 로드할 수 있는 모듈 시스템이다.

🌟 Create React App대신 사용하는 이유

CRA는 JavaScript로 구성된 Webpack을 사용하는데 속도가 느린편이다.
평소에는 못느낄 수 있지만 처리해야 할 코드의 양이 많아질 수록 느린 속도를 채감할 수 있다.
위와 같은 단점을 해결하기 위해 Esbuild를 기반으로 만들어진 빌드툴인 Vite를 사용하게 된다.
또한 리액트 스터디장 재훈오빠에게 물어보니

그렇다고 합니다
추가적인 레퍼런스도 좋으니 한번 읽어보세요~
vite

✌️ 실습

자 이제 실습을 해봅시다.

1. 폴더 생성

mkdir pnpm2

2. pnpm2 내부로 들어가 init

pnpm init

그러면 package.json만 형성될 텐데 이런 내용들이 있으면 된다.

3. 종속성 중 일부를 설치

pnpm add -D typescript typescript-node

4. tsconfig.base.json 파일 만들기

// pnpm2/tsconfig.base.json
{
  "compilerOptions": {
    "strict": true,
    "strictNullChecks": true,
    "esModuleInterop": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "noUnusedLocals": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "jsx": "react-jsx",
    "moduleResolution": "node"
  }
}

기본 Typescript 구성이며 프로젝트 요구 사항에 따라 사용자 정의 가능합니다

5. tsconfig.json 파일 만들기

// pnpm2/tsconfig.json
{
  "extends": "./tsconfig.base.json"
}

6. pnpm-workspace.yaml 파일 만들기

# pnpm2/pnpm-workspace.yaml
packages:
  - "./packages/**"

-> pnpm-workspace프로젝트에 여러 패키지를 추가하고 관리하는 것이 놀라울 정도로 쉬워졌습니다.

7. 루트에서 이제 패키지 폴더를 만들기

mkdir packages

8. create vite!

cd packages
pnpm create vite

리액트와 ts를 선택해주었습니다 저는

9. shared 폴더 만들기

# pnpm2/packages
mkdir shared

아래와 같이 폴더구조를 형성해줍니다.

10. 본인이 형성한 vite 에 들어가 이름 속성을 변경

// pnpm2/packages/vite-project/package.json
{
"name": "@pnpm2/vite-project"
...
}

11. 패키지 내부에서도 init

# pnpm2/packages/shared
pnpm init

12. shared 폴더에 index.ts 파일 만들어주기

// pnpm2/packages/shared/index.ts
export const sayHi = (userName: string) => console.log(`Hi ${userName}`)

sayHi매개변수 로 사용 userName하고 "안녕하세요"라는 메시지를 콘솔에 기록하는 기본 기능이 있다.

13. 패키지를 vite-project에 가져온다

# pnpm2/packages/vite-project
pnpm add @pnpm-monorepo/shared

vite project 내부 package.json 워크스페이스 확인
패키지에서 shared. 변수/함수를 가져올 수 있다.

14. app.tsx에서 확인

// pnpm2/packages/vite-project/App.tsx
import { sayHi } from "@pnpm-monorepo/shared";

const App = () => {
  sayHi("Vedansh");
  return <h1>Main app for SOPT</h1>;
};
export default App;

15. 다시 pnpm install 후

pnpm dev

성공!

추가적으로 모노레포 워크스페이스에 대해서 공부해야될 것 같다. 재밌다.

✌️ Reference

• Setting up a monorepo with Vite, Typescript, and pnpm workspaces