웹 성능
-
브라우저 동작원리를 알아야 하는 이유가 무엇인가요?개발 블로깅/Improving Performance 2021. 10. 30. 01:00
💡 해당 글은 React의 SSR인 Next.js 프레임워크에 의존하여 작성된 글입니다. 그러나 전체적인 맥락과 핵심 내용을 이해하시는 데는 큰 문제는 없습니다. 프론트엔드 주니어 개발자가 꼭 알아야 하는 기본지식 중 하나로 많이 소개되고 있는 '브라우저 동작 원리' 취업이나, 이직 준비를 해봤다면 무조건 들여다봤을 내용인 만큼, 브라우저가 어떻게 동작하는지에 대해서는 프론트엔드 개발자라면 이미 어느 정도는 알고 있을 것이라 생각한다. 그러나 개발자에게 필요한 기본 지식이라고 해서 어찌어찌 들여다보고 이해는 했는데... 도대체 이게 왜 필요한 걸까? 지금까지 이런 지식 없이도 개발은 잘만 해왔고, 왠지 앞으로도 굳이 필요 없을 것 같긴 한데.. 브라우저 동작원리에 대해 상세하게 다루는 블로그 글과 영상은..
-
웹 성능 최적화를 위한 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
넷플릭스는 전 세계적으로 유명한 스트리밍 콘텐츠 서비스이다. 그만큼 서비스 내 사용되는 콘텐츠 데이터가 엄청나며 이를 이용하는 대용량 트래픽 또한 만만치 않을 것이다. 그럼에도 불구하고 신기한 점은, 수많은 트래픽 처리 속에서도 저렇게 많은 섬네일 이미지와, 이미지 위에 마우스를 올리면 보여지는 일부 영상이 매우 빠른 로딩 속도를 자랑한다는 것이다. 넷플릭스는 과연 어떻게 이러한 성능을 만들어 낼 수 있었을까? 지금부터 넷플릭스 페이지의 비밀에 대해 알 수 있는 만큼 최대한 파헤쳐 보도록 하자. 섬네일 이미지 사용 우선 개발자 도구-네트워크 탭을 열어, 페이지 로드 시 요청받는 리소스 목록들을 확인해 보았다. 페이지 렌더링이 완료된 후에도 쉬지 않고 계속해서 많은 리소스가 다운로드되며 리스트가 쭉쭉 늘어..
-
[2019.11.23] DevFest WebTech 2019 컨퍼런스~!경험치 쌓기/일상 일기 2019. 11. 24. 13:48
오늘은 구글 캠퍼스에서 진행한 DevFest WebTech 2019 컨퍼런스에 다녀왔다. 이번 컨퍼런스는 웹 성능 최적화를 주제로 한 다양한 발표가 진행되었다. # 컨퍼런스가 진행된 구글 캠퍼스 지하 2층 컨퍼런스를 듣기 위해 모인 사람들이 꽤 많았다. 역시나 구글캠퍼스라 그런지 내부 시설이 놀이문화 느낌(?)으로 가득했다. 이번 컨퍼런스에 참석한 사람들은 아래 두 세션 중 하나를 선택해서 들었어야 했다. #세션 1 오픈소스 기여한 내용 ES6, ES7 맛보기 [코드랩] #세션 2 코드의 메인스레드 위치에 대한 내용(?) ES8, ES9, ES10 [코드랩] #세션 3 HTTP/3의 웹 성능 최적화 Rx.JS를 이용한 간단한 검색 기능 만들어보기 [코드랩] 사실 전부 듣고 싶은 욕심이 엄청났지만, 각 시..