[FE] 프로젝트 회고

셀프 테스팅

- 굳이 UI 테스팅 툴을 써야되는지는 모르겠지만, 이건 확실히 필요하다는 것을 이번에 느꼈다
    - 스프린트 단위로 개발을 안한다면, 나라도 그렇게 해야한다. 즉, 특정 기능 및 플로우를 하나의 스프린트 단위로 잡고, 그 스프린트 기간에 셀프 QA, 리팩토링도 마무리를 한다는 관점으로 접근해야한다.
    - 이 때, 셀프 QA는 LLM을 활용해서 엣지 케이스를 포함한 모든 더미 데이터를 API 데이터로 받는다는 가정으로 하는게 좋을 것 같다.
    - 이번에 해보니까 엣지 케이스나 예외적인 케이스에 대한 모든 케이스를 테스팅 해봐야하는 것 같다. 실제로 생성, 삭제, 수정, 조회를 실제 서버에서 넣어주는 더미 데이터로만 하려다 보니까 한계가 있다는걸 확실히 느꼈다.

실제 적용해볼 것

1) Faker로 Factory 패턴 → 다양한 데이터 케이스 생성
2) MSW Handlers → API 엔드포인트별 응답 정의
3) Next.js Provider에서 MSW 초기화 → 개발 환경에서만 동작
4) 엣지 케이스 전용 엔드포인트 만들어서 필요할 때 테스트

반응형 UI

• 이건 그냥 처음부터 설계하는게 맞는 것 같다. 이 때, 그 안에 어떤 데이터가 올지 모르기 때문에 이것도 위에 셀프 테스팅과 연계되는데, 엣지 케이스를 모두 테스팅 해봐야한다. 엄청 긴 데이터, 엄청 짧은 데이터, 아예 없는 데이터 등등. 이거에 따라 UI가 깨지거나 한다면 제대로된 반응형이 아닌거다.

컴포넌트 쪼개기

• 이거 옛날에는 상당히 잘지키던건데 요즘은 핑계긴 하지만, 업무 시간 및 업무 속도를 핑계로 함수형 프로그래밍을 제대로 못했다. 근데 이렇게 적절히 쪼개서 개발을 못하니까 불필요한 리렌더링 이슈, 그리고 에러 트랙킹 등이 상당히 어렵다는걸 느꼈다(당연한거지만).

백엔드에 디펜던시 없애기

• 귀찮아서(?)라는 이유가 컸지만, 확실하게 백엔드 개발이 완료돼야 FE 개발을 할 수 있는 업무 방식은 너무나도 비효율적이다. 그냥 더미데이터 생성하는 걸 아예 내 업무에 넣고, 그걸 바탕으로 만들어야한다. 즉, 백엔드 등의 서버쪽 데이터 생성에 디펜던시를 아예 없애야한다.

함수형 프로그래밍

• 좀 더 함수형 프로그래밍을 지향해서 해야겠다는 생각이 들었다. format.ts 같은 것도 만들어놓고 안쓴게 많고, 커스텀해서 써야하는데 제대로 쪼개서 만들어놓지 않아서 새로 만들고 그랬던게 꽤 있던 것 같다. 사실 예전에는 객체 지향 프로그래밍 식으로 서비스 모듈 단위로 작업을 했는데, 그것보다는 비즈니스 로직을 함수형으로 쪼개서 조립해서 만들고, hook, utils로 활용하면 될 것 같다.

실제 적용해볼 것

• fp-ts 를 쓸지 커스텀으로 만든걸 쓸지 선택