외곈 World 👽🌏

👿Yarn Berry 프로젝트 환경 설정 중 .yarn/cache 생성되지 않는 문제

Yarn Berry 프로젝트 환경 설정 중 .yarn/cache 생성되지 않는 문제. yarn install을 아무리 시도해도 캐시폴더가 생성되지 않음..

🧐 에러 원인

• 이전에는 enableGlobalCache의 기본값이 false였기 때문에, 각 프로젝트가 로컬 .yarn/cache 폴더에 의존성을 저장하도록 되어 있었다.
• 하지만 최근 업데이트에서 enableGlobalCache의 기본값을 true로 변경하여, 전역 캐시 사용을 기본 설정으로 적용하게 되었다.
• 따라서 Yarn의 최신 버전에서는 enableGlobalCache: false 설정을 .yarnrc.yml에 직접 추가해야만 로컬 캐시가 생성된다. 설정 파일에 해당 옵션을 직접 추가하지 않으면, Yarn은 전역 캐시를 사용하므로 .yarn/cache 폴더가 생성되지 않기 때문에 문제가 발생 했던 것!

✨ 에러 해결

• .yarnrc.yml 파일에 enableGlobalCache: false 설정 추가
  

  //.yarnrc.yml 
  nodeLinker: pnp
  enableGlobalCache: false
  ​

• 설정 변경 후 프로젝트 의존성 재설치
  

  yarn install

드디어 cache파일이 생성되었다!!

프로젝트 환경설정

🍀 ES Lint / Prettier 설정

1. eslint, prettier 패키지 설치
   • yarn add -D eslint prettier eslint-plugin-prettier eslint-config-prettier eslint-plugin-react eslint-config-react-app
2. Config 설정 분리
   • package.json의 "eslintConfig”부분을 별도의 .eslintrc.json파일로 분리 후 추가 설정 작성
     

     //.eslintrc.json
     
     {
         "extends": [
             "react-app",
             "react-app/jest",
             "plugin:prettier/recommended"
         ],
         "plugins":["prettier"],
         "rules":{
             "prettier/prettier":"error"
         }
     }
     ​

   • .prettierrc 파일 생성
     

     //prettierrc 
     
     {
         "useTabs": false,
         "printWidth": 80,
         "tabWidth": 2,
         "singleQuote": true,
         "trailingComma": "all",
         "endOfLine": "lf",  // 파일의 줄 끝(Line Ending) 형식을 지정
         "semi": false,
         "arrowParens": "always"
         }
     ​

3. setting.json 파일에 아래 코드 추가
   • Ctrl + Shift + P를 눌러 명령 팔레트를 열기 → "Preferences: Open Settings (JSON)"을 입력하고 선택

     // 수정 후 저장할 때 eslint로 autofix 실행
     "editor.codeActionsOnSave": {
       "source.fixAll.eslint": "true"
     },
     // 파일의 줄 끝(Line Ending) 형식을 지정. 앞으로 생성되는 파일들은 lf(mac)로 생성됨
     "files.eol":"\\n",
   

   ✅ 파일의 줄 끝 형식 :: mac vs window
   "files.eol": "\n": 파일의 줄 끝을 유닉스/리눅스 스타일인 LF (Line Feed) 형식으로 지정
   "files.eol": "\r\n" : 파일의 줄 끝을 Windows 시스템의 기본 형식인 CRLF 형식으로 지정
   
   
4. vscode에 적용
   

   yarn dlx @yarnpkg/sdks vscode
   

5. prettier에서 세미콜론 제거 설정했기 때문에 package.json에 아래 코드 추가
   

   //package.json
       "lint": "eslint \\"src/**/*/{js,jsx,ts,tsx}\\"",
       "lint:fix": "eslint \\"src/**/*/{js,jsx,ts,tsx}\\""
   
   

   • 적용

   yarn lint:fix
   

6. Craco Alias 설정
   • 설치
     

     yarn add -D @craco/craco craco-alias

   • tsconfig.paths.json 정의
     

     // tsconfig.paths.json
     {
         "compilerOptions":{
             "baseUrl":".",
             "paths":{
                 "@/*": ["src/*"],
                 "@components/*":["src/components/*"]
             }
         }
     }

   • craco.config.js 정의
     

     // craco.config.js
     module.exports = {
       plugins: [
         {
           plugin: CracoAlias,
           options: {
             source: 'tsconfig',
             tsConfigPath: 'tsconfig.paths.json',
           },
         },
       ],
     }

   • Tsconfig에 tsconfig.paths.json extends 시키기
     

     // tsconfig.json
     {
       "extends": "./tsconfig.paths.json",
       "compilerOptions": {
         "target": "es5",
         "lib": ["dom", "dom.iterable", "esnext"],
         "allowJs": true,
         "skipLibCheck": true,
         "esModuleInterop": true,
         "allowSyntheticDefaultImports": true,
         "strict": true,
         "forceConsistentCasingInFileNames": true,
         "noFallthroughCasesInSwitch": true,
         "module": "esnext",
         "moduleResolution": "node",
         "resolveJsonModule": true,
         "isolatedModules": true,
         "noEmit": true,
         "jsx": "react-jsx"
       },
       "include": ["src", "tsconfig.paths.json"]
     }
     
     ​

🍀 scss 설정

yarn add classnames sass

• global.scss 생성
• App.module.scss 생성
• src\App.tsx

import classNames from 'classnames/bind'
import styles from './App.module.scss'

const cx = classNames.bind(styles)

//    <div className={cx('container')}> 이런식으로 사용!

🍀 1. 프로젝트 생성하기

• yarn 설치

npm install -g yarn

• Create React App 기반 프로젝트 생성

yarn create react-app wedding --template typescript

🍀 2. Yarn Berry(PnP) 설정

1. node_modules 폴더 삭제
   
2. berry 버전 설정 ::  yarn set version berry
   

   yarn set version berry

3. root 경로에 .yarnrc.yml파일 생성
   

   //.yarnrc.yml 파일에 pnp 설정하기 (node_modules 대신 pnp방식 사용!)
   nodeLinker: pnp
   

4. yarn install
   

   yarn install
   

확장 프로그램 ZipFS 설치

Yarn Berry에서 TypeScript를 사용할 때 zipfs 확장 기능이 필요한 이유는 Yarn의 Plug'n'Play(PnP) 방식 때문이다. Yarn Berry는 node_modules 폴더 없이 .zip 파일을 통해 의존성을 관리하는데, 이때 파일 시스템을 .zip 형식으로 저장하고 불러오는 과정에서 zipfs가 필요하다.따라서 zipfs를 설치하면, Yarn Berry의 PnP 방식과 TypeScript 환경 간의 호환성을 높여준다. zipfs 확장 기능은 .zip 파일로 저장된 패키지들을 파일 시스템처럼 읽을 수 있도록 지원하여, PnP 환경에서 TypeScript나 기타 툴이 정상적으로 패키지 파일을 탐색할 수 있게 한다.

6. Yarn Berry의 Plug'n'Play(PnP) 방식과 VSCode의 통합 설정

yarn dlx @yarnpkg/sdks vscode

🔥👿 주의!!
명령 팔레트(Ctrl+Shift+P)를 열고 TypeScript: Restart TS Server"를 선택 → "Use Workspace Version”부모 폴더가 아닌 프로젝트 폴더 자체에서 VSCode를 열어야 한다!!!! vscode가 부모폴더로 열려있다면 Use Workspace Version가 보이지 않음...
참고:: https://github.com/yarnpkg/berry/issues/4788

🍀 3. typescript 설정

워크스페이스 버전에 맞는 타입스크립트 버전을 사용하도록 허용해주기

🍀 4. .gitignore에 추가

# yarn zero install
.yarn/*
!.yarn/cache
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions

# 참고::  https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored

🍀 5. App.test.tsx의 타입에러 제거하기

yarn remove @testing-library/jest-dom

yarn add -D @types/testing-library__jest-dom @testing-library/jest-dom

🍀 6. yarn start!!!!!!!!!!!!!!!!!!!!!!!

yarn start