이번에 과제를 하면서 회사에서 저한테 기능을 맡긴다면 어떻게 구현해서 제출할까에 초점을 두고 만들어보았습니다. 과제는 시간표 구현이라는 하나의 기능 안에 비니지스 로직 - API연동 - UI구현이라는 복잡한 구조를 요구하기 때문에 속도 보다는 안정성을 좀 더 챙길 수 있는 TDD방식으로 구현해보았습니다. TDD를 사용할정도로 복잡한 로직은 아니지만, TDD방식으로 구현해보는게 처음이라 시도해보고 싶기도 했고, 앞으로 TDD방식으로 개발하는 습관이 중요해질 것 같아서 이방식으로 구현해본 것도 있습니다.

제작과정은 크게 4단계로 구분지어서 개발하였습니다.

1. 순수로직 테스트 및 함수 구현
2. 응답데이터 전처리 테스트 및 함수 구현
3. api응답 연동
4. UI구현 및 데이터 연동

순수로직 테스트 및 함수 구현 | 응답데이터 전처리 테스트 및 함수 구현

vitest를 이용해서 테스트코드를 작성하였습니다. (다른 라이브러리간의 차이를 조사해서 쓴건 아니고, 제가 vite를 사용하고 있어서 vite에서 가장 유명한 vitest를 사용했습니다.)

구현하던중 같은날 + 15분 간격으로 분리되어 있는 동일한 과목은 하나의 UI로 합쳐야 하는 상황이 있었습니다. (15:00~16:15, 16:30~17:45 ⇒ 15~17:45로 보여야함)

2가지 방식으로 구현이 가능할 것 같아 고민했었습니다.

1. 응답 데이터를 전처리하여 15분 간격의 두 데이터를 하나의 데이터로 합쳐서 관리한다.
2. 두 데이터를 합치지 않고 관리하다가, UI에 보여줄 때 합쳐서 보여준다.

저는 두 가지 방식 중 1번을 선택했습니다. 2번 방식은 UI 계층이 데이터 가공이라는 비즈니스 로직까지 부담하게 되기 때문에 데이터 처리와 UI 계층의 경계가 모호해지는 결과를 가져올 것 같았습니다.

위와 같은 과정을 통해 만들었고, 테스트 코드를 통해 순수로직 함수와 응답데이터 전처리 함수가 잘 동작하는지 검증을 마친 뒤 다음작업으로 넘어갔습니다.

API연동

데이터 요청은 axios, 데이터관리는 탠스택쿼리를 이용하여 했습니다.