chore(*): eslint-config, prettier, vscode setting.json 설정

[semnil5202]

🎉 변경 사항

eslint, prettier, vscode setting.json을 설정합니다.

prettier 설정사항

• single quote
• printWidth 120

eslint 설정사항

• import order
• type import type keyword
• jsx bracket cancel (ex: <div aria-label={"a"} /> -> <div aria-label="a" /> )
• no cycle import (순환 참조 import 에러)

vscode setting json 설정 사항

• default code formatting
• eslint fix explicit
• eslint missing import explicit
• eslint import organization explicit

libarary.js, react-internal.js, next.js 3개의 설정 파일을 유지하며, 위 공통 설정 사항 외에는 각 환경에 맞는 설정을 추가로 합니다. (ex: env, extends 등)

추가로 현재 코드베이스에 설정한 eslint, prettier 설정을 반영합니다.

🔗 링크

🙏 여기는 꼭 봐주세요!

[Doeunnkimm]

고생해버렸다 ~~~ 🎉✨

음 추가로 부탁하고 싶은건 .vscode에 settings.json에 ..onSave 관련 설정 파일도 같이 포함되었으면 좋겠습니다 🙏🏽

[semnil5202]

추가로 setting json 포멧팅 및 린트 관련 옵션을 추가했습니다. d21bd5d

한 번 확인 부탁드립니다. @Doeunnkimm

[semnil5202]

@Andrevile 종오넴 순환 참조에 관련해서 의견을 듣고 싶습니다.

관련 공식문서: https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/no-cycle.md

개인적으로 이 룰이 생각보다 복잡하다고 느껴져서요. 위 문서를 보시면 maxDepth 옵션이 순환 참조의 깊이를 설정할 수 있는 옵션 같은데, 이 값을 얼만큼 줘야 적당할까요??

제가 이해한 바로는 다음 그림과 같습니다.

maxDepth를 2 이상의 값으로 두자니, 그 기준이 명확하지가 않은 것 같아서요. (ex: 2로 두던 10으로 두던 그 차이가 실제로 체감이 될지? lint 옵션을 설정한 이유가 될 수 있을지?)

따라서 현재 PR에는 Infinite로 반영해두긴 했습니다만,, 좋은 값인지 판단이 잘 서질 않아서 질문드립니다.

[semnil5202]

위 코멘트 정정하겠습니다. 그림에서 잘못 설명된 부분이 있습니다. 또한 no cycle 옵션이 제대로 동작하지 않았던 오류를 방금 수정했습니다. c2278de

여러 테스트를 해본 결과 mexDepth는 Infinity 값으로 두는 것이 좋아보입니다. 그 이유는 아래와 같습니다.

위 그림과 같이 순환 참조가 몇 개의 모듈을 걸쳐져 이루어져 있는가 === maxDepth 라고 생각하시면 되겠습니다. 따라서 A.ts와 B.ts가 서로 참조하는 상태라면 maxDepth 1 이상부터 린트 에러가 발생합니다. 허나 A.ts B.ts ,,, ~ Z.ts 사이에서 순환 참조가 발생하면 maxDepth 26 이상부터 린트 에러가 반환됩니다.

따라서 Infinity로 설정하여 순환 참조가 몇 개의 모듈을 거쳐서 나타나던, 우리의 본래 목적인 순환 참조 자체를 방지하도록 하는 것이 좋은 방향으로 생각됩니다. 😇 이에 의견 부탁드립니다!

[sambad-adventure]

@semnil5202
이거 아예 막는걸로 해주시겠어요?
세민님 올려주신 내용인지했으며, 그에 따라서 아예 발생하지 않도록 하는게 좋을 거 같네요.
1로 하면 되는건가요?