데브코스 최종 프로젝트 - 22~23일차

 

 

22~23일차

 

세부 스타일 지정 & 페이지 마무리

꼭 해야하는 (우선순위) 작업들이 끝나가서 다른 팀원들이 기능 마무리에 집중할 수 있도록

페이지의 CSS styling을 도와주기로 했다. 그리고 전체적인 style 누락된 부분들을 수정했는데

CSS만 해도 시간이 꽤 걸렸다,, CSS라고 만만하게 생각하면 안된다고 다시 한번 깨닫게 되었다.😅

 

 

promise.allSettled

메인페이지가 getServerSideProps로 데이터를 받고 있는데 이 페이지에 접근할 때마다 로딩이 꽤 길다고 느껴졌다. 

 

export const getServerSideProps = async () => {
  try {
    const courses = await CourseApi.getCourses({ size: COURSE_COUNT, sorting: SORT });
    const places = await PlaceApi.getPlaces({ size: PLACE_COUNT, sorting: SORT });
    return {
      props: { courses: courses.content, places: places.content }
    };
  } catch (e) {
    return {
      props: { places: null, courses: null }
    };
  }
};

메인 페이지에서는 2개의 API를 요청을 하는데 courses데이터를 받은 후에

places 데이터를 받아서 그런건가 싶어서 Promise.all을 생각하다가

만약 course와 place API요청 중 하나가 실패한다면 성공한 것 만이라도 보여줘야 할 듯 하여

allSattled를 사용해보기로 했다.

 

const getCoursesAndPlaces = async () => {
  const getCourses = CourseApi.getCourses({ size: COURSE_COUNT, sorting: SORT });
  const getPlaces = PlaceApi.getPlaces({ size: PLACE_COUNT, sorting: SORT });
  const [courses, places] = await Promise.allSettled([getCourses, getPlaces]);
  return {
    courses: courses.status === 'fulfilled' ? courses.value.content : null,
    places: places.status === 'fulfilled' ? places.value.content : null
  };
};

export const getServerSideProps = async () => {
  try {
    const { courses, places } = await getCoursesAndPlaces();

    return {
      props: {
        courses: courses,
        places: places
      }
    };
  } catch (e) {
    return {
      props: { places: null, courses: null }
    };
  }
};

 

promise를 수행하고 status 값을 체크하여 데이터를 페이지로 내려주도록 했다.

 

==> 결과: 로컬에서는 느리지는 않지만 실제 배포했을 때 allSattled를 적용했음에도 페이지 진입 시 딜레이가 있어서

이 부분은 로딩처리나 다른 방법으로 좀 더 개선을 해봐야 할 듯 하다.