week7_3일차_PR

주요 작업

• dummydata를 이용하여 ui 완성
• 애니메이션 완성
• 그리드형 목록
  • 캐러셀을 이용한 페이지 관리
  • 페이지 전환시 애니메이션
  • 각각의 뉴스사에 마우스를 올리면 ui 변경
  • 페이지에 따라 화살표 아이콘 생성
  • 화살표를 이용한 페이지 이동
• 리스트형 목록
  • 캐러셀을 이용한 페이지 관리
  • 섹션 내 있어야 할 요소들
    • 언론사 브랜드마크
    • 최종 편집 일시
    • [구독하기] 버튼
    • 썸네일이 있는 메인 뉴스 1건
    • 타이틀만 있는 서브 뉴스 6건
    • 편집권에 대한 안내 문구

학습 키워드

• 배럴 파일
• 애니메이션
• CSS의 transform 속성
• Carousel

고민 및 해결과정

데이터 처리 방식

리스트형 보기에서는 뉴스를 언론사들 별로 볼 수 있다. 페이지 전환 아이콘이나 카테고리를 누르면 해당 카테고리의 전체가 뜬다.

여기서 카테고리에 있는 모든 뉴스를 그때그때마다 불러와야 할까, 아니면 한번에 받고 이를 분류해서 카테고리 헤더와 안쪽 내용을 만들면 될까?에 대해 고민했던 것 같다. 네이버를 살펴보았는데, 카테고리를 눌렀을 때나 다음 뉴스를 눌렀을 때 따로 data fetching이 이루어지는 것 같는 것 같다. 나 또한 카테고리, 언론사 변경 시마다 계속해서 통신을 하는 것 자체가 비효율적이라고 판단했다. 따라서 처음에 모든 카테고리의 데이터를 받으면서도, 이러한 데이터를 카테고리, 언론사별로 따로 구분하면서 페이지네이션과 비슷하게 만들어놓았다. 기존의 데이터를 가지고 있으면서 계속해서 언론사나 카테고리가 바뀔 때마다 페이지를 변경할 수 있도록 하였다.