매일의 나

15.1 Performance 탭과 성능 최적화 15.1.1 Performance 탭의 구성 크롬 개발자 도구의 Performance 탭에서 웹페이지의 성능을 측정할 수 있다. 특이한 점은 (1)의 새로고침버튼을 누르면 웹페이지를 새로고침해 측정을 시작한다는 것. (2)의 다운로드, 업로드 기능을 통해 성능개선결과를 확인하는 데 이용할 수 있다는 점. (3)의 버튼으로 성능측정할 것을 선택할 수 있다는 것. (4)의 휴지통 버튼을 누르면 가비지컬렉션이 된다는 것. 그리고 (5), (6), (7)의 영역에 성능측정 결과가 나타난다는 점이다. 15.1.2 렌더링 블록 렌더링 블록: 렌더링을 막는 것 블록 리소스: 렌더링 블록의 원인이 되는 리소스 15.1.2.1 CSS의 렌더링 블록 렌더링 블록의 원인 렌더..

프론트엔드 테스트는 어떻게 작성해야 할까? github에 공개된 테스트 코드의 내용을 훓어보니 아래 세 가지 내용에 대해서만 테스트하고 있음을 알게되었다. 사용자가 사용하는 방식 버튼 클릭 시, 또는 텍스트 입력 시 등등 외부 인터페이스 메서드가 올바른 매개변수와 함께 호출된다. 속성이 의도한 방식대로 적용된다. 스냅샷 테스트 엘리먼트가 렌더링되며 엘리먼트가 스냅샷과 일치한다. 메모 애플리케이션의 구조와 테스트 메모 애플리케이션의 구조 Memo MemoInputArea - Button MemoList MemoItem - Button 메모 애플리케이션의 컴포넌트, Util의 기능과 테스트 기능 나라면 어떤 테스트를 할까? 실제 테스트 코드 Memo addMemoItem() 이벤트핸들러를 MemoInputA..

14. 스냅숏 테스트와 시각적 테스트 14.1 스냅숏(snapshot) 테스트 직렬화 결과를 스냅숏으로 기록해 이전의 스냅숏과 차이가 있는 지 테스트하는 방법 14.1.2 스냅숏 테스트의 장점과 단점 장점 단점 예상치 못한 변경을 빠르게 알아차릴 수 있다. 직렬화되는 모든 데이터를 검증할 수 있다. 개별적으로 모든 속성을 검증하는 것보다 간결하게 테스트 코드를 작성할 수 있다. 조건이나 연산 결과에 따라 엘리먼트의 스타일이 달라지거나 엘리먼트의 노출여부가 달라지는 경우에 효율적으로 검증할 수 있다. 스냅숏 테스트만으로 테스트의 의도를 나타내기 어렵다. TDD를 수행하기에 적합하지 않다. 모든 UI의 변화를 감지하고 테스트할 수 없다? 14.1.3 그럼 어떻게 작성해야 할까? 스냅숏 테스트 단위를 작게 잡..

13. 프런트엔드 테스트 13.1 좋은 테스트란 무엇인가? 테스트의 궁극적인 목적은 애플리케이션과 코드의 품질 향상이다. 테스트를 위한 테스트는 없는 게 낫다. 좋은 테스트는 단순하고 이해하기 쉽다: 테스트 코드만 보고 테스트하고자 하는 것과 그 결과를 알 수 있다. 유지보수가 가능하다: 서비스 코드의 유지보수에 맞춰 유지보수 가능할 수 있는 범위로 작성한다. 내부 구현보다는 인터페이스를 기준으로 테스트한다: 이 코드를 사용하는 사용자의 입장에서 테스트하는 것이 좋다 독립적으로 실행된다: 테스트의 실행순서가 실행결과에 영향을 끼치지 않는다. 일관성이 있다. 13.2 프런트엔드 테스트 프런트엔드의 경우 자바스크립트 코드뿐만 아니라, 이벤트핸들러의 동작, 화면의 출력이 잘 되는 지 등도 테스트해야 한다. 모..

8. 브라우저 렌더링 과정 브라우저의 구현 방법은 표준화되어 있지 않기 때문에 제조사별로 브라우저를 다르게 구현한다. 크롬의 경우 멀티프로세스 아키텍처를 차용하였다. 크롬 브라우저 아키텍처 At the top is the browser process coordinating with other processes that take care of different parts of the application. For the renderer process, multiple processes are created and assigned to each tab. Until very recently, Chrome gave each tab a process when it could; now it tries to give..