코딩하는 고릴라

🦍 개요사내에서 playwright를 도입해 e2e 테스트 자동화 시스템을 성공적으로 구축했습니다. 특히 playwright에서 제공하는 UI 모드를 주로 활용하여 테스트 케이스를 실행하고, 검증하고 실제로 발생한 버그들을 찾아낼 수 있었습니다. 하지만, UI모드와 관련돼 아쉬운 부분 또한 존재했습니다."UI 모드에서 여러 테스트 케이스를 선택해서 한 번에 실행할 수는 없을까?" 모든 테스트 케이스를 일괄로 실행시켜 품질을 점검할 수 있으나, 때때로는 일부 테스트 케이스만 선택해 실행시킬 필요가 있습니다. 하지만 playwright에서 제공하는 UI모드는 아직 이 기능을 지원하지 않고 있습니다. 이에 따른 불편함을 해소하고자 직접 기능을 분석하고, 필요한 기능을 더해보고자 하는 시도를 하게 됐습니다.?..

🐈 일 이야기 - e2e 테스트 코드 작성 - 열심히 작성한 테스트 코드도 실효성이 없으면 쓸모가 없다. 다만, 실효성 있는 테스트 케이스를 구상하는 부분은 현재로선 내 역할이 아니다. 많은 양의 작성이 요구되는 테스트 케이스를 보다 쉽게 작성하기 위한 셀렉터 등을 대강 구상하고 구현해봤다. 아직 유용하게 쓸 수 있을 정돈 아니라 꾸준히 고도화 해야할 것 같다. 🦍 모던 자바스크립트 deep dive - 프로토타입, strict mode - 쭉쭉 읽어나갔는데, 막상 다시 돌아보니 기억에 남는 부분은 많이 없는 것 같다. - 그래도 언젠가 이런 부분들을 맞닥뜨렸을 때, "아 그런게 있었지!" 정도는 할 수 있을 것 같다. 🐖 melog 프로젝트 - 컴포넌트, 페이지, 훅 정리 - 기존에 괜히 필요도 ..

Jest, React-testing-library와 같은 테스트가 아닌, REST API 통신을 위한 간단한 테스트 베드를 작성했습니다.인풋, 버튼만을 간단히 띄워두고 fetch의 결과를 즉각적으로 확인하고자 테스트용 페이지를 따로 작성했습니다.postman과 같은 툴을 사용하면 용이하겠지만, 이런 테스트 환경을 직접 구축해보고자 하는 개인적인 욕심이 있어 간단하지만 직접 구현하고자 했습니다.  npm run dev를 활용해 개발 환경에서 리액트 어플리케이션을 실행시키는 것처럼, npm run test 명령어를 통해 테스트 베드를 띄울 수 있도록 했습니다.## package.json"scripts": { "dev": "vite dev --open", "test": "vite --mode tes..

공통 컴포넌트들을 조합해, 데이터의 형태별로 특화된 위젯 컴포넌트를 작성합니다. - 데이터의 형태(타입) 에는 캐릭터, 길드, 랭킹 등이 존재 서버로부터 가져온 데이터는 각각의 데이터 형태 별로 작성된 스토어에 저장됩니다. - 해당 스토어에 저장된 값은 데이터 형태별로 특화된 위젯 컴포넌트에서 가져다 사용합니다. 제공하려는 서비스의 특성상, 하나의 위젯 컴포넌트 내부에 다른 형태를 가진 데이터들이 뒤섞여있지 않을 것으로 예상돼 위와 같은 상태 관리 패턴을 활용하고자 합니다. 작성한 위젯 컴포넌트와 스토어 간 강한 의존성이 나타날 수 있으나, 시각적으로 보여질 UI의 형태는 데이터의 종류에 따라 공통분모 없이 분명히 다르게 나타날 것으로 구상하고 있어 개발상 오히려 이점을 가질 수 있으리라 생각됩니다. 상..

import { memo, MouseEvent, ReactNode, useCallback } from 'react';import { BaseComponentProps } from '../../type';export interface ButtonProps extends BaseComponentProps { className?: string; children?: ReactNode; onClick?: (e: MouseEvent) => void;}export const Button = memo(function Button(props: ButtonProps) { const { className, children } = props; const onClick = useCallback( (e: MouseEvent) ..

1. 서버로부터 받아오는 데이터 흐름- UI는 서버로 데이터 요청- 응답으로 받은 데이터 저장- 받은 데이터는 UI 렌더링을 위해 적합한 구조 혹은 값으로의 형태 변환이 필요- 형태가 변환된 데이터를 바탕으로 UI 그리기UI를 출력하는 부분은 전적으로 가공된 데이터에만 의존해, 다른 흐름으로부터의 개입이 없어 복잡도를 낮출 수 있습니다.  2. 유저 인터랙션에 의한 데이터 수정과 리렌더링  - UI는 유저 인터랙션에 의해 데이터를 수정 - 데이터 값의 변경에 따라 출력을 위해 가공된 데이터의 형태도 따라 변경 - 변경된 가공된 데이터를 통해 UI의 리렌더링 발생서버 요청/응답에서와 마찬가지로, 단방향 데이터 흐름을 유지할 수 있습니다. 3. 데이터를 활용한 서버 요청 (검색 등) - 인풋에 값을 입력하는..