Frontend Archive
오프라인

스터디 6회차

이 회차에 나눈 글 4개입니다.

아티클 목록

[디자인 패턴] 팩토리 패턴과 프로토타입 패턴을 JS로 이해해보자! (feat. 메모리 할당량)

[디자인 패턴] 팩토리 패턴과 프로토타입 패턴을 JS로 이해해보자! (feat. 메모리 할당량)

JS를 공부한 프론트엔드 개발자에겐 특히나 프로토타입 패턴을 한 번쯤 지나친 개념이라고 생각합니다. 팩토리 패턴은 너무나 유명하구요! 두 패턴 모두 개념 자체는 어렵지 않다 보니 아주 기본적인 개념일 뿐 실제 서비스에선 크게 의미를 두는 패턴은 아니라고 생각할 수 있습니다. 하지만, 이 두 패턴의 본질을 파악하여 어마어마한 성능 개선을 한 사례가 있습니다. 바로 Tanstack Table V9에서 메모리 사용량을 90%나 개선한 사례입니다!지금부터 팩토리 패턴, 프로토타입 패턴에 대한 간단한 개념을 Tanstack Table에서 쓸거 같은 예시 코드로 이해해 보고 어떻게 메모리 사용량을 줄일 수 있었는지 알아보도록 합시다!1. 팩토리(Factory) 패턴?팩토리 패턴은 말 그대로 '객체를 찍어내는 공장'..

권시현6회차14분
긴 리스트 꼭 가상화여야 할까? CSS 두 줄로 렌더링·페인팅 비용 72% 줄이기

긴 리스트 꼭 가상화여야 할까? CSS 두 줄로 렌더링·페인팅 비용 72% 줄이기

회사 프로젝트 중 랭킹 페이지를 개편하다 문제를 만났습니다. 순위표는 채널에 따라 수백 명, 많게는 약 1,000명가량의 행을 한 번에 그립니다. 화면에는 십수 개만 보이지만, 브라우저는 스크롤을 시작하기도 전에 보이지 않는 행까지 전부의 위치, 크기와 픽셀을 계산합니다. 첫 렌더에서 이미 비용을 다 치르는 셈입니다. 가장 먼저 떠오른 답은 무한 스크롤이었습니다. 약 1,000행을 한 번에 내려주지 말고 필요한 만큼만 잘라서 받는 방식이죠. 그런데 두 가지가 걸렸습니다. 하나는, 무한 스크롤은 데이터를 나눠 받는 기법이지 그리는 비용을 직접 줄이는 기법이 아니라는 점입니다. 스크롤해서 행이 쌓이면 결국 다시 전부 그리게 되니까요. 다른 하나는 현실적인 문제로, 이 방식은 백엔드에 페이지네이션 API가 필..

염승준6회차12분