토이 프로젝트 - A - JAE GAG 트러블 슈팅 - api 타입 문제

선 요약 : GPT랑 구글을 믿고 이용하는 건 좋은데 이것만 믿으면 큰일난다.

 

며칠동안 다양한 방법으로 혈압을 올리는 과정을 겪은 후, 타입 관련 문제를 해결했다. 우선 타입을 개별 스크립트로 분리 및 관리한다.

.

.

.

export interface GagAnswer {

  id: number;

  answer: string;

}

export interface GagBoxBackColor{

  solved : boolean;

}

export interface GagDetailContent{

  title:string;

  content:string;

  gagId:string;

  nextGagId:number | null;

  prevGagId:number | null;

}

export interface PostGagType{

  title : string;

  content : string;

  answer : string;

}

export interface GagListCompProps{

  solved: boolean;

  author: string;

  answerRate:number | null;

  agree:number;

  ajae:number;

  gagId:number;

  title:string;

}

.

.

.

 

해당 스크립트에서 바로바로 타입을 만들어 관리하는 것보단 하나로 뭉쳐서 관리하는 것이 훨씬 효율적이었다. 나중에 분리해야지~ 하고 놔뒀다간 겉잡을 수 없어진다.

 

아래는 이제 문제와 해결 과정을 적은 것이다.

 

문제 - 지정타입 설정에서 확인이 힘든 에러들이 있다. vsc에서 요구한 해결방법을 적용해도 같은 에러가 계속해서 나온다.

 

해결책 1. 타입을 통일한다.

방법 : 위에 언급한 타입 통합 관리를 이용해 해당 api를 관리하는 모든 스크립트가 동일한 파일을 관리한다.

결과 : 

  No overload matches this call.
Overload 1 of 4, '(mutationFn: MutationFunction<any, void>, options?: Omit<UseMutationOptions<any, unknown, void, unknown>, "mutationFn"> | undefined): UseMutationResult<...>', gave the following error.
Argument of type '(data: GagDetailDelete) => Promise<AxiosResponse<any, any>>' is not assignable to parameter of type 'MutationFunction<any, void>'.
Types of parameters 'data' and 'variables' are incompatible.
Type 'void' is not assignable to type 'GagDetailDelete'.
Overload 2 of 4, '(mutationKey: MutationKey, options?: Omit<UseMutationOptions<any, unknown, void, unknown>,

파라미터의 타입 어쩌구 저쩌구 하는 문제가 해결되지를 않았다. 해당 타입에서 에러문이 요구하는 타입을 전부 박아넣어도 해결이 안되었다.

 

해결책 2. any로 통일한다.

방법 : 심플하게, 타입을 따로 설정하지 않고 무조건 any로 전부 떼워버린다. 아무거나 다 된다면 문제가 없을 것이다.

결과 : 해결은 되었지만, 그럴거면 그냥 js를 쓰고 말지, ts를 쓰는 의미가 없는 상황이 되어버렸다.

 

해결책 3. 구글링한다.

방법 : GPT로 할 수 있는 문답은 다 한 것 같으니 구글링을 한다.

결과 : 구글링도 관련 키워드를 정확히 짚어야 내가 원하는 결과를 얻을 수 있다. 이는 게임 독학을 할 때부터 익혀왔던 것이라 구글링으로 안되면 유투브 채널 탐색을, 그것도 안되면 스택오버플로우를 뒤져보는 것이다. 나는 여기서 2번 단계까지 끝내도 성과가 없어서 3번을 가보니 "useMutation은 하나의 파라미터값을 받는다.

복수의 파라미터를 받는 법은 없는가?"라는 미국 친구의 질문과 그 대답이 있었다. 그 질문의 내용과 대답은 결국 내가 원하던 것과는 거리가 멀었지만 그 구조를 들여다보면서 한가지 이상한 부분을 느낄 수 있었다.

//<any>붙인게 에러라고?

const DeleteMutation= useMutation<any>(deleteMyGag, {

    onSuccess: () => {

      window.alert("삭제 성공")

      window.location.reload()

    },

    onError: (error) => {

      console.log("전송 실패")

    },

  });

useMutation 옆에 언제부턴가 <any?가 끼어 있던 것이다. 진짜 어디서 들어온 건지 모르겠는데, 아마 일반적인 훅과 궤를 달리하는 리액트-쿼리문의 함수니까 GPT에서 권장한 코드를 위주로 짜다 이렇게 된 것이 아닌가 싶다. 저 <>안에 계속 타입을 넣다 뺐다 며칠동안 난리를 쳐봤는데 생각해보니 저기 deleteMyGag인 api에서 이미 타입을 반환하고 있는데 여기서 또 선언하는 건 뭔가 넌센스같아보였다.

그래서 <any>를 제거하니 곧장 문제가 해결, 하나의 타입을 통일한 것으로 온갖 문제들을 해결할 수 있었다. 세상에나......

 

누구한테 물어봤으면 금방 끝낼 수도 있었지만 이번엔 내가 직접 뭔가를 해쳐나가고 싶었다. 그 결과는 3, 4일이 넘는 삽질이었지만......아무튼, 문제는 해결되었으니, 이제 api 타입 관련 문제도 해결이라 할 수 있다.