CSE Seat 리팩토링을 하자, 하고 싶다 계속 생각만 하다가 문득 이젠 실행할 때가 됐다고 생각했다. 슬슬 학기도 마무리 되어가고, 시작 날을 언제로 하지 고민하다가 오늘 velog에 글이라도 하나 남기며 시작하자고 다짐했다. 그러면서 리팩토링이 뭘까에 대한 생각도 들고, 리팩토링을 해본 적도 없어서 꽤나 난감했다. 계속 리팩토링의 과정을 생각해왔지만 리팩토링에 대해 찾아보면 더 좋을 거라 생각해서 조금 찾아보았다.
리팩토링 전후로 기능은 일치한다. 그저 코드가 깔끔해지고, 성능이 좋아지는 개념이다.
리팩토링을 하다가 실수가 발생할 수 있으므로 테스팅을 마련해놓는다.
따라서 리팩토링이란 리팩토링 전 코드 테스팅 - 리팩토링 - 리팩토링 후 코드 테스팅 - 완료 후 커밋이라는 일련의 행위를 반복하는 것이라 볼 수 있다.
CSE Seat에 대해 말하자면 프론트엔드 테스팅 방법이 전혀 없다. 따라서 리팩토링보다 우선되는 게 테스팅이다. Next.js로 개발했으므로 Next.js 공식 사이트상 지원하는 테스팅은 총 4가지 방법이 있다.
- Cypress
- Playwright
- Jest and React Testing Library
- Vitest
4가지에 대해 조금만 알아보고 선택해보자.
Cypress - Cypress is a test runner used for End-to-End (E2E) and Integration Testing.
- E2E Testing
개발물을 사용자의 관점에서 테스트 하는 방법 - Integration Testing (통합 테스팅)
단위테스트가 끝난 모듈들 사이의 통합 테스팅 - 방법론이 여러가지 있다.
이번에 필요한 건 리팩토링을 위한 단위 테스팅이 될테니 Cypress는 제외.
Playwright - E2E, Integration test
Vitest - Jest보다 더 빠르다?
Vitest에 대해 조금 찾아봤는데, 사실 답정너의 면이 있었다. Jest로 가야겠다.
유저풀이야 말할 것도 없고 현업에서 대부분 Jest를 사용하니까. 그래도 Jest를 경험해 보고, Vitest를 맛보기는 하고 싶다. Vitest 공식 사이트에서 내세우는 Jest의 two pipeline에 비해 Vitest의 one pipeline이 먼지 궁금하다.
Jest를 찾아보며 우려했던 점은 Typescript를 모르는 상태로 테스트 코드를 짜면 나중에 Typescript를 배우고 나서 또 건드려야 하나였다. 근데 찾아보니 다행히도 걱정이 불필요했다는 걸 알았다.
어쩌다 보니 리팩토링보다 테스팅을 더 찾아보게 된 하루다.
다음 글은 Jest 및 테스팅 라이브러리에 대해서이지 않을까?
