이전 글에서 사용자 시나리오 & 테스트 코드 작성에 대해 이야기하였다, 이 글에서는 3번 테스트 코드를 활용하여 코드 리팩토링을 한 경험에 대해 써보고자 한다! 기존 코드 & 기획서를 참고하여 사용자 시나리오를 작성한다. 테스트 코드를 작성한다. 테스트를 돌려보며 안전하게 코드 리팩토링를 한다. 총 3개의 테스트 파일이 있고, 이는 시나리오대로 나눈 것이다. 모든 파일에 대한 테스트를 돌려보면 아래와 같이 나온다 (all passed!) 2개 이상에서 똑같이 쓰이고 있는 코드가 있는데, 이를 공통 컴포넌트로 빼서 코드 리팩토링을 하려고 한다. 원래 같았으면 코드수정을 한 뒤, 하나하나 눌러보며 UI 테스트를 했었는데, 간단한 화면이면 테스트도 금방 끝나겠지만 이번엔 유저 이벤트에 따라 체크해야 하는 사항..

계기 개발하고 있는 화면에서 유저의 이벤트에 따라 체크를 해야 하는 케이스들이 점점 늘어남에 따라 테스트 코드에 대한 필요성을 느꼈다. 화면 내부는 위처럼 크게 4개 컴포넌트로 구성되어 있다. 그리고 컴포넌트 내부에서 발생하는 유저의 이벤트에 따라 다른 컴포넌트에 영향이 간다. 예를 들어, component 1에 있는 내용에 따라 component 3에 있는 셀렉박스 선택지가 바뀌는 등.. 유저의 시나리오가 많아지면서 코드를 수정할 때마다 직접 일일이 테스트해야하는 케이스들이 늘어났다. 🥲 (하나하나 눌러보느라 아픈 내 손가락..) 테스트 코드 작성에 대한 필요성을 느껴질 때쯤, 아래의 글을 보게 되었다. https://techblog.woowahan.com/8942/ 단위 테스트로 복잡한 도메인의 프론..