Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feature] 프로젝트 초기 세팅 #3

Merged
merged 178 commits into from
May 20, 2024
Merged

Conversation

ghdtjgus76
Copy link
Collaborator

@ghdtjgus76 ghdtjgus76 commented May 5, 2024

🎉 변경 사항

초기 세팅했습니다...

  • turborepo 초기화
  • 워크 스페이스 구조 잡기
  • root 공통 의존성 설치
  • wow-docs 워크스페이스 세팅
  • wow-tokens 워크 스페이스 세팅 및 npm 배포
  • wow-icons 워크 스페이스 세팅 및 npm 배포
  • wow-ui 워크 스페이스 세팅 및 npm 배포
  • codeowners 세팅
  • chromatic 배포 및 깃헙 액션 세팅
  • changeset, changelog 세팅
  • 절대 경로 세팅
  • import문 순서 세팅
  • 이슈 템플릿, PR 템플릿 추가
  • 브랜치 룰 추가
  • theme 워크스페이스 추가
  • wow-ui 워크스페이스 스토리북 애드온 추가
  • panda css config 세팅
  • 스토리북 웹 접근성 테스트 자동화

🚩 관련 이슈

🙏 여기는 꼭 봐주세요!

jest, stylelint, eslint, tsconfig, husky, lint-staged 세팅은 화요일에 마무리할 예정이니 제외하고 리뷰 부탁드립니다.

🚨 처음에 클론하고 pnpm install, pnpm build 명령어를 실행시켜주셔야 잘 작동합니다.
빌드를 하지 않으면, ui, tokens, icons 패키지를 못 불러오는 문제가 생깁니다.
모노레포 환경에서는 각 워크스페이스에서 정의된 패키지를 가져올 때 각각 package.json 파일 내 exports 속성에 정의된 파일들을 가져와서 실행시키기 때문인 것 같습니다.
preinstall 스크립트 사용해서 처음에 빌드를 시켜주려고 했으나,,, 패키지 설치할 때마다 매번 빌드가 실행되는 문제가 있어서 사용하지 않기로 했습니다,,,

워크플로우에 pnpm install 시 --no-frozen-lockfile 속성을 추가해주도록 했는데, ci 돌릴 때는 이 속성이 true로 설정되기 때문에 lockfile을 생성할 수 없고 install이 안 된다고 해서 추가해뒀습니다.
image

스토리북 웹 접근성 테스트 자동화도 추가해놨습니다.
pnpm test-storybook 스크립트 실행시켜도 되고, 스토리북 상에서도 확인 가능합니다.
image
image
브라우저는 firefox, chromium, webkit 세 개 다 설정해놨습니다.

turbobot-temp and others added 30 commits May 4, 2024 14:21
@ghdtjgus76
Copy link
Collaborator Author

@eugene028 @hamo-o @SeieunYoo @kongnayeon 세팅 완료됐는데, 한 번 확인해보시고 리뷰 부탁드립니다!

@ghdtjgus76
Copy link
Collaborator Author

ghdtjgus76 commented May 18, 2024

image

eslint 설정할 때 화살표 함수로 설정해놨더니 docs 쪽에서 이렇게 뜹니다
근데 화살표 함수로 변경하면 build 실패해서... eslint 설정을 좀 바꾸는게 어떨지...

image

@ghdtjgus76
Copy link
Collaborator Author

image

그리고 wow-ui/panda.config.ts에서 theme을 찾을 수 없다는 에러가 납니다.
package.json에서 dependency에 아래와 같이 지정해주었는데 동일한 이름인 다른 패키지가 불러와지는 거 같은데 이름을 변경해야 할까요?
저만 나는 에러인지 확인 부탁드려요!

  "dependencies": {
    "theme": "workspace:^"
  },
image

@SeieunYoo
Copy link
Collaborator

  • Layout 컴포넌트 default 로 export 하면 빌드는 잘 되는 것 같습니다! 코드 컨벤션 정하면서 arrow-function 으로 할지 function-declaration 으로 할 지 정해봐용
    image
    image

  • 제 환경에서는 워크 스페이스 theme 으로 잘 불러와지고 있는 것 같아요! 요 PR에서 wow-ui 가 아닌 루트의 dev 디펜던시에 theme 을 가져오도록 수정했는데 wow-ui 의 디펜던시에서 가져와지고 있는건가욥?
    image

나머지는 저는 다 좋습니당!!

@ghdtjgus76
Copy link
Collaborator Author

@SeieunYoo
export default function 형태로 하니까 안 됐는데, 저렇게 하니까 되네요
저렇게 변경해둘게요!

그리고 theme이 루트 package.json에 있기는 한데, 제 노트북에서는 wow-ui에서 불러오질 못하는 거 같아요
다시 클론해서 해봐도 똑같은 상황이긴 합니다...
혹시 죄송하지만 클론 한 번 해서 확인 부탁드려도 될까요?

@SeieunYoo
Copy link
Collaborator

헉 저는 클론한 레포에서도 theme 이 워크스페이스 패키지로 import 되곤 있습니다😥😥 theme/util 은 잘 불러와지는데 theme 은 안되는 게 요상하네요,,내일 회의 때 같이 봐요!!

@ghdtjgus76
Copy link
Collaborator Author

헉 넵.. 확인 감사합니다..

@ghdtjgus76
Copy link
Collaborator Author

ghdtjgus76 commented May 19, 2024

@SeieunYoo @eugene028 @hamo-o @kongnayeon
문제 해결했습니다.
tsconfig 파일 include 부분 아래와 같이 변경했습니다.

"include": ["src", "**/*.ts", "**/*.tsx"],

이렇게 하고 rollup typescript 관련 플러그인을 하나 변경했습니다.
@rollup/plugin-typescript로 변경했는데, 빌드할 때마다 아래 경고가 뜹니다.
근데 다 세팅해줬는데도 떠서 찾아보니까, 잘 세팅해줘도 저 플러그인에서 저렇게 경고를 띄우는 거 같아서 무시해도 되지 않을까 생각합니다.
rollup/plugins#1536

image

그리고,, root package.json에서 shared-config와 theme이 devDependency로 설정돼 있는데, 이 부분을 dependency로 옮기지 않아도 되는지? 궁금합니다.

@hamo-o
Copy link
Member

hamo-o commented May 19, 2024

@SeieunYoo @eugene028 @hamo-o @kongnayeon 문제 해결했습니다. tsconfig 파일 include 부분 아래와 같이 변경했습니다.

"include": ["src", "**/*.ts", "**/*.tsx"],

이렇게 하고 rollup typescript 관련 플러그인을 하나 변경했습니다. @rollup/plugin-typescript로 변경했는데, 빌드할 때마다 아래 경고가 뜹니다. 근데 다 세팅해줬는데도 떠서 찾아보니까, 잘 세팅해줘도 저 플러그인에서 저렇게 경고를 띄우는 거 같아서 무시해도 되지 않을까 생각합니다. rollup/plugins#1536

image 그리고,, root package.json에서 shared-config와 theme이 devDependency로 설정돼 있는데, 이 부분을 dependency로 옮기지 않아도 되는지? 궁금합니다.

shared-config는 라이브러리 사용자들이 쓸 일이 없을 것 같아 옮기지 않아도 될 것 같습니다. 다만 지금 test파일까지 빌드되고 있어서 요 부분 제외시키도록 rollup config에서 수정하겠습니다!

Copy link
Member

@hamo-o hamo-o left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

너므너무 수고하셨습니다 ...!!

packages/wow-ui/rollup.config.js Outdated Show resolved Hide resolved
packages/shared-config/.babelrc.react.json Show resolved Hide resolved
@SeieunYoo
Copy link
Collaborator

SeieunYoo commented May 19, 2024

theme 패키지가 panda.config.ts에서만 쓰이는 패키지라 devDependency 에 넣어도 되지 않을까 생각했는데요, install 에 문제 생기면 그때 dependency 로 넣어볼까유? (dependency로 넣으려면 theme 패키지도 라이브러리로 배포해야 될 것 같다눈,,)

+) test 돌리고 나면 생기는 coverage 라는 파일이 lint 에서 잡혀서 에러나서 제외 시켜주겠습니다! 2a73592
image

@hamo-o hamo-o self-requested a review May 19, 2024 14:06
@ghdtjgus76
Copy link
Collaborator Author

theme 패키지가 panda.config.ts에서만 쓰이는 패키지라 devDependency 에 넣어도 되지 않을까 생각했는데요, install 에 문제 생기면 그때 dependency 로 넣어볼까유? (dependency로 넣으려면 theme 패키지도 라이브러리로 배포해야 될 것 같다눈,,)

+) test 돌리고 나면 생기는 coverage 라는 파일이 lint 에서 잡혀서 에러나서 제외 시켜주겠습니다! 2a73592 image

아하 그게 맞는 거 같아요! 😀

@ghdtjgus76 ghdtjgus76 merged commit 870d89d into main May 20, 2024
3 checks passed
@ghdtjgus76 ghdtjgus76 deleted the feature/project-setting branch May 29, 2024 10:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Feature] 프로젝트 세팅
5 participants