Published on

SummaryWagon

프로젝트 요약

  • 개발 기간 : 2023.05.01 ~ 06.15
  • 기술 스택 : Nextjs, React Query, Jest
  • 깃허브 : 바로가기
  • 테크 아티클이나 블로그의 내용을 링크를 통해 세줄 요약 할 수 있습니다.
  • 요약한 아티클을 아카이브해서 언제든 찾아 볼 수 있습니다.
  • 최근 가장 많이 요약된 아티클을 쉽게 볼 수 있습니다.
  • 키워드 추출 알고리즘을 통해 키워드를 추출하였고, 키워드별로 아티클을 볼 수 있습니다.

프로젝트 개요

평소 개발 공부를 할 때 블로그나 기술 아티클을 참고하는 경우가 많았습니다.
하지만 많은 글들을 읽고 이해하는 데에는 상당한 시간과 노력이 소요되곤 했습니다.
이러한 경험으로부터, 글 요약 기능이 있다면 학습 시간을 단축하고 핵심 내용을 빠르게 파악하는 데에 도움이 될 것이라고 생각하게 되었습니다.
또한, 요약된 내용을 먼저 읽고 글을 본문까지 읽으면 이해하는 데에 더욱 효율적일 것으로 기대하게 되었고, 'SummaryWagon'이라는 웹 애플리케이션을 개발하게 되었습니다.
저희 서비스는 OpenAI를 활용하여 사용자가 원하는 링크를 입력하면 해당 글의 세 줄 요약을 즉시 확인할 수 있도록 제공합니다.
이렇게 간결하게 요약된 내용은 개인 히스토리에 저장되어, 언제든지 다시 찾아볼 수 있습니다. 이러한 기능을 통해 사용자들에게 시간을 절약하면서도 중요한 내용을 빠르게 파악하는데에 큰 도움을 주고자 합니다.
AI 기술은 빠르게 발전하고 있으며, 이제는 우리 생활과 업무에 깊이 녹아들어 많은 부분을 효율적으로 지원해줍니다.
그러나 기술적인 내용에 대한 이해가 부족한 사용자들에게는 AI 기술을 활용하는 것이 쉬운 일이 아닐 수 있습니다.
따라서 저희 서비스는 이러한 사용자들에게 AI 기술을 친숙하고 접근하기 쉬운 형태로 제공하여, 정보의 격차를 해소하고 더욱 포괄적인 지식 공유를 실현하고자 합니다.

프로젝트 기여

1. 테스트 코드를 도입하여 개발 효율 증대

기존 프로젝트를 완성한 이후, 개발 과정에서 코드 작성과 디버깅에 많은 시간 낭비가 발생하는 문제를 인식하게 되었습니다. 이러한 문제는 프로젝트의 규모가 커지고 코드베이스가 복잡해짐에 따라 점점 더 심화되었습니다. 이로 인해 기능 개발을 위한 시간보다 디버깅에 많은 시간을 사용하게 되었고, 이러한 악순환을 극복하고자, 완성된 프로젝트에 Jest를 도입하여 개발 효율을 증대시키는 시도를 하게 되었습니다.

기존 프로젝트에 Jest를 도입하면서 전통적인 TDD(Test-Driven Development) 방법론을 사용하기 어렵다는 점을 인식하였습니다. 프로젝트가 이미 완성된 상태이기 때문에, 기존 코드를 테스트 가능하도록 Jest를 활용하여 테스트 코드를 작성하는 방식을 선택하였습니다. 이에 따라 기존 코드를 더 깊이 이해하고 수정할 필요가 있었습니다.

처음에는 기존 코드에 대한 테스트 케이스를 작성하는 것이 어려움을 겪었습니다. 완성된 코드들을 테스트하기 위해서는 코드를 수정하고 테스트 가능한 형태로 리팩토링해야 했습니다. 그러나 이러한 노력을 통해 기존 코드에 대한 이해도가 크게 향상되었습니다. 더불어 테스트 코드를 작성하면서 기존 코드의 동작 방식과 흐름을 더욱 명확하게 파악할 수 있었습니다. 기존 코드를 테스트 가능한 상태로 만들면서 코드 품질과 유지보수성을 향상시키는데 큰 도움이 되었습니다.

Jest를 도입한 결과, 테스트 코드 작성에 소요되는 시간이 있었지만, 이를 통해 코드를 개선하고 검증하는 과정에서 많은 이점을 얻을 수 있었습니다. 기존 코드를 수정하면서 안정성이 향상되었고, 수정한 코드의 예상대로 동작함을 테스트를 통해 확실히 확인할 수 있었습니다. 이로 인해 기존 코드의 버그를 사전에 발견하고 수정할 수 있어서 개발 과정에서 발생하는 잠재적인 문제를 예방할 수 있었습니다.

또한, 테스트 코드를 추가함으로써 새로운 기능을 추가하거나 기존 기능을 수정할 때 더욱 안심하고 코드를 변경할 수 있었습니다. 테스트 케이스를 작성함으로써 기존 코드의 예상 동작을 명확하게 파악하고, 변경 사항이 다른 부분에 영향을 미치는지 사전에 파악할 수 있었습니다. 이는 기능 추가 및 변경 작업에 대한 리스크를 최소화하고 안정적인 업데이트를 할 수 있도록 도왔습니다.

Jest를 도입한 이후로 개발 효율이 크게 향상되었습니다. 코드 작성과 디버깅에 소요되는 시간이 현저히 줄어들었으며, 코드를 안정적으로 유지하고 개선하는 데에 도움이 되었습니다. 또한, 테스트를 통해 기존 코드의 버그를 발견하고 미리 수정함으로써 안정성을 확보할 수 있었습니다.

2. 프론트엔드 개발 효율 향상을 위한 Mocking 활용

비효율적인 백엔드 API 개발로 인한 프론트엔드 업무의 지연되면서 이러한 과정이 비효율적이라는 것을 느꼈고,개선하고자 여러 가지 방법을 시도했습니다. 처음에는 Mocking JSON 데이터를 생성하여 프론트엔드 개발을 진행하는 방법을 선택했습니다. 이는 빠르게 활용 가능하다는 장점이 있었지만, API 응답 상태에 따른 대기, 로딩, 에러 등의 구현에 어려움이 있었습니다. 실제 API와 유사한 동작을 보장하지 못했기 때문에 테스트에서 예상치 못한 문제가 발생하기도 했습니다.

저는 MSW(Mock Service Worker)를 도입한 후 문제를 해결할 수 있었습니다. MSW는 실제 네트워크 요청을 가로채서 Mocking Response를 보내주는 기능을 제공해줍니다. 이를 통해 API 개발이 완료되기를 기다릴 필요 없이 즉시 활용할 수 있었습니다. 더불어, MSW는 여러 응답 상태에 따른 구현을 간단하게 진행할 수 있게 해주어, 로딩 상태, 에러 처리 등을 쉽게 테스트하고 확인할 수 있었습니다.

MSW를 도입한 결과, 백엔드 API 개발 지연으로 인한 업무 중단을 최소화할 수 있었고, 저는 Mocking된 데이터를 활용하여 독립적으로 개발을 진행할 수 있으며, 테스트 용이성이 증가했습니다. 더불어, 요구사항 변경에 더욱 유연하게 대응할 수 있어서 즉각적으로 API 명세를 변경하며 구현을 진행할 수 있었습니다.

또한, MSW를 활용한 모의 데이터를 통해 더욱 효과적인 테스트를 수행할 수 있었습니다. 테스트 시에 실제 API 응답이 아닌 Mocking된 데이터를 사용하므로, 테스트 환경을 더욱 안정화시키고 문제를 발견하는 속도가 향상되었습니다. 이는 개발 초기부터 예상치 못한 오류를 발견하여 수정하는 데에 큰 도움이 되었습니다.

MSW 도입으로 인해 팀은 프로젝트를 훨씬 더 효율적으로 진행할 수 있게 되었습니다. 실제로 프론트엔드와 백엔드 팀 간의 의존성을 최소화되어 동시에 개발을 진행할 수 있었고, 주간 미팅의 횟수를 줄여 개발에 몰두 할 수 있었습니다. 이를 통해 프로젝트를 보다 빠르게 완료할 수 있었습니다.