안녕하세요

https://ui.toast.com/posts/ko_20210611#3-%EB%B6%84%EB%A6%AC%EB%90%9C-dom-%EB%85%B8%EB%93%9C 당신이 모르는 자바스크립트의 메모리 누수의 비밀 크롬 개발자도구로 하는 디버깅과 해결책을 찾아서! ui.toast.com 페이지 4개를 하나씩 4번 총 16번의 페이지 이동을 한 Heap stack이다. 페이지 이동 시 절벽처럼 뚝 뚝 떨어지는 부분이 컴포넌트가 unmount될 때 heap에서 메모리를 제거하는 것이다. (Heap 메모리가 제거되는 예시1~4) 이 heap 그래프가 페이지 전환할 때마다 가파른 우상향을 그린다면 이를 해결하여야 한다. 그렇지 않으면 애플리케이션이 느려지다가 어느 순간 멈춰버릴 것이다. (우상향 예시) 메모리 누..

문제 상황: 동적으로 width가 달라지는 상황에서 height를 고정해줄 수 없다. 로드 전 사진: image가 로드되기 전에는 height가 비어있다. 로드 후 사진: 로드 된 image 만큼 height가 채워진다. 해결방법: img를 감싸는 박스에 img 비율만큼의 높이를 미리 지정한다. 박스의 높이를 padding-top 을 이용해 만들어 주고, img를 absolute로 크기를 미리 갖도록 한다. .thumbnail-ratio { position: relative; width: 100%; padding-top: 56.25%; /* 16:9 비율의 경우 */ img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } } 이는 ..

적용 필요성: 등록된 채널이 많아짐에 따라 페이지 로드 비용이 커짐 초기에는 100~150개 가량의 채널이 등록되어 있었다. 지속적으로 활동을 하지 않거나 연관 없는 채널을 제외 했음에도 현재는 지속적으로 관련 채널이 늘어남에 따라서 350~450개 가량의 채널이 등록되어 있다. 한 번에 모든 데이터를 불러오고 렌더링 하기에는 너무 많기에 페이지네이션과 무한스크롤 중에서 고민하다가 페이지네이션을 택했다. 채널을 둘러보고 싶다면 1~2페이지의 연관성이 높은 채널과, 마지막 페이지엔 어떤 채널이 있는지를 주로 확인하기 때문이다. exports.getSortedChannelsData = async (req, res) => { try { const page = parseInt(req.query.page) || ..

앞서, 모든 원인은 이전 버전에서 배포된 파일이 캐시가 된 상태에서 새로 불러오는 파일을 읽어들일 때 새롭게 빌드된 파일을 JS 파일로 인식하지 않고 이러고 될 때가 있다. 근데 몇 번 하다보면 또 안된다. 2) react app의 package.json에 "homepage": ".", 를 추가한다 "private": true, "homepage": ".", "proxy": "http://localhost:8080/", => 이러고 될 때가 있는데, 역시 몇 번 배포하다 보면 또 안된다. 3) meta 태그를 추가하여 cache를 하지 않도록 한다. => 또 역시 되다가, 몇 번 배포 한 뒤엔 갑자기 안된다. 앞서 잘 됐으면 3, 4 번까지 해볼 일도 없었겠지... 4) build 된 index.html..