먼저 Front-end 웹 성능은 크게 로딩 성능과, 렌더링 성능으로 결정된다. 로딩 성능 서버에 있는 웹 페이지와 웹 페이지에 필요한 기타 리소스를 다운로드할 때의 성능 ex. 고화질 이미지 등이 포함되어 있을 때 느린 인터넷 환경에서 늦게 표시되는 것. 로딩 성능을 개선하는 가장 좋은 방법은, 다운로드해야 하는 리소스 수를 줄이거나 크기를 줄이는 방법이 있다. 렌더링 성능 다운로드한 리소스를 가지고 화면을 그릴 때의 성능 코드를 실행하여 화면에 보여주는 과정. 렌더링 성능에 가장 크게 영향을 주는 것은 Javascript 코드로, JS 코드를 얼마나 효율적으로 작성했는지에 따라 화면이 그려지는 속도와, 사용자 인터랙션의 자연스러운 정도가 달라진다. 개발자 도구 탭 종류 분석 툴은 크롬의 개발자 도구(..
이번엔 React에서 적용해 보았다. 예제 프로젝트 생성 $ npx create-react-app tdd_test_react $ cd tdd_test_react My-Button.js const MyButton = ({ onClick, disabled, children }) => ( {children} ); export default MyButton; 간단한 Button 컴포넌트를 제작한다. My-Button.test.js import React from 'react'; import { render, fireEvent, screen } from '@testing-library/react'; import '@testing-library/jest-dom'; import MyButton from './My-B..
JS에서 테스트 자동화를 사용할 때 사용하는 도구는 아래와 같다. 이름 간단 설명 Jest Facebook에서 만든 프레임워크로, JS를 위한 강력하고 사용하기 쉬운 테스트 도구 Mocha 유연하고 확장성이 높은 프레임워크로, 다양한 플러그인과 어설션 라이브러리를 지원 Cypress 최근 웹 어플리케이션을 위한 end-to-end를 위한 도구로, 자동화된 브라우저에서 테스트를 실행할 수 있다. Puppeteer Google에서 만든 Node.js용 웹 스크래핑 및 자동화 라이브러리로, 웹 어플리케이션의 UI 테스트와 end-to-end 테스트에 적합하다. 순위는 아래와 같다. 이외에도 다양한 종류의 도구들이 있지만, 공부해볼 도구는 가장 많이 사용되고 있는 Jest에 대해 알아보려고 한다. 먼저 자바스크..
우선 TDD의 정의는, 아래와 같다. 테스트 주도 개발은 Test-Driven Development의 약자로, 테스트가 코드 작성을 주도하는 개발 방법이다. 작은 단위의 테스트 케이스를 작성하고 이를 통과하는 코드를 추가하는 단계를 반복하여 구현한다. TDD 진행 단계 테스트 코드 작성: 먼저 작성할 기능에 대한 테스트 코드를 작성한다. 이때, 실패할 것으로 예상되는 테스트를 작성한다. 테스트 실행: 작성한 테스트 코드를 실행하고, 테스트가 실패하게 된다. 기능 구현: 테스트가 성공하도록 기능을 구현한다. 리팩토링: 구현한 코드를 리팩토링하여, 테스트가 성공하는지 확인한다. TDD 사용 시 장점 안정성 증가: TDD는 테스트를 먼저 작성하므로, 코드가 기대한 대로 작동하는지 항상 확인할 수 있다. 이는 ..
Redux-Saga를 공부하면서 Generator이라는 문법을 알게 되었는데, 이에 대해 확인해 보려고 한다. 개요 A generator is a process that can be paused and resumed and can yield multiple values. (Generator는, 일시 정지 및 다시 시작할 수 있고 여러 값을 생성할 수 있는 프로세스다.) 직접 해보기 Generator은 함수와 비슷하게 생겼는데, 동작 방식이 다르다. // function 뒤에 *가 붙는다. function* myGenerator() { console.log('시작!'); yield 1; console.log('hello!'); yield 2; console.log('world!'); return 3; } ..
