2021년 2학기 신촌연합IT창업동아리 CEOS 14기 활동을 하며 MailedIt! 팀에 프론트엔드 개발자로 합류했다.
약 한 달 동안 개발을 진행하며 배운 점과 느낀 점을 써 보자고!
0. MailedIt!
MailedIt!은 기본 템플릿과 자신만의 템플릿 만들기로 실무 이메일을 보다 쉽게 작성할 수 있도록 돕는 서비스이다. 아이디어톤 때부터 눈여겨 보던 주제였는데, 좋은 기회로 팀에 합류할 수 있었다.
그리고 결과적으로 우리가 데모데이 ✨대상✨을 받았다!
1. 개발 과정
실제 개발 기간은 약 한 달 정도였다. 계획대로 흘러가진 않았지만 애초에 계획을 좀 빡빡하게 짰어서… 그래도 단기간에 모든 기능 구현을 마치고 세부적인 에러 핸들링이 조금 오래 걸렸다.
자세한 개발 과정은 글을 새로 작성할 예정이고, 간단하게 훑어 보면 이렇다!
0) 사용한 기술 스택
(현재는 TypeScript를 이용하여 리팩토링 중이다.)
- React with JavaScript
- styled-components
- axios, postman
- Figma, Notion, Slack
1) Google OAuth
백엔드쪽에서 구글 로그인을 도입하여 프론트단에서도 이를 처리해야 했다. 다행히 라이브러리를 사용해서 큰 어려움은 없었지만 구글 로그인 진행 과정을 배우는 것도 재미있었다.
2) 로그인 유저 정보 및 토큰 관리
유저 정보와 access token 관리는 전에 해 본 경험이 있는데, 이번 과제에서 refresh token을 처음으로 다뤄 봤다. axios request interceptors를 이용해서 관리하고 싶었는데, 구글링하면 response interceptors에 관한 코드들만 나와서 처음부터 끝까지 코드를 짜는 게 조금 까다롭긴 했지만 그래도 어떻게 성공하긴 했다!
3) 메인 페이지 개발
마이 템플릿, 기본 템플릿, 그룹, 템플릿 수정/삭제, 검색 등을 구현했다.
4) Base UI 컴포넌트 제작
모든 페이지에 공통으로 들어가는 요소라든가, 커스텀 해서 사용하는 부분이 많았다. Accordion menu는 구글링을 통해 해결했고, 제일 골머리를 썩였던 것은 checkbox를 커스텀하는 것이었다… 지금 생각해 보면 새로 만들면 될 것을 기존의 <input type="checkbox" /> 자체를 커스텀하느라 조금 까다롭게 느껴졌었다. Option 태그 커스텀하는 것도 있었는데 이 부분은 그냥 드롭다운 메뉴처럼 “보이게” 만들었다.
5) 그룹 필터링 기능 구현
이 부분은 filter 함수를 써서 구현했다. 그런데 단순히 여기서 끝나는 게 아니라, 사이드바에서 즐겨찾기/전체선택과 그룹별 선택이 나누어져 있어서 이를 관리하는 로직을 짜는 것도 생각보다 많은 시간이 필요했다.
6) 템플릿 검색 기능 구현
이 부분도 filter 함수를 써서 구현했고, Context api를 활용하여 에디터 페이지에서도 사용 가능하도록 했다. 전역 상태 관리 라이브러리의 필요성을 딱히 느끼지 못해서 개발 시작 전 Context api만 사용하기로 결정했었는데, 막상 개발을 시작해 보니 유저 정보 관리라든지, 선택한 템플릿 정보를 저장할 때라든지 전역으로 상태를 관리할 필요성을 느끼게 되어 추후에 리팩토링을 진행하며 개선해 나갈 생각이다.
7) 템플릿 즐겨찾기/삭제 기능 구현
이건 그냥 썸네일의 별 아이콘 또는 휴지통 아이콘을 클릭하면 그에 따른 api를 실행하도록 구현했다.
9) 블럭 드래그앤드랍 기능 구현
드래그 앤 드랍 기능을 직접 구현해 보고 싶었지만, 시간 관계상 react-beautiful-dnd 를 이용하여 구현했다. 라이브러리를 사용하는 방법이 매우 간단했어서 쉽고 빠르게 구현할 수 있었다. 나중에 시간이 된다면 라이브러리를 사용하지 않고 직접 구현해 보고 싶다!
2. 협업 과정
우리 팀은 기획, 디자인, 프론트엔드, 백엔드 각각 2명씩으로 구성되었다.
백엔드 개발자와의 협업 경험은 있었지만 기획과 디자인 파트와의 협업은 처음이었어서 다소 아쉬운 점도 있었고 미흡한 점도 있었지만 결과적으로는 좋은 서비스를 만들어 냈고, 또 하나의 좋은 경험이 되었다.
전반적인 협업 과정으로는 각 파트별로 Notion을 적극 활용하여 회의록이나 진행 상황 등을 파악할 수 있게 했다. 디자인 파트는 Figma를 이용해 작업을 진행하여 다른 파트 사람들도 자유롭게 진행 상황을 확인하고 피드백을 줄 수 있었다. 이번에 협업을 진행하며 Figma를 처음 사용해 봤는데, 개발자 입장에서도 사용하기 매우 편리하다 느껴졌었고, 음성 공유 기능도 있어서 디자인 결과물을 보며 회의를 할 수 있던 점이 좋았다.
뿐만 아니라, 개발 팀 간의 협업이 잘된 것 같아서 좋았다. CEOS에서는 각 파트별로 스터디를 진행하다가 마지막 스터디는 프론트+백 합동 스터디였는데, 실제 프로젝트를 진행하기 전에 합을 맞춰 볼 수 있는 아주 좋은 기회였다. 합동 스터디 과제를 진행하며 우리는 Notion과 Slack을 적극적으로 활용하고, 프론트끼리는 각자 코드 리뷰도 열심히 해 줬던 기억이 있다. 확실히 한번 합을 맞추고 나니 어떤 식으로 협업을 해야 할지 감이 잡혔고 덕분에 별 탈 없이 활동을 마무리할 수 있었던 듯하다!
3. 앞으로
14기 활동이 끝나긴 했지만 계속해서 리팩토링은 진행할 생각이다. 이대로 끝내긴 아쉽기도 하고 솔직히 끝났다는 후련함보다는 시원섭섭한 감정이 더 많이 드는데, 아무래도 짧은 기간 안에 급하게 기능을 구현하다 보니 ‘깔끔한 코드’를 작성하지 못했다는 생각이 들었기 때문인 것 같다. ㅠㅠ 그리고 리팩토링을 진행할 겸 얼른 성능 최적화를 좀 시켜야겠다 😑 가끔 가다 로딩이 느려지는데 얼른 개선하고 싶다!!
아무튼 결과적으로는 순탄한 협업 과정, 그리고 좋은 결과물을 만들어 낸 소중한 시간이었다고 마무리할 수 있겠다.
메일드잇 짱 👍🏻