1. 문제 상황

• 에러 메시지:Unexpected any. Specify a different type. eslint@typescript-eslint/no-explicit-any
• 상황:WaitingRoom 컴포넌트에서 WebSocket 메시지를 처리하는 콜백 함수의 매개변수 타입으로 any를 사용하고 있었음.

2. 원인 분석

• 원인: ESLint 규칙 @typescript-eslint/no-explicit-any가 명시적으로 any 타입 사용을 금지하고 있어, 타입 안정성을 위해 명시적인 타입 선언이 필요함.
• 영향: 코드의 타입 안정성이 떨어지고, 다른 개발자가 코드를 읽거나 유지보수할 때 타입에 대한 명확한 정보가 없어 혼란을 줄 수 있음.

3. 해결 방법

1. 명확한 타입 선언:

   • WebSocket 메시지에 대한 타입을 명시적으로 지정하기 위해 인터페이스를 정의.

   • 예시:

     export interface WebSocketMessage {
       messageType: string;
       payload: RoomPayload;
     }
     

2. 타입 파일 분리:

   • 여러 파일에서 공통으로 사용할 타입들을 하나의 파일(예시(실제 디렉토리 아님): src/types/room.ts)에 모아서 관리.
   • 이 파일에 관련 타입(Player, RoomPayload, WebSocketMessage)들을 정의하여 재사용성을 높임.

3. 코드 수정:

   • useWebSocketFunctions의 subscribeToRoom 함수 시그니처를 아래와 같이 수정:

     const subscribeToRoom = (
       roomId: string,
       onMessageReceived: (message: WebSocketMessage) => void
     ) => {
       // WebSocket 클라이언트가 연결되어 있을 때 구독 처리
       // (생략
       client.subscribe(subscriptionPath, (message) => {
         onMessageReceived(JSON.parse(message.body));
       });
       // (생략)
     };
     

   • WaitingRoom 컴포넌트에서도 더 이상 any를 명시하지 않고 타입이 올바르게 추론되도록 처리:

     useEffect(() => {
       subscribeToRoom(String(roomId), (message) => {
         console.log(`WebSocket 메시지 수신:`, message);
         if (message.messageType === 'PLAYER_JOIN') {
           setRoomData(message.payload);
         }
       });
       // (생략)
     }, []);
     
     

4. 타입 파일 생성 및 사용 예시

src/types/room.ts

export interface Player {
  userId: number;
  nickname: string;
  activeCharacter: string;
  level: number;
}

export interface RoomPayload {
  allReady: boolean;
  currentPlayers: Player[];
  host: string;
  readyStatus: { [key: string]: boolean };
  roomId: string;
  status: string;
}

export interface WebSocketMessage {
  messageType: string;
  payload: RoomPayload;
}

다른 파일에서의 사용 예시

import { WebSocketMessage, RoomPayload, Player } from '@/types/room';

5. 결론

• 문제 해결:any 타입 사용으로 인한 ESLint 경고를 해결하기 위해, 명확한 타입 선언과 재사용 가능한 타입 파일을 분리하여 관리함.
• 장점:
  • 코드의 타입 안정성 및 가독성 향상
  • 여러 파일에서 일관된 타입 정의 사용
  • 유지보수와 협업 시 혼란 최소화

이와 같이 공통 타입들을 별도의 파일로 분리하고 재사용하면 프로젝트 전반의 코드 품질과 관리가 훨씬 용이해집니다.