학회 개발이 본격적으로 시작되면서
개발 스택을 쭈욱 받았는데 멘토님이 강력하게 추천해주신 툴이
yarnberry + TS + zustand였습니다.
사실 주스탠드와 TS는 알고있었지만
yarnberry는 처음 듣기도하고
정보도 많이 없어서 설치 방법을 공유합니다.
환경은 window입니다!
우선순위
- 캐시삭제
- pnp.cjs 삭제
- node.js모드로 돌아갔다가 yarnberry 다시 받기
왜 YarnBerry여야하나요?
저도 기존의 프로젝트는 모두 npm으로 진행했습니다.
하지만 학회 웹의 경우 1기인 저는 용량이 크지 않을 수 있지만,
추후 과제 제출이나 수강신청 등이 이어지게 되면 배포, 의존성이 꼬이고
프로젝트가 매우 무거워질 것입니다.
이런 면에서 zero-install을 지원하는 yarnberry가
최근 큰 프로젝트들에는 추천되고 있어 채택하게 되었습니다.
의존성 설치가 빠른 이유는 PnP(Plug'n Play) 덕분입니다.
다만 일부패키지가 pnp에서 지원이 안되거나
정보가 없는 점이 yarnBerry를 설치하면서 느낀 단점이었던 것 같습니다.
그래도 npm보다 훨씬 다운받아지긴 했습니다.
Typescript와 Vite
타입스크립트에서 리액트를 받는 명령어인
create-react-app (CRA)가 권장이 되지 않는다고 합니다.
(애초에 에러가 납니다: deprecated ~~)
때문에 리액트를 TS로 받을 시 Vite를 추천하고 있습니다
먼저 npm으로 typescript Vite를 받아줍시다
npm create vite@latest 플젝이름 --template react-ts
cd 플젝명
npm install
npm run dev
vite를 받아줄 시 꼭 뒤에 template react-ts를 붙여줘야합니다
yarn berry 전환
터미널에 아래와 같은 명령어를 치고,
not permitted에러가 뜬다면 관리자모드로 파워쉘에 들어가
해당 명령어를 쳐줍니다
corepack enable이러고
yarn install 과
yarn dev로 돌아갔으면 사실 이 글을 쓰지 않았을지 모릅니다.
돌아간다면 축하드려요. 글 그만보셔도 됩니다.
관리자모드 허가해도 거부되는 경우
주로 캐시를 지우라는 방법이 권장되지만
저는 캐시 자체가 인식이 안되고
yarn install을 다섯번을 했지만,
문제가 해결되지 않았습니다.
GPT에서 아래같은 방법을 추천해줬지만
저는 먹히지 않았습니다.
rd /s /q .yarn\cache
del .yarn\install-state.gz
yarn install
yarn dev
아예 캐시를 날리는 아래같은 방법도 있긴합니다
yarn cache clean
yarn install
yarn dev
이걸해도 캐시가 없다는 오류가 뜬다면
저와 비슷한 오류를 만나신겁니다.
그다음으로 제안되는 방법은
pnp.cjs를 지웠다 다시 설치하는 방법이라고 제안받았습니다
del .pnp.cjs .pnp.loader.mjs
yarn install
yarn dev
이걸로도 되지않아 저는
pnp에서 다시 node로 돌아가봤습니다.
yarn config set nodeLinker node-modules
yarn install
yarn dev그러고 다시 yarnberry 설치과정을 따르니
제대로 작동하는걸 확인할 수 있었습니다.
Zustand 다운받기
리액트에서는 따로 install 해줬어야하는걸로 기억하는데
typescript는 zustand가 이미 있다고 합니다
yarn add zustand일단 기본 세팅이 끝났습니다.
yarnberry랑 작업 잘 해보겠습니다!
