안녕하세요~ RyuWoong 입니다. 저번 포스팅에 브라우저에서 Web을 어떻게 보여주는지에 대해 했었는데요. 이번엔 그 과정 중 핵심인 중요 렌더링 과정에 대해 알아보겠습니다. 중요 렌더링 과정? 브라우저가 HTML, CSS, Javascript를 화면에 픽셀로 변화하는 일련의 단계를 말하며 이를 최적화하는 것은 렌더링 성능을 향상시켜 사용자가 빠르게 웹페이지에 접근하고 사용할 수 있게 해줍니다. 중요 렌더링 과정 최적화는 렌더링 시간을 개선 시켜줍니다. 이는 빠른 사용자 상호과정을 보장하며 버벅거림을 피할수 있도록 해줍니다. 이 과정은 DOM 구성 - CSSOM 구성 - Render Tree 구성 - Layout - Paint로 이루어져 있습니다. 그럼 과정을 하나씩 뜯어보도록 하겠습니다. Docum..

안녕하세요. RyuWoong 입니다. 이번 포스팅부터 Web Perfomance에 대해 알아보고자 합니다. 그 첫번째 주제는 Latency입니다. 대기시간(Latency)는 하나의 데이터 패킷이 출발지에서 도착지까지 가는 데 걸리는 시간을 뜻합니다. 성능 최적화에 있어서 대기 시간의 원인을 줄이는 것과 연결 상태가 좋지 않은 사용자를 고려하여 대기 시간이 긴 환경에서 사이트 성능을 테스트하는 것은 중요하죠. 이번 글에서 대기시간이 무엇인지와 어떤 영향을 미치는 지, 어떻게 측정하며, 어떤 방법으로 최적화 할 수 있는지 알아보겠습니다. Latency? 대기 시간이란 일반적으로 사용자가 요청을 한 시점부터 해당 사용자에게 요청에 대한 응답을 받기까지 걸리는 시간을 말합니다. 첫 번째 요청에서 14KB 만큼의..

안녕하세요. RyuWoong 입니다. 이번에 포스팅 할 내용은 Web Performance입니다. JS와 React를 공부하며 내부 로직을 최적화 하는 것 외에, 신경 써야할 것들이 더 있다는 걸 알게모르게 눈치 채고 있었습니다. 우리가 React를 다루면서 re-Rendering이라던지, CSS IN JS를 사용하면 어떤 장단점이 있는지 등에 대해 알아가다 보면, 근본적인 무언가가 연관이 있어서 성능에 영향을 미치고 있다는 느낌을 받게 됩니다. 새로운 방법론이나, 도구가 등장하는 것은 기존의 문제나 불편함을 해소하기 위해 등장한 것이니까요. 이번에는 근본적인 것을 찾아 여정을 떠나 볼까 합니다. 저 같은 Junior 개발자들이나 입문자들에게 도움이 되었으면 합니다. Web Perfomance? Web ..