3 of 27

Wapl/core – 계층 구조 학습 및 번들링 최적화

- Model/Repo/Store로 구현되어 있는 프로젝트 구조 학습

- lodash에서 트리셰이킹을 지원하는 lodash-es로 의존성 변경

- webpack, react-virtuoso 등 필요 없는 의존성 삭제

- yarn-deduplicate로 중복된 모듈 의존성 제거

4 of 27

설정창 – 배달공제회 이용약관

5 of 27

설정창 – 배달공제회 이용약관

- Word 문서로 이용약관을 전달받고 HTML로 변환

- 각 조항을 Title + (text or table ui) 배열로 이루어진 객체로 정의

- 이용약관을 조항들의 배열로 변환해서 렌더링

=> 하루라는 제한 시간안에 마감 완료

6 of 27

설정창 – 배달 공제회 연락처 관련 설정

7 of 27

설정창 – 개인정보 변경 페이지 화면

8 of 27

설정창 – 개인정보 변경 유효성 기획

9 of 27

설정창 – RHF + Zod

React-hook-form

Zod

에러, 로딩 등 폼 상태 관리
비제어 컴포넌트로 동작해 리렌더링 최적화
효율적으로 유효성 검사 가능

스키마 및 유효성 검증 라이브러리

10 of 27

설정창 – 유효성 검사, 폼 상태 관심사 분리(zod)

Before

- React-hook-form이 form 상태와 유효성 검사를 모두 관리

- 만약 회원가입과 같은 input이 많은 폼이라면?

11 of 27

설정창 – 유효성 검사, 폼 상태 관심사 분리(zod)

After

- 유효성 검사는 zod에게 위임

- React-hook-form은 폼상태만 관리

12 of 27

설정창 – 그 외 이슈

포스코 설정창

- safari 브라우저에서 input에 focus했을때 줌인 되는 버그 수정

- BI사 요청으로 배달기사용 설정 페이지에서 근무지 조회되는 기능 추가

- 비밀번호 변경 api 변경사항 core 및 shell에 반영

배달공제회 설정창

- 성별, 생년월일이 undefined로 보여지는 버그

- api에서 성별, 생년월일을 응답으로 주지 않기 때문에 발생하는 문제

- 추후 api 개발자에게 문의 필요

- 응답이 없을 시 ‘선택 안됨’, 빈 텍스트로 보여주도록 수정

- 휴대폰 표시 형식 수정

- 공지사항, 차단 유저 관리 기능 존재하는지 기획에 문의

- 공지사항, 차단 유저 관리 기능은 삭제됐다고 답변 수신

13 of 27

테스팅 – 도입 계기

- 시시각각 변하는 기획

- API 개발을 기다리며 TODO 주석을 달아 놓은 컴포넌트들

- 개발 현재 상황 및 태스크를 파악 어려움

=> 테스트 코드를 작성해서 개발된 기능의 안정성을 높이고 문서화하자

14 of 27

테스팅 – 사용 라이브러리

vitest

Testing Library

추가 설정 없이 ESM, TypeScript, JSX 사용 가능
Jest 호환 API 및 가이드 제공

UI 컴포넌트 테스트를 도와주는 라이브러리

15 of 27

테스팅 – 설정 파일

16 of 27

테스팅 – mocking

Mocking

- 모든 것을 테스팅 할 수는 없음

ex) 타 라이브러리

- 타 라이브러리의 함수는 mocking해 호출 여부만 테스트

Mocking 한 것

React-router-dom, mobx와 같은 외부 라이브러리 및 부산물(store)
Wapl/core
Window.env

17 of 27

테스팅 – 전체 테스트 요약

18 of 27

테스팅 – createFormattedTime 함수 단위테스트

19 of 27

테스팅 – 이름 변경 페이지 통합테스트

20 of 27

테스팅 – 통합 테스트(포스코 이름 변경 Form)

21 of 27

테스팅 – 아쉬웠던 점 및 보완방법

아쉬웠던 점

RestAPI가 아니라 웹소켓 환경이라 msw를 이용해 실제 네트워크 요청이 잘 가는지 확인하지 못함

보완방법

Cypress나 Playwright로 E2E 테스트

22 of 27

Wapl/ui – 최신화되지 않은 스토리북

23 of 27

Wapl/ui – TextField

- TextField의 기본 fontSize 14px에서 16px으로 수정

- 기존: TextField의 타입이 text, search, password일때만 스타일 적용

- email, tel 등 다른 타입일 경우에도 스타일이 적용되도록 수정

24 of 27

Wapl/ui – storybook 빌드 에러 수정(타입 에러)

25 of 27

Wapl/ui – storybook 버전 업데이트 및 성능 개선

26 of 27

계획

슈퍼앱 설정 창 기획 검토 및 개발

다른 팀 이슈 대응

테스트와 린트 등 Gitlab CI 스크립트 추가

1 of 27

2 of 27