하리하링웹

개요현재 직장에서 puppeteer기반 cypress 문법을 사용하는 e2e 테스트 프레임워크를 개발하고 있는데 알고리즘의 선택인지 우연인지는 모르겠지만 토스에서 비슷한 것을 만들고 발표한 영상이 눈에 들어오게 되었고 관심이 생겨 해당 영상을 꼼꼼히 보고 요약한 내용이다. 테스트 자동화 플랫폼을 만드는 목적이 다 같아서 그런건지 사람 생각이 다 거기서 거기라서 그런건지 cypress, playwright와 같은 타 테스트 프레임워크를 사용하지 않고 puppeteer 기반으로 테스트 프레임워크를 직접 만든다는 큰 차이를 제외하고는 많은 부분의 플랫폼 설계가 비슷하여 좀 신기했다.  e2e 플랫폼을 만든다는 큰 목적을 가지고 구조와 흐름을 설계하게 되면 결국 누가 만들던간에 이런 느낌으로 완성이 되지 않을까..

https://jjongsk.tistory.com/entry/Cypress%EC%9D%98-%EB%8B%A8%EC%A0%90%EC%9D%84-%EA%B7%B9%EB%B3%B5%ED%95%98%EA%B8%B0-%EC%9C%84%ED%95%9C-Puppeteer-%EA%B8%B0%EB%B0%98-%EC%95%84%ED%82%A4%ED%85%8D%EC%B3%90-%EA%B5%AC%ED%98%841 Cypress의 단점을 극복하기 위한 puppeteer 기반의 e2e 테스트 모듈 구현(1)개요 e2e 테스트 라이브러리가 필요하여 cypress에 대해 분석하다가 이를 사용하는 것은 현재 구조에서 불가능하다고 판단하여 puppeteer를 사용하여 e2e 테스트 아키텍쳐를 직접 구현하기로 결정하jjongsk.tist..

개요 e2e 테스트 라이브러리가 필요하여 cypress에 대해 분석하다가 이를 사용하는 것은 현재 구조에서 불가능하다고 판단하여 puppeteer를 사용하여 e2e 테스트 아키텍쳐를 직접 구현하기로 결정하였다. cypress를 사용하는 것이 불가능한 이유는 아래와 같다.cypress의 너무 느린 속도불가능한 유지보수불가능한 병렬처리쉽지않은 커스텀특히 1번 속도 문제가 너무 심각하였다. 하지만 cypress에서 제공하는 테스트 코드 문법, 여러가지 e2e 기능은 충분한 가치가 있었기에 cypress의 특정 기능을 비개발자(qa,qc 등)가 사용할 수 있도록 cypress 인터페이스를 유지하면서 테스트를 실행할 수 있는 솔루션을 만드는게 이번 프로젝트의 핵심 목표이다. cypress의 테스트 코드는 문법은 ..

개요React 디버깅을 돕는 Chrome 확장 프로그램 React Developer Tools는 분명히 편리한 도구이다. 이 확장 프로그램을 사용하면 어떤 부분에서 re-rendering이 발생하는지, 어떤 컴포넌트의 렌더링에 얼마나 시간이 걸리는지를 쉽게 파악할 수 있다. 하지만, React Developer Tools는 정확한 성능 측정에는 오히려 문제가 될 수 있다는 사실을 발견하였다. 최근, 매우 큰 테이블을 다루는 작업 중 최악의 성능 환경에서 성능 최적화를 진행한 적이 있다. DOM 크기가 매우 커진 상황에서 element.focus() 요청 시, 예상보다 훨씬 속도가 느려지는 현상을 발견했다. memoization 적용, 렌더링 관리, 상태 분리, 알고리즘 최적화 등 성능 향상을 위한 다양한..

immer란React에서 상태의 불변성은 성능에 큰 영향을 미친다. 상태가 불변하게 유지되면 React는 변경된 부분만 효율적으로 다시 렌더링할 수 있기 때문에 성능 최적화가 가능해진다. 하지만 불변성을 수동으로 관리하는 것은 번거로울 수 있는데, 이때 immer 라이브러리는 개발자가 불변성을 유지하는 데 신경을 많이 쓰지 않더라도 이를 쉽게 관리할 수 있도록 도와준다. immer는 프록시(proxy)를 사용하여, 객체나 배열을 직접 수정하는 요청을 가로채어 새로운 객체에서 해당 요청을 작업한다. immer의 핵심 함수인 produce는 두 가지 인자를 받는데, 첫 번째는 원본 상태, 두 번째는 상태를 변경하는 콜백 함수이다. 이 함수 내에서 원본 객체는 수정할 수 있는 것처럼 보이지만, 실제로는 프록시..

2편(CLI 구축) 보러가기https://jjongsk.tistory.com/entry/frontend%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%A0%84%EC%B2%B4-%ED%85%8C%EC%8A%A4%ED%8A%B8-%ED%99%98%EA%B2%BD-%EA%B5%AC%EC%B6%95%ED%95%B4%EB%B3%B4%EA%B8%B02CLI 프론트엔드 전체 테스트 환경 구축해보기(2.CLI)1편(설계) 보러가기https://jjongsk.tistory.com/entry/1%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%A0%84%EC%B2%B4-%ED%85%8C%EC%8A%A4%ED%8A%B8-%ED%99%98%EA..

1편(설계) 보러가기https://jjongsk.tistory.com/entry/1%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%A0%84%EC%B2%B4-%ED%85%8C%EC%8A%A4%ED%8A%B8-%ED%99%98%EA%B2%BD-%EA%B5%AC%EC%B6%95%ED%95%B4%EB%B3%B4%EA%B8%B0%EC%84%A4%EA%B3%84 프론트엔드 전체 테스트 환경 구축해보기(1.설계)서론본격적으로 글을 작성하기에 앞서 요즘 하는 생각들을 주저리주저리 적어보자면, 고민이 이만저만이 아니다. 현재 회사가 마음에 들고 커리어적으로 엄청난 성장을 할 수 있을 것 jjongsk.tistory.com  위 글에서 설계를 완료했으니 이제 다음 단계인 cli쪽..

개발 목표현재 회사의 테스트 코드는 작성은 잘 되어 있지만 이를 실행하는 환경이 너무 느려 모든 테스트를 한 번 실행하는데 수십분 길면 한 시간이 넘는 시간이 걸린다. 심지어 제대로 전역으로 테스트를 실행하는 로직도 없어 사실상 유닛 테스트를 여러 번 실행하는 느낌으로 동작하고 있다. 약 1~2주 정도 타임라인을 잡고 단위 테스트, 전체 테스트를 빠르게, 테스트 코드 개발자가 편하게 작성할 수 있도록 하는것이 목표로 개발을 진행할 예정이다. 아래는 기획, 설계에 앞서 정리한 개발 요구사항이다.CLI로 실행 가능해야한다. ex)ecDev testRun —path테스트 파일에서 F6과 같이 shorcut 입력 시 동작해야한다.백그라운드에 테스트를 위한 웹 서버 실행스토리북 서버: 스토리북 UI에서 단순 클릭..

Strict Mode란React의 Strict Mode는 react의 내부 구성 요소에 대한 발생 가능한 잠재적 문제를 사전에 알아내기 위한 도구이다.문제가 발생할 경우 로그가 출력되며 이는 개발모드에서만 동작하도록 되어있다.공식문서에 정의된 사용하기 위한 문법은 아래와 같다.import { StrictMode } from 'react';import { createRoot } from 'react-dom/client';const root = createRoot(document.getElementById('root'));root.render( ); 공식문서에서는 react app을 위와같이 Strict Mode로 감싸서 사용하는 것을 권장하고 있으며 이를 통해 발생 가능한 버그들을 사전에 수정..

개요Lane이란 동시성 문제를 해결하기 위해 나온 개념이다. Lane은 어떤 작업을 처리할 때 이를 먼저 시작된 작업을 처리하는 시간순이 아니라 우선 순위에 따라 해당 작업을 먼저 처리할 수 있도록 도와주는 역할을 한다. 현재 react가 렌더링 중이더라도 유저 액션, 애니메이션과 같은 우선순위가 더 높은 작업이 발생된다면 현재 렌더링 과정을 중단하고 우선순위가 높은 작업을 먼저 처리한 뒤 다시 원래 작업하던 곳으로 돌아가 렌더링을 진행할 수 있게 만들어준다.Lane이란react 내부에서 Lane은 아래와 같이 정의되어 있다.const NoLanes: Lanes = /* */ 0b0000000000000000000000000000000const NoLane: La..