Performace 기존 무한 스크롤을 구현했던 방식은 Scroll Event를 이용하여 현재 스크롤 위치와 전체 스크롤 크기 등을 이용한 로직이었습니다. 해당 로직은 문제점이 있었는데요. 스크롤을 움직이면 1초안에 굉장히 많은 Event가 발생하게 되면서 위 퍼포먼스 성능과 같이 1000ms 당 약 160ms를 스크립트가 차지하게 되는 문제였습니다. 사실 최근 개인 컴퓨터의 성능과 서버의 성능이 많이 좋아지면서 체감하기 어려울 순 있습니다. 하지만 항상 최선만을 염두에 둘 순 없습니다. 만약 성능이 안좋다면 유저에게 최악의 경험을 안겨주게 됩니다. 두 가지의 개선 방법이 있었습니다. 쓰로틀링과 인터섹션 옵저버 입니다. 제가 처음 사용을 고려했던 것은 쓰로틀링 이었는데요. 문제가 있었습니다. 이에 대해 ..

프로젝트의 배포 이후, 어떻게 해야 코드나 성능을 개선할 수 있을까에 대해 고민하고 있었습니다. 제일 먼저 접했던 것은 컨퍼런스에서 소개 된 CleanCode 를 적용해 '코드를 개선하는 것' 이었는데요. (*참고했던 컨퍼런스는 Toss 개발자인 '진유림' 씨의 실무에서 바로 쓰는 Frontend Clean Code 입니다.) 안타깝게도, 이 적용법은 조금 더 공부가 필요해 보였습니다...😢 (물론 이후에 본 프로젝트 코드를 이용해 레거시를 걷어내고 클린코드 적용해 볼 예정입니다.🙌) 또 다른 방법도 있나.... 했더니 있었습니다! 크롬에서 제공하는 성능 분석 도구인 LightHouse를 사용하는 것인데요. 이 도구는 안타깝게도 로컬 PC 환경이나 해외 사이트 등을 조사하거나 하는 등의 이유로 매번 성능..