[항해99 취업 리부트 코스 학습일지] WIL 3일차

항해99 에서 진행하는 취업 리부트 코스 3기를 수강하며 작성하는 TIL 포스트입니다.

---

프로젝트 WIL Week 4

이번주도 역시나 프로젝트를 진행하면서 새로운 서비스들을 배우느라 진도가 많이 늦어졌다.

React Query

동기적으로 두 쿼리를 실행하는 방법

• Dependent Query

const {
  data: recommendData,
  status: recommendStatus,
  error: recommendError,
} = useQuery<{
  category: string;
  result: ProductSchema[];
}>({
  queryKey: ['products', data?.productCategory, 'recent'],
  queryFn: fetchProductRecommendList,
});

useQueries({
  queries:
    recommendData === undefined
      ? []
      : recommendData.result
          .filter((product) => product.id !== data?.id)
          .map((product) => ({
            queryKey: ['product', product.id],
            queryFn: fetchProductdata,
          })),
});

React 에서 다음 우편번호 API 스크립트를 추가하고 타입 설정하기

다음에서 주소와 우편번호를 검색해주는 API 를 제공하는데, 그 방식이 CDN 방식으로 스크립트를 불러오고 window 객체에 주입된 daum api 객체를 사용하는 방식이라 기존의 npm 패키지와는 다른 방식을 사용해야 했다.

스크립트 추가 코드

type MessageObject = {
  message?: string;
  description?: string;
};

type LoadScript = (
  src: string,
  successMessages: MessageObject,
  errorMessages: MessageObject,
) => Promise<void>;

export const loadScript: LoadScript = (src, successMessages, errorMessages) => {
  return new Promise((resolve, reject) => {
    if (document.getElementById('KakaoPostcodeApi')) resolve();
    else {
      const script = document.createElement('script');
      script.id = 'KakaoPostcodeApi';
      script.src = src;
      script.async = true;
      script.onload = () => {
        toast.info(successMessages.message, {
          description: successMessages.description,
        });
        resolve();
      };
      script.onerror = () => {
        toast.error(errorMessages.message, {
          description: errorMessages.description,
        });
        reject(new Error(`Failed to load script ${src}`));
      };
      document.body.appendChild(script);
    }
  });
};

타입 지정 코드(window 타입에 글로벌 타입 추가)

declare global {
  interface Window {
    daum: IDaum;
  }
}

interface PostcodeConstructor {
  new (options: { oncomplete: (data: DaumPostcodeResult) => void }): IPostcode;
}

interface IPostcode {
  open: () => void;
}

interface IDaum {
  Postcode: PostcodeConstructor;
}

export type DaumPostcodeResult = {
  postcode: string;
  postcode1: string;
  postcode2: string;
  postcodeSeq: string;
  zonecode: string;
  address: string;
  addressEnglish: string;
  addressType: string;
  bcode: string;
  bname: string;
  bnameEnglish: string;
  bname1: string;
  bname1English: string;
  bname2: string;
  bname2English: string;
  sido: string;
  sidoEnglish: string;
  sigungu: string;
  sigunguEnglish: string;
  sigunguCode: string;
  userLanguageType: string;
  query: string;
  buildingName: string;
  buildingCode: string;
  apartment: string;
  jibunAddress: string;
  jibunAddressEnglish: string;
  roadAddress: string;
  roadAddressEnglish: string;
  autoRoadAddress: string;
  autoRoadAddressEnglish: string;
  autoJibunAddress: string;
  autoJibunAddressEnglish: string;
  userSelectedType: string;
  noSelected: string;
  hname: string;
  roadnameCode: string;
  roadname: string;
  roadnameEnglish: string;
};

---

항해99 취업 리부트 코스를 수강하고 작성한 콘텐츠 입니다.