-
Notifications
You must be signed in to change notification settings - Fork 1
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
Refactor: Yarn Berry 마이그레이션 #121
Comments
아마 별도 이슈를 열어야 할 수도 있는데.. 아직 상황 파악이 제대로 안됐어요 import { COLOR } from '@constants/color';
import { css } from '@emotion/react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { ReactNode } from 'react';
import Container from '.'; 그런데 yarn berry로 올리고 나니 린트 에러가 나기 시작했어요. 얘가 지금 주장하는 순서는 아래와 같아요: import { COLOR } from '@constants/color';
import Container from '.';
import { css } from '@emotion/react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { ReactNode } from 'react'; 우리
이 링크를 따라서 풀어서 설명하면 다음 순서에요.
제가 이해한 게 맞다면 기존 버전과 베리의 린트가 주장하는 순서는 둘 다 틀렸어요. 이유는 두 가지인데
여기까지가 슬랙에서 @se030 님과 대화한 내용이고 저는 배가 고파서 집에 가야하니까 나머지는 나중에 정리하려구요! |
import/order가 사용하는 다른 플러그인의 설정을 보면 yarn pnp를 사용할 경우
넣었더니 기존처럼 internal-external 구분 없이 모두가 external로 들어가게 되었어요. |
정답을 찾았어요. 우선 internal, external 모듈의 정의는 우리가 아는 것과 같아요. 다만 지금 우리 룰에는 internal의 순서가 따로 지정되어 있지 않아요.
이제 emotion, react와 우리가 사용하는 internal 모듈이 둘 다 external로 인식되는 이유에요. 이건 여기에 정의되어 있는데,
이 세 가지 경우를 모두 external로 인식하고 있어요. 따라서 alias들을 resolve하면 무조건 상위 폴더로 나가기 때문에 external이 돼요. 아무튼 이 모든 것들이 external이 되니까 우리가 선언한 alias들을 예외적으로
이제 alias로 선언된 대부분의 import가 internal로 처리되었어요.
마지막으로 아무튼 바로 윗 코멘트 + 여기까지가 제가 해결한 과정인데 이걸 이 브랜치에 섞어서 올리는게 맞는지 잘 모르겠어요. |
고생하셨어요 ~ 아직 읽어보지는 못했는데 작업은 다른 이슈로 나누는게 좋을 것 같아요? |
작업 근황(개인 메모)storybook 의존성 명시 041d327yarn berry로 전환 후 스토리북이 실행되지 않았어요. 이유는 아래 링크에 나와 있는데, 사실 react-icons 재설치 f2ab989기본에는 import/order 63190eb위 댓글의 내용은 별도 이슈로 분리했어요. 이유도 거기 적혀있어요. 이 브랜치에서 해 줄 변경은 그저 외부 패키지를 prettier 설치 667f6b0pnp 모드에서는 workspace 내의 typescript와 eslint, prettier 등을 사용해요. 남은 문제 |
작업 근황(개인 메모)gitignore 수정 2ca3569 5d42cbb제가 이전에 했던 프로젝트의 .gitignore를 가져와서 적용했었는데... 왜 제로인스톨 안쓰냐면.. 제 환경 기준으로 pnp를 사용하는 것 자체로 이미 node_modules 링커보다 3배 이상 빠르기 때문이에요. 필요하다면 PR 머지 직전에 추가할 것 같은데, 라이브서버에 배포하는 것이 아닌 cds 특성상 굳이 필요한가 싶은 생각이 들어요.(제 생각) 왜 나만 빌드가 안 돼공채 시즌 전에 제 환경에서만 스토리북 실행이나 빌드가 안 된다는 이야기를 했어요. pnp에서 build가 안 돼dev까진 정상적으로 돌아갔는데 build가 안되는 문제가 있었어요. 그런데 세 개의 에러가 남았어요. [vite:dts] Start generate declaration files...
src/components/Button/useButtonStyle.tsx:4:7 - error TS2742: The inferred type of 'useButtonStyle' cannot be named without a reference to '../../../.yarn/cache/csstype-npm-3.1.2-cead7d99b2-e1a52e6c25.zip/node_modules/csstype'. This is likely not portable. A type annotation is necessary.
4 const useButtonStyle = (variant: ButtonVariant) => {
~~~~~~~~~~~~~~
src/components/Slider/useSlider.ts:20:7 - error TS2742: The inferred type of 'useSlider' cannot be named without a reference to '../../../.yarn/cache/csstype-npm-3.1.2-cead7d99b2-e1a52e6c25.zip/node_modules/csstype'. This is likely not portable. A type annotation is necessary.
20 const useSlider = ({
~~~~~~~~~
src/styles/flex-box.ts:12:14 - error TS2742: The inferred type of 'flexboxStyle' cannot be named without a reference to '../../.yarn/cache/csstype-npm-3.1.2-cead7d99b2-e1a52e6c25.zip/node_modules/csstype'. This is likely not portable. A type annotation is necessary.
12 export const flexboxStyle = ({
~~~~~~~~~~~~ 이게 뭔지는 지금부터 알아갈 예정이에요 ^^.. 용의자 리스트는 아래와 같아요
|
전혀 다른 문제지만 아래 코멘트에서 힌트를 얻었어요. 좀 더 자세한 원인을 알고 싶지만.. 막연히 yarn berry에서의 resolve하는 방식의 차이가 있어 이런 문제가 발생한다고 생각할 수 밖에 없겠어요. 그냥 얀베리가 잘못했겠지~ 하는 수준.. useSlider의 경우에는 좀 특이한 케이스에요. CSSProperties를 변경해 주었음에도 에러가 사라지지 않았어요. CSSProperties를 사용하는 복잡한 타입에 대해서 TS2742 오류가 발생한다 라는 힌트를 여기서 얻었는데, useSlider가 반환하는 객체는
대충 이런 식이에요. 너무 맥락이 다르고 큰 범주의 변경이어서 별도 브랜치에서 작업하고 싶었는데, 결국 CSSProperties -> yarn berry migration -> main 이 방향으로 머지하다보면 스쿼시 머지 때문에 의미가 없을 것 같아서 바로 올렸어요. useSlider와 flexbox, button 이 세 개를 작업한 세영님과 현빈님한테 PR때 한 번 더 확인받을게요. |
♻️ 리팩토링 사항
📖 참고 사항
4월 30일 미팅에 있던 건데.. 일단 이슈로만 써놓을래요
작업 시점은 잘 모르겠어요 다음 버전 준비 전에 쇽 해 놓는 게 좋을 것 같은데 스토리북7 마이그레이션이랑 겹치면 또 피곤할 것 같아요
그렇게 어려운 작업은 아닌데 혹시 페어 하실 분 계시면 환영해요 ^^..
The text was updated successfully, but these errors were encountered: