김산호 과제 제출합니다.

[coral0723]

Description

• 카카오 API를 사용한 책 검색 사이트

Important content

• 시작 화면은 소설, 에세이, 경제, 개발, 건강 카테고리의 책 추천
• 검색 후 화면은 인피니트 스크롤링을 사용하여 스크롤이 내려갈 때마다 10개의 책 정보를 더 불러옴
• 책을 클릭하면 상세정보를 modal로 볼 수 있음

Question

Reference

[leemanjae02]

각 항목별 책을 불러오는 함수들을 useEffect를 통해 작성했는데 파라미터에 넘기는 값만 다르고 모든 예외처리가 동일하게 이뤄지고 있어요. 이럴 경우 Promise.all를 사용해 볼 수 있을 것 같네요! 그러면 코드가 훨씬 간결해져서 가독성이 좋아지는 장점이 있어요!
다만 Promise.all을 사용시에 주의할 점은 앞서 실행한 함수의 결과값을 가지고 다음 함수를 실행해야하는 동기 로직이라면 사용에 적합하지 않아요! Promise.all은 기본적으로 앞서 실행한 함수의 완료를 기다리지 않고 동시에 실행되기 때문이에요.
또한 Promise의 결과가 하나라도 rejected 된다면 다음 동작을 확인하지 않고 rejected 되기 때문에 에러 추적이 어렵다는 점이 있어요! 그걸 보완한 Promise.allSettled 메서드는 한 번 찾아보시면 좋을 것 같네요!
또한 예시로 작성해드린 코드에서 각 항목의 책을 가져오는 배열 결과값은 요청 순서와 동일하게 반환되므로 쉽게 맵핑할 수 있어요!

useEffect(() => {
    const getBooks = async () => {
      try {
        const [novels, essays, economies, developments, healths] =
          await Promise.all([
            axios.get(`https://dapi.kakao.com/v3/search/book`, {
              headers: { Authorization: `KakaoAK ${KAKAO_API_KEY}` },
              params: { query: "소설", size: 5 },
            }),
            axios.get(`https://dapi.kakao.com/v3/search/book`, {
              headers: { Authorization: `KakaoAK ${KAKAO_API_KEY}` },
              params: { query: "에세이", size: 5 },
            }),
            axios.get(`https://dapi.kakao.com/v3/search/book`, {
              headers: { Authorization: `KakaoAK ${KAKAO_API_KEY}` },
              params: { query: "경제", size: 5 },
            }),
            axios.get(`https://dapi.kakao.com/v3/search/book`, {
              headers: { Authorization: `KakaoAK ${KAKAO_API_KEY}` },
              params: { query: "프론트엔드", size: 5 },
            }),
            axios.get(`https://dapi.kakao.com/v3/search/book`, {
              headers: { Authorization: `KakaoAK ${KAKAO_API_KEY}` },
              params: { query: "건강", size: 5 },
            }),
          ]);

        setNovels(novels.data.documents);
        setEssays(essays.data.documents);
        setEconomies(economies.data.documents);
        setDevelopments(developments.data.documents);
        setHealths(healths.data.documents);
      } catch (error) {
        console.error("책 로딩 중 오류:", error);
      }
    };

    getBooks();
  }, []);

[leemanjae02]

또한 예제 코드에서도 요청부분에 동일하게 들어가는 중복 코드를 줄일 수 있는 방법도 생각해보시면 좋을 것 같네요!