[ DR ] DAY6 Fanground

제작 배경

Tanstack Query 라이브러리를 사용해서 데이터 패칭을 작업해보고 싶었다.
그런데 이 작업을 하기 위한 데이터가 마땅치 않았고, 이 데이터를 얻기 위해 Open API를 사용하고자 했다.

이왕 Open API를 사용하려면, 내가 작업하면서 재미있을만한 주제를 정해서 하려했고 당시에 DAY6라는 밴드에 빠져있어 DAY6 팬 사이트(?)를 주제로 정했다.

Tanstack Query 사용 소감

일단 코드 수가 줄어들어 좋았다.
항상 API 패칭을 할 때 작업에 비해 코드 수가 길다고 생각했었는데, 라이브러리를 쓰니 확실히 코드 수가 줄어 데이터 패칭에 대한 작업도 코드 리딩도 한결 수월해짐.

그리고 Tanstack Query에서 여러가지 API를 제공하기에 사용 환경에 따라 적용하기 편했음.

해당 프로젝트에서 사용해보지 않았던 API도 추후에는 꼭 써보고 싶고, 해당 라이브러리 사용 경험이 좋아서 나중에도 데이터 패칭이 필요 할 때 사용할 것 같다.

작업하면서 골치아팠던 부분

해당 프로젝트 작업하면서 가장 많이 수정했던 부분이 아마 반응형 작업일거임.
생각보다 모든 페이지에 찰떡같이 작업하는게 쉽지 않았음.
반응형 사이즈 기준을 나름대로 정했지만, 각 페이지마다의 레이아웃이 달라 계속 수정 작업을 진행했었음.
(그리고 마지막에는 프로필 페이지는 반응형 작업을 다시 함ㅋ)

Tanstack Query 공통 함수화

작업하면서 각 페이지에 공통된 API를 많이 쓴다는 점을 확인하면서,
이것 또한 각 페이지마다 Tanstack Query를 쓰기보다는 함수화를 해서 좀 더 간결하게 사용하고자 했음.

useEffect나 useState를 사용해서 데이터 패칭하는 것보다는 확연히 코드 길이가 줄어들었으나, 반복적인 코드는 좀 더 효율적으로 관리하고 싶어서 함수화 진행했음.

페이지에서 데이터 패칭할 때는 위처럼 사용되기에 코드 줄 수가 더 간소화되어 코드 리딩이 쉬워짐.

보완하고 싶은 점

Tanstack Query의 useInfiniteQuery를 써서 데이터 패칭이 가능하지만, 이 부분을 Intersection Observer와 접목해서 무한 스크롤 데이터 패칭 작업을 진행해보고 싶다.

버튼 클릭해서 데이터 패칭하면 UX적으로는 좀 불편할 수 도 있지만 성능적으로는 안정적이기에 이 방법도 좋지만, 대부분 사용자들은 더 편리함을 추구하기에 스크롤 하면서 데이터 패칭하는 방식을 적용해보고 싶다.

이 작업은 DAY6 프로젝트 뿐만 아니라 MovieZip 프로젝트에도 꼭 적용해보고 싶다.