fix(sds, web-domains, web): sds에서 절대경로 alias를 걷어내고, 이로인해 혼재되어 사용되고 있던 import 경로를 정리합니다

[Doeunnkimm]

🎉 변경 사항

✔️ tsconfig 내 불필요한 내용 제거

• 불필요하게 추가 되어있는 내용을 제거합니다.

✔️ sds 내 절대경로 alias 걷어내기

• sds 내부에서 절대경로 alias를 주었기 때문에
• 빌드 대상인 web 패키지에서도 절대경로를 명시해주었었어요.
• sds가 정말 하나의 디자인 시스템으로 오픈소스가 된다고 한다면
• 사용처에서 이를 명시해주는 것이 말이 안된다고 생각 들더군요...?
• 저희랑 비슷한 폴더 구조를 띈 chakra-ui 에서도 모두 상대경로를 사용하고 있어 저희 sds에도 차용 하게 되었습니다.

✔️ 이로인해 혼재되어 사용되던 import 문 정리

• 여기저기 tsconfig에 @sds/*가 추가되어 혼재되어 사용되고 있었습니다.
• 이를 정리합니다.

👇 in web-domains

// as-is
import { Button } from '@sds/components'

// to-be
import { Button } from '@sambad/sds/components'

🔗 링크

🙏 여기는 꼭 봐주세요!

[semnil5202]

오호 고생하셨습니다. 👍👍👍

본문에서 말씀하신 것이 제가 정확하게 이해를 못한 것 같아서 확인차 몇 가지 궁금한 점 적어보았습니다.

1. @sambad/sds/... 와 @sds/... 의 차이점이 무엇인가요?

본문에서 sds를 하나의 독립된 라이브러리로 배포했을 때, 사용처에서 이를 절대경로로 명시해주는 것이 말이 안된다..? 라고 하셨는데 이게 정확하게 어떤 말인지 잘 이해를 못했습니다.

sds를 독립된 라이브러리로 배포했다고 했을 때 사용처에서 import Text from 'sds/Txt' 이런식으로 사용이 될 듯한데, @sds/... 에서 @sambad/sds/... 로 변경하는 이유가 있나요? (이것과 관련이 없나.. 🤔)

2. sds 내부에서 상대 경로

사실 저는 경로 import 하는거에 크게 지저분하다고 생각을 잘 안하는 타입이라, 보통 상대경로로 쓰는데 기존에 alias를 통한 절대 경로 (절대 경로가 아닌가..? 🤔)를 사용하셨던 이유가 무엇이었나요?? import 문이 깔끔해진다 등등

sds를 독립된 라이브러리로 배포한다고 했을 때, 상대경로를 써야만 하는 이유가있나요? sds 내부에서 alias 절대경로를 지정해도, sds 내부에서만 사용하니 이를 배포한다고 했을 때 사용처에서 딱히 이슈가 없을 듯 한데 어떤 이슈가 있는지 궁금합니다.

쓰다보니 제가 이쪽으로 많이 모르는 것 같습니다. 초등학교 5학년에게 가르치듯이,, 친절한 도은선생님의 설명 부탁드립니다.. 🙇🏻‍♂️

[Doeunnkimm]

@semnil5202

1. @sambad/sds/... 와 @sds/... 의 차이점

• @sambad/sds/...: node_modules 에서 경로를 불러오는 모듈 시스템을 바로 사용한 것
• @sds/... : 사용처에서 굳이 alias를 줘서 사용하는 것

이 될 수 있어요. 사용처에서 alias를 줘서 사용하는 것에 대해 이해를 돕기 위해 예시를 들어보자면,
우리가 라이브러리를 install 해서 사용을 한다면

import { Checkbox } from '@radix-ui/checkbox'

라고 바로 사용하지, tsconfig에 가서 이 라이브러리에 대한 alias를 지정해서 사용하지 않아요! (보통은, 안되는 것은 아니지만)

2. sds 내부에서 상대 경로

@sambad/sds 내부에서 tsconfig를 통해 alias를 줄 경우 @sambad/sds 패키지 내부에서는 사용할 수 있지만,
이를 install 해서 사용하는 사용처 패키지에서는 이 alias를 알 수 없어요! tsconfig는 해당 패키지에서만 적용되는 파일이여서인데요!

그래서 @sambad/sds에서 준 alias는 저희 빌드 대상인 web 패키지에서 걸려버립니다. (나 @sds 별칭 모르는뎁셔..? <- 이렇게용)
그래서 수정 전 코드를 보면 이곳저곳 tsconfig에 @sds 별칭을 명시해주고 있어요. 그래야 빌드에서 안 깨지거든요.

이걸 사용처에서 왜 신경써줘야 하며, 이걸 어떻게 알 수 있을까 하는 의심이 들었어요!
우리가 @radix-ui/checkbox 같은 UI 라이브러리 열심히 사용하고 빌드 돌렸는데 막 깨져요. alias를 설정하래요. <- 이건 말도 안되는 사용성이라고 생각했어요.

혹시 이해가 안 된 부분이 있으시다면 질문 살인마 🥄 부탁드림다

[semnil5202]

오~~~~~ 역시 믿고 보는 개발자 갓도은. 깔끔한 설명 덕분에 잘 이해가 됐습니다. 👍👍👍👍 땡베감~~!! 🙇🏻‍♂️

[LeeJeongHooo]

위에서 설명을 잘 해주셔서 왜 경로를 수정하였는 지 알 수 있었던 거 같습니다!

혹시 제가 이해한 내용이 맞는 지 궁금합니다!

• 'sds 내 절대경로 alias 걷어내기'를 하고 상대경로로 지정해주면 저희의 도메인에서 sds를 가져와서 사용하는 방법과 배포된 sds를 외부 프로젝트에서 사용했을 때 동일한 주소로 가져올 수 있는 걸까요?

[Doeunnkimm]

@LeeJeongHooo

음 정확하게는 그냥 @sambad/sds 이 경로로 패키지 사용이 가능하다! 가 맞을 거 같아요!

걷지 않았다면 사용처에서 tsconfig에서 설정이 필요해요. 히지 않는다면 사용처에서 이 alias를 모르니 빌드가 깨지면서 alias 관련 오류가 와장창 날텐데,

우리가 라이브러리 사용할 때 이런 것까지 생각하진 않잖아요?! 그래서 일반적인 사용성도 못 갖추게 하는 설정이라고 생각해서 걷게 되었습니다 🙇