TIL - Day 25

프로그래머스 데브코스

프로그래머스 데브코스 프론트엔드 3기

✓ TIL DAY - 25

---

🗓 오늘은...

무한 스크롤 구현과 궁금했던 문제 해결 

처음 강의 이름을 들었을 때는 어떠한 오류를 해결하는 내용인 줄 알았다.😅 무한 스크롤은 SNS(페북, 트위터, 인스타...)에서 주로 보이듯 모든 사진이나 글들을 표시해놓고 보여주는 기법이 아닌 스크롤이 아래쪽에 닿을 때 새로운 사진들을 로드해 첫 로드 지연 시간을 단축시켜주는 방법이다. 두 가지 방법이 있었고 각 방법마다 장점이 있었다.

 

scroll event를 이용하여 계산하는 방법

• 로드되어진 페이지의 height를 계산하여 아래쪽에 도달할 때 새로운 데이터를 불러오는 방식
• 단점으로는 스크롤이 발생할 때마다 이벤트가 발생하고 계산이 이뤄진다는 점이 비효율적이다.

intersectionObserver를 이용하는 방법

• 어떠한 DOM 객체를 감시하도록 하여 해당 객체가 보여질 때 이벤트를 발생하게 할 수 있다.
• 감시할 객체 할당에 신경써야 중복으로 이벤트가 발생하지 않는다.

스크롤 이벤트에서는 페이지의 height를 구하는 공식을 쉽게 찾을 수 있어 진행하는데 어려움은 없었다. 하지만 intersectionObserver의 경우는 unobserve를 신경 써줘야 하는 문제가 있었다. 컴포넌트 방식으로 구현하려고 보니 unobserve를 해당 element를 지정하여 가져오는데 어려움을 겪었다. 조금 고민을 하다가 아예 감시하는 대상 전부를 clear 하고 다시 지정하는 방법을 떠올리고 해당 함수를 찾아보니..

이 함수를 찾을 수 있었고 이 방법을 통해 unobserve가 제대로 이뤄지지 않던 문제를 해결하게 되었다.

 

Todo List 과제 코드리뷰 완료

전날에도 리뷰를 진행했지만 금요일에 모든 리팩토링을 마무리하였다. 두 개의 리팩토링을 진행했고 하나는 classList을 이용하는 방법이다. 이전에는 className을 사용해 조건문을 만들었지만 해당 방법의 문제점은 class="button remove"인 경우 className="remove"를 찾으려고 하면 이를 감지할 수 없다는 문제점이 있었다. 하지만 classList.contains("remove")를 사용하면 여러 개의 클래스가 지정되더라도 문제없이 찾을 수 있다.

다른 리팩토링은 Date.now()로 id값을 지정하였으나 이 또한 낮은 확률로 중복의 우려가 있다는 점이었다. 또한 숫자가 늘어나는 경우 BigInt를 사용해야 한다는 문제점이 있었고 우선 문자와 숫자가 섞인 랜덤한 6자리 id를 지정하는 방식으로 진행하였고 겹치지 않는 걸 원한다면 uuid와 같은 것들이나 날짜와 랜덤한 숫자를 혼합해서 사용해 충돌을 피할 수 있다는 피드백을 받았다.

새롭게 배운 것

• classList 활용법
• uuid
• 무한 스크롤 구현 방법과 동작 원리
• intersection observer 활용법

오늘 깨달은 점

• className의 문제점
• 수식이 들어가는 경우 변수의 이름을 잘 지정해 가독성을 높이는 방법이 좋다.
• intersection observer를 사용하려면 observe와 unobserve를 잘 활용해야 한다.
• footer가 있는 경우에는 명시적인 더보기 버튼을 활용하는 방식을 사용하기도 한다.

참고했던 자료

uuid

uuid

IntersectionObserver - disconnect 함수

IntersectionObserver.disconnect() - Web APIs | MDN