Refactor/yarn berry migration: Yarn PnP 마이그레이션

[prayinforrain]

🤠 개요

• close Refactor: Yarn Berry 마이그레이션 #121
• 요청에 의해 PR만 미리 열어두었어요. 준비되면 리뷰 요청 따로 드릴게요.
• 생각해보니 자동 assign 머지되면 알아서 요청이 가겠네요
• 기존 코드에도 조금 중요하면서 자잘하게 많은 변경들을 포함해요.

💫 설명

확인해야 할 사항

• 다들 VSCode로 cds의 아무 tsx나 ts 파일을 연 상태에서 커맨드 팔레트의 Typescript: Select Typescript Version을 선택하고 아래와 같은 workspace version이 보이는지 확인해 주세요!
  
• workspace 버전을 사용하지 않으면 VSCode상에서 패키지가 resolve되지 않아요. 두 가지 해결책이 있어요.

1. 아래 명령어 실행

yarn dlx @yarnpkg/sdks vscode

2. .vscode/settings.json에 아래 옵션 추가

  "search.exclude": {
    "**/.yarn": true,
    "**/.pnp.*": true
  },
  "eslint.nodePath": ".yarn/sdks",
  "typescript.tsdk": ".yarn/sdks/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true,
  "prettier.prettierPath": ".yarn/sdks/prettier/index.js"

의존성 패키지 관련

• react-icons를 재설치했어요. 이유는 기존 설치되어 있던 @react-icons/all-files를 실제 사용하는 코드에서 react-icons라는 이름으로 import하고 있기 때문이에요. 이때문에 yarn pnp 환경에서 제대로 resolve되지 않아요.
• storybook과 몇몇 패키지를 추가로 설치했어요. 이는 react나 storybook에서 peer dependency로 지정되어 있던 패키지들인데 yarn pnp의 엄격한 의존성 해결 규칙에서 제대로 resolve되지 않기 때문이에요.
• 이거 관련해서는.. 내일 스페셜 이벤트(?)에서 좀 더 자세히 풀어볼게요.

크로마틱 관련

• 크로마틱 깃헙 액션은 Yarn PnP 환경을 지원하지 않아요. Error "not found" using Yarn Berry chromaui/chromatic-cli#578
  • not found 문제 자체는 해결이 가능한데, CDS에 한정적인 문제인지 몰라도 chromatic cli가 실행되는 도중에 메모리 누수로 인스턴스가 뻗어버려요.
  • 로컬에서도.. 뻗어요.
    
• 따라서 크로마틱 배포에 한해 node_modules로 전환 후 돌아가도록 워크플로우를 변경했어요.
• chromatic cli 문제이기 때문에 Yarn PnP 환경에서는 수동 배포 자체가 불가능해요. 그래서 npm Scripts에서 chromatic을 삭제했어요.
• 도움을 주신 현빈님 감사해요 ^ㅁ^

그 외

• CSSProperties 타입을 cds 내에 포함했어요. 이 코멘트에 자세한 이유가 있어요.
  • 코멘트에 언급된 세 파일을 작업한 세영님과 현빈님의 확인이 필요해요.

이 PR을 머지하기 전에 아래 프로세스가 제대로 동작하는지 확인해야해요.

• 크로마틱 배포
• npm을 통해 패키지를 받았을 때 제대로 작동하는지

이 작업이 머지되면 아래 이슈를 해결해야 해요.

• Style: import/order rule 수정 #122

[se030]

여기는 왜인지 모르겠지만 prettier 룰이 바뀐 것 같네요. husky는 터미널 커맨드로 되어있어서 상관없을 것 같은데 .. vscode 상에서 저장할 때 달라지는건지 ..? 이전이 잘못됐던건가 ..ㅎㅎ 한번 확인 부탁드려요!

[prayinforrain]

확인해 봤는데 prettier 룰은 제대로 적용되고 있어요. 그런데 왜 이런 변화가 생겼는지는 확인해봐야겠어요 ㅋㅋ..
다만 기존에는 prettier가 레포 내에 설치되지 않고 각자의 IDE에 설치된 prettier + 익스텐션에 의존하고 있었어서 각자의 버전에 따라 prettier가 다르게 동작했거나 아니면 또 pnp에서 prettier가 다르게 동작하고 있거나.. 그런 가능성도 있을 것 같아요.

다만 yarn pnp의 경우에는 workspace에 Typescript + ESLint + Prettier 파일 자체를 가지고 있기 때문에 더 이상 작업 환경에 따른 차이는 없을 것으로 생각돼요.

[prayinforrain]

다른 분들도 workspace의 Typescript 기준(PR 본문 참고)으로 해당 파일을 prettier가 어떻게 판단하나 확인해 주세요!
확인 결과 다른 파일들은 변경이 생기지 않았고 해당 부분만 괜찮으면 이대로 유지할게요.

[se030]

너 무 고 생 하 셨 습 니 다 👍🏻

[se030]

export type { CSSProperties } from 'react';

package.json에 csstype 명시하지 않아도 이렇게 가져와서 사용할 수 있을 것 같아요! 빌드까지 문제 없는거 확인했어요.

[se030]

그리고 여기만 import type으로 명시되어있는데 통일하는게 좋지 않을까요?

[se030]

import { css } from '@emotion/react';
import type { FlexContainerProps } from '@utils';

export const flexboxStyle = ({
  flexDirection = 'row',
  flexWrap = 'nowrap',
  alignContent = 'normal',
  alignItems = 'center',
  justifyContent = 'center',
  gap = '1rem',
}: FlexContainerProps = {}) => {
  return css({
    display: 'flex',
    flexDirection,
    flexWrap,
    alignContent,
    alignItems,
    justifyContent,
    gap,
  });
};

그리고 이렇게 수정하는게 더 좋을 것 같아요. 중복해서 정의된 타입을 제거하고 반환값 타입이 SerializedStyle로 추론되도록 하는 코드에요. 수정이 좀 있지만 빌드 이슈랑 관련이 있어서 이 PR에 들어가도 괜찮지 않을까 ..ㅎㅎ