소개
- 개발기간 : 21/07/26 - 07/27
- 깃헙 : https://github.com/skawnkk/hayanMind
- 미션내용 : 무한스크롤 구현
- 팀원 : 프론트엔드 2명 (김남주, 박현찬)
- 사용기술 : React, Styled-Components
회고
약 이틀간 진행했는데 첫날은 초기설정과 마크업,
둘째날은 본격적인 무한 스크롤 기능을 구현하였다.
초기설정 / 마크업
생각보다 초기설정하는데 시간이 많이 걸렸다.
코드포맷터 설정과 글로벌 스타일, 테마스타일을 정했다.
평소 이 부분을 꼼꼼하게 체크를 안하고 넘어갔던 것 같아 매우 큰 걸 배운 느낌이었다.
- 고민했던 점
이번 과제는 디자인과 컴포넌트 구조가 매우 간단한 형태인데,
스타일 및 API주소, 폴더구조 등을 어떻게 관리하는게 좋은걸까에 대한 의문이 들었다.
(테마스타일을 두는게 맞을까? API주소를 config파일로 빼는게 맞을까?/fetch함수를 util폴더로 분리하는게 맞을까?_ 등)
한번만 사용할 것들이어서 그냥 사용하는 곳에 선언할까 고민되었다.
하지만 혹~~~시모를(?) 확장성있는 개발에 대비하여 형식대로 폴더구조를 나누고 자원관리를 하기로 결정했다.
무한스크롤 구현
- 추가 조건 설정:
1) 스크롤의 절반쯤에 왔을 때 페이지를 셋팅한다.
2) 마지막 페이지에 도달하면 옵저버가 감지되어도 페이지를 변경시키지 않는다.
(불필요한 데이터 요청을 하지 않도록 분기처리함)
- 쓰로틀링으로 접근하기
처음 무한스크롤을 구현할 때, 쓰로틀링을 적용하여 구현하자고 계획을 세웠다.
그리고 사용자가 스크롤을 내릴 때 중간에 데이터가 끊기는듯한 텀이 발생하지 않도록
스크롤이 다 내려간 후에 데이터를 요청하기보다 스크롤이 반 정도 내려왔을 때 데이터를 요청하기로 추가 조건을 설정했었다.
const CardList = () => {
const [page, setPage] = useState(1);
const [throttle, setThrottle] = useState(false);
const handleScroll = useCallback(() => {
const scrollObject = document.documentElement
const 내가본컨텐츠 =
scrollObject.scrollHeight - scrollObject.scrollTop;
const 브라우저높이 = scrollObject.clientHeight;
if (throttle) return;
if (!throttle) {
if (내가본컨텐츠 !== 브라우저높이) return;
setThrottle(true);
setTimeout(() => {
setPage((page) => page + 1);
setThrottle(false);
}, 300);
}
}, []);
...
page가 변경되면 api를 요청하는 코드
... 위의 코드는 스크롤좌표의 조건을 내가본컨텐츠 !== 브라우저높이 로 두고있어서 스크롤을 끝까지 다 내려 내가본컨텐츠 === 브라우저높이가 충족할때 page를 증가시켜 2페이지에 대한 데이터를 읽어오게 된다. 여기까진 쓰로틀과 데이터 요청까지 성공적으로 실행이 되었다.
근데 기존 계획대로 스크롤이 반 정도 왔을 때 page를 변경시키기로 했으니 조건을 수정해야했고
내가본컨텐츠 < 브라우저높이 * 1.5와 같이 브라우저의 절반쯤에 도달했을 때 page를 변경시키려 했다.
하지만 실행해보니 한번에 페이지가 10페이지씩 까지 훅 넘어가버리는 문제가 생겼다. 아마 조건문을 부등호로 주어서 setThrottle(true)가 반영되기전까지의 스크롤좌표값들까지 다음 페이지처리 함수에 반영된 것 같다...
이 문제를 해결하기 위해 정말 3시간은 고민한것 같은데 해결점을 아직 찾지 못하였다. ㅠㅠㅠㅠㅠㅠ 😥
우선, 기간 내 구현을 하기 위해 다른 방법을 모색했고 intersectionObserver를 적용하여 무한스크롤을 구현하였다. 쓰로틀링에 대한 해결을 하고싶어 페어와 주말에 다시 살펴보자고 약속했다.
- intersection Observer로 접근하기
interSectionObserver는 처음 사용하는 것이라 이해하는데 시간이 걸려서 그렇지
구현하고 보니 되게 사용이 간단했고 observer 정말 신기했다.
위에서 얘기한 바와 같이 스크롤의 중간 정도에 왔을 때 데이터를 요청하기 위해
observer 옵션의 rootMargin 속성을 크게 주어 구현할 수 있었다. (해당 코드는 깃헙에!)
옵저버를 활용한 무한스크롤링을 따로 정리해야겠다.
- 마지막 페이지 처리하기
API명세서를 보니 50페이지가 마지막 페이지였다. 그래서 50페이지 이후부터는 데이터 요청을 하지 않도록 처리하면 좋을 것 같아 51페이지의 빈 데이터를 확인한 후에는 페이지 셋팅을 하지 않으므로써 API요청을 막았다. 이 처리를 해주기 위해 스크롤을 50페이지까지 엄청나게 내려댔다 ^ _ ^ 후우
페어프로그래밍과 느낀 점
100% 페어프로그래밍으로 진행했다.
화면을 띄우고 같이 코드를 한줄 한줄 작성하고, 더 좋은 방법이 있는지 의논하며 작성했다.
이 과정에서 각자의 코드스타일이 달랐는데 새로운 스타일도 알게되었고,
꿀팁스러운 단축키 등도 배워서 즐거웠다. 😁
그리고 이번 팀 주제가 커밋 컨벤션이었던 만큼, 최대한 커밋 양식을 지켜보고자 깃 이슈도 사용하여 이슈넘버도 남겼고, 커밋 내용을 정말 정성스럽게 작성했다.
또 사소한 것이라도 적합한 네이밍과 단어선택을 하기 위해 노력했다.
사실, 사소한걸 마주했을 때 '뭐 이런거까지 신경써~' 하고 넘어갈 수도있는데
사소하지만 중요한걸 놓치지 않고 대화할 수 있어서 좋았다.
되게 짧은 시간이었지만 찐하게 고민하고 좋은 점들을 배우게 된 것 같다.
마무리는 어찌할지 모르겠지만....
둘의 시간이 잘 안맞아서 밤 11시가 되서야 페어프로그래밍을 했다.
그래서 결국 둘다 밤을 샜는데...
페어는 출근, 나는 이제 자야겠다.ㅋ
