TDD 챌린지 1주 차 미션 진행하기 - 핵심 기능 목록 구현과 테스트 명세 작성

TMI) 이전 게시글이 1일 차 였는데 갑자기 1주 차가 됐냐면..

1일 차에 OT 진행 후 주차 별 미션이 주어지기 때문이다. (총 4주 차까지)

🚓 TDD 1주 차 미션

TDD 챌린지 1주 차 미션은 만들고 싶은 앱과 핵심 기능을 정의하여 테스트 명세를 작성하는 것이다.

뭐 만들지 고민하다가 '내가 사용할 앱'을 만들기로 했다.

사용자가 있는 앱을 고려하라고 하셨기 때문에 나부터 쓸 수 있는 앱으로 정했다.

 

썸네일 생성기를 만들 예정인데

기술 스택은 HTML, CSS, JS (로 예상), 테스트 도구는 Cypress를 쓸 듯 하다.

 

작은 기능부터 만들어서 확장하라는 말에 작은 기능(핵심 기능)부터 만든 후 세부 기능을 확장하는 방향으로 진행하고자 한다.

구현할 목록과 테스트 명세는 다음과 같이 정의해보았다.

 

🚓 핵심 기능 구현 목록

- 인풋창에 제목을 입력할 수 있다. (글자수 제한: 10자)

- 인풋창에 내용을 입력할 수 있다. (글자수 제한: 20자)

- 제목 인풋을 입력했다면 썸네일 미리보기 화면에 작성한 제목이 표시된다.

- 내용 인풋을 입력했다면 썸네일 미리보기 화면에 작성한 내용이 표시된다.

- 랜덤 배경 색상 버튼을 클릭하면 랜덤한 색상 코드를 가진 단색 배경으로 변경할 수 있다.

- 썸네일 생성 버튼을 누르면 만든 썸네일이 이미지화 된다.

 

🚓 테스트 명세서

- 처음 페이지 접속 시 썸네일 미리보기 제목에 'Untitled', 내용에 'Please enter it.'이 표시된다. 

- 제목 인풋 박스에 사용자가 '제목입니당'을 입력하면 썸네일 미리보기 제목에 '제목입니당'이 표시된다. 

- 내용 인풋 박스에 사용자가 '내용이네용'을 입력하면 썸네일 미리보기 내용에 '내용이네용'이 표시된다. 

- 랜덤 색상 버튼을 누르면 배경 색상이 랜덤 색상 코드로 변경된다. 

- 썸네일 생성 버튼을 누르면 이미지화 되어 화면에 나타난다.

 

고민되는 부분 🤔

썸네일 생성 버튼을 클릭했을 때 이미지화 되는 부분을 테스트로 어떻게 나타내야하는가..?

 

---

💜 1주 차 미션 진행 회고

기능 구현 목록 작성 경험은 있었는데 테스트 명세서 작성은 처음이다.

테스트 도구도 기능 단위 테스트를 위해 Jest를 조금 사용해봤던 것이 전부였는데

e2e(end to end) 테스트를 도전하게 될 줄은 몰랐지~

 

싸이프레스랑 아직 친해지지도 못했는데 다음 주 차(2주 차)에는 실제 TDD 사이클 1회 이상 진행해보기 & 구현까지라고 한다.

이미지화하는 부분은 canvas를 사용하게 될 것이므로 (해본 적은 없지만 대략적인 구현 방식 정도만 알고 있다.)

이번에 썸네일 생성기 만들면서 직접 구현해볼 수 있을 것 같다. 재밌겠다.

 

나를 위한 앱을 만들고 싶은데 난 뭐가 필요할까..?.. 하며 생각은 여러 차례 해봤었는데.

이 기능도 넣고 저 기능도 넣어야지 하면서 머릿속에서 스케일이 엄청 커져서 시도도 못했던 것 같다.

ㅋㅋㅋ내 분수를 알아야지. ㅠㅠㅠ 소박해지기로 했다.

 

블로그 쓰면서 썸네일의 부재로 썸네일을 만드려고 어도비 포토샵을 키곤 했었는데 그마저도 귀찮다.

이번에 그 니즈를 개발로 해소해보자.🥰