[FE] eslint 설정 추가 세팅 #417

[Zero-1016]

📎 연관 이슈

해결된 이슈: close #417

✏️ 작업 내용

현재 프로젝트의 코드 품질 향상을 위해 ESLint를 설정하였습니다.

ESLint 설정

다음과 같은 규칙들을 추가하여 코드 품질을 향상시켰습니다.

{
  "rules": {
    // console.log 사용 제한 (warn, error만 허용)
    "no-console": ["error", { "allow": ["warn", "error"] }],
    
    // React Hooks 규칙 준수
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn"
  }
}

또한 type, lint, format 검사는 git action을 이용하여 dev/fe에 병합하거나 푸시를 할 경우 실행됩니다.

🙏🏻 리뷰 요구 사항

ESLint 설정에 대해 다음 사항들을 검토해주시면 감사하겠습니다.

ESLint 규칙

• console.log 사용을 제한하고 warn, error만 허용하도록 설정

console.log를 사용하고 싶다면 utils/log를 사용하거나 commit 단계전에 제거를 하셔야합니다.

import { errorLog, log } from '@/utils/log'

log('[✅] 이미 채팅 서버에 연결되어 있음')

• React Hooks 규칙을 엄격하게 적용하여 잠재적인 버그 방지
• useEffect의 의존성 배열 누락 시 경고 표시

다음과 같이 의존성 배열 누락 경고를 제거할 수 있습니다.

  /*
   * 채널 입장 및 퇴장 이벤트를 처리하는 함수
   * 무한 루프 방지를 위해 exhaustive-deps 규칙을 비활성화합니다.
   */
  useEffect(() => {
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [channelId, channelInfoList, serverId])

해당 방식의 남용을 방지하기 위해 해당 규칙 무시 룰을 사용할 경우 위에 주석으로 사용한 이유를 명시해 주시기 바랍니다.