📭 Contact me

• Github : https://github.com/buddle6091
• Email : [email protected]

📭 Trouble Shooting

각 스테이지에서의 경험을 바탕으로 성장해가는 이야기입니다.

챕터 1 : CampUs

줄거리

챕터 1 에서의 트러블슈팅 능력과 Special Stage의 기술적 도전의 경험을 바탕으로 날씨 기반 캠핑장 추천 서비스를 디자이너, 백엔드 팀과 함께 만들어 유저를 유치해가는 과정에서 생긴 이야기입니다.

공략 1 : 소통의 문제

CampUs 는 공공데이터 API 중 GoCamping API를 백엔드에서 3000여 개의 캠핑장 데이터를 받은 후 서비스에서 사용할 수 있는 데이터로 가공 및 정렬하여 그것을 프론트에서 사용하고 있습니다.

API 명세서에서 나와있는 객체배열 구조를 파악하여 interface를 만들어 데이터들의 타입들을 미리 지정을 하고 배열 depth 및 데이터 형식에 맞게 설정을 하였습니다. 그렇게 해서 캠핑장 데이터를 잘 받아와 렌더링을 구축하는데 성공을 하였습니다.

// 객체배열에 맞게 작성된 인터페이스

export interface IGetCampResult {
  ImageUrl: string;
  X: string;
  Y: string;
  address: string;
  animal: string;
  campId: number;
  campName: string;
  clturEvent: string;
  createdtime: string;
  doNm: string;
  status: boolean;
  eqpmnLendCl: string;
  featureNm: string;
  homePage: string;
  induty: string;
  lookUp: number;
  manageSttus: string;
  operDeCl: string;
  operPdCl: string;
  pickCount: number;
  posblFcltyCl: string;
  reviewCount: number;
  sbrsCl: string;
  sigunguNm: string;
  swrmCo: string;
  themaEnvrnCl: string;
  toiletCo: string;
  wtrplCo: string;
  look: IGetCampResult;
  review: IGetCampResult;
  pick: IGetCampResult;
  camp: IGetCampResult[];
  distance: number;

  /* toast */
  toastState?: boolean;
  setToastState?: React.Dispatch<React.SetStateAction<boolean>>;
}

export interface campArray extends IGetCampResult {
  currentPage: number;
  total: number;
  topicCamp: IGetCampResult[];
  campTopic: IGetCampResult[];
  searchCamp?: IGetCampResult[];
  detailCamp?: IGetCampResult[];
  camp: IGetCampResult[];
  regionCamp: IGetCampResult[];
  nextPage?: number;
  lastPage?: boolean;
  isLast?: boolean;
  pageParam?: number;
  fetchNextPage: boolean;
  isSuccess: boolean;
  hasNextPage: boolean;
  refetch: boolean;
  icons: string;
}

그런데, 다음번 렌더링 시도 때 error boundary 에 걸려서 error 페이지로 넘어가는 문제를 직면하게 되었습니다. 에러 내용은 해당 데이터 형식이 api와 맞지 않다는 내용이었고, 그래서인지 저희 프론트의 문제라고 판단이 되어 console로 해당 서버에서 넘어오는 데이터를 확인하자, 이전에 백엔드에서 넘겨줬던 데이터 형식과 배열의 깊이가 다르게 변경되어 넘어오게 된 것이 원인이었습니다.

물론 해당 객체배열의 값들을 인터페이스로 지정된 타입을 넣어주는 것이 아닌 Any 를 사용하게 되면 추후에 데이터 형식이 변경되어도 무난하게 실행은 되나, 타입을 정확히 명시하여 예기치 못한 에러를 방지하기 위하여 타입스크립트를 도입하였기에 해결되어야된다고 생각하였습니다.