이 글은 아래 링크의 글을 바탕으로 작성되었습니다. 당연하지만, 이 글이 웹 프론트엔드 성능 분석의 모든 것을 담고 있는 것은 아닙니다. 하지만 가장 기본이 되는 방법론을 다루고 있습니다. 시작해요, 런타임 성능 분석 | Chrome DevTools | Google Developers 시작해요, 런타임 성능 분석 | Chrome DevTools | Google Developers Chrome 개발자 도구에서 런타임 성능을 평가하는 방법 developers.google.com Network 패널 or Performance 패널 네트워크 패널은 자원들이 제대로 다운로드 되었는지의 여부, 캐시여부, 그리고 다운로드된 자원들의 다운로드에 걸린 시간, 세부 정보들을 보고 싶을 때 유용하게 사용할 수 있는 패널입니..

이 글은 아래 링크의 내용을 기반으로 작성되었습니다. 흔히 경험적으로 알수 있을 만한 내용은 다루지 않았습니다. Get Started With Viewing And Changing CSS | Chrome DevTools Get Started With Viewing And Changing CSS | Chrome DevTools Learn how to use Chrome DevTools to view and change a page's CSS. developers.google.com 임시로 적용해볼 css class 생성 Element 패널 안의 Styles 탭에서 .cls 를 클릭하면 됩니다. 특정 요소에 임시로 적용해볼 pseudo 상태를 적용 요소를 선택한 후, Element 패널 안의 Styles 탭..

이 글은 아래의 영상을 바탕으로 작성되었습니다. https://www.youtube.com/watch?v=zrqivQVj3JM&list=PLuHgQVnccGMCI75J-rC8yZSVGZq3gYsFp 우리는 흔히 DNS(Domain Name System) 을 IP 를 대신해서 입력할 수 있는 주소 정도로만 알고 있는 경우가 많습니다. 하지만, 실제로 웹앱을 배포하고 그것에 커스텀 도메인을 연결해야 할 때, 이 지식만으로는 많은 어려움에 부닥쳐야 할 것입니다. 제가 그랬으니까요... 저처럼 부족한 지식을 가지고 도메인을 만지작 거리다 곤란을 겪으신 분들을 위해 DNS 에 대해 제가 이해한 내용을 이 글을 통해 알려드리도록 하겠습니다. IP 주소와 hosts 인터넷에 연결된 모든 컴퓨터 각각을 host 라고 ..

(리)레이아웃과 리페인트 그리고 리컴포짓 (참조 : https://developers.google.com/web/fundamentals/performance/rendering/?hl=ko) 일단 브라우저가 HTML을 한번 다 읽고 나서 파싱까지 모두 끝냈다면 DOM 과 CSSOM 트리를 처음부터 다시 만드는 작업은 일어나지 않습니다. 하지만 자바스크립트나 CSS(transition, animation 등)에 의해 DOM 트리나 CSSOM 트리가 변경되면 렌더 트리는 처음부터 끝까지 다시 만들어지고, 그 후의 모든 과정이 다시 수행됩니다. 스타일 과정을 포함한 모든 과정을 다 수행하는 것을 레이아웃, 혹은 리플로우라고 부릅니다. 그렇다면 이러한 리플로우 과정은 '어느 DOM 요소의 기하학적 속성을 변경하느..

제가 활동하고 있는 문예 단체에서 문예지를 구독하는 독자들이 작품을 이메일에서 받은 즉시 볼 수 있도록 이메일 HTML 템플릿을 만들어 달라는 부탁을 받았습니다. 처음엔 단순한 퍼블리싱 작업인 줄 알았지만 생각 이상으로 장애가 많아서 혹시 저처럼 퍼블리싱을 통해 이메일 템플릿을 제작하고 싶은 개발자, 디자이너가 있다면 참고하실 수 있도록 글을 작성해보기로 했습니다. 염두에 두어야 하는 제한사항들 사실 조심성이 많은 사람이라면 이메일로 어느 정도의 컨텐츠를 보낼 수 있는지 궁금해하고 인터넷을 뒤져볼 것입니다. 그러나 정보들이 산발적으로 흩어져 있어서 이곳에서 어떤 것을 이메일 컨텍스트 내에서 구현할 수 없는지, 어떤 제한 사항이 있는지를 정리해보겠습니다. 자바스크립트 탑재 불가 일반적인 html 에는 태그..

이 글은 아래 글과 영상을 바탕으로 작성되었습니다. 주요 렌더링 경로 | Web | Google Developers 주요 렌더링 경로 | Web | Google Developers 주요 렌더링 경로를 최적화하는 것은 현재 사용자 작업과 관련된 콘텐츠 표시의 우선순위를 지정하는 것을 말합니다. developers.google.com 성능 최적화 성능 최적화 애플리케이션 성능 최적화는 앱과 웹에서 모두 중요하다. 최근 웹 애플리케이션은 Ajax 통신, 복잡한 UI 등 많은 기능을 담으면서 크고 무거워졌다. 무거워진 웹은 긴 로딩 시간 함께 사용자 경험 ui.toast.com https://www.youtube.com/watch?v=G1IWq2blu8c [2018] 프런트엔드 성능 최적화 [2018] 프런트엔..