[하루메이트] 프로젝트 회고

🥯 프로젝트 소개

프로젝트 명: 하루메이트

프로젝트 기간: 23.06.29~23.07.26

Github: https://github.com/codestates-seb/seb44_main_006

GitHub - codestates-seb/seb44_main_006: 하루메이트는 당일 일정을 만들고 친구에게 손쉽게 공유할 수 있

배포 링크: https://harumate.netlify.app/

HARUMATE: 하루메이트

 

---

📦 프로젝트에서 사용한 기술 스택

 

TypeScript

현업에서도 많이 사용하기도 하고, 처음엔 어려울 수 있지만 사용하다 보면 타입스크립트의 메리트가 뭔지 느낄 수 있을 것이라고 생각해서 팀원분들과 상의 끝에 선택하게 되었습니다.

확실히 프로젝트 기간동안 타입스크립트를 사용해 보니까 장점과 단점을 모두 느낄 수 있었습니다.

매번 타입 설정을 해야하고 생소한 타입을 만나서 오류가 발생하고... 이런 과정들에서 꽤 많은 시간이 투자되었습니다.

하지만 점점 익숙해지니 코드 자동완성기능, 예상되는 에러에 대한 즉각적인 피드백과 같은 타입스크립트의 장점이 더 크게 다가왔습니다.

또한 팀원분들이 작성해주신 코드를 볼 때도 설정해 주신 타입을 기반으로 어떻게 사용할지 대충 알 수 있었기에 협업할 때도 유용하다는 것을 느꼈습니다.

한 가지 아쉬웠던 점이라면 타입스크립트를 제대로 이해하지 못하고 사용해서 기초적인 수준으로만 사용한 것 같다는 점입니다.

추후에는 좀 더 공부해서 더 깔끔하고 유용하게 사용할 수 있었으면 좋겠다는 생각이 들었습니다.

 

React-Query

공부를 하던 와중에 리액트 쿼리라는 것을 알게 되었었습니다. 동기 분들과도 이야기해보고 카카오 기술 블로그에서 소개한 글도 읽어보고 공식문서도 읽어보고 하니 오..? 사용해 보면 유용할 것 같은데...? 라는 생각으로 팀원분들께 사용해 보면 어떻겠냐고 제안을 드렸습니다.

저는 리액트 쿼리는 사용해보지 않았고 비슷한 도구인 RTK-Query라는 것을 맛보기로 해본 상태였고, 다른 팀원분들은 한번도 사용해보지 않은 상태였지만, 이번 프로젝트를 기회로 한번 사용해 보고 익숙해져 보자!라는 마음가짐으로 선택하게 되었습니다.

확실히 직접 사용해 보니 굉장히 편하고 좋은 라이브러리였습니다. 리액트 쿼리를 사용하지 않았을 때는 Redux에서 관리되는 상태들도 많았었고, useEffect, middleware 등을 사용하여 많은 코드들을 썼어야 했는데, 사용하니 전역으로 관리되는 상태들도 줄고, 작성해야 하는 코드들도 많이 줄어들었습니다.

여기서도 마찬가지로 아쉬웠던 점이라면, 리액트 쿼리에서 제공해 주는 여러 유용한 기능들을 많이 사용해보지 못한 점입니다. 리액트 쿼리도 파면 팔수록 재밌고 유용할 것 같아서 더 공부해 보면 좋을 것 같다는 생각이 들었습니다.

 

---

 

⚙️ 프로젝트에서 맡은 기능

 

장소 검색 및 추가

일정 검색

카카오 맵 API를 활용하여 지도를 보여줍니다. 그리고 원하는 조건(반경+카테고리 or 직접)을 적용하면 조건에 맞는 장소 목록을 보여주고 지도에 해당하는 위치에 마커를 띄워줍니다. 장소 목록에서 가고 싶은 장소를 추가할 수 있습니다.

 

추가된 장소 순서 변경, 삭제, 저장

추가된 장소 위치 변경 및 삭제 후 저장

추가한 장소를 드래그 앤 드롭으로 순서를 변경할 수 있습니다. 잘못 추가했다면 삭제도 가능합니다.

일정을 저장하고 싶다면 여러 가지의 썸네일 중 하나를 선택하고, 일정의 제목, 간략 설명, 날짜를 선택해서 저장할 수 있습니다.

 

일정 수정

일정 수정

저장했던 일정을 수정하고 싶다면 수정할 수 있습니다.

 

그 외

토큰 만료 처리, 반응형 컴포넌트 제작, 로딩 페이지 제작 등을 했습니다.

[하루메이트] Suspense와 React.lazy를 적용한 뒤 초기 로딩 속도 측정해보기

[하루메이트] Access Token 만료 후 재요청에서 겪은 에러 해결

 

[하루메이트] 3일동안 한거라곤 반응형과 버그 잡기 - 22.07.13~15

 

---

 

😄 좋았던 점

 

하루메이트 팀 그 자체

프로젝트를 진행하면서 큰 갈등 없이 잘 마무리해서 결과물을 냈다는 것이 너무 좋았습니다. 되돌아보면 큰 갈등이 없는 게 아니라 갈등 자체도 딱히 없었던 것 같습니다.

팀원분들이 서로 존중해 주는 분위기에 쿠션어도 잘 사용해 주시고, 적당한 유머도 있으셔서 항상 훈훈한 분위기였던 것 같습니다.

각자 맡은 작업들도 제 시간 내에 끝냈고, 큰 이슈가 있을 때마다 모여서 토론하며 해결했던 것도 너무 좋았습니다.

 

문서화

팀 노션 페이지에 항상 아침에 한 회의록, 각자 해야 할 일, 오늘 할 일, 진행 상황 등 항상 서로가 뭘 하고 있는지, 뭘 해야 하는지 상시로 확인이 가능하게 해서 편했습니다.

저 개인적으로는 에러가 생겼을 때 상황과 해결과정을 블로그에 기록해 둠으로써 나중에도 확인해 볼 수 있게 정리했던 것이 괜찮았던 것 같습니다.

 

멘토링

캠프에서 멘토링 시스템을 운영해서 각 팀마다 FE, BE 멘토님을 한 분씩 붙여주었는데, 아무것도 모르는 애송이 개발자로서 너무 좋았습니다. 현업에서 일하고 계신 개발자분과 이야기를 해볼 수 있다는 점도 좋았고, 코드 리뷰를 받아볼 수 있다는 점도 좋았습니다.

저희 멘토님은 소통도 잘 되셨고, 질문을 개떡같이 했음에도 불구하고 이 질문이 이 뜻이 맞냐고 되물어봐 주시고, 개인 시간을 투자해서 에러 해결에 도움도 많이 주셨습니다. 멘토님 너무나 감사합니다! 뽐므님 짱!

 

---

 

🧐 아쉬웠던 점

 

이슈와 칸반 설정

본격적으로 개발을 시작하기 전에, 모든 이슈 생성 및 칸반 생성을 했습니다.

그런데 막상 개발을 진행하면서 세세하게 설계하지 못한 것 때문에 새로 생성되는 기능들이나 기존 기획에서 변경되는 점들을 업데이트를 하지 못했고 새로운 이슈 및 칸반 생성을 하지 않아서 칸반을 유기해 버리게 되었습니다...

 

세세하게 하지 못한 설계

저희는 나름대로 "아 이 정도면 설계 잘했지! 진짜 우리 미쳤다 ㅋㅋ" 라고 생각했었던 때가 있었습니다만... 그건 애송이들의 짧은 생각이었고 너무나 어림없는 생각이었습니다...

개발을 하면 할수록 엣지 케이스들이 터져 나오고 버그도 미쳤었습니다. 또한 사용자 경험 측면에서도 아쉬운 점들이 많았어서 개발을 하면서 변경을 하는 경우가 꽤 있었습니다. 그래서 추가되는 기능, 터져 나오는 에러, 원래 해야 하는 작업들을 해결하려고 다 같이 밤을 새우는 경우가 잦았습니다.

 

코드에 대한 고민

짧은 프로젝트 기간에 비해 저희가 욕심낸 기능들이 많았던 것 같습니다.

일단 어떻게든 해내긴 했는데, 내부 코드를 보면 분명 재사용해야 하는 코드들인데 따로 컴포넌트화를 하지 않았다던가, 억지로 끼워 맞춘 코드가 있다던가, 그냥 코드가 더럽다던가... 제 코드지만 사랑해 줄 수 없는 코드들이 잔뜩 했습니다.

 

---

 

🥹 개선해 나갈 점

 

꾸준히 리팩토링 하기

정해진 기간이 종료돼서 프로젝트가 끝났지만, 추가하고 싶었던 기능들도 있고, 코드 자체를 깔끔하게 바꾸고 싶다는 욕망도 있기에 앞으로도 꾸준히 리팩토링을 해보고 싶습니다.

 

---

 

🍨  마무리

 

유능한 팀원분들 덕분에 힘들었지만 너무나 행복했고 재미있었던 프로젝트였습니다!

다시 또 이런 팀원분들을 만날 수 있을까라는 생각도 드네요..!

하루메이트 팀원분들 앞으로 꽃길만 걷기 바래잉!