🥐 개요
첫 회사에 입사하여 어느덧 1년을 바라보고 있다.
그 기간을 회상해 보면 프로젝트가 성공적으로 마무리 되어서 행복했던 순간들과, 계속된 야근으로 힘들었던 순간 등 많은 일들이 있었지만 모든 순간들이 성장의 밑거름이 될 거라 생각한다.
이번 시리즈는 그 순간들 중 가장 기억에 남고 가장 의미 있는 outlook add-in 프로젝트에 대해서 써보려고 한다.
🍕 Outlook Add-in?
Outlook Add-in은 Microsoft Outlook의 기능을 확장하거나 개선하기 위한 소프트웨어 응용 프로그램이다.
Chrome Extensions 처럼 작은 툴바, 메뉴, 버튼 또는 패널 형태로 나타나며, 사용자가 Outlook에서 수행하는 작업을 보다 쉽고 편리하게 만드는 역할은 한다.
하지만 아쉽게도 Outlook은 인기가 없다. 아니 MS store의 Add-in들이 인기가 없는게 맞는 말 같다.
비슷한 크롬 익스텐션과 비교해도 마켓 규모의 차이도 엄청나며 그 안에서의 Outlook은 대부분 기업용으로만 사용하기 때문에 슬프게도 더 인지도가 없다.
기존에 운영하던 우리 서비스 역시 월 평균 500명의 유저를 보유하고 있다.
하지만 곧 Mac에선 outlook을 무료로 사용할 수 있다는 소식과 이번 프로젝트의 소개 영상에서 메인이 outlook인 만큼 업무의 편의성에 도움이 된다면 유저 또한 상승할 것이라고 생각하고 있다.
🍔 예전 프로젝트
앞선 회고 게시글에서도 많이 언급했듯 add-in 프로젝트는 시작부터 쉽지 않았다.
마지막 커밋이 5년 전이였으며, 제대로 된 Readme나 프로젝트 관련 문서가 없었다.
또한, 팀이 개편된는 시기에 시작한 상황이라 인수인계 역시 받을 수 없는 상황이기에 거의 모든 줄을 하나하나 로그를 찍어가며 프로젝트를 파악하였다.
시간을 들여 프로젝트를 파악하였기에 눈앞에 있는 버그들은 해결할 수 있었지만, 당장 한 달 후부터 큰 프로젝트가 예정되어 있었다.
프로젝트는 유저의 결제 방식 및 구독 플랜에 따라 상태관리가 필요하였고, 다양한 기능들이 추가될 예정이기에 React 프로젝트로 리팩토링을 생각하게 된다.
🌭 리팩토링의 목적
리팩토링울 하기로 결심하고 가장 먼저 한일은 리팩토링의 목적을 정해 팀원들에게 공유하는 것이였다.
기존 프로젝트가 가지고 있었던 문제점과 앞으로 진행할 프로젝트에서 생길 문제점 및 리팩토링 과정에서 얻게될 이점들을 개발 관점에서 정리하였다.
<짧게 적는다고 적었는디... 길어져버린 문서>
문서를 간단하게 요약하자면, 컴포넌트의 분리와 재사용성의 증가로 인한, 테스트와 디버깅 측면에서의 이점과, 유지보수, 최적화의 측면에서 작성하였다.
간단한 회의를 통해 건의는 받아드려졌고, 그렇게 큰 프로젝트가 시작하기 전 남은 한달의 기간동안 리팩토링을 진행하게 된다.
🍿 리뉴얼 프로젝트 결과
프로젝트를 시작할때 가장 신경썻던 부분은 프로젝트 구조이다.
기존 프로젝트를 파악할때도 가장 힘들었던 부분이였던 만큼 다른 누가 봐도 알기 쉬운 구조를 만들기 위해 노력했다.
가장 도움이 됐던건 Line의 발표 영상이였다.
이 영상의 내용처럼 components를 ATOMS > MODULES > TEMPLATES 순으로 나눴으며 styled-components를 이용하여 각각의 컴포넌트에 대한 디자인 변경을 용의하게 했다.
또한, 자주 사용하는 api와 global style, utils 함수, 그리고 중복 로직은 hooks로 분리하였다.
상태관리는 redux를 사용하였고 추후에 Redux Toolkit을 이용한 보일러플레이트 간소화와 API요청은 react-query를 도입할 예정이다.
🥞 마치며
사실 처음 계획은 outlook add-in에 대한 대략적인 가이드와 꿀팁을 전하는 시리즈를 작성하려 했었다.
하지만 모든건 계획대로 되지 않는 법..!
가이드 내용도 있겠지만, 그보다는 내가 어떤 고민을 했었는지 + 그 고민을 어떻게 풀어왔는지를 주로 작성할 거 같은 예감이 든다.
계속..
