feat/#63 빌드 action 자동화 #110
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* feat: 반영되지 않은 패키지 변경사항 반영 * chore: 불필요한 gitkeep 파일 삭제 * feat: 컴포넌트 스토리 템플릿 추가 * feat: 컴포넌트 테스트 템플릿 추가 * feat: 컴포넌트 템플릿 추가 * feat: package.json 템플릿 추가 * feat: 리드미 템플릿 추가 * feat: tsconfig.json 템플릿 추가 * feat: tsup.config.ts 템플릿 추가 * rename: 테스트, 컴포넌트, 스토리 템플릿 폴더 구조 세팅 * feat: root devDependency에 tsup 설치 * docs: tsup config 파일 템플릿 추가 * docs: tsconfig 파일 템플릿 추가 * docs: 리드미 파일 템플릿 추가 * docs: 스토리 파일 템플릿 추가 * feat: root devDependency에 @testing-library/react 설치 * docs: 테스트 파일 템플릿 추가 * docs: 컴포넌트 파일 템플릿 추가 * docs: 컴포넌트 배럴 파일 템플릿 추가 * docs: 컴포넌트 package.json 템플릿 추가 * feat: root devDependency에 @turbo/gen 패키지 설치 * chore: 불필요한 파일 삭제 * feat: primitive 컴포넌트 base file generator 작동하도록 turbo gen 설정 * feat: primitive, themed 패키지 중 생성할 패키지 고를 수 있도록 기능 추가 * fix: tsconfig.json 템플릿 루트 tsconfig.json 경로 잘못 지정한 부분 수정 * fix: tsup.config.ts 템플릿 target es2020으로 수정 * chore: 테스트 파일 템플릿 수정 * chore: tsconfig.json 파일 템플릿 수정 * chore: 컴포넌트 파일 템플릿 수정 * chore: 컴포넌트 배럴 파일 템플릿 수정 * chore: 컴포넌트 스토리 파일 템플릿 수정 * chore: root tsconfig 설정 변경 * chore: 자잘한 오타 반영 * chore: package.json build 스크립트 수정 * chore: package.json peerDependency로 next 포함하도록 수정 * chore: 스토리북 예시 파일 복원 * chore: turbo gen prompts message 한글로 변경 * chore: component 템플릿 타입 추론되도록 수정 * chore: component package.json 템플릿 peerDependency에서 next 삭제 * chore: turbo gen generator name, description message 한글로 변경 * chore: package.json 템플릿 name primitive, themed 구분하도록 수정 * chore: package.json 템플릿 name 포맷 변경 * feat: 테스트 코드 템플릿 테스트 케이스 추가 * chore: props 타입 컨벤션 변경에 따른 변경사항 적용 * chore: prettierignore 목록에 turbo 폴더 추가 * feat: pnpm lock 파일 변경사항 반영 * feat: root format 스크립트 추가 * fix: 사라진 prettier 설정 수정 * feat: plop format 기능 추가 * feat: plop kebabCase helper 추가 * chore: plop 생성 파일명 kebabCase로 변경 * feat: root에 turbo gen 스크립트 추가 * feat: prettierignore에 pnpm-lock 파일 추가 * chore: eol 이슈 해결
* chore: playwright 설치 * feat: playwright e2e 테스트 (시각적 회귀 테스트, 웹접근성 테스트) * chore: playwright ci 테스트 * chore: ci 환경에서 의존성 설치 방식 변경 * chore: 워크플로우 ci환경에 playwright 브라우저 설치 * chore: 워크플로우 playwright ci 옵션 추가 * chore: playwright npx로 실행 명령어 변경 * chore: playwright --project 옵션 제거 * chore: 명령어 복구 * chore: playwright 환경 수정 * chore: playwright worker 옵션 변경 * chore: log 추가 * chore: 스토리북 빌드 방식으로 실행 * chore: button 스냅샷 업로드 * chore: playwright 설정 복원 * chore: pr comment 추가 * chore: fetch-depth 추가 * chore: 스냅샷 파일 수정 * chore: testDir path 설정 * chore: playwright 옵션 변경 * chore: 불필요한 테스트 삭제 * chore: checkout version 업데이트 * chore: 테스트 코드 변경 * chore: log 삭제 * chore: error 로그 추가 * chore: 로그 추가 * chore: --update-snapshots 옵션 추가 * chore: 폴더 확인 로직 수정 * chore: yml indent 수정 * chore: 디렉토리 확인 수정 * chore: update snapshot 옵션 삭제 * chore: 시각적 변경 테스트 * chore: update snapshot * chore: 디렉토리 구조 확인 * chore: 아티팩트 업로드 * chore: bold 처리 삭제 * chore: button font arial로 변경 * chore: font 업데이트 이후 actual 변경 * chore: font-weight 700 to bold * chore: web font로 변경 * chore: 폰트 로딩 상태 확인 * chore: roboto로 변경 * chore: font-weight 삭제 * chore: ci 환경에 폰트 설치 * chore: 변경되는 스냅샷 확인 * chore: plarywright 스크립트 변경 * chore: storybook 실행 명령어 수정 * chore: process 변경 * chore: local vrt 삭제 * chore: label flow 수정 * chore: .playwright의 하위에 있는 폴더만 pr에 반영되도록 수정 * Update VRT snapshots in .playwright folder * chore: button에 불필요한 텍스트 삭제 * Update VRT snapshots in .playwright folder * chore: Button 라인 분리 * chore: 실패시 아티팩트 업로드하도록 수정 * chore: 성공 comment 메시지 수정 * chore: chromatic action version 수정 * chore: pnpm action version 변경 * chore: vrt test에 permission 추가 * chore: 토큰 체커 --------- Co-authored-by: GitHub Action <action@github.com>
* chore: component 이슈 템플릿 생성 * chore: component 이슈 템플릿 생성 * chore: init @testing-library/jest-dom * chore: generate divider component * chore: prettier 적용 * feat: Divider 컴포넌트 구현 * feat: Divider 컴포넌트 스토리북 생성 * docs: Divider storybook componentSubtitle 수정 * docs: component issue 템플릿 labels 추가 * docs: Divider storybook componentSubtitle 수정 * docs: component issue 템플릿 내용 수정 * feat: orientation에 따른 태그 변경 및 displayName 수정 * docs: default에 있던 style 삭제 * test: orientation prop에 따른 테스트 코드 추가 * docs: Update Divider README.md * fix: 오타 수정 * chore: Divider Default 이름 변경 및 args 제거 * fix: JSX 형식으로 변경 및 ref 타입 수정 * docs: Divider description 추가 * refactor: 변수명 변경 및 unknown 제거 * chore: pnpm install
* chore: 크로마틱 배포 시 pnpm 캐시 사용하도록 변경
* chore: VRT 스냅샷 업데이트 시 pnpm, playwright 캐시 사용하도록 변경
* chore: PR VRT 테스트 시 pnpm, playwright 캐시 사용하도록 변경
* chore: chromatic_auto_deploy 코드 리뷰 반영
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
* chore: 코드 리뷰 반영
* chore: ${action} 캐시 형식으로 각 step name 변경
* chore: 각 action 최신 버전을 사용하도록 버전 수정
* chore: 의존성 설치 관련 스크립트 분리 후 재사용
* chore: playwright 설치 관련 스크립트 분리 후 재사용
* chore: 잘못된 경로 설정 수정
* chore: 잘못된 경로 설정 수정
* chore: pnpm, node 버전 환경 변수로 불러오도록 설정
* chore: 환경 변수 설정 별도 스크립트로 분리
* chore: pnpm/action-setup v4 버전으로 변경
* chore: eol 이슈 해결
* chore: 워크플로우 name 변경
---------
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
* test: Divider 컴포넌트의 e2e 테스트 코드 작성 * chore: Button 관련 파일들 모두 삭제 * rename: 컴포넌트명 케밥케이스로 변경 * chore: 테스트 파일 내부 텍스트 변경 * chore: 캐시된 내용 삭제 * rename: e2e 테스트 폴더 구조 변경 * feat/#50 github action 워크플로우 최적화 (#90) * chore: 크로마틱 배포 시 pnpm 캐시 사용하도록 변경 * chore: VRT 스냅샷 업데이트 시 pnpm, playwright 캐시 사용하도록 변경 * chore: PR VRT 테스트 시 pnpm, playwright 캐시 사용하도록 변경 * chore: chromatic_auto_deploy 코드 리뷰 반영 Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * chore: 코드 리뷰 반영 * chore: ${action} 캐시 형식으로 각 step name 변경 * chore: 각 action 최신 버전을 사용하도록 버전 수정 * chore: 의존성 설치 관련 스크립트 분리 후 재사용 * chore: playwright 설치 관련 스크립트 분리 후 재사용 * chore: 잘못된 경로 설정 수정 * chore: 잘못된 경로 설정 수정 * chore: pnpm, node 버전 환경 변수로 불러오도록 설정 * chore: 환경 변수 설정 별도 스크립트로 분리 * chore: pnpm/action-setup v4 버전으로 변경 * chore: eol 이슈 해결 * chore: 워크플로우 name 변경 --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * feat/#85 codegen에 e2e 테스트 코드 템플릿 생성 및 적용 (#92) * feat: e2e 테스트 코드 템플릿 파일 생성 * feat: e2e 테스트 코드 템플릿 파일 생성기 config 작성 * chore: e2e 테스트 파일 생성기 파일명 kebabCase로 수정 * chore: 예시 버튼 e2e 테스트 파일 삭제 * chore: 스토리북 템플릿 id ui로 시작되도록 수정 * fix: e2e 테스트 plob 템플릿 수정 --------- Co-authored-by: 홍서현 <ghdtjgus76@naver.com> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
ShinYoung-Kim
requested review from
minai621,
gs0428 and
ghdtjgus76
as code owners
Walkthrough이 변경 사항은 GitHub Actions 워크플로우 파일인 Changes
Assessment against linked issues
Possibly related PRs
Suggested labels
Suggested reviewers
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
VRT 테스트 성공VRT 테스트가 성공적으로 완료되었습니다. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (1)
- .github/workflows/build.yml (1 hunks)
Additional context used
actionlint
.github/workflows/build.yml
93-93: "uses" is required to run action in step
(syntax-check)
149-149: "uses" is required to run action in step
(syntax-check)
Additional comments not posted (2)
.github/workflows/build.yml (2)
9-47: LGTM!
install-cache작업은 환경을 설정하고, 의존성을 캐시하며, 의존성을 설치하는 단계를 포함하고 있습니다. 작업의 단계와 구문에는 문제가 없어 보입니다.
49-103: LGTM!
unit-test작업은 환경을 설정하고, 의존성을 설치한 후에 유닛 테스트를 실행합니다.install-cache작업에 의존하여 캐시된 의존성을 복원하여 실행 속도를 높입니다. 유닛 테스트가 실패하면 PR에 코멘트를 남기는 기능도 포함되어 있습니다. 작업의 단계와 구문에는 문제가 없어 보입니다.Tools
actionlint
93-93: "uses" is required to run action in step
(syntax-check)
VRT 테스트 성공VRT 테스트가 성공적으로 완료되었습니다. |
gs0428
reviewed
Sep 21, 2024
Comment on lines
+9
to
+47
| install-cache: | ||
| runs-on: ubuntu-latest | ||
| steps: | ||
| - name: 레포지토리 체크아웃 | ||
| uses: actions/checkout@v4 | ||
| with: | ||
| fetch-depth: 0 | ||
|
|
||
| - name: 환경 변수 설정 | ||
| id: set-env | ||
| run: | | ||
| chmod +x ./scripts/set-env.sh | ||
| ./scripts/set-env.sh | ||
|
|
||
| - name: node.js 설정 | ||
| uses: actions/setup-node@v4 | ||
| with: | ||
| node-version: ${{ env.NODE_VERSION }} | ||
|
|
||
| - name: pnpm 설치 | ||
| uses: pnpm/action-setup@v4 | ||
| with: | ||
| version: ${{ env.PNPM_VERSION }} | ||
|
|
||
| - name: pnpm 의존성 캐시 | ||
| id: cache-pnpm | ||
| uses: actions/cache@v4 | ||
| with: | ||
| path: | | ||
| ~/.pnpm-store | ||
| node_modules | ||
| key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }} | ||
| restore-keys: | | ||
| ${{ runner.os }}-pnpm- | ||
|
|
||
| - name: 의존성 설치 | ||
| run: | | ||
| chmod +x ./scripts/install-dependencies.sh | ||
| ./scripts/install-dependencies.sh |
There was a problem hiding this comment.
pnpm 관련 스크립트들은 다른 action 파일에서도 많이 쓰일 것 같은데, 다른분들과 의논해서 공통으로 사용되는 것들은 파일로 빼놓는 것은 어떻게 생각하세요??
There was a problem hiding this comment.
이미 해당 이슈가 백로그에 생성되어 있습니다! 다음 회의 때 스프린트에 추가하도록 건의해보겠습니다!
|
저는 워크플로우 수정하는 것과 |
다른 분들 의견도 받아서 과반수 넘으면 코드 수정하도록하겠습니다! concurrency는 적용하게 된다면 wiki 작성할게요! |
github-actions
bot
added
D-1
ghdtjgus76
reviewed
Sep 25, 2024
There was a problem hiding this comment.
남겨주신 사항들이 많아서 한 번에 코멘트 달게요
-
빌드 및 유닛 테스트 워크플로우 파일 분리
역할 자체가 테스트와 빌드라는 차이점이 있어서 별도 파일로 분리하는 것이 좋을 거 같다는 생각이 듭니다.
그래서 필요하다면 별도의 파일로 분리한 후 불러와서 사용할 수 있을 거 같습니다.
다만 지금 제시해준 사진처럼 needs를 통해서 unit-test -> build -> e2e test로 이어지는 방식은 좋은 거 같습니다!
-
pnpm 관련 환경 세팅 분리
저도 깃헙 액션 최적화하면서 계속해서 환경 세팅(nodejs, pnpm 설치 등) 부분이 중복되어 분리 후 needs를 통해 개선하려고 해봤지만 깃허브 액션 특성상 환경은 공유가 안 된다고 하여 실패해서 포기했습니다.
지금처럼 캐시를 사용하고 있는 방식이 최선이라고 생각하는데 이후 더 좋은 방식을 알게되면 적용해봐도 좋을 거 같네요. -
act 스크립트 에러
사실 저는 포크해서 직접 실행시켜봤어서 act는 아직 도입을 못해봤습니다.
일단 act와 함께 스크립트를 사용할 수 있는 방법이 있는지 알아봐야 할 거 같고 만약 없다면 act를 사용할 것인지도 한 번 생각해봐야 할 거 같습니다..
저번에 act로 CI를 실행시켰을 때 느리다는 말씀을 하셨는데, 포크를 떠서 작업하는 것과 act를 사용해서 작업하는 것에 대한 생산성 차이를 비교해본 후 결정해야할 거 같다는 생각이 드네요 -
concurrency 적용
저는 concurrency 적용하는 거 너무 좋습니다
매번 푸시하고 나서 계속 불필요한 CI 작업이 돌아가는 경우가 많았어서.. 적용해두면 불필요한 CI로 인한 코멘트가 달리는 일이 없을 거 같습니다!
수고하셨습니다!
Comment on lines
+9
to
+10
| install-cache: | ||
| runs-on: ubuntu-latest |
There was a problem hiding this comment.
이 job은 install-cache보다는 set up 등과 같은 느낌의 job 이름이 더 좋을 거 같습니다!
물론 set up은 너무 장황하고 수정이 필요하겠지만 당장은 더 좋은 게 안 떠오르네요..
* chore: changeset 설치 * chore: changelog 레포 설정 추가 및 access 변경 * chore: publish 명령어 생성 * chore: changeset github action 생성 * feat: changeset 파일 생성 * c�hore/#25 husky, lint-staged 세팅 (#44) * chore: husky 라이브러리 설치 및 script 수정 * feat: pre-commit, pre-push 설정 * fix: gitignore에 .eslintcache 추가 * chore: lint-staged 적용 * chore: EOL 반영 * fix: 잘못된 lint-staged 위치 수정 * chore: prettier script 수정 및 husky 설정 수정 * chore: lint stage file로 분리 * feat/#54 패키지 매니저 버전 강제하도록 설정 (#57) * chore: settings.json prettier requireConfig 설정 추가 * feat: pnpm 패키지 매니저 버전 강제 설정 추가 * feat: pnpm lock 파일 변경사항 반영 * chore: vscode settings 변경 사항 삭제 * fix: eol 이슈 해결 * chore: pnpm lock 파일 변경 사항 반영 * chore/#37 jest 설정 (#43) * chore: jest 설치 preset으로 ts-jest 적용 * chore: button에 대한 예시 테스트 코드 추가 * chore: ts-node 의존성 설치 * chore: jest 설정 파일에 주석 제거 * chore: jest 설정 코멘트 삭제 * chore: Button 테스트 description 한글로 번역 * chore: 의존성 업데이트 * chore: commit 시 jest 테스트 실행 * feat/#12 Primitive UI codegen 세팅 (#42) * feat: 반영되지 않은 패키지 변경사항 반영 * chore: 불필요한 gitkeep 파일 삭제 * feat: 컴포넌트 스토리 템플릿 추가 * feat: 컴포넌트 테스트 템플릿 추가 * feat: 컴포넌트 템플릿 추가 * feat: package.json 템플릿 추가 * feat: 리드미 템플릿 추가 * feat: tsconfig.json 템플릿 추가 * feat: tsup.config.ts 템플릿 추가 * rename: 테스트, 컴포넌트, 스토리 템플릿 폴더 구조 세팅 * feat: root devDependency에 tsup 설치 * docs: tsup config 파일 템플릿 추가 * docs: tsconfig 파일 템플릿 추가 * docs: 리드미 파일 템플릿 추가 * docs: 스토리 파일 템플릿 추가 * feat: root devDependency에 @testing-library/react 설치 * docs: 테스트 파일 템플릿 추가 * docs: 컴포넌트 파일 템플릿 추가 * docs: 컴포넌트 배럴 파일 템플릿 추가 * docs: 컴포넌트 package.json 템플릿 추가 * feat: root devDependency에 @turbo/gen 패키지 설치 * chore: 불필요한 파일 삭제 * feat: primitive 컴포넌트 base file generator 작동하도록 turbo gen 설정 * feat: primitive, themed 패키지 중 생성할 패키지 고를 수 있도록 기능 추가 * fix: tsconfig.json 템플릿 루트 tsconfig.json 경로 잘못 지정한 부분 수정 * fix: tsup.config.ts 템플릿 target es2020으로 수정 * chore: 테스트 파일 템플릿 수정 * chore: tsconfig.json 파일 템플릿 수정 * chore: 컴포넌트 파일 템플릿 수정 * chore: 컴포넌트 배럴 파일 템플릿 수정 * chore: 컴포넌트 스토리 파일 템플릿 수정 * chore: root tsconfig 설정 변경 * chore: 자잘한 오타 반영 * chore: package.json build 스크립트 수정 * chore: package.json peerDependency로 next 포함하도록 수정 * chore: 스토리북 예시 파일 복원 * chore: turbo gen prompts message 한글로 변경 * chore: component 템플릿 타입 추론되도록 수정 * chore: component package.json 템플릿 peerDependency에서 next 삭제 * chore: turbo gen generator name, description message 한글로 변경 * chore: package.json 템플릿 name primitive, themed 구분하도록 수정 * chore: package.json 템플릿 name 포맷 변경 * feat: 테스트 코드 템플릿 테스트 케이스 추가 * chore: props 타입 컨벤션 변경에 따른 변경사항 적용 * chore: prettierignore 목록에 turbo 폴더 추가 * feat: pnpm lock 파일 변경사항 반영 * feat: root format 스크립트 추가 * fix: 사라진 prettier 설정 수정 * feat: plop format 기능 추가 * feat: plop kebabCase helper 추가 * chore: plop 생성 파일명 kebabCase로 변경 * feat: root에 turbo gen 스크립트 추가 * feat: prettierignore에 pnpm-lock 파일 추가 * chore: eol 이슈 해결 * chore: release action node 버전 변경 * chore/#38 playwright 테스트 설정 (#61) * chore: playwright 설치 * feat: playwright e2e 테스트 (시각적 회귀 테스트, 웹접근성 테스트) * chore: playwright ci 테스트 * chore: ci 환경에서 의존성 설치 방식 변경 * chore: 워크플로우 ci환경에 playwright 브라우저 설치 * chore: 워크플로우 playwright ci 옵션 추가 * chore: playwright npx로 실행 명령어 변경 * chore: playwright --project 옵션 제거 * chore: 명령어 복구 * chore: playwright 환경 수정 * chore: playwright worker 옵션 변경 * chore: log 추가 * chore: 스토리북 빌드 방식으로 실행 * chore: button 스냅샷 업로드 * chore: playwright 설정 복원 * chore: pr comment 추가 * chore: fetch-depth 추가 * chore: 스냅샷 파일 수정 * chore: testDir path 설정 * chore: playwright 옵션 변경 * chore: 불필요한 테스트 삭제 * chore: checkout version 업데이트 * chore: 테스트 코드 변경 * chore: log 삭제 * chore: error 로그 추가 * chore: 로그 추가 * chore: --update-snapshots 옵션 추가 * chore: 폴더 확인 로직 수정 * chore: yml indent 수정 * chore: 디렉토리 확인 수정 * chore: update snapshot 옵션 삭제 * chore: 시각적 변경 테스트 * chore: update snapshot * chore: 디렉토리 구조 확인 * chore: 아티팩트 업로드 * chore: bold 처리 삭제 * chore: button font arial로 변경 * chore: font 업데이트 이후 actual 변경 * chore: font-weight 700 to bold * chore: web font로 변경 * chore: 폰트 로딩 상태 확인 * chore: roboto로 변경 * chore: font-weight 삭제 * chore: ci 환경에 폰트 설치 * chore: 변경되는 스냅샷 확인 * chore: plarywright 스크립트 변경 * chore: storybook 실행 명령어 수정 * chore: process 변경 * chore: local vrt 삭제 * chore: label flow 수정 * chore: .playwright의 하위에 있는 폴더만 pr에 반영되도록 수정 * Update VRT snapshots in .playwright folder * chore: button에 불필요한 텍스트 삭제 * Update VRT snapshots in .playwright folder * chore: Button 라인 분리 * chore: 실패시 아티팩트 업로드하도록 수정 * chore: 성공 comment 메시지 수정 * chore: chromatic action version 수정 * chore: pnpm action version 변경 * chore: vrt test에 permission 추가 * chore: 토큰 체커 --------- Co-authored-by: GitHub Action <action@github.com> * feat/#51 공통 prettier 설정 불러오도록 설정 변경 (#56) * chore/#46 D-day Labeler workflow 추가 (#66) * feat: D-day Labeler workflow 추가 * chore: transfer action script personal repo to organization repo * chore: pr-dday-labeler action 버전 1.0.3으로 지정 * chore: PR D-day Labeler schedule 시간 한국 00:00으로 변경 * fix/#47 빌드 버그 해결 (#64) * fix: tsconfig 빌드 에러 해결 (feat/#41) * fix: tsconfig 및 eslint 설정 오류 수정 * fix: tsconfig 범위 수정 * fix: tsconfig 빌드 에러 해결 (feat/#41) * fix: tsconfig 및 eslint 설정 오류 수정 * fix: tsconfig 범위 수정 * chore/#65 jest.setup.ts 설정 (#72) * chore: jest.setup.ts와 관련 의존성 설정 * feat: button rtl 테스트 추가 * chore: @testing-library/jest-dom를 devDependencies로 수정 * chore: local github action test용 secret 파일 gitignore에 추가 (#68) * feat/#48 Divider 컴포넌트 개발 (#73) * chore: component 이슈 템플릿 생성 * chore: component 이슈 템플릿 생성 * chore: init @testing-library/jest-dom * chore: generate divider component * chore: prettier 적용 * feat: Divider 컴포넌트 구현 * feat: Divider 컴포넌트 스토리북 생성 * docs: Divider storybook componentSubtitle 수정 * docs: component issue 템플릿 labels 추가 * docs: Divider storybook componentSubtitle 수정 * docs: component issue 템플릿 내용 수정 * feat: orientation에 따른 태그 변경 및 displayName 수정 * docs: default에 있던 style 삭제 * test: orientation prop에 따른 테스트 코드 추가 * docs: Update Divider README.md * fix: 오타 수정 * chore: Divider Default 이름 변경 및 args 제거 * fix: JSX 형식으로 변경 및 ref 타입 수정 * docs: Divider description 추가 * refactor: 변수명 변경 및 unknown 제거 * chore: pnpm install * fix/#74 템플릿 수정 (#79) * fix: package.json version, author, homepage 추가 * chore: prettier ignore 추가 * chore: pnpm install * fix: 오타 및 이름 수정 * fix: root pakcage.json name 수정 * chore: template props 수정 * �docs/#75 컴포넌트 pr 템플릿 생성 (#80) * rename: pull request 파일 위치 이동 * chore: prettier ignore 추가 * docs: component용 pr 템플릿 작성 * rename: template 파일명 변경 * chore: pnpm install * feat: yml 커밋 메시지 추가 * chore: config ignore 추가 * feat/#50 github action 워크플로우 최적화 (#90) * chore: 크로마틱 배포 시 pnpm 캐시 사용하도록 변경 * chore: VRT 스냅샷 업데이트 시 pnpm, playwright 캐시 사용하도록 변경 * chore: PR VRT 테스트 시 pnpm, playwright 캐시 사용하도록 변경 * chore: chromatic_auto_deploy 코드 리뷰 반영 Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * chore: 코드 리뷰 반영 * chore: ${action} 캐시 형식으로 각 step name 변경 * chore: 각 action 최신 버전을 사용하도록 버전 수정 * chore: 의존성 설치 관련 스크립트 분리 후 재사용 * chore: playwright 설치 관련 스크립트 분리 후 재사용 * chore: 잘못된 경로 설정 수정 * chore: 잘못된 경로 설정 수정 * chore: pnpm, node 버전 환경 변수로 불러오도록 설정 * chore: 환경 변수 설정 별도 스크립트로 분리 * chore: pnpm/action-setup v4 버전으로 변경 * chore: eol 이슈 해결 * chore: 워크플로우 name 변경 --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * feat/#85 codegen에 e2e 테스트 코드 템플릿 생성 및 적용 (#92) * feat: e2e 테스트 코드 템플릿 파일 생성 * feat: e2e 테스트 코드 템플릿 파일 생성기 config 작성 * chore: e2e 테스트 파일 생성기 파일명 kebabCase로 수정 * chore: 예시 버튼 e2e 테스트 파일 삭제 * chore: 스토리북 템플릿 id ui로 시작되도록 수정 * test/#84 Divider vrt 테스트 추가 (#91) * test: Divider 컴포넌트의 e2e 테스트 코드 작성 * chore: Button 관련 파일들 모두 삭제 * rename: 컴포넌트명 케밥케이스로 변경 * chore: 테스트 파일 내부 텍스트 변경 * chore: 캐시된 내용 삭제 * rename: e2e 테스트 폴더 구조 변경 * feat/#50 github action 워크플로우 최적화 (#90) * chore: 크로마틱 배포 시 pnpm 캐시 사용하도록 변경 * chore: VRT 스냅샷 업데이트 시 pnpm, playwright 캐시 사용하도록 변경 * chore: PR VRT 테스트 시 pnpm, playwright 캐시 사용하도록 변경 * chore: chromatic_auto_deploy 코드 리뷰 반영 Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * chore: 코드 리뷰 반영 * chore: ${action} 캐시 형식으로 각 step name 변경 * chore: 각 action 최신 버전을 사용하도록 버전 수정 * chore: 의존성 설치 관련 스크립트 분리 후 재사용 * chore: playwright 설치 관련 스크립트 분리 후 재사용 * chore: 잘못된 경로 설정 수정 * chore: 잘못된 경로 설정 수정 * chore: pnpm, node 버전 환경 변수로 불러오도록 설정 * chore: 환경 변수 설정 별도 스크립트로 분리 * chore: pnpm/action-setup v4 버전으로 변경 * chore: eol 이슈 해결 * chore: 워크플로우 name 변경 --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * feat/#85 codegen에 e2e 테스트 코드 템플릿 생성 및 적용 (#92) * feat: e2e 테스트 코드 템플릿 파일 생성 * feat: e2e 테스트 코드 템플릿 파일 생성기 config 작성 * chore: e2e 테스트 파일 생성기 파일명 kebabCase로 수정 * chore: 예시 버튼 e2e 테스트 파일 삭제 * chore: 스토리북 템플릿 id ui로 시작되도록 수정 * fix: e2e 테스트 plob 템플릿 수정 --------- Co-authored-by: 홍서현 <ghdtjgus76@naver.com> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * chore: changeset 설치 * chore: changelog 레포 설정 추가 및 access 변경 * chore: publish 명령어 생성 * chore: changeset github action 생성 * feat: changeset 파일 생성 * chore: release action node 버전 변경 * feat: yml 커밋 메시지 추가 * chore: config ignore 추가 * chore: action 파일 최적화 반영 * chore: name 수정 * chore/#93 husky 오류 해결 (#112) * fix: pre-commit 오류 일으키는 코드 제거 * fix: jest testMatch 수정 * refactor: husky 구버전 관련 코드 pre push에서 제거 * chore: changeset 설치 * chore: changelog 레포 설정 추가 및 access 변경 * chore: publish 명령어 생성 * chore: changeset github action 생성 * feat: changeset 파일 생성 * chore: release action node 버전 변경 * feat: yml 커밋 메시지 추가 * chore: config ignore 추가 * chore: changeset 설치 * chore: publish 명령어 생성 * chore: changeset github action 생성 * chore: action 파일 최적화 반영 * chore: name 수정 * chore: 코더레빗 코드리뷰 반영 * fix: script " 삭제 * fix: lock 파일 수정 --------- Co-authored-by: Gwang Soo <114225974+gs0428@users.noreply.github.com> Co-authored-by: 홍서현 <ghdtjgus76@naver.com> Co-authored-by: MJ <80272444+minai621@users.noreply.github.com> Co-authored-by: GitHub Action <action@github.com> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
VRT 테스트 성공VRT 테스트가 성공적으로 완료되었습니다. |
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (6)
package.json (1)
16-16: @changesets/cli 추가 승인@changesets/cli를 devDependencies에 추가한 것은 좋은 변경사항입니다. 이는 프로젝트의 버전 관리와 변경 로그 생성을 개선할 것입니다.
다음 단계로 고려해볼 사항:
- changesets 초기화를 위한 스크립트 추가 (예:
"changeset-init": "changeset init")- 변경 사항 추가를 위한 스크립트 (예:
"changeset": "changeset")- 버전 업데이트 및 변경 로그 생성을 위한 스크립트 (예:
"version-packages": "changeset version")이러한 스크립트들을 package.json의 "scripts" 섹션에 추가하는 것이 도움이 될 수 있습니다.
.github/workflows/release.yml (5)
10-13: 작업 이름을 더 구체적으로 지정하는 것이 좋습니다.현재 작업 이름인 "version"은 간결하지만, 작업의 전체 범위를 완전히 설명하지 않습니다. 예를 들어 "update-version-and-deploy"와 같이 더 구체적인 이름을 사용하면 워크플로우의 목적을 더 잘 전달할 수 있습니다.
다음과 같이 변경을 제안합니다:
jobs: - version: + update-version-and-deploy: timeout-minutes: 15 runs-on: ubuntu-latest
15-34: 환경 설정 단계가 잘 구성되어 있습니다.레포지토리 체크아웃, 환경 변수 설정, Node.js 및 pnpm 설정이 적절히 구성되어 있습니다. 전체 히스토리를 체크아웃하는 것은 버전 관리에 필요한 좋은 방식입니다.
한 가지 제안사항:
환경 변수 설정 스크립트의 실행 권한을 변경하는 단계를 별도의 단계로 분리하는 것이 좋습니다. 이렇게 하면 스크립트 실행 실패 시 더 명확한 오류 메시지를 얻을 수 있습니다.
- name: 환경 변수 설정 id: set-env + run: chmod +x ./scripts/set-env.sh + + - name: 환경 변수 스크립트 실행 run: | - chmod +x ./scripts/set-env.sh ./scripts/set-env.sh
50-53: 의존성 설치 단계를 개선할 수 있습니다.의존성 설치를 위해 사용자 정의 스크립트를 사용하는 것은 좋은 방법입니다. 하지만 스크립트 실행 권한 변경과 실행을 분리하면 오류 발생 시 더 명확한 디버깅이 가능합니다.
다음과 같이 변경을 제안합니다:
- name: 의존성 설치 + run: chmod +x ./scripts/install-dependencies.sh + + - name: 의존성 설치 스크립트 실행 run: | - chmod +x ./scripts/install-dependencies.sh ./scripts/install-dependencies.sh
55-64: 버전 업데이트 및 배포 단계가 잘 구성되어 있습니다.changesets를 사용하여 버전 관리와 배포를 자동화하는 것은 좋은 방법입니다. 인증에 시크릿을 사용하는 것도 적절합니다.
개선 제안:
커밋 메시지에 버전 번호를 포함시키면 더 명확한 버전 히스토리를 만들 수 있습니다. 다음과 같이 변경을 제안합니다:
- name: 버전 업데이트 및 npm 배포 uses: changesets/action@v1 with: version: pnpm changeset version title: "chore: 버전 업데이트" - commit: "chore: 버전 업데이트" + commit: "chore: 버전 업데이트 v${VERSION}" publish: pnpm changeset publish env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} NPM_TOKEN: ${{ secrets.NPM_TOKEN }}이렇게 하면 각 릴리스의 버전 번호를 커밋 메시지에서 쉽게 확인할 수 있습니다.
1-64: 전반적으로 잘 구성된 워크플로우입니다.이 워크플로우는 버전 업데이트와 배포에 필요한 모든 단계를 잘 커버하고 있습니다. 적절한 액션들을 사용하고 있으며, 좋은 관행을 따르고 있습니다.
개선 제안:
워크플로우에 대한 문서화를 추가하는 것이 좋습니다. 예를 들어, README.md 파일에 이 워크플로우의 목적, 트리거 조건, 주요 단계 등을 설명하는 섹션을 추가하면 좋겠습니다.
에러 처리와 알림 메커니즘을 추가하는 것을 고려해보세요. 예를 들어, 배포 실패 시 팀에 알림을 보내는 단계를 추가할 수 있습니다.
배포 후 간단한 건강 체크 또는 스모크 테스트를 추가하여 배포된 버전이 정상적으로 작동하는지 확인하는 것도 좋은 방법입니다.
이러한 개선사항들을 적용하면 워크플로우의 안정성과 유지보수성을 더욱 높일 수 있을 것입니다.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (6)
- .changeset/README.md (1 hunks)
- .changeset/big-eggs-crash.md (1 hunks)
- .changeset/config.json (1 hunks)
- .github/workflows/label-vrt-update.yml (1 hunks)
- .github/workflows/release.yml (1 hunks)
- package.json (1 hunks)
✅ Files skipped from review due to trivial changes (3)
- .changeset/README.md
- .changeset/big-eggs-crash.md
- .changeset/config.json
🧰 Additional context used
🔇 Additional comments (2)
.github/workflows/release.yml (1)
1-8: 워크플로우 이름과 트리거 설정이 적절합니다.워크플로우의 이름이 목적을 명확히 설명하고 있으며, 메인 브랜치에 푸시될 때 트리거되는 설정이 릴리스 워크플로우에 적합합니다. CI 환경 변수를 true로 설정한 것도 좋은 관행입니다.
.github/workflows/label-vrt-update.yml (1)
75-75: 명령어 실행의 안정성이 향상되었습니다.이 변경은 좋은 개선입니다. 명령어 대체(command substitution)를 큰따옴표로 감싸는 것은 셸 스크립팅의 모범 사례입니다. 이렇게 하면 프로세스 ID에 공백이나 다른 특수 문자가 포함되어 있을 때 발생할 수 있는 문제를 방지할 수 있습니다. 결과적으로 스크립트의 안정성과 신뢰성이 향상됩니다.
Comment on lines
+36
to
+48
| - name: npmrc 파일 생성 | ||
| run: echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > .npmrc | ||
|
|
||
| - name: pnpm 의존성 캐시 | ||
| id: cache-pnpm | ||
| uses: actions/cache@v4 | ||
| with: | ||
| path: | | ||
| ~/.pnpm-store | ||
| node_modules | ||
| key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }} | ||
| restore-keys: | | ||
| ${{ runner.os }}-pnpm- |
There was a problem hiding this comment.
의존성 캐싱과 npm 인증이 잘 구성되어 있습니다.
npmrc 파일 생성과 pnpm 의존성 캐싱이 적절히 설정되어 있어 워크플로우의 효율성을 높일 수 있습니다.
보안 개선 제안:
NPM_TOKEN을 직접 .npmrc 파일에 쓰는 대신, NODE_AUTH_TOKEN 환경 변수를 사용하는 것이 더 안전합니다. 이렇게 하면 토큰이 파일 시스템에 직접 노출되는 것을 방지할 수 있습니다.
다음과 같이 변경을 제안합니다:
- name: npmrc 파일 생성
- run: echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > .npmrc
+ run: |
+ echo "//registry.npmjs.org/:_authToken=${NODE_AUTH_TOKEN}" > .npmrc
+ env:
+ NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| - name: npmrc 파일 생성 | |
| run: echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > .npmrc | |
| - name: pnpm 의존성 캐시 | |
| id: cache-pnpm | |
| uses: actions/cache@v4 | |
| with: | |
| path: | | |
| ~/.pnpm-store | |
| node_modules | |
| key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }} | |
| restore-keys: | | |
| ${{ runner.os }}-pnpm- | |
| - name: npmrc 파일 생성 | |
| run: | | |
| echo "//registry.npmjs.org/:_authToken=${NODE_AUTH_TOKEN}" > .npmrc | |
| env: | |
| NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} | |
| - name: pnpm 의존성 캐시 | |
| id: cache-pnpm | |
| uses: actions/cache@v4 | |
| with: | |
| path: | | |
| ~/.pnpm-store | |
| node_modules | |
| key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }} | |
| restore-keys: | | |
| ${{ runner.os }}-pnpm- |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
요약 (Summary)
설정 단계를 지나 컴포넌트 개발 단계에 들어서면서 매 PR마다 빌드가 가능한지 자동화할 필요성이 생겼습니다. 따라서 github action을 사용하여 PR이 생기면 자동으로 build를 검사하는 로직을 구현하기로 하였습니다.
배경 (Background)
빌드 뿐만 아니라 유닛 테스트, 린트, e2e 테스트 등은 하나가 실패하면 다른 것이 실패할 확률이 높기 때문에 하나의 action workflow로 관리하여 불필요한 action이 더 돌지 않도록 하는 것이 좋습니다. 이를 위해 해당 작업에서 다른 작업에 대한 자동화도 함께 추가했고, lint나 format은 이미 husky 단에서 한 번 필터링을 거치고 있기 때문에 이를 제외한 작업들을 추가하였습니다.
목표 (Goals)
이외 고려 사항들 (Other Considerations)
현재의 workflow는 다음과 같습니다.
일반적인 CI 자동화에서 수행하는 lint, format, unit test, build, e2e test 중 lint와 format은 husky에서 필터링하고 있기 때문에 생략하였고, e2e 테스트는 기존 코드에서 별개의 action으로 분리되어 있어 위와 같은 워크플로우가 되었습니다.
하지만, build가 실패할 경우 e2e 테스트는 실패할 확률이 높기 때문에 둘의 워크플로우를 연결하여 빌드 실패 시 e2e 테스트를 실행시키지 않도록 하는 것이 나을 것 같습니다!
만약 모두 동의하신다면 아래와 같은 workflow로 수정하도록 하겠습니다!
@ghdtjgus76 @minai621 @gs0428
action 파일은
jobs: build: runs-on: ubuntu-latest needs: unit-test steps: # 의존성 설치 생략 - name: 유닛 테스트 실행 run: pnpm run test - name: 빌드 실행 run: pnpm run build처럼 한 job에 여러 과정을 함께 실행하도록 작성할 수도 있고
jobs: unit-test: runs-on: ubuntu-latest steps: # 의존성 설치 생략 - name: 유닛 테스트 실행 run: pnpm run test build: runs-on: ubuntu-latest needs: unit-test steps: # 의존성 설치 생략 - name: 빌드 실행 run: pnpm run build현재 코드처럼 별개의 job으로 분리할 수도 있습니다.
두 코드 모두 unit test가 성공적으로 실행되어야 build가 실행된다는 공통점이 있으나 전자는 코드가 간단하다는 장점이, 후자는 확장성이 좋고, 역할의 분리가 명확하다는 장점이 있었습니다. 저희 서비스의 경우 이후 코드 베이스가 확장될 가능성이 높아 코드 수정이 용이하도록 후자의 방법을 선택하였습니다.
3. 반복 설치
현재 코드에서 install-cache, unit-test, build 작업에서 모두 동일하게 의존성을 설치하는 코드가 존재합니다. act를 사용하여 로컬에서 테스트해본 결과, install-cache로 인해 dependency가 cache된다면 각 unit-test와 build job에서 dependency를 재설치하는 대신 기존에 캐시된 dependency를 설치하는 것을 확인하였습니다.
하지만 중복된 코드를 없애기 위해 unit-test와 build job에서 dependency 설치와 관련된 코드를 제거할 경우
라는 오류가 발생하여 필수적으로 반복되어야 할 코드라는 것을 확인할 수 있었습니다.
-> 결론, 코드적으로 설치하는 로직이 반복되는 것처럼 보이지만, 실제로는 캐싱된 dependency를 가져다 사용하여 속도의 저하가 나타나지 않았습니다.
4. 스크립트 local 실행
act를 통해 local에서 github action을 실행해보던 중,
chmod +x ./scripts/set-env.sh ./scripts/set-env.sh와 같이 action 파일의 일부를 별도 script 파일로 분리하여 실행할 때 act가 해당 script 파일을 찾지 못해 로컬 환경에서 테스트해볼 수 없는 문제가 발생했습니다.
이 PR에서는 임시로 해당 script 파일 내용을 직접 복붙해와 script 파일에 접근할 필요가 없도록 수정하여 해결하였으나 해당 방법은 너무 생산성이 떨어진다고 판단하여 추후에 해당 이슈를 해결해야할 것 같습니다. -> 백로그로 추가해놓도록 하겠습니다!
5. concurrency
참고한 아티클에서 github action의 concurrency를 사용하여 PR로 인해 트리거 된 action이 푸시를 날릴 때마다 다시 trigger되어 action이 낭비되는 경우를 해결할 수 있다는 내용이 나옵니다. 이번 PR에서 적용하지는 않았는데 혹시 필요하다고 생각하시면 말씀해주세요!
@minai621 @ghdtjgus76 @gs0428
관련 이슈
Summary by CodeRabbit
main브랜치에 푸시 시 버전 업데이트 및 배포를 자동화합니다.@changesets/cli개발 의존성을 추가했습니다.