TDD 미션 시작🔍

주제 선정

사이드 프로젝트 주제로, 썸네일 이미지를 생성해주는 웹으로 결정했다.
벨로그 글을 올릴 때마다 썸네일 이미지를 추가해주고 싶었는데, 일일이 이미지를 만드는 것이 생각보다 귀찮기도 하고 번거로워서 썸네일 생성 웹을 직접 만들면 자주 사용할 수 있을 것이라고 생각했고,
개발 블로그를 하고 있는 친구들 중 썸네일이 필요한 친구가 있으면 사이트를 같이 공유해서 유용하게 사용할 수 있을 것 같아 이렇게 주제를 선정하게 되었다 😺

테스트 명세 작성

우선 챌린지 1주차 미션으로 핵심 기능 및 명세를 작성하였다.
(공유를 위해 노션으로 내용을 작성하였다)
1주차 미션

우선 테스트 명세를 작성하면서 내가 생각하는 핵심 기능 위주로 간단하게 화면 UI를 구성했다.

개발환경 및 테스트 자동화 도구

프론트엔드는 React, TypeScript를 사용하고
테스트도구로는 동준님께서 가이드해주신 Cypress를 사용하였다.
Cypress는 웹 애플리케이션용 프런트엔드 테스트 도구라고 한다.
cypress 공식 사이트

npm install cypress --save-dev
npx cypress open

로 설치 및 실행시키면 된다.
나는 cypress로 파일 업로드되는 것도 테스트해보아야 해서

npm i cypress-file-upload

라이브러리도 추가로 설치했다.

핵심 기능부터 빠르게 만들기

웹의 핵심 기능은 "썸네일에 텍스트를 입력하여 이미지 포맷으로 저장한다." 이기 때문에, 핵심 기능부터 먼저 구현하고, 차례로 다음 테스트명세로 개발을 진행했다.

시행착오와 느낀점

1. html 👉 이미지화시키기

html을 이미지화시키는 라이브러리 중 가장 유명한 html2canvas 라이브러리를 사용했다.
핵심기능을 먼저 만들고, css를 적용하면서부터 input 안의 텍스트들이 다운로드받은 이미지에서 제대로 보이지 않는 문제가 있었다.

검색해본 결과 html2canvas는 html의 css를 정확하게 인식하지 못하는 문제가 있다고 하고, 나와 비슷한 문제를 겪는 사람들은 다른 라이브러리로 변경했다고 했다😿
그리고 대체제로 사용할만한 라이브러리를 찾다가
Here’s Why I’m Replacing html2canvas With html-to-image in Our React App 글을 발견했고, html-to-image 라이브러리로 변경하여 검증해본 결과 텍스트 잘림 문제를 해결할 수 있었다.
이 문제로 생각보다 시간을 많이 소요하게 되어서, 라이브러리를 선택하기 전 시간에 급급해 하지 않고 사전조사와 사전 테스트를 통해 개발 시간을 단축시키는 것이 중요하다는 것을 다시 한번 배웠고, 사용하기 적합한 라이브러리인지 검증하는 것의 중요성을 다시 한 번 느끼게 되었다.

2. TDD

TDD 프론트엔드 개발을 처음 경험해보았는데, 직접 경험해보면서 몇 가지 느낀점들이 있다.

• 요구사항이 명확해진다
  어떤 한 기능을 개발하다가 그 기능에 부가적인 기능들을 더 추가하고 싶어질 때가 있다. 이때 정해진 명확한 목표 없이 개발을 하다 보면 꼭 필요한 주기능이 뒷전이 되고, 부기능을 개발하는데 집중하게 되기도 한다. TDD로 개발을 하게 되면 테스트 명세 작성을 통해 핵심적인 기능에 대해 우선적으로 고민해보고, 그 이후 부가 기능들을 하나씩 고민해나갈 수 있기 때문에, 목표를 달성하기 수월해지는 것 같다.

• 코드 리팩토링에 대한 불안감이 감소한다
  리팩토링을 할 때, 코드를 수정하고나서 혹여나 잘 동작하던 기능이 다른 방식으로 동작할까봐 불안했던 적이 있다. 하지만 테스트 코드가 있는 상태에서는 코드 변경을 통해 기존 동작이 영향을 받지 않는지 빠르게 확인해볼 수 있었고, 이를 통해 발생할 수 있는 버그를 사전에 예방할 수 있었다.

이번 경험을 통해 테스트 자동화의 이점들을 직접 느껴볼 수 있었고,
cypress라는 도구에 대해 더 알아보고 싶고 다른 프로젝트에도 적용해보고 싶다는 생각이 들었다.
이번 프로젝트는 토이프로젝트고 백엔드와 연동되어 있는 부분은 없었기 때문에, 보다 큰 규모의 프로젝트일 때는 어떤 식으로 테스트 명세를 작성하는 것이 좋을지 사례를 찾아보아야겠다.🧐