해당 글은 100% 정확한 글이 아닙니다. 저의 경험을 작성하는 것이며, 틀릴 수 있습니다. 이점 참고 부탁드리며, 또한 지적을 환영합니다.이번 글은 Jest를 사용하기 앞서 간략한 설정 방법과 주요 옵션들을 설명해볼까해요.앞 전에 만든  프로젝트를 그대로 사용해 주세요. 옵션 설정Jest 옵션을 설정하기 위해서는 package.json에 설정을 추가하거나, jest.config.js 파일을 만들어 옵션을 설정할 수 있어요.// package.json{ "name": "your-project", "version": "1.0.0", "scripts": { "test": "jest" }, "jest": { "verbose": true, "preset": "react-native", "t..

해당 글은 100% 정확한 글이 아닙니다. 저의 경험을 작성하는 것이며, 틀릴 수 있습니다. 이점 참고 부탁드리며, 또한 지적을 환영합니다. TDD(Test Driven Development) 한번쯤은 들어 본 경험이 있으시죠?일반 적으로 많이 사용되는 방식인 개발 -> 테스트가 아닌 테스트 -> 개발하는 방식을 의미해요.이런 기조들이 생기면서 Test에 대한 중요성이 많이 되었죠. 특히 에러를 미리 대비 할 수 있다는 점에서 선호되는 것 같아요. Test를 하기 위해 사용 되는 라이브러리들 중, React로 유명한 Meta에서 개발한 Testing Library Jest에 대해 알아보는 글이에요.Reat Native를 베이스로 Testing 글을 작성할 예정이니 참고 해주세요! 해당 글을 쓰게 된 이유..

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

안녕하세요! RyuWoong입니다. Web Perfomance를 위해서는 브라우저에서 웹페이지를 보여줄때 어떠한 과정을 거치고, 무엇 때문에 Web Perfomance에 영향을 주는지 알 필요가 있겠죠? Web Perfomance를 위해서는 빠른로드, 상호작용이 원활한 콘텐츠로 이루어진 웹 경험 두 가지의 목표 달성이 중요합니다. 실제 성능 및 체감되는 성능을 향상 시키는 방법을 이해하기 위해서는 브라우저가 어떻게 동작하는지 알아봅시다! 개요. 빠른 사이트는 더 좋은 사용자 경험을 제공합니다. 사용자는 로드가 빠르고 상호작용이 원활한 콘텐츠로 이루어진 웹 경험을 원합니다. 웹 성능에 있어서 두 가지 주요한 문제는 지연시간과 브라우저가 대부분 싱글 스레드로 동작한다는 것입니다. 이를 다른 말로 한다면 빠른..

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