에러부터 처리_1 (Meju_Refac)

코드를 가장 최근까지 안보다가 리팩토링을 결심하고,
코드를 포크해서 npm을 설치 후 실행해 보았다.
물론 내가 짠 코드가 아닌 부분은 잘 모르기에 이해를 한번 더 해야한다.

[eslint] 
src/pages/Homfirst.tsx
  Line 18:10:  'windowWidth' is assigned a value but never used  @typescript-eslint/no-unused-vars

src/pages/Map.tsx
  Line 5:12:   Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
  Line 52:41:  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
  Line 52:55:  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
  Line 68:27:  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any

src/pages/Mypage/LikeListPage.tsx
  Line 131:9:   'totalPages' is assigned a value but never used  @typescript-eslint/no-unused-vars
  Line 172:14:  'res' is defined but never used                  @typescript-eslint/no-unused-vars
  Line 199:14:  'res' is defined but never used                  @typescript-eslint/no-unused-vars

src/pages/Mypage/OrderListPage.tsx
  Line 143:23:  'setTotalLength' is assigned a value but never used  @typescript-eslint/no-unused-vars
  Line 150:9:   'totalPages' is assigned a value but never used      @typescript-eslint/no-unused-vars
  Line 195:14:  'res' is defined but never used                      @typescript-eslint/no-unused-vars
  Line 212:53:  Unexpected any. Specify a different type             @typescript-eslint/no-explicit-any
  Line 212:61:  Unexpected any. Specify a different type             @typescript-eslint/no-explicit-any

src/pages/Place.tsx
  Line 75:9:  'location' is assigned a value but never used  @typescript-eslint/no-unused-vars

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

WARNING in [eslint] 
src/pages/Homfirst.tsx
  Line 18:10:  'windowWidth' is assigned a value but never used  @typescript-eslint/no-unused-vars

src/pages/Map.tsx
  Line 5:12:   Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
  Line 52:41:  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
  Line 52:55:  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
  Line 68:27:  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any

src/pages/Mypage/LikeListPage.tsx
  Line 131:9:   'totalPages' is assigned a value but never used  @typescript-eslint/no-unused-vars
  Line 172:14:  'res' is defined but never used                  @typescript-eslint/no-unused-vars
  Line 199:14:  'res' is defined but never used                  @typescript-eslint/no-unused-vars

src/pages/Mypage/OrderListPage.tsx
  Line 143:23:  'setTotalLength' is assigned a value but never used  @typescript-eslint/no-unused-vars
  Line 150:9:   'totalPages' is assigned a value but never used      @typescript-eslint/no-unused-vars
  Line 195:14:  'res' is defined but never used                      @typescript-eslint/no-unused-vars
  Line 212:53:  Unexpected any. Specify a different type             @typescript-eslint/no-explicit-any
  Line 212:61:  Unexpected any. Specify a different type             @typescript-eslint/no-explicit-any

src/pages/Place.tsx
  Line 75:9:  'location' is assigned a value but never used  @typescript-eslint/no-unused-vars

webpack compiled with 1 warning
No issues found.

프로젝트 당시엔 이런 에러가 없었던 것 같은데,
아마 기능들이 업데이트되면서, 그리고 새로운 환경에서 설치해서 에러가 발생하는 듯 하다.
오늘의 목표는 에러부터 잡기다.

Homfirst.tsx 부터 가보자

  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
  
  ...
  
  useEffect(() => {
    const handleResize = () => {
      setWindowWidth(window.innerWidth);
    };
     window.addEventListener("resize", handleResize);

    return () => {
     window.removeEventListener("resize", handleResize);
    };
  }, []);

일단 가독성부터 개판이다.
반응형을 고려해서 만든 코드같은데,
그 아래 코드에는 반응형을 고려해서
{windowWidth < 600 ? ~~~ 뭐 이런 코드가 없기에
windowWidth의 사용됨이 없을을 알리는 Eslint 에러다.

즉 삭제 ㄱ.

만약 활용한다면,

const [windowWidth, setWindowWidth] = useState(window.innerWidth);

useEffect(() => {
  const handleResize = () => setWindowWidth(window.innerWidth);

  window.addEventListener("resize", handleResize);
  return () => window.removeEventListener("resize", handleResize);
}, []);

이런식으로 가독성을 올리고, 코드를 간결하게 할 수 있을 것 같다.

다음은 Map.
사실 가도 별거 없을 것 같다.
에러 내용만 읽어도 타입스크립트를 처음 사용했었기에
팀원들도 타입을 대충 any 이런식으로 하고 넘겼던 것 같다.
가서 타입 지정만 해도 될 것 같다.

declare global {
  interface Window {
    kakao: any
    closeOverlay: () => void;
  }
}

이 코드의 any타입을 좀 더 명시적으로 구분해서

declare global {
  interface Window {
    kakao: {
      maps: {
        LatLng: new (lat: number, lng: number) => LatLng;
        Map: new (container: HTMLElement | null, options: MapOptions) => Map;
        Marker: new (options: MarkerOptions) => Marker;
        InfoWindow: new (options: InfoWindowOptions) => InfoWindow;
        CustomOverlay: new (options: CustomOverlayOptions) => CustomOverlay;
        event: {
          addListener: (target: Marker | Map, type: string, callback: () => void) => void;
        };
      };
    };
    closeOverlay: () => void;
  }
}
interface LatLng {
  getLat: () => number;
  getLng: () => number;
}
interface MapOptions {
  center: LatLng;
  level: number;
}
interface Map {
  setCenter: (latlng: LatLng) => void;
}
interface MarkerOptions {
  map: Map;
  position: LatLng;
  data?: string | object;
}
interface Marker {
  setMap: (map: Map | null) => void;
}
interface InfoWindowOptions {
  content: string | HTMLElement;
  removable?: boolean;
}
interface InfoWindow {
  open: (map: Map, marker: Marker) => void;
  close: () => void;
}
interface CustomOverlayOptions {
  content: string | HTMLElement;
  position: LatLng;
}
interface CustomOverlay {
  setMap: (map: Map | null) => void;
}

이렇게 명시적으로 했는데, 누가봐도 코드가 너무 길어질게 뻔하다.
이는 에러부터 다 싹 잡고,
인터페이스와 스타일코드를 분리할때 진행하려 한다.
나머지 코드들도 타입지정을 해줘서

    function displayMarker(locPosition: any, message: any) {
      const marker = new window.kakao.maps.Marker({
        map: map,
        position: locPosition,
      });
      const iwContent = message,
        iwRemoveable = true;

      const infowindow = new window.kakao.maps.InfoWindow({
        content: iwContent,
        removable: iwRemoveable,
      });
      infowindow.open(map, marker);
      map.setCenter(locPosition);
    }

    shoplist.forEach((el: any) => {
      const marker = new window.kakao.maps.Marker({
        map: map,
        position: new window.kakao.maps.LatLng(el.lat, el.lng),
        data: el.data,
      });

여기서 any를 다 없애고 명시적으로 지정해줘서

 function displayMarker(locPosition: LatLng, message: string) {
      const marker = new window.kakao.maps.Marker({
        map: map,
        position: locPosition,
      });
      const iwContent = message,
        iwRemoveable = true;

      const infowindow = new window.kakao.maps.InfoWindow({
        content: iwContent,
        removable: iwRemoveable,
      });
      infowindow.open(map, marker);
      map.setCenter(locPosition);
    }

    shoplist.forEach((el: Shopitem) => {
      const marker = new window.kakao.maps.Marker({
        map: map,
        position: new window.kakao.maps.LatLng(el.lat, el.lng),
        data: el,
      });

내가 쓴 코드가 아닌게 대부분이여서, 코드를 이해하는데도 시간이 들고
아무래도 코드자체가 길다보니 블로그도 길어지는 거 같다.
이번편은 여기까지.