웹 개발
-
Next.js Hydrate를 최적화 시킬 수 있을까 (Partial Hydration)개발 블로깅/Next.js 2021. 8. 12. 21:46
요즘 SEO 향상을 위해서 웹 성능 개선을 계속해서 연구 중이다. (흔히 웹 성능 최적화시킬 수 있는 요소들은 거의 다 진행한 것 같으면서도, 신기하게도 할 것이 계속 나온다...) 요즘에는 프론트엔드 단에서 LCP(Largest Contentful Paint)와 TBT(Total Blocking Time)를 어떻게 더 개선시킬 수 있을지 연구 중인데, 며칠 전 Performance 탭에서 흥미로운 요소를 발견했다. 위 이미지의 하단 쪽을 보면, FP(First Paint)가 일어나기 전까지 Next.js Hytration 작업이 Long Task로 보여지는 것이다. (정확히는 Next.js-before-Hydration이니까, 실제 Hydration 하기 전의 특정 작업으로 볼 수 있다.) 우선 Hyd..
-
웹 성능 최적화를 위한 Image Lazy Loading 기법개발 블로깅/Improving Performance 2020. 11. 29. 10:37
현재 화면에 보여지지 않는 lazy loading된 이미지들은 웹 페이지 초기의 로딩 시간을 단축하여 웹 성능을 향상시킵니다. 이 글은 lazy loading 처리 기법과 관련된 모든 것들을 깊게 다루게 됩니다. 해당 글은 작성자 imagekit.io 의 동의하에 'Lazy Loading Images - The complete Guide'의 아티클을 번역하였습니다. 외국 아티클 번역은 처음으로 도전하다보니, 거의 발 번역 수준입니다.. 하지만 내용 이해에는 문제가 없을 듯 하여, 귀엽게 봐주시면 감사드리겠습니다! 이미지는 모든 웹 사이트와 어플리케이션에서 매우 중요한 요소입니다. 마케팅 배너 혹은 상품 이미지, 로고 등 이젠 웹 사이트 내에서 이미지가 없다는 것은 상상할 수 없을 정도입니다. 그러나 슬프..
-
Netflix의 웹 성능 최적화를 위한 기법 소개개발 블로깅/Improving Performance 2020. 9. 30. 00:21
넷플릭스는 전 세계적으로 유명한 스트리밍 콘텐츠 서비스이다. 그만큼 서비스 내 사용되는 콘텐츠 데이터가 엄청나며 이를 이용하는 대용량 트래픽 또한 만만치 않을 것이다. 그럼에도 불구하고 신기한 점은, 수많은 트래픽 처리 속에서도 저렇게 많은 섬네일 이미지와, 이미지 위에 마우스를 올리면 보여지는 일부 영상이 매우 빠른 로딩 속도를 자랑한다는 것이다. 넷플릭스는 과연 어떻게 이러한 성능을 만들어 낼 수 있었을까? 지금부터 넷플릭스 페이지의 비밀에 대해 알 수 있는 만큼 최대한 파헤쳐 보도록 하자. 섬네일 이미지 사용 우선 개발자 도구-네트워크 탭을 열어, 페이지 로드 시 요청받는 리소스 목록들을 확인해 보았다. 페이지 렌더링이 완료된 후에도 쉬지 않고 계속해서 많은 리소스가 다운로드되며 리스트가 쭉쭉 늘어..
-
[2020.07.11] 자바스크립트 - Element.style 속성과 getComputedStyle() 메소드의 차이에 대해 알아보자개발 블로깅/Javascript 개념 2020. 7. 12. 15:20
브라우저에 그려진 엘리먼트의 스타일을 가져오는 방법에는 두 가지가 있다. Element.style 속성 참조 getComputedStyle() 메소드 나는 이 두 가지의 차이에 대해 정확하게 알지 못한 채, 엘리먼트의 스타일에 접근하는 작업을 하다가 내가 예상하던 대로 동작하지 않아 엄청 헤맨 경험을 맛 보았다. 그래서 이번에 닥쳤던 문제를 해결하면서 정확하게 알게 된 엘리먼트의 스타일에 대해 아래 예시를 통해서 정리해보려고 한다. # 각기 다른 방식으로 적용된 엘리먼트 두 개 우선 위와 같이 그려진 브라우저 화면이 있다. 해당 코드는 다음과 같다. 첫 번째 엘리먼트 두 번째 엘리먼트 첫 번째 엘리먼트는 인-라인 방식으로 해당 엘리먼트에 글자색 스타일을 직접 선언하고, 두 번째 엘리먼트는 body태그 바..
-
[2019.10.03] 오늘의 TIL - 같은 class의 특정 태그에만 Style을 다르게 적용시키기개발 블로깅/오늘의 TIL 2019. 10. 3. 12:45
똑같은 Element에 똑같은 Style을 적용시키기 위해 아래와 같이 코드를 작성한다. .item { width: 100%; height: 100%; border: 1px solid black; } 첫번째 두번째 세번째 위 코드는 세개의 div 태그에 똑같은 item의 style이 적용된다. 그러나 특정 div 태그에만 border 색을 다르게 하고 싶다면? 해결책은 다음과 같다. # 첫 번째 div 태그에만 border색을 다르게 적용 시키는 법 .item { width: 100%; height: 100%; border: 1px solid black; } .item: first-child { border: 1px solid yellow; } # 첫 번째 div 태그에만 border색을 다르게 적용 시..
-
[2019.02.27] for문 사용에 주의해야 할 점(?)개발 블로깅/Javascript 개념 2019. 2. 27. 23:18
무턱 underbar 과제를 진행하는 중에, 한 문제에서 엄청 시간을 쏟았다....문제내용은, 하나의 배열이 있으면, 거기 안에 있는 Element와 Index 값을 같이 저장하는 문제였던 것 같다. (문제 다시 확인해보기 귀찮..)그렇다. 그냥 for문 돌려서 하나씩 보내주면 된다.엄청 쉬운 문제였다.. 정말 간단한거다...당연히 코드에 이상없다. 결과물도 이상없다.... 근데 왜 도대체 테스트케이스에서 passed가 되지 않는 것이야..!!! 😡 엄청난 시간을 쏟아 겨우 찾아낸 원인.... 인덱스의 타입이 String이였던 것.평소 for문을 돌리면 Index는 무조건 정수형일 줄 알았다... 그런데 오늘 처음 알았다!12345var array = [1, 2, 3, 4, 5]; for(var inde..