드디어 테스트 도입 성공!
그동안 우리 서비스의 클라이언트는 앱도, 웹도 테스트가 전혀 없는 상태였다. 망망대해에서 노를 젓는 기분으로 개발을 진행해왔다...
(새로 합류하신 동료분이 지금까지 클라이언트 쪽에서 테스트 하나 없이 서비스를 굴려왔다는 게 오히려 대단하다고 하실 정도였다.)
항상 클라이언트에도 테스트를 도입하고 싶었지만, 일정에 쫓겨 구현하지 못했었다.
하지만 이번에 네이버 지도api를 사용하는 어플리케이션의 레거시 코드를 모두 걷어내는 방대한 리팩토링을 시작하게 되었고, 안전한 리팩토링을 위해 테스트코드의 필요성을 절실히 느꼈다.
그리고 마침 우리 팀에는 클로드 코드가 결제되어있었다.
그래서 일단 테스트를 구축하기 비교적 수월한 Next.js 기반의 웹 서비스부터 테스트 환경 구축을 시작했다.
⸻
Playwright + Jest 환경 구축
클로드 코드야 고마워...
이번엔 claude code 도움을 받아 e2e는 Playwright로, 유닛테스트는 Jest로 환경을 세팅했다.
생각보다 훨씬 빨리 끝났다. 예전에 admin 페이지에서 Jest를 쌩으로 세팅할 때랑 비교하면 차이가 컸다.
그때는 babel, ts-jest, transform 설정부터 막히고, config를 어떻게 나눠야 할지 애매해서 시간을 많이 날렸는데
클로드 코드와 함께하니 기본 구조를 내가 알고 있고, LLM이 실행하고 디테일을 채워주는 느낌이었다.
예전에 jest를 냅다 도입하느라 삽질했던 경험 덕분에, LLM이 준 답이 맞는지 틀린지 판단할 수 있었던 것이 큰 차이를 가져왔다.
하지만 역시 설계는 사람이 직접 해야죠
LLM이 큰 도움은 됐지만, 초기 설계는 아직 사람이 직접 하는 게 낫다는 걸 느꼈다.
폴더 구조나 테스트 전략 설계를 LLM한테 맡겨봤는데, 컨텍스트가 조금만 복잡해지면 다소 조잡한 설계를 제시하는 같았다.
TDD의 현실화
그동안 TDD는 리소스가 부족한 우리 팀에선 다소 사치스러웠다
하지만 클로드 코드가 mock 코드 생성이나 반복적인 작업을 해주니 진짜 TDD가 눈 앞에 다가왔다.
그래도 공부는 당연히 해야함!
테스트를 직접 세팅하면서 삽질해본 경험이나 javascript의 동작 원리에 대한 지식 등 기본기는 무조건 필요하다는 걸 느꼈다.
특히 디버깅할 때, 예전에 Jest를 직접 만져본 경험이 큰 도움이 됐다.
내가 뭘 쓰고 있는지 모른 채로 LLM을 쓰는 것은 개발자로서 지양하고 싶고, 그래야 한다고 생각한다.
⸻
시맨틱 마크업의 중요성
테스트를 작성하면서 HTML 기본기의 필요성도 크게 느꼈다.
특히 e2e 테스트에선 지금 마크업 구조로는 도저히 요소를 찾아오기가 어려워서... 직접 코드를 수정하는 일도 있었다.
테스트 때문에 코드를 수정하는 것은 지양하고 싶었지만, 어차피 리팩토링이 필요한 구조였기도 했다. 이제부터라도 시맨틱 마크업을 철저히 지키자고 다짐했다.
⸻
테스트 친화적인 코드 ≒ 클린 코드
테스트를 고려하면서 컴포넌트를 작성하면 코드가 자연스럽게 클린코드에 다가가는 것 같았다.
그동안은 비즈니스 로직과 UI가 뒤엉킨 코드가 많아서 테스트하기도 어려웠는데, 앞으로는 테스트를 기반으로 점진적으로 리팩토링을 해야겠다.
테스트 가능성과 코드 품질은 상관관계가 크다는 것을 느꼈다.
⸻
대규모 리팩토링 전, 테스트는 필수!
내가 진행중인 지도 서비스는 UI+비즈니스 로직+복잡한 상태들+외부 API 호출+중복된 코드등이 얽혀있는 레거시 코드다. 이전에도 지도 코드 리팩토링을 진행 했었으나, 자신감이 없어서 운영환경에 붙이지 못한 브랜치들도 많았다.
이제는 테스트를 기반으로 시도할 수 있다는 자신감이 생겼다.
특히 LLM과 개발하는 환경에서 테스트는 선택이 아니라 필수!! 클로드 코드가 있으니 테스트 작성은 더 이상 리소스 낭비가 아니라 투자라고 느껴진다.
⸻
드디어 테스트 없는 클라이언트에서, TDD로 나아가는 첫걸음을 뗐다. 너무 감격스럽고 마치 망망대해에서 유람선에 올라탄 기분이다...
사실 2~3년 전에는 프론트엔드에서 테스트의 필요성 자체에 대한 논쟁이 분분했는데, LLM의 등장 이후부터는 거의 논쟁이 종결된 것 같다.
LLM으로 개발하다보면 왜 테스트가 필수인지 자연히 알게 되어서 그런 듯 (나 역시도 그랬다).
다음엔 지도 리팩토링이나 신규 개발하는 기능에서
테스트가 어떤 역할을 하는지, 어떤 도움을 받았는지 등을 더 구체적으로 기록해 볼 예정이다!!
