fix(ui): Vitest globals 옵션 사용 시 lint error가 발생하는 문제를 해결합니다.

[jungwoo3490]

변경사항

close #158

Vitest globals 옵션 사용 시 lint error가 발생하는 문제를 해결했어요.

Unsafe type call이 발생했던 이유는 ui 패키지의 eslint 파일에서 extend하고 있던 react-internal.js의 세팅과 충돌했기 때문이었어요.

그래서 eslint 파일에서 override 필드를 활용하여 린트 case를 2개로 분리하여 컴포넌트 파일에는 custom/react-internal을 extend한 rule을 적용하고, 테스트 파일에는 eslint-plugin-vitest 패키지의 rule을 적용하는 방식으로 해결하려 했어요.

결국 해결은 했지만, 테스트 파일 린트를 적용하는 과정에서 custom/react-internal을 extend할 수 없었으므로 parser, parserOption 등을 다시 세팅해야 했고, 이건 eslint-config-custom 패키지에서 해야 할 일이 아닌가...? 라는 생각을 했어요.

그래서 eslint-config-custom 패키지에서 vitest lint 셋업파일을 만드려고 보니 parser, parserOption 등등 상당수가 react-internal.js의 세팅과 겹쳤고, 동일한 부분을 분리해서 추후 다른 세팅 추가시 재사용성을 높여야겠다는 생각을 하게 되었어요.

하지만 곧바로 생각이 든 건, 유닛 테스트 코드를 작성하는 데 엄격한 규칙이 필요할까? 라는 생각이 들었어요. 그래서 eslint-config-custom의 rule들 중 우리에게 필요한 게 있을지 찾아보게 되었어요.

https://www.npmjs.com/package/eslint-plugin-vitest

rule들을 보았을 때 제가 느끼기에는 유닛 테스트 레벨에서 크게 필요한 건 없다고 느꼈어요. 그래서 기존 custom/react-internal을 extend한 rule을 적용하되, 테스트 파일은 ignorePattern에 추가해서 lint 검사를 무시하도록 설정해두었어요.

실제로 세팅을 수정한 후 vitest에서 import하는 라인을 제거해도 lint error가 발생하지 않는 것을 확인했어요.
추가할만한 rule이 있다고 생각되면 다시 세팅을 하면 되니 편하게 제안주셔도 괜찮습니다!

시급한 정도

🐢 천천히 : 급하지 않습니다.

[height]

Link Height tasks by mentioning a task ID in the pull request title or commit messages, or description and comments with the keyword link (e.g. "Link T-123").

💡Tip: You can also use "Close T-X" to automatically close a task when the pull request is merged.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 7f9dd3c

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[suwonthugger]

lint 충돌이 쉽지 않네요... 현재 unit test에는 저도 아직 필요성을 못느껴서 적절한 조치라고 생각해요. LGTM

[Brokyeom]

lint 관련해서 저도 불필요한 규칙들이 많이 들어있다고 생각해서, 일부 규칙을 비활성화 하는 것에 동의합니다.
특히 개발을 위해서 허용해야하는 것인데 린트가 걸고넘어지는 경우도 있어서.. 일단 husky를 비활성화 해 두는게 작업 병목을 줄일 수 있을 것이라 생각되네요

[Brokyeom]

이정도로 많은 제약사항이 있을 걸 파악을 미처 못하고 pre-commit을 걸어놔서 ㅠㅠ 일단 규칙에 대해서는 논의하고 싶은 규칙이 생길때마다 쓰레드에서 이야기해 보아요

[Brokyeom]

페키지 코드가 변경되어서 버전은 올려야 할 듯 합니다. patch 로 changeset 올려주세요!

[jungwoo3490]

페키지 코드가 변경되어서 버전은 올려야 할 듯 합니다. patch 로 changeset 올려주세요!

@Brokyeom
패키지 변경된 부분이 'eslint-config-custom' 패키지뿐인데 저희 이 부분 따로 배포해서 버저닝하고있지 않고 그냥 개발시에만 쓰이는 패키지라 changeset 없어도 괜찮지 않나 하는 생각입니다!!

[Brokyeom]

아 제가 얘기한 부분은 ui 패키지였어요! 단순 import문 수정이라도 버전을 올려주는게 좋습니다.

[jungwoo3490]

아하 제가 import문을 제거해뒀었군요!!!
집 도착해서 patch로 버전 올리겠습니다 확인 감사해요👍🏻👍🏻

[jungwoo3490]

lint 관련해서 저도 불필요한 규칙들이 많이 들어있다고 생각해서, 일부 규칙을 비활성화 하는 것에 동의합니다. 특히 개발을 위해서 허용해야하는 것인데 린트가 걸고넘어지는 경우도 있어서.. 일단 husky를 비활성화 해 두는게 작업 병목을 줄일 수 있을 것이라 생각되네요

저도 lint가 진짜 필요성에 의해 사용되는 것이 아니라면 오히려 생산성 저하의 원인이 될 수도 있겠다는 생각이 들어요... 나중에 느끼기에 불필요하다 싶은 rule이나 추가하고 싶은 rule이 있다면 슬랙에서 이야기해도 좋을 것 같아요!!