뽀로로?
뽀모도로 타이머 + Todo List
국비지원 교육 과정을 마친 후, 뜻이 맞는 수료생들과 함께 자체적인 스터디를 진행했다. 더 공부하고 싶은 부분들을 모아 다같이 공부한 뒤 국비교육의 최종 프로젝트 규모의 결과물을 완성하기로 협의했다. 그리고 그 전에 서로의 스타일을 확인하고 손발을 맞출 겸 간단한 토이 프로젝트를 하나 진행하기로 했다.
그 결과 뽀모도로 타이머와 Todo List를 합친 일정관리 웹앱을 만들게 되었다. 할 일을 추가하고, 각 할 일별로 뽀모도로 타이머를 작동시켜 집중한 시간을 저장하는 방식이다.
전체적인 디자인은 유명한 일정관리 어플인 투두메이트를 참고했다.
맡은 역할
직전에 진행했던 프로젝트에서 의사소통에 다소 차질이 있었기에 이번에는 원활한 협업을 위해 팀장을 맡아 프로젝트의 전체적인 방향을 관리하고 팀원 간 의사소통 및 협업을 주도했다. 그 과정에서 팀원들에게 Jira나 Discord 등 여러 협업 툴 사용을 제안했고, 덕분에 전체적인 진행 상황이나 일정 등을 수월하게 파악할 수 있었다.
그리고 커밋 컨벤션을 정리하고 지키도록 해 통일성을 부여하고 가독성을 높여 작업 과정을 쉽게 추적할 수 있게 했다.
프로젝트에서 맡은 부분은 뽀모도로 타이머 구현이었다. 구체적인 기능은 아래와 같다.
- 25분 ~ 5분 주기 타이머 작동
- 타이머 시작, 일시정지, 정지, 작업 전환
- 커스텀 배경화면
- 완료 시 기록 저장
진행 과정
대부분의 기능은 무사히 구현했는데, 배경화면을 설정하는 페이지에서 문제가 있었다. 옵션을 선택하면 미리보기까지 제대로 떴는데 적용 버튼을 누르고 타이머 화면으로 돌아가면 설정이 적용되지 않았다.
이미지 파일을 선택하고 프리뷰까지는 잘 떴는데
무엇이 문제인가 했더니 원인이 두 가지 있었다.
1. state 중복
처음 의도했던 것은 preview에서 옵션을 관리하고, 파일 첨부 버튼을 누를 경우에는 selectedImage에 현재 선택한 이미지 파일을 저장해 놓았다가 적용 버튼을 누르면 currentWallpaper에 새 옵션값을 적용하는 것이었다.
그런데 selectedImage와 currentWallpaper가 localStorage에 이미지 파일을 저장하는 wallpaper에 동시에 직접 접근하고 있었다. 그 때문에 wallpaper에 이미지 파일이 저장되지 않고 있었던 것이다.
2. className에 객체 리턴
이건 약간의 변명을 하자면 styled-components를 쓰다가 Tailwind로 넘어오면서 생긴 혼동이었다. className에 원하는 값을 반환하려면 string 형태로 반환해야 했는데 객체로 반환한 것이다.
이를 해결하기 위해 두 가지 방법을 사용했다.
1. state 개선
state를 처음 생각한 흐름 대신 각 값을 관리하는 state로 변경했다. 옵션을 저장하는 bgOption, 옵션의 실제 값을 저장하는 bgValue, 그리고 이미지 파일은 imageFile로 따로 분류했다. 이에 맞춰 localStorage에 저장되는 값도 bgOption과 bgValue로 나누어 bgOption이 imageFile인 경우에만 이미지 파일을 bgValue에 저장하고, 그 외의 선택지를 선택했을 경우에는 해당 옵션값에 해당하는 배경색을 출력하도록 개선했다.
2. className이 아닌 style로 변경
스타일은 어떻게 해야 값을 className에 넘길 수 있을지 고민하다가 state를 변경하면서 bgOption과 bgValue 두 값을 참고하는 backgroundStyle css 프로퍼티를 만들어 각 옵션별로 값을 전달하게 했다. className의 일부를 변경하는 방법이 있을 것 같은데 찾지 못하고 위의 방법으로 해결했다.
마친 후
팀원들 간의 합을 보기 위해 가볍게 진행한 프로젝트였는데 팀원들이 모두들 적극적이고 성실히 임해서 팀을 리드하는 입장에서 너무나 원활했다.
PR을 진행할 때도 다 같이 모여 코드를 검토한 뒤 머지하고, 문제가 생기면 다 같이 고민하고 해결했다. 모두들 TypeScript와 Tailwind를 새로 배우는 입장이었기에 팀원이 막히는 부분이 곧 내가 막히는 부분이기도 했다.
사실 뽀로로 프로젝트를 마치고 바로 조금 더 큰 규모의 프로젝트를 진행하기 위해 곧장 기획에 착수해서 당시에는 프로젝트를 회고하지 못했다. 그래서 이번에 회고하기 위해 내가 작성했던 코드들을 쭉 읽어보았는데, 그 사이 조금 성장했는지 개선이 필요한 부분들이 보였다.
1. 적절한 주석 쓰기
다른 팀원들이 작성한 코드를 읽을 때도 느꼈지만 주석이 있는 편이 이해가 훨씬 빨랐다. 하지만 처음 타이머 기능을 만들 때 state를 여러 개 선언하면서 빠른 인지를 위해 관련 state에 주석을 달았었는데, 사실 이 부분은 state의 이름을 보면 주석을 읽지 않아도 이해할 수 있는 부분이라 없어도 될 것 같았다. 반면 주석이 아예 없는 코드도 있었는데, 긴 코드는 이해하는 데 시간이 좀 걸렸다. 코드를 작성할 때의 나는 그 코드를 완전히 알고 있었겠지만, 시간이 지나 다시 보니 무슨 의도로 짰는지 모르겠는 부분도 있었다. 때문에 원활한 이해를 위해 좀 더 적절하게 주석을 달 필요성이 있다는 것을 깨달았다.
2. 컴포넌트 설계 구체화하기
직전에 진행한 프로젝트에서 공통 컴포넌트 등을 미리 정하지 않고 작업했더니 중복된 코드가 너무 많았기에 이번에는 공통 컴포넌트를 기획 단계에서부터 설계했었다. 때문에 공통 컴포넌트를 적용하는 부분에는 문제가 없었지만, 내가 담당한 기능들 중 배경 옵션 선택 버튼은 전달할 값을 제외하면 같은 코드였기에 컴포넌트를 따로 분리할 여지가 있었다.
3. 외부에 사이트 배포하기
아무래도 팀원 전원이 프론트엔드 개발자이다 보니 프로젝트가 완성되어도 그냥 팀 내에서 자축하는 정도로 끝나는 것이 아쉬웠다. 서버가 없는 웹앱은 깃허브를 통해서도 배포할 수 있으니 혼자서라도 프로젝트들을 배포해 볼 계획이다. 서버가 있는 프로젝트들도 추후 공부해보려 한다.
