아웃소싱 프로젝트 6일 차(완) @무한 스크롤 실패, 프로젝트 회고

최종적으로 무한 스크롤을 프로젝트에서 빼게 되었고, 어째서 이렇게 되었는지 서술해보겠다.

 

무한 스크롤의 문제는 어제 병합하면서 생겼는데 리액트-인터셉션-옵저버 라이브러리와 슬릭-캐러셀 라이브러리의 충돌, 그리고 json-server의 버전 문제로 인해 발생한 것이었다.

 

전자의 경우, 라이브러리의 충돌이니 무한스크롤과 캐러셀 중 하나의 기능을 라이브러리 없이 구현하면 해결될 수 있을 것 같다는 결론이 나왔었다. 때문에 일단 내가 라이브러리 없이 무한 스크롤을 구현하도록 노력하기로 했는데, 또 하나의 문제가 있었으니 json-server의 배포버전에 따라 페이지네이션 기능이 있다가 없어진다는 것이었다.

 

우리가 로컬 환경에서 사용한 json-server의 버전은 1.0.0으로 이 버전의 기능을 이용하여 _per_page라는 파라미터를 받아서 하나의 페이지에 특정한 양의 데이터만 담아서 가져올 수 있었다. 하지만 json-server를 배포하려면(배포에 대해 아직 잘 모르지만 여러 시도 끝에 불가능하다고 결론이 났다.) 이전 버전인 stale 버전으로만 배포할 수 있는데 stale버전에서는 _per_page 기능을 지원하지 않아서 _limit로만 제한적으로 데이터를 가져올 수 있었다.

 

하지만 limit로 데이터를 가져오면 아직 불러오지 않은 데이터가 있는지, 얼마나 남았는지를 확인할 수가 없어서 '다음페이지'를 불러올 수가 없었다. 결국 json-server 1.0.0 버전 기준으로는 무한스크롤을 구현할 수 있었지만 스테일 버전으로 배포한 json-server를 사용하는 프로젝트 배포에는 반영할 수 없었다. 

 

아래는 json-server 1.0.0 버전으로 구현한 무한스크롤 기능이다. 

 

 

 

---

프로젝트 회고

Keep - 현재 만족하고 있는 부분

외부 API를 활용하여 기능을 문제 없이 구현했다.

초기에 프로젝트 기획이 빠르게 진행되어 기능을 구현하는 시간을 더 확보했다.

프로젝트 진행 중 많은 수정 사항들이 빠르게 반영되었다.

Problem - 불편하게 느끼는 부분

백엔드가 없어서 서버나 DB를 배포하는 과정이 어려웠다.

프로젝트 레이아웃이나 디자인이 어려웠다.

외부 API를 사용할 때, 할당량이 정해져 있는 API가 있어서 비용 절감의 필요성을 느꼈다.

Try - Problem에 대한 해결책, 당장 실행 가능한 것

프론트단에서 사용하기 편리한 BaaS를 많이 사용해보고 사용법을 익혀둔다.

디자인이나 기능을 참고 할 수 있는 사이트를 사전에 많이 서치한다.

코드 리팩토링을 통하여 tanStack Query에 있는 여러 메서드를 통해 성능을 최적화한다.