\
[Knock/OpenMind] 3G 환경에서 2초 걸리던 렌더링을 100ms로 줄인 과정
·
💻 PROJECT/트러블 슈팅
반응형 레이아웃에서 뷰포트 너비가 바뀌는 순간, 렌더링할 요소 개수가 늦게 재계산됐다. 브레이크포인트를 넘는 순간 잠깐이지만 이전 개수의 요소가 그대로 노출되는 현상이었다.성능 문제는 아니었다. 하지만 상태 계산 시점이 렌더링과 맞지 않는 구조적인 문제였고, 그냥 두기엔 사용자 눈에 직접 보이는 오류였다. 이 글은 그 원인을 찾고 해결한 과정을 기록했다. 문제무엇이 문제였는가반응형 환경에서 뷰포트 너비를 변경하면 약 0.1초 정도 요소가 추가되는데 시간이 걸렸다.원래라면 뷰포트 786px(Tablet size)을 기준으로 보다 클 때 8개, 작을 때 6개가 렌더링 되어야하는데 아래 사진과 같이 렌더링 지연 시간이 보이는 것을 확인할 수 있다. 가설원인을 어디서 찾았는가가장 먼저, 네트워크 환경에 따라 ..
[포트폴리오] FE 포트폴리오 페이지를 만들어보자! - 기획 및 디자인
·
PROJECT
더보기포트폴리오 프로젝트 몰아보기 안녕하세요! 전부터 프론트엔드 개발자라면자신의 포트폴리오 페이지정돈 있어야지!... 라고 생각만 하고실천은 없었지만 이번에는 진짜로 만들어볼 예정입니다 :) 기획 먼저, 포트폴리오에서어떤 내용을 강조할까?, 어떤 형태로 보여줄까? 를 많이 고민했으며혼자 생각하는것보다 다른 레퍼런스를 찾아보며 고민했습니다. 레퍼런스 리스트 ⬇️더보기송진경님의 포트폴리오 송진경 | 프론트엔드 개발자프론트엔드 개발자 송진경의 포트폴리오입니다. React, Typescript, Next.js 기반의 웹 프론트엔드를 개발합니다.www.meganmagic.com 이정민님의 포트폴리오 이정민 - Leejeongminjeongmin's dev portfolio siteleejeongmin.ver..