항해플러스 프론트엔드 6기 7주차 회고

일곱 번째 도전기 - 테스트 코드로 코드의 안정성 확보하기

이번 챕터는 드디어 프런트엔드 개발의 핵심인 테스트 코드에 발을 디딘 시간이었습니다.
저는 퍼블리셔 경력으로 자바스크립트를 사용해왔지만, 이렇게 체계적인 테스트 코드를 작성해본 경험은 전무했습니다. 하지만 채용 공고에서 자주 접했던 테스트 코드는 늘 궁금증이었고, 특히 이전 일부 과제에서 코치님들이 테스트 통과를 필수 조건으로 설정하면서 '이렇게 돌아가는구나'를 간접적으로 경험하며 그 필요성을 절감했습니다. 이번 챕터는 이러한 궁금증을 해소하고 테스트 코드의 목적과 패턴을 직접 파헤쳐보는 결정적인 시간이었습니다.

사실 이번 과제는 난이도를 선택할 수 있었는데 Hard 난이도를 선택하면 환경 설정까지 직접 구축해야 하는 고난도였습니다. 저는 현재 단계에서 필요한 테스트 코드 작성과 리팩토링에 집중하는 것만으로도 충분한 배움이라고 판단하여 Medium 난이도를 선택했습니다. 하지만 이 Medium 난이도만으로도 저에게는 엄청난 도전이었고, 이 과정을 통해 비로소 테스트 코드의 진짜 목적을 이해할 수 있었습니다. 단순히 버그를 찾는 도구가 아니라, 코드의 안정성을 보장하고 리팩토링할 때 자신감을 주는 강력한 도구라는 것을 체감했습니다.

---

과제를 통해 얻은 것들

테스트 코드의 개념을 실제로 경험하다

🧪 테스트 코드란?
내가 작성한 코드가 예상대로 동작하는지 확인하는 코드입니다. 단순히 버그를 찾는 도구가 아니라, 코드의 안정성을 보장하고 리팩토링할 때 자신감을 주는 강력한 도구입니다.

처음에는 테스트가 왜 필요한지도 모르고, 왜 중요한지도 의문이었습니다. '그냥 기능만 잘 만들면 되지 않나?' 라고 생각했거든요. 하지만 과제를 진행하면서 "아, 이래서 테스트가 중요한구나" 깨달았습니다.

특히 AI 시대뿐만 아니라 협업 환경에서도 더욱 중요한 역할을 한다는 것을 체감했습니다. AI가 코드를 잘 짜더라도 의도치 않게 기존 코드를 망가뜨릴 수 있고, 팀원이 코드를 수정할 때도 마찬가지입니다. 테스트가 "어? 이거 이상한데?" 알려주는 역할을 해줄 수 있다는 것을 알게 되었습니다.

체계적인 단계별 테스트 작성 과정

가장 먼저 한 작업은 의존성 패키지 설치와 테스트 유틸리티 추가부터 시작해서, unit 테스트 코드 전면 개선을 했습니다. 그 다음에 hooks 테스트 코드 작성으로 이어졌는데, 이 과정에서 테스트 작성의 패턴을 익힐 수 있었습니다.

일정 검색, 달력 뷰, 알림 기능 등 각각의 기능을 테스트하는 과정에서 정말 많은 것을 배웠습니다. 특히 boolean 검증 메서드 개선 과정에서 병준님의 회고 덕분에 깨달은 중요한 차이점이 있었습니다:

// ❌ 내가 사용한 toBeTruthy : 의도하지 않은 값도 통과 가능
expect(result).toBeTruthy(); // 1, "hello", {} 등도 통과

// ✅ toBe : 정확한 boolean 타입과 값만 통과
expect(result).toBe(true); // 오직 true만 통과

이 회고를 통해 더 엄격한 테스트가 더 좋은 테스트라는 것을 깨달았습니다. 단순히 동작하는 것보다 정확한 동작을 검증하는 것이 중요하다는 것을 알게 되었습니다.

컴포넌트 분리와 테스트 가능성

과제로 주어진 정리되지 않은 App.tsx를 어떻게 작은 단위로 분리할지 막막했습니다. 하지만 "각 컴포넌트가 단일 책임을 갖도록 구조를 개선"하는 것이 중요하다는 것을 다시 한 번 깨달았습니다.

결국 EventForm, EventManager 등으로 분리했는데, 나누니까 각각 테스트하기 쉬워졌습니다. 이 경험을 통해 컴포넌트 분리는 단순히 코드를 나누는 것이 아니라, 테스트 가능성을 높이는 것이라는 것을 알게 되었습니다.

유틸리티 함수와 상수 분리

유틸리티 함수 추가 및 상수 분리 작업을 하면서 코드의 가독성과 유지보수성이 얼마나 향상되는지 체감했습니다.

알림 라벨 생성, 반복 정보 포맷팅 등의 함수를 추가하고, 알림 옵션, 카테고리, 요일 등의 상수를 분리했습니다. 매직 넘버를 상수로 분리하고, 공통 로직을 유틸리티 함수로 추출하는 과정에서 코드 품질이 크게 개선되는 것을 느꼈습니다.

커스텀 훅 추출의 어려움

이벤트 관련 커스텀 훅 3개 추출 과정에서 정말 많은 고민을 했습니다:

• 이벤트 중복 처리 로직
• 이벤트 폼 검증 로직
• 이벤트 표시 렌더링 로직

처음엔 "왜 나눠야 하지?" 생각했는데, 나누니까 각각 테스트하기 쉬워졌습니다. 이 경험을 통해 로직을 분리하는 것이 테스트 가능성을 높이는 것이라는 것을 알게 되었습니다.

MSW를 활용한 통합 테스트

integration 테스트 작성 과정에서 MSW를 처음 접했습니다. 처음에는 MSW가 뭔지도 모르고, 왜 API를 모킹해야 하는지도 이해가 안 됐습니다. Medium 난이도라서 MSW 환경은 이미 세팅되어 있었지만, 실제로 테스트 코드를 작성해보니 테스트 환경에서 실제 서버 없이도 API 호출을 테스트할 수 있다는 것을 알게 되었습니다. MSW를 사용하면 다양한 API 응답 상황을 시뮬레이션할 수 있어서 테스트의 안정성이 크게 향상된다는 것을 깨달았습니다.

---

기술적 고민과 의사결정

테스트 시나리오 작성의 어려움

과제에서 의도적으로 일부 테스트를 모호하게 만들어두고, 테스트로 적절하지 않으면 수정하라는 과제였습니다. 초반에 가장 고민했던 부분은 테스트 시나리오를 어떻게 작성해야 할지였습니다. "이 테스트가 정말 의미가 있나?" 의문이 들 때가 많았습니다.

그 중 시간 관련 테스트(vi.setSystemTime)에서 혼란스러웠습니다. setupTests.ts에서 vi.setSystemTime(new Date('2025-10-01'))로 시스템 시간을 10월 1일로 고정하고, easy.useCalendarView.spec.ts의 테스트 항목 중 'holidays는 10월 휴일인 개천절, 한글날, 추석이 지정되어 있어야 한다'는 부분이 있는데, 이것이 올바른 접근 방식인지 고민이 많았습니다.

코치님께 질문드린 결과, 현재 접근 방식이 올바르다는 답변을 받았습니다. 시간에 의존적인 테스트는 항상 예측 가능하게 만드는 것이 중요하고, vi.setSystemTime으로 고정하는 것은 좋은 방법이라고 하셨습니다. 다만 더 명시적으로 테스트하려면 각 테스트 케이스마다 다른 시간을 설정해서 검증하는 방법도 있다는 조언을 받았습니다.

AI 의존 최소화 노력

과제를 진행하면서 AI 의존을 최대한 줄이고 직접 해결하려고 노력했습니다. 기본과제는 AI 사용을 줄이고 직접 해결하려고 노력했고, 반복적인 부분은 반복학습으로 해결했습니다.

코치님께서는 "직접 고민하고 찾아보는 과정이 시간은 오래 걸리지만 더 깊은 이해를 가져다준다"고 하시면서, "나중에는 AI를 사용하는것도 고민하고 찾아보는 과정의 도구로 활용하면서도 지금처럼 토론, 자료, 논의, 사유등을 통한 고민들도 함께 해보길 바래요"라고 조언해주셨습니다.

시간이 오래 걸렸지만 더 깊이 있는 학습이 됐습니다. 특히 테스트 코드 작성의 기본기를 다지고, 실무에서 활용할 수 있는 경험을 쌓을 수 있었던 소중한 시간이었습니다.

의미있는 테스트 시나리오 작성 팁

코치님께서 주신 조언을 통해 테스트 시나리오 작성에 대한 구체적인 방법을 배웠습니다:

1. 구현 과정을 테스트로 변환: 내가 구현한 내용이나 디버깅할 때 어떻게 테스트하고 있는지를 생각해보기
2. 요구사항과 일치: 기획서의 내용(=요구사항)과 일치하는지 확인하는 과정을 테스트 코드화하기
3. 엣지 케이스 고려: 사용자가 의도치 않은 입력을 할 때 무엇이 잘못될 수 있을지 생각해보기
4. 경계값 테스트: "무엇을 테스트할까?"가 완성되면 "무엇이 잘못될 수 있을까?"를 추가로 생각해보기

---

KPT 회고

Keep (계속 유지하고 싶은 점)

• 직접 고민하고 찾아보는 과정을 통한 깊이 있는 학습
• 반복적인 테스트 작성을 통해 특정 패턴을 익히는 학습 방법
• 작은 단위의 커밋을 통해 변경 이력을 명확히 기록
• 질문 항목을 통해 코드의 의미를 깊이 있게 생각하는 습관

Problem (개선이 필요한 문제점)

• 테스트 시나리오 작성의 어려움 - "이 테스트가 정말 의미가 있나?" 의문
• HTML 중첩 태그 경고 - EventOverlapDialog에서 hydration error 발생
• 테스트 코드 중복 - 헬퍼 함수로 더 체계적으로 정리 필요

Try (앞으로 시도해 볼 점)

• 테스트 우선 개발(TDD) 패턴을 실전에서 연습
• React Testing Library의 async 유틸리티 더 깊이 학습
• E2E 테스트 작성 방법 익히기
• AI를 도구로 활용하면서도 토론, 자료, 논의를 통한 고민도 함께하기
• 항해 끝나면 배운 내용 정리하며 개인 프로젝트에 적용해보기

---

추천인 코드

제 후기를 보고 프로그램에 관심이 생기셨다면, 감사한 마음으로 수강료 할인을 받을 수 있는 추천인 코드를 드립니다.

수강 신청 시 추천인 코드 WlHJDO 입력하면 20만 원 할인이 적용되며, 자세한 커리큘럼과 일정은 아래 링크에서 확인하실 수 있습니다.

추천인 코드 : WlHJDO

https://hanghae99.spartacodingclub.kr/plus/fe