TIL-20211020

Today

• 신규 시스템 Admin reference 확인
• 프론트엔드 테스팅 관련 reference

Contents

• Admin reference
  신규 서비스에서는 크게 3개의 서비스가 존재하고 각각의 영역은 많은 데이터를 보여주게 된다. 다양한 Input을 핸들링 하거나 서버로 부터 많은 데이터를 요청하는 경우도 생긴다.

  지난 프로젝트에서 Component 성능저하의 원인을 찾아보았을 때, 부모 컴포넌트에서 관리하는 상태변화가 하위 컴포넌트의 Rerender를 발생하는 경우가 있었고, 해당 부분을 해결할 수 있는 여러가지 방법을 알게 되었다.

  FE conf에서 확인한 내용은

  1. Uncotrolled Component로 설정
     비제어 컴포넌트는 Render에 영향을 주지 않게 하고 해당 데이터를 ref를 통해 컨트롤 하는 방식을 취할 수 있고, 결국 상태값으로 정하지 않기 때문에, react성능에 영향을 없앨수 있다. 다만, 비제어 컴포넌트가 되어 React에서 직접 제어하는게 어려워 진다.

  2. 컴포넌트 개별 상태관리
     데이터를 처리하는 input단위로 상태를 설정하고 해당 상태 변화를 Debounce처리하여 실제 Formcontext를 변경하는 방식을 취할 수 있다. 이 경우에는 formContext가 실제 input component의 상태를 반영하지 못한 상태로 form이 제출될 가능성이 있기 때문에, 해당 부분을 처리할 필요가 있다.

  위와같은 문제를 해결하기 위해 외부 라이브러리를 사용하거나 (formik, react-hook-form), global state(redux, recoil, mobx)를 사용할 수 있다.

• 프론트엔드 테스팅
  작년까지는 testing-library가 큰 강세를 보였고 해당 library는 거의 모든 테스팅 라이브러리를 하나로 통합하여 ui testing위한 로직을 구현할 수 있게 도와준다.

  때문에, 단순 UI 테스트, 컴포넌트 상태 테스트 , 비동기 테스트, global state 테스트를 한가지 라이브러리 안에서 해결할 수 있다. 환경을 통제하는 라이브러리가 하나로 통합되기 때문에 테스트코드 구조도 통일된 구조를 가질 수 있다.

  cypress를 통해 유저의 interaction 기반 테스트가 가능하고 playground를 통해서 현재 component의 상태 및 코드베이스의 테스트와 어떻게 맞춰서 돌아가는지 디버깅도 가능하다.