요약

• 기간: 11/30(토) ~ 12/06(금)
• 한 일:
  • 피드백 반영
  • 테스트코드 작성

피드백 반영

1. 클래스와 DOM 엘리먼트 결합도 줄이기

• 기존: 클래스 내에서 특정 아이디로 DOM에 직접 접근
• 생성자에 엘리먼트 객체를 전달받는 방식으로 변경
• before
  • 
• after
  • 

console.log9hello

2. 요구사항에 맞지 않는 스펙 수정

• 기존 : 제품버튼 클릭 시 잔액이 부족한 경우 3초 동안 제품 금액 표시하기
• 요구사항 : 잔액이 부족한 경우 제품을 누르는 동안만 제품 금액 표시하기
• onClick과 setTimeout으로 구현했었는데, mouseDown, mouseUp 이벤트로 분리.

추가 과제

이번 주에는 테스트 코드 작성이라는 추가 과제가 있었다. 프론트엔드에서 테스트 코드를 작성하는 건 처음이라 많이 배울 수 있었다.
프로젝트에서 Vite를 사용하고 있었기에, 테스트는 Vitest로 진행했다.

테스트 환경 설정

1. vitest 설치
2. vite 설정파일 수정(test)
   

테스트코드 작성

describe("테스트설명", ()=>{
  beforeEach(()=>{
  	// 각 테스트가 실행되기 전에 반복적으로 실행할 코드
    // 초기 설정값 세팅에 주로 사용됨.
  });
  
  it("테스트명", ()=>{
    // 테스트 (
  })
  
  afterEach(()=>{
    // 각 테스트 후 반복적으로 실행할 코드 
    // 테스트 중 생성된 객체 정리하는데 주로 쓰임
  });
});

느낀점

테스트 코드를 작성하니 리팩토링이 훨씬 수월해졌다. 이전에는 하나의 기능을 수정하면 다른 기능이 깨지는 경우가 많았는데, 테스트 코드 덕분에 안심하고 수정을 할 수 있었다.
또한, 테스트를 수행하면서 이전에는 미처 발견하지 못한 버그들을 발견할 수 있었다.

테스트 코드를 작성해보니, 테스트가 쉬운 코드에는 의존성이 적고, 함수의 단위가 명확하다는 점을 알게 되었다. 함수 이름만 보고도 어떤 로직을 수행하는지 쉽게 파악할 수 있어야 한다.