geonhwiii 님의 상세페이지[7팀 정건휘] Chapter 3-2. 프론트엔드 테스트 코드

8주차 과제 체크포인트

기본 과제

필수

  • 반복 유형 선택
    • 일정 생성 또는 수정 시 반복 유형을 선택할 수 있다.
    • 반복 유형은 다음과 같다: 매일, 매주, 매월, 매년
      • 31일에 매월을 선택한다면 -> 매월 마지막이 아닌, 31일에만 생성하세요.
      • 윤년 29일에 매년을 선택한다면 -> 29일에만 생성하세요!
  • 반복 일정 표시
    • 캘린더 뷰에서 반복 일정을 시각적으로 구분하여 표시한다.
      • 아이콘을 넣든 태그를 넣든 자유롭게 해보세요!
  • 반복 종료
    • 반복 종료 조건을 지정할 수 있다.
    • 옵션: 특정 날짜까지, 특정 횟수만큼, 또는 종료 없음 (예제 특성상, 2025-06-30까지)
  • 반복 일정 단일 수정
    • 반복일정을 수정하면 단일 일정으로 변경됩니다.
    • 반복일정 아이콘도 사라집니다.
  • 반복 일정 단일 삭제
    • 반복일정을 삭제하면 해당 일정만 삭제합니다.

선택

  • 반복 간격 설정
    • 각 반복 유형에 대해 간격을 설정할 수 있다.
    • 예: 2일마다, 3주마다, 2개월마다 등
  • 예외 날짜 처리:
    • 반복 일정 중 특정 날짜를 제외할 수 있다.
    • 반복 일정 중 특정 날짜의 일정을 수정할 수 있다.
  • 요일 지정 (주간 반복의 경우):
    • 주간 반복 시 특정 요일을 선택할 수 있다.
  • 월간 반복 옵션:
    • 매월 특정 날짜에 반복되도록 설정할 수 있다.
    • 매월 특정 순서의 요일에 반복되도록 설정할 수 있다.
  • 반복 일정 전체 수정 및 삭제
    • 반복 일정의 모든 일정을 수정할 수 있다.
    • 반복 일정의 모든 일정을 삭제할 수 있다.

심화 과제

  • 이 앱에 적합한 테스트 전략을 만들었나요?

각 팀원들의 테스트 전략은?

Given-When-Then BDD 전략 사용

  • Given: 테스트의 전제 조건과 초기 상태를 명확히 정의합니다.
  • When: 테스트하고자 하는 구체적인 동작이나 이벤트를 기술합니다
  • Then: 예상되는 결과나 상태 변화를 명시합니다.

합의된 테스트 전략과 그 이유는 무엇인가요?

BDD(Given-When-Then) 전략을 선택한 이유:

  1. TEO 코치님으로 부터 배운 테스트 방식이기도 하고,
  2. 이해하기 쉬워서 팀원들이 테스트 의도를 명확하게 파악 가능하고,
  3. 비즈니스 요구사항과 직접적으로 연결되 명세를 파악하기 쉽고,
  4. TDD Red-Green-Refactor 사이클과 유사한 방식으로 진행할 수 있어서 선택하였습니다!

추가로 작성된 테스트 코드는 어떤 것들이 있나요?

반복 일정 기능 관련 TDD 테스트 (src/__tests__/unit/repeatEvent.spec.ts)

  1. 31일 기준 매월 반복 처리

    • 31일이 없는 달은 제외된다
  2. 윤년 2월 29일 매년 반복 처리

    • 평년에는 해당 날짜가 생성되지 않는다
  3. 반복 종료 조건 처리

    • 특정 날짜까지 종료 조건이 적용된다
    • 특정 횟수만큼 종료 조건이 적용된다
  4. 반복 간격 계산

    • 매일 반복에 2일 간격이 적용된다
    • 주간 반복에 2주 간격이 적용된다
  5. 반복 일정 전체 조작

    • 반복 일정 전체 수정 시 모든 관련 일정이 업데이트된다
    • 반복 일정 전체 삭제 시 모든 관련 일정이 제거된다
  6. 예외 날짜 처리

    • 반복 일정 중 특정 날짜가 제외된다
    • 예외 날짜가 없으면 모든 반복 일정이 생성된다

총 10개의 새로운 테스트 케이스 추가하여 반복 일정의 핵심 비즈니스 로직 검증


과제 셀프회고

  • 처음에 과제를 파악하지 않고 시작해서, 어떤 걸 해야하는지 몰랐던 점이 컸던 것 같습니다.
  • TDD라고 해서 무작정 테스트를 작성해야한다고 생각했는데, 먼저 프로젝트를 이해하고 하는게 낫다고 생각합니다.
  • TDD, BDD의 중요성과 생산성에 대해서 꽤 많은 점을 배울 수 있었습니다.

기술적 성장

  • 과제를 시작하기 전에, 여러 TDD에 대한 영상을 많이 학습했습니다.

  • "feconf의 프론트엔드에서 TDD를 하는 방법과", "kakao에서 TDD를 통해 개발기간을 단축시킨 사례" 였습니다.

  • Given-When-Then 구조의 장점은 사람이 이해하기 쉽고, AI도 이해하기 쉽다는 것이 큰 장점입니다.

  • 이를 통해, 프로젝트의 명세서를 테스트코드로 명확하게 작성하고, 빠르게 테스트를 작성하여 생산성과 안정성을 확보할 수 있습니다.

코드 품질

  • 실제로 테스트코드에 모두 Given-When-Then 구조로 가져가니, 테스트 코드의 가독성이 높아졌습니다.
  • 기존에는 실행해서 성공하는 것에 만족했다면, 테스트 코드를 보더라도 스토리가 보여서 어떤 내용을 작성한 건지 알기 쉬워졌습니다.
// 31일 매월 반복 테스트 (PR 템플릿 필수 요구사항)
describe('generateRepeatDates - 31일 기준 매월 반복 처리', () => {
  test('31일이 없는 달은 제외된다', () => {
    // Given: 31일 기준 매월 반복 설정이 있는 이벤트
    // When: generateRepeatDates 함수로 반복 날짜를 계산할 때
    // Then: 31일이 없는 달(2월, 4월, 6월, 9월, 11월)은 제외되어야 한다
  });
});

// 윤년 처리 테스트 (PR 템플릿 필수 요구사항)
describe('generateRepeatDates - 윤년 2월 29일 매년 반복 처리', () => {
  test('평년에는 해당 날짜가 생성되지 않는다', () => {
    // Given: 윤년 2024년 2월 29일 기준 매년 반복 설정이 있는 이벤트
    // When: generateRepeatDates 함수로 향후 3년간 반복 날짜를 계산할 때
    // Then: 평년(2025, 2026, 2027)에는 해당 날짜가 생성되지 않아야 한다
  });
});

학습 효과 분석

  • 계속 Given-When-Then구조를 가져가진 않겠지만, 프로젝트의 이해도가 부족하거나 개발 초기단계라면 적극적으로 도입해보고 싶습니다.
  • 설계에 조금 더 시간을 많이 투자하면, 뒤에 코드를 개발하거나 수정할 때 굉장히 적은 비용이 발생하는 것을 알 수 있었습니다.
  • 실제로 이번 과제는 TDD를 작성해서 그런지, 이전보다 리팩토링을 하는 과정이 매우 적었습니다.

리뷰 받고 싶은 내용

  • Given-When-Then 구조로 TDD를 작성해보니 프로젝트 설계의 중요성이 더 커지는 것 같아요.
  • 실제로 현업에서 사용해보려고 했는데, 기한이 촉박하다보니 UI 개발에 다시 치중하게 되었어요.
  • 스토리북을 작성하는 것은 테스트의 단계중 어디에 해당하는 걸까요?
  • 컴포넌트 개발 -> 스토리북 테스트 -> TDD를 통한 화면 퍼블리싱 -> 디자인 반영 -> ...
    • 위같은 개발 방법으로 시도해보면 좋을까요?!

과제 피드백

수고했습니다. 이번 과제는 TDD 방법론을 실제로 경험해보면서 테스트 주도 개발의 Red-Green-Refactor 사이클을 체험하는데 목적이 있었습니다.

Given-When-Then BDD 전략을 선택했군요. 좋습니다. 모든 테스트 구조가 이렇게 정형화되는 건 아니지만 거의 대부분의 경우를 받아 줄 수 있고 특히나 입문하기에 좋죠. 작성해준 것 처럼 "사람이 이해하기 쉽고, AI도 이해하기 쉽죠". 실제로 BDD 구조는 비즈니스 요구사항을 FE 코드로 번역하는 과정에서 의도를 명확하게 전달하는 좋은 방법이에요.

"기존에는 실행해서 성공하는 것에 만족했다면, 테스트 코드를 보더라도 스토리가 보여서 어떤 내용을 작성한 건지 알기 쉬워졌습니다." 라는 점에서 TDD의 챕터의도가 잘 전달이 된것 같아 좋네요. 실제로 이러한 멘탈 모델을 알고 있으면 TDD를 설사 하지 못하더라도 기획을 파악하고 코드를 어떻게 만들면 좋을지를 더 선명하게 나눠서 볼 수 있는 관점이 생긴답니다.

"처음에 과제를 파악하지 않고 시작해서" 어려움을 겪었다고 하셨는데, 이것도 좋은 학습 경험이었을 것 같아요. TDD는 "무작정 테스트 작성"이 아니라 요구사항을 이해하고 설계하는 과정이 직관적으로 필요로 하는데 연습이 되지 않으면 어려운 부분이니까요.

이번 챕터에서 배운 새로운 관점이 앞으로 개발을 하는데 크게 도움이 되기를 바래요.

Q) Given-When-Then 구조로 TDD를 작성해보니 프로젝트 설계의 중요성이 더 커지는 것 같아요. 실제로 현업에서 사용해보려고 했는데, 기한이 촉박하다보니 UI 개발에 다시 치중하게 되었어요. 스토리북을 작성하는 것은 테스트의 단계중 어디에 해당하는 걸까요? 컴포넌트 개발 -> 스토리북 테스트 -> TDD를 통한 화면 퍼블리싱 -> 디자인 반영 -> ... 위같은 개발 방법으로 시도해보면 좋을까요?!

=> 스토리북은 엄밀히 말하면 테스트 도구라기보다는 컴포넌트 문서화 및 개발 환경 도구에 가깝습니다. 지난 챕터에서 배웠겠지만 프론트엔드의 로직이 포함된 컴포넌트와 디자인 컴포넌트를 만드는건 완전히 별개의 방식인데 UI 컴포넌트들을 만들고 관리하고 문서화를 하기 위해서는 별도의 과정이 필요하니까요. 그래서 디자인과 긴밀한게 일하며 디자인 시스템을 만드는 팀에서는 스토리북을 적극적으로 사용하지만 모든 개발에서 스토리북을 쓰지는 않습니다.

=> 아니면 퍼블리셔와 개발이 나눠져 있을때 (사람이건 업무건간에) 대개 퍼블리셔가 새로운 디자인을 작업을 해도 코드에 반영하기가 어렵죠. 왜냐하면 실제 코드에 반영되기 위해서는 로직이 반드시 들어가야 하니까요. 이때 퍼블리셔를 담당한 사람은 디자인이 오자마자 그냥 HTML + CSS 그리고 일부 JS만 별도로 작업해서 스토리 북으로 배포를 해버립니다. 이렇게 하면 실제 개발에 반영 되기 전에 디자이너와 기획자는 스토리북을 통해서 디자인을 미리 볼 수 있을테니까요. 그러면서 글자 수나 실제 컨텐츠가 반영이 되면 어떻게 보이는지 등등을 확인할 수가 있죠.

=> TDD를 할 수 있으면 좋습니다. 다만 현실적으로 너무 어렵더라면 테스트 코드가 아니더라도 새로운 기획서를 받아보면 다음과 같은 식으로 만들어 보는 것 정도는 해보면 좋습니다. 기획서가 GWT형식으로 전달이 되지는 않고 화면과 요구사항와 설명이 뒤죽박죽일테니까요.

// Given: 윤년 2024년 2월 29일 기준 매년 반복 설정이 있는 이벤트 // When: generateRepeatDates 함수로 향후 3년간 반복 날짜를 계산할 때 // Then: 평년(2025, 2026, 2027)에는 해당 날짜가 생성되지 않아야 한다

그렇게 요구사항을 컴퓨터가 이해하기에 좋도록 구조화 시키는 것이 개발을 잘하는 방식이므로 TDD를 이렇게 한번 활용해보는것도 추천합니다. 이게 발전하면 직관적으로 어떤 태스크를 만들어야 하는가를 더 잘하게 될거에요.

=> 스토리북의 경우 마스터를 하겠다는 생각보다는 실제 코드에 반영하기전에 디자인이 나오면 디자인만 먼저 작업해서 mock과 함게 디자이너에게 컨펌의 형태로 활용해보자 생각해보세요. 그러면 훨씬 더 빨리 코드와 관계없이 피드백을 주고 받을 수 있게 되어 커뮤니케이션의 호흡이 더 짧아지고 좋아지게 될거에요!

수고많았습니다! 다음 과제도 화이팅입니다!

OFF: 안녕하세요! 오프입니다. 제가 결과를 수정했는데요. 심화과제를 불합격 시킨 이유는 전에 공지에 공유드렸듯이 e2e, 시각적 회귀테스트가 없다는 맥락이였습니다. 아쉽지만 참고 부탁드립니다ㅠㅠ