Project Scaffolding (진행 중입니다. 완료되면 다시 정리할게요!) #2

YOOJS1205 · 2023-11-12T15:45:16Z

다음과 같은 목차로 설명드릴게요.

진행한 것들
해결하지 못한 것들
앞으로 할 것들
확인해주셔야 할 것들

Scaffolding 진행 과정은 아래 링크로 follow up 가능합니다!
https://jundev.vercel.app/yarn-berry-github-actions-vercel-%EA%B8%B0%EB%B0%98-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-scaffolding

Vercel 주소
https://vercel.com/ddoeatddoeats-projects

1. 진행한 것들

핵심적으로 필요한 패키지들을 설치했습니다.

  // package.json
  "dependencies": {
    "@tanstack/react-query": "^5.8.2",
    "axios": "^1.6.1",
    "classnames": "^2.3.2",
    "next": "14.0.2",
    "react": "^18",
    "react-dom": "^18",
    "storybook": "^7.5.3"
  },
  "devDependencies": {
    "@types/node": "^18",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "@typescript-eslint/eslint-plugin": "^6.10.0",
    "@typescript-eslint/parser": "^6.10.0",
    "autoprefixer": "^10.0.1",
    "chromatic": "^9.0.0",
    "eslint": "^8",
    "eslint-config-next": "14.0.2",
    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-prettier": "^5.0.1",
    "eslint-plugin-react": "^7.33.2",
    "postcss": "^8",
    "prettier": "^3.0.3",
    "tailwindcss": "^3.3.0",
    "typescript": "5.2.2",
    "vercel": "^32.6.1"
  }

기존 yarn classic 버전에서 node_modules로 관리하던 종속성을 pnp 방식으로 변경하였습니다.

# .yarnrc.yml
nodeLinker: pnp

종속성들은 node_modules가 아닌 .yarn/cache 디렉토리에 zip 파일로 저장되고, 관리됩니다.
또한, node_modules와 다르게 종속성 zip 파일들을 전부 원격 저장소로 push 합니다.
zip 파일로 관리되지 않는 종속성들은 .yarn/unplugged 디렉토리에 들어가고, 초기 1회에 반드시 설치가 필요합니다. 운영체제에 종속된 패키지들이 있어서 사용자들마다 다르기 때문에 원격 저장소로 push 하지 않습니다.
eslint와 prettier 아주 기초적인 설정만 하였습니다.
Tailwind CSS를 사용하기 위한 기본 설정 하였습니다.

/** src/styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Github Actions 사용해서 CI 설정하였습니다. 아래의 작업들을 수행합니다.

린트 체킹
빌드 테스트
피쳐 브랜치 기준 프리뷰 (Deploy Preview)
main branch push 시 자동 배포

해당 작업들은 .github/workflows 디렉토리에서 확인 가능합니다. 또한, CI 작업은 Repository의 Actions 탭에서 확인 가능합니다.

2. 해결하지 못한 것들

프로젝트 클론 후 종속성 설치 시 checksum 문제 발생
아래와 같이 임시적으로 해결은 했으나, 설치 시 매번 .yarn.lock 파일의 checksum 값들을 업데이트되는 이슈가 있습니다. 옳바른 방법이 맞는지 조금 더 찾아볼게요.

# .yarnrc.yml
checksumBehaviour: 'update'

프로젝트 클론 후 종속성 설치 시 unplugged 종속성 설치 실패 이슈
swc와 같은 종속성들은 .zip파일로 관리되지 않는다는 에러가 뜨면서 설치가 실패합니다. yarn cache clean 명령어를 통해 캐시를 비우고 종속성을 재설치하면 작동은 하나, 해결해야 하는 문제입니다.

3. 앞으로 해야할 것들

storybook
-> 디자인 살살 나올 때에 같이 세팅하시죠 ㅎㅎ
Vercel Deploy
-> develop 브랜치의 용도를 같이 논의하고, main을 운영 환경, develop을 테스트 환경으로 나누어서 배포할지 결정이 필요합니다.
api configuration
-> 이번주 내로 진행하겠습니다.

4. 확인해주셔야 할 것들

여기가 핵심입니다!! 꼼꼼하게 확인해주시고 피드백 주세요!!

1. 프로젝트를 로컬로 클론하신 후, `yarn` 명령어를 통해 종속성 설치 시 어떠한 오류가 발생하는지 공유해주세요.

특히!! 예린님은 윈도우 환경에서 작업하시기 때문에 .yarn/unplugged 종속성 관련해서 어떠한 오류가 발생하는지 공유해주세요.

2. `yarn cache clean` 명령어를 통해 캐시를 비우시고, 종속성 재설치 시 바뀐 파일들을 공유해주세요.

특히, .yarn.lock 파일의 변화를 공유해주세요.

vercel · 2023-12-09T13:58:18Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
14th-team4-fe	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 12, 2023 3:00pm
ddoeat-web	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 12, 2023 3:00pm

sjoleee · 2023-12-12T15:53:48Z

아래와 같은 에러 발생 및 zip 1000개 이상 변경됩니다 ㅠㅜ

➤ YN0000: ┌ Resolution step
➤ YN0000: └ Completed
➤ YN0000: ┌ Fetch step
➤ YN0000: └ Completed
➤ YN0000: ┌ Link step
➤ YN0013: │ scheduler@npm:0.23.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ resolve@npm:1.22.8 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ typescript@npm:5.2.2 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ typescript@npm:4.9.5 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ resolve@npm:2.0.0-next.5 can't be found in the cache and will be fetched from the remote registry
➤ YN0001: │ Libzip Error: Failed to open the cache entry for @esbuild/darwin-arm64@npm:0.18.20: Not a zip archive
    at Wr.makeLibzipError (/Users/sjoleee/programming/14th-team4-FE/.yarn/releases/yarn-3.6.4.cjs:314:12847)
    at new Wr (/Users/sjoleee/programming/14th-team4-FE/.yarn/releases/yarn-3.6.4.cjs:314:12288)
    at T (/Users/sjoleee/programming/14th-team4-FE/.yarn/releases/yarn-3.6.4.cjs:429:3109)
    at /Users/sjoleee/programming/14th-team4-FE/.yarn/releases/yarn-3.6.4.cjs:429:3173
    at Jx (/Users/sjoleee/programming/14th-team4-FE/.yarn/releases/yarn-3.6.4.cjs:390:11143)
    at Sg.factory (/Users/sjoleee/programming/14th-team4-FE/.yarn/releases/yarn-3.6.4.cjs:429:3164)
    at get baseFs [as baseFs] (/Users/sjoleee/programming/14th-team4-FE/.yarn/releases/yarn-3.6.4.cjs:314:41188)
    at Sg.readFilePromise (/Users/sjoleee/programming/14th-team4-FE/.yarn/releases/yarn-3.6.4.cjs:314:38610)
    at So.readFilePromise (/Users/sjoleee/programming/14th-team4-FE/.yarn/releases/yarn-3.6.4.cjs:314:38617)
    at zA.loadFile (/Users/sjoleee/programming/14th-team4-FE/.yarn/releases/yarn-3.6.4.cjs:390:32591)
➤ YN0000: └ Completed in 36s 510ms
➤ YN0000: Failed with errors in 36s 710ms

ddoeat · 2023-12-12T16:00:25Z

아래와 같은 에러 발생 및 zip 1000개 이상 변경됩니다 ㅠㅜ

➤ YN0000: ┌ Resolution step
➤ YN0000: └ Completed
➤ YN0000: ┌ Fetch step
➤ YN0000: └ Completed
➤ YN0000: ┌ Link step
➤ YN0013: │ scheduler@npm:0.23.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ resolve@npm:1.22.8 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ typescript@npm:5.2.2 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ typescript@npm:4.9.5 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ resolve@npm:2.0.0-next.5 can't be found in the cache and will be fetched from the remote registry
➤ YN0001: │ Libzip Error: Failed to open the cache entry for @esbuild/darwin-arm64@npm:0.18.20: Not a zip archive
    at Wr.makeLibzipError (/Users/sjoleee/programming/14th-team4-FE/.yarn/releases/yarn-3.6.4.cjs:314:12847)
    at new Wr (/Users/sjoleee/programming/14th-team4-FE/.yarn/releases/yarn-3.6.4.cjs:314:12288)
    at T (/Users/sjoleee/programming/14th-team4-FE/.yarn/releases/yarn-3.6.4.cjs:429:3109)
    at /Users/sjoleee/programming/14th-team4-FE/.yarn/releases/yarn-3.6.4.cjs:429:3173
    at Jx (/Users/sjoleee/programming/14th-team4-FE/.yarn/releases/yarn-3.6.4.cjs:390:11143)
    at Sg.factory (/Users/sjoleee/programming/14th-team4-FE/.yarn/releases/yarn-3.6.4.cjs:429:3164)
    at get baseFs [as baseFs] (/Users/sjoleee/programming/14th-team4-FE/.yarn/releases/yarn-3.6.4.cjs:314:41188)
    at Sg.readFilePromise (/Users/sjoleee/programming/14th-team4-FE/.yarn/releases/yarn-3.6.4.cjs:314:38610)
    at So.readFilePromise (/Users/sjoleee/programming/14th-team4-FE/.yarn/releases/yarn-3.6.4.cjs:314:38617)
    at zA.loadFile (/Users/sjoleee/programming/14th-team4-FE/.yarn/releases/yarn-3.6.4.cjs:390:32591)
➤ YN0000: └ Completed in 36s 510ms
➤ YN0000: Failed with errors in 36s 710ms

네엡 해당 사항 계속 확인중입니다. 공유 감사해요

YOOJS1205 added 3 commits November 12, 2023 22:13

next app 생성

8315c3b

yarn version 업그레이드

b7fe7b8

필요한 패키지들 설치

300022e

YOOJS1205 self-assigned this Nov 12, 2023

YOOJS1205 linked an issue Nov 12, 2023 that may be closed by this pull request

Project Scaffolding #1

Closed

YOOJS1205 added 22 commits November 14, 2023 00:44

eslint, prettier 설정

b07bc8a

gitattributes 설정 및 yarn/cache 디렉토리 push

7baf3b0

종속성 초기화 및 재설치

5ad4fff

노드 버전 18로 변경

a58afdd

yarn version downgrade to 3

473e0f3

checksumBehavior 옵션 추가

53c8fab

충돌 해결

bec69e2

종속성 삭제

c9f6893

prettier 적용

1bbe244

린트 체크 github actions 파일 작성

2a830c3

린트 체크 github actions 노드 버전 16으로 수정

4172d2d

lint.yml 오타 수정

f52c8b7

lint.yml 종속성 캐싱

144eb7f

캐시 값이 없을 때에만 종속성 설치

ebc2c41

종속성 경로 수정

c4ab0ed

build-test.yml 파일 추가

a79e7f8

build-test.yml 오타 수정

b813844

unplugged 디렉토리 종속성은 무조건 설치하도록 수정

9e6a9d3

berry version에서 지원하지 않는 --check-files 옵션 삭제

82bad26

actions version, node version 수정

e48f77a

lint.yml 캐싱 조건 수정

7d37f71

classnames 설치 및 tailwind css 기본 세팅

d353047

vercel bot deployed to Production – ddoeat-web December 9, 2023 14:00 View deployment

vercel 종속성 설치 및 preview yml 추가

30b370a

vercel bot temporarily deployed to Preview – 14th-team4-fe December 9, 2023 14:41 Inactive

preview yml 수정

2a7e6fe

vercel bot temporarily deployed to Preview – 14th-team4-fe December 9, 2023 14:46 Inactive

vercel bot deployed to Preview – ddoeat-web December 9, 2023 14:48 View deployment

YOOJS1205 added 2 commits December 10, 2023 00:52

main branch push 시 자동 배포 워크플로우 추가

fb54ae8

deploy-production.yml name 변경

834822e

vercel bot deployed to Preview December 9, 2023 15:56 View deployment

yarn lock 파일 삭제 후 종속성 업데이트

16f911b

vercel bot deployed to Preview December 10, 2023 12:19 View deployment

TypeScript 버전 변경

0f89d81

vercel bot deployed to Preview December 11, 2023 02:41 View deployment

checksum update 제거

8d1ee17

vercel bot had a problem deploying to Preview December 11, 2023 03:17 Failure

종속성 checksum update 설정

7772a13

ddoeat requested review from y00eunji, sjoleee and YelynnOh December 12, 2023 14:58

vercel bot deployed to Preview December 12, 2023 15:00 View deployment

ddoeat closed this Dec 13, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Project Scaffolding (진행 중입니다. 완료되면 다시 정리할게요!) #2

Project Scaffolding (진행 중입니다. 완료되면 다시 정리할게요!) #2

YOOJS1205 commented Nov 12, 2023 •

edited by ddoeat

Loading

vercel bot commented Dec 9, 2023 •

edited

Loading

sjoleee commented Dec 12, 2023

ddoeat commented Dec 12, 2023

Project Scaffolding (진행 중입니다. 완료되면 다시 정리할게요!) #2

Project Scaffolding (진행 중입니다. 완료되면 다시 정리할게요!) #2

Conversation

YOOJS1205 commented Nov 12, 2023 • edited by ddoeat Loading

1. 진행한 것들

2. 해결하지 못한 것들

3. 앞으로 해야할 것들

4. 확인해주셔야 할 것들

1. 프로젝트를 로컬로 클론하신 후, yarn 명령어를 통해 종속성 설치 시 어떠한 오류가 발생하는지 공유해주세요.

2. yarn cache clean 명령어를 통해 캐시를 비우시고, 종속성 재설치 시 바뀐 파일들을 공유해주세요.

vercel bot commented Dec 9, 2023 • edited Loading

sjoleee commented Dec 12, 2023

ddoeat commented Dec 12, 2023

YOOJS1205 commented Nov 12, 2023 •

edited by ddoeat

Loading

1. 프로젝트를 로컬로 클론하신 후, `yarn` 명령어를 통해 종속성 설치 시 어떠한 오류가 발생하는지 공유해주세요.

2. `yarn cache clean` 명령어를 통해 캐시를 비우시고, 종속성 재설치 시 바뀐 파일들을 공유해주세요.

vercel bot commented Dec 9, 2023 •

edited

Loading