week7_4일차_PR

주요 작업

• 프로그레스바 애니메이션 구현 및 페이지 이동
• 리팩토링 (컴포넌트 재사용성 높이기)

학습 키워드

• requestAnimationFrame
• CSS - transition

고민 및 해결과정(+ 리뷰 요청)

안녕하세요 멘토님! 오늘도 고생 많으십니다ㅎㅎ 어제 저는 대부분의 ui를 구현했고 현재는 세부적인 상태관리와 같은 부분을 조금씩 채워나가고 있습니다! 아래에 있는 것들은 제가 구현을 하는 과정에서 고민하고 해결하거나 아직까지 의문점이 좀 남은 것들을 정리해 보았습니다. 편하게 봐주시고 말씀해주시면 감사하겠습니다🙇‍♂️🙇‍♂️

폴더 구조 개선

저번 시간에 멘토님께서도 말씀해주셨다시피 패턴을 그대로 사용해서 프로젝트를 진행하기에는 무리가 있다고 생각했습니다. 기존의 fsd 패턴의 목적은 그대로 가져가되, 제가 감당할 수 있을 정도의 규모가 될 수 있도록 폴더 구조를 개선해보았습니다.

• app : 앱의 엔트리 포인트를 의미합니다. 저는 단일 페이지만 사용할 예정이기 때문에 pages 디렉토리를 따로 나눌 필요가 없다고 판단하여 app에 컴포넌트들을 조합하여 넣게 되었습니다.
• entities : 각 도메인들을 디렉토리별로 나누어 관리합니다. 각 도메인 별로 api, lib, model, ui의 하위 폴더를 가지고 있습니다.(autoRollingNews는 따로 해놓을 에정)
  • api: 비즈니스 로직과 api 호출 등을 합친 함수들을 보관할 예정입니다.
  • lib: 해당 컴포넌트들을 제작하는 과정에서 한정적으로 필요하고, 따로 다른 도메인의 컴포넌트들이 공유해서 사용하지 않는 함수들이나 컴포넌트들에 대해서 모으려고 합니다.
  • model : 각 도메인과 컴포넌트에 관련된 데이터의 타입이나 custom hook 등을 보관해두는 디렉토리입니다.
  • ui: 다른 로직들을 분리하고 최대한 시각적으로 보여지는 ui만 구성해놓은 컴포넌트 파일들입니다.
• shared : 공유할 수 있는 파일들을 보관합니다. 아이콘이나, 모든 컴포넌트에서 공통적으로 사용할 수 있는 common 컴포넌트 파일들을 보관합니다.
• widgets: entities의 도메인들이 가진 컴포넌트를 합쳐 크게 나눌 수 있는 컴포넌트 단위로 묶어놓은 컴포넌트입니다. 개선한 폴더 구조에서 더 개선하면 좋을 점이 있는지 말씀해주시면 감사하겠습니다!

데이터 처리 방식

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

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

이 점은 어제 하면서 고민 과정에 있었는데 다른 프로젝트를 하면서도 많이 고민했던 문제 같습니다. 모든 데이터를 한번에 가져와서 분류하느냐 vs. 각각 카테고리 별로 그때마다 넘어갈 때마다 다시금 카테고리에 대해서만 fetching을 다시금 해와야 할까라는 부분에 있어서 계속 확신을 갖지 못하는 것 같습니다. (현재는 일단 모든 데이터를 한번에 가져와서 바로 처리하는 것으로 구현했습니다.) 전자의 경우 모든 데이터를 한번에 가져오는 과정 자체가 데이터가 많다보니 보다 응답시간이 오래 걸려 사용자 경험이 떨어지지 않을까라는 고민이 있습니다. 하지만 그렇다고 후자를 선택하기에는 카테고리마다 이동하면서 계속해서 서버에 요청을 날리게 되면 서버가 가지게 되는 부담이 늘지 않을까 걱정됩니다. 이에 대해서 멘토님은 어떻게 생각하시는지 고견을 여쭙고 싶습니다!

오늘은 이정도인 것 같습니다ㅎㅎ 긴 글 읽어주셔서 감사합니다!! 편안한 밤 되세요 :)