개발 흔적 남기기

요즘 리액트 학습을 진행하면서 이것저것 해보고싶은 기술들을 적용해보고, 포트폴리오를 작성하는 시간을 가지고 있습니다.

아무래도 아직 문법에 익숙하지 않은 부분도 있고, 소스를 작성하긴 했지만 공통화나 더 깔끔하게 모듈화를 시키고 싶은 욕심도 있는데, 요즘 굉장히 핫한 ChatGpt를 vscode에 연결해서 제가 작성한 코드를 리팩토링하도록 요청을 해보는 시간을 가졌습니다.

소스 리팩토링 요청해보기

아래는 제가 공통으로 사용해보려고 임시로 작성해본 firebase에서 데이터를 가져오는 메소드입니다.

export const getStoreToData = (
  CollectionName: string,
  orderName: string
): IDocumentData[] => {
  const array: IDocumentData[] = [];
  const collection = firestore.collection(CollectionName);
  collection
    .orderBy(orderName)
    .get()
    .then((docs) => {
      docs.forEach((doc) => {
        if (doc.exists) {
          array.push({ data: doc.data(), id: doc.id });
        }
      });
    });
  return array;
};

구조가 단순한편으로 작성되어 있어서 CollectionName과 정렬순서만 보장시켜서 데이터를 가져오면 됐는데, 해당 함수를 여러곳에서 동시에 사용하게되면 정상적으로 동작되지 않았습니다.

이 소스를 chatGpt에게 요청하니 Promise의 async await구조로 개선하여 알려주었습니다.

// ChatGpt를 활용하여 소스 리팩토링
export const getStoreToData = async (
  CollectionName: string,
  orderName: string
): Promise<IDocumentData[]> => {
  const array: IDocumentData[] = [];
  const collection = firestore.collection(CollectionName);
  const docs = await collection.orderBy(orderName).get();
  docs.forEach((doc) => {
    if (doc.exists) {
      array.push({ data: doc.data(), id: doc.id });
    }
  });
  return array;
};

깔끔하게 정리가 되었고, 매번 섹션별로 제가 firestore를 호출해서 컬렉션별로 하드코딩하여 불러오던 행위를 아래 메소드처럼 변경하여 깔끔하게 공통화를 시킬 수 있었습니다.

개선된 메소드 적용해보기

  useEffect(() => {
    // 기존 방식...
    // const array: IWorks[] = [];
    // const collection = firestore.collection("Works");
    // collection
    //   .orderBy("order")
    //   .get()
    //   .then((docs) => {
    //     docs.forEach((doc) => {
    //       if (doc.exists) {
    //         array.push({ data: doc.data(), id: doc.id });
    //       }
    //     });
    //     setWorks(array);
    //   });

    getStoreToData("Works", "order").then((datas) => setWorks(datas));
  }, []);

useEffect에서 매 섹션별로 위 행위를 반복하고 있었는데, chatGpt의 힘을 빌려 개선된 메소드를 적용하고 모든 부분이 깔끔하게 정리되었습니다.

코딩을 너무 잘하는 chatGpt를 잘 쓰는법을 연구를 해야할지... 도움을 받아 열심히 또 공부를 해야할지... 굉장히 혼란이 오고 있는 상황입니다.

더더욱 정진해야겠습니다.😪