3차 프로젝트를 마무리하며, 3주간의 짧지만 긴 여정을 되짚어보고자 합니다. 이번 프로젝트는 'WEE.T'라는 이름으로 출발하여 기획, 분석, 개발, 발표까지 모든 단계를 우리 팀이 처음부터 끝까지 진행하였습니다. 이 회고록에서는 후련함과 아쉬움을 함께 느끼며 프로젝트를 돌아보겠습니다.
1. 맡은 기능 개발
프로젝트에서 제가 담당한 기능은 다음과 같습니다:
1. 내 상태 조회
2. 결제 내역 조회
3. 위치 검색
4. 1:1 채팅
5. 내 정보 수정!
6. 플로팅 버튼
이 6가지 기능은 티켓 형태로 나에게 할당되었고, 페이지의 UI 배치와 디자인을 고려하면서 사용자 경험을 개선하기 위해 노력했습니다.
1주차 목표는 "fetch"를 사용하여 내 상태 조회와 쿼리스트링을 활용한 결제 내역 조회 기능을 구현하고, 1개월, 6개월, 12개월 내역을 세분화 조회할 수 있는 필터를 추가하는 것이었습니다. 또한, 내 상태 조회와 내 정보 수정 기능을 1주차 내에 완료하기로 계획했습니다. 내 정보 수정 기능에서는 "useEffect()"를 활용하여 데이터를 불러와 화면을 렌더링하였고, 경고창 대신 팝업 창을 이용하여 사용자 친화적인 UI를 제공하기 위해 노력했습니다.
2주차 목표는 내 상태 조회에서 라이브러리를 사용하지 않고 바 그래프 등을 직접 구현하고, 내 상태의 애니메이션 효과를 추가하여 사용자에게 더 나은 시각적 효과를 제공하는 것이었습니다. 또한, 카카오 API를 활용하여 주변 헬스장이나 보건소를 검색할 수 있는 기능을 개발하는 것이 목표였습니다.
3주차 목표는 소켓 IO를 활용하여 양방향 통신을 통해 실시간 채팅 기능을 만들고, 플로팅 버튼을 추가하여 모든 페이지에서 1:1 채팅을 사용할 수 있도록 구현하는 것이었습니다.
2.프로젝트 주차별 진행하며
1주차
1주차 개발을 진행하면서, UI를 위와 같이 구성하였습니다. 사용자의 편의성을 고려하여 내 정보 수정 과정에서 목표치와 현재 상태를 입력할 때 input 타입을 Number로 설정하여 숫자만 입력할 수 있도록 했습니다. 그러나 이로 인해 발생한 버그로, 입력 필드에 포커스가 잡힌 상태에서 마우스 스크롤을 사용하면 숫자가 변경되는 현상이 발생했습니다. 이를 해결하기 위해 많은 시간을 투자하였고, 구매 내역 페이지를 개발하여 구매 내역을 조회하고 쿼리스트링을 이용하여 1, 6, 12 개월 전체 내역을 필터링할 수 있는 기능을 추가하였습니다.
2주차
2주차를 진행하면서 마이페이지에서는 애니메이션 바를 만드는데 많은 노력을 기울였습니다. 주말까지 많은 시간을 투자하면서 setInterval(), clearInterval(), useState() 등을 활용하여 애니메이션 바를 구현했습니다. 라이브러리를 사용할 수 있었지만, 직접 애니메이션 바를 개발하여 뜻깊은 경험이었습니다. 또한, 카카오에서 제공하는 카카오맵 API를 활용하여 내 주변 보건소와 헬스장 등을 검색하고 지도로 볼 수 있는 기능을 개발하였습니다. 하지만 마커를 표시하고 정보를 보여주는 기능을 완료하지 못하고 2주차 티켓을 마무리하게 되었습니다. 카카오맵 API를 바닐라 자바스크립트로 제공했지만, 프로젝트에서는 리액트를 사용하였기 때문에 이 부분에서 어려움을 겪었습니다.
3주차
마지막 3주차를 진행하면서 소켓 IO를 활용하여 채팅 기능을 구현하였고, 백엔드 서버를 만드는데 한계가 있어 멘토와 현업 개발자들의 도움을 받아 반쪽 자리 서버를 만들었습니다. 항상 제한된 시간 내에서 프로젝트를 진행하는 것은 어려움이었으며, 채팅 페이지를 모든 페이지에서 사용할 수 있도록 플로팅 버튼으로 구현하고 팝업 창을 활용하여 버튼을 사용할 수 있는 조건 처리로 마무리하였습니다.
3.프로젝트를 마치며 아쉬움점 좋았던점
2023년 10월 09일부터 10월 27일까지 3주 동안 프로젝트를 마무리했습니다.
아쉬웠던 점:
1.프로젝트 계획: 프로젝트를 진행하면서 어드민 회원가입과 일반 회원가입을 나눠 홈페이지를 만들어 커뮤니티 기능을 추가하고 싶었지만 제한된 기간과 팀원들 간의 의견 대립으로 구현하지 못한 부분이 아쉬웠습니다. 이 아이디어를 다음 개인 프로젝트에서 시도해 볼 예정입니다.
2.디테일한 기능 처리: 항상 프로젝트를 진행하면서 짧은 시간으로 인해 디테일한 기능 처리나 예외 처리를 미흡하게 해야하는 점이 아쉬웠습니다.
3.위치 기반 프로젝트: 위치 기반의 프로젝트를 진행해보고 싶다는 아쉬움이 있습니다.
4.팀 협업과 소통: 프로젝트를 진행하면서 항상 아쉬웠던 부분은 팀 협업입니다. 특히 시간 약속 문제와 팀원 간의 소통 부족이 아쉬웠습니다. 이러한 부분에 대한 개선 방안을 고민 중입니다.
5.작업 스타일 차이: 프로젝트를 진행하면서 팀원들 간에 작업 스타일의 차이가 있었습니다. 어떤 스타일은 짧은 시간 내에 빠른 진행률을 가졌지만 디테일한 부분을 소홀히 했고, 다른 스타일은 진행률이 느렸지만 디테일한 부분에 강점을 가졌습니다. 중간 지점에서 작업을 조율하지 못한 것이 아쉬웠습니다.
6.소통과 리더십: 프로젝트를 진행하면서 팀원들 간의 의견 차이로 인해 의사 결정이 어려웠던 점이 아쉬웠습니다. 또한 팀원들의 작업 스타일을 효율적으로 조화시키지 못한 부분이 아쉬웠습니다.
마무리: 이러한 아쉬움들을 토대로 다음 프로젝트에서는 보완하고 적용해보려고 합니다. 특히 팀 협업과 소통, 작업 스타일의 조화, 디테일한 기능 처리, 위치 기반 프로젝트 등 다양한 측면에서 개선해 나가겠습니다. 프로젝트를 통해 배운 교훈을 적극적으로 활용하여 미래의 개발 프로젝트에서 더 나은 성과를 이루도록 노력하겠습니다.
좋았던점 :
1.기획, 개발, 발표 모두 팀의 노력: 이번 프로젝트에서 우리 팀은 기획부터 개발, 그리고 발표까지 모든 과정을 팀원들의 힘으로 완료했습니다. 이것은 팀원들 간의 협력과 노력이 빛난 순간이었습니다.
-
기술 습득과 적용: 지금까지 배웠던 기술들을 보다 능숙하게 사용하고 적용하는 경험을 쌓았습니다. 이로써 기술적인 역량을 향상시킬 수 있었습니다.
-
더 홈페이지다운 홈페이지: 이번 프로젝트에서는 이전 프로젝트에 비해 더 나아진 결과물을 만들었습니다. 홈페이지의 완성도와 사용자 경험을 개선하는 데에 성공했습니다.
-
애니메이션 바 기능 구현: 직접 애니메이션 바를 구현하며 새로운 기술과 기능을 배웠고, 이를 프로젝트에 적용하여 사용자에게 미려한 화면을 제공할 수 있었습니다.
-
로직 간결성과 효율성: 로직을 간결하고 효율적으로 관리하려는 노력을 통해 코드의 가독성을 향상시키고 유지 보수를 용이하게 만들었습니다.
-
소통, 회의, 회고의 중요성: 프로젝트를 진행하면서 소통, 회의, 회고의 중요성을 깨달았습니다. 팀원 간의 의견을 나누고 개선점을 찾는 데에 기여했습니다.
-
useState 객체 활용: useState를 객체 형태로 활용하여 상태를 보다 효과적으로 관리하는 방법을 습득하였으며, 코드의 가독성과 유지 보수성을 향상시켰습니다.
-
카카오API를 이용한 카카오맵 사용:
카카오맵 API를 활용하여 위치 기반 검색 기능을 구현한 경험은 가치 있었습니다. 단, 제한된 시간으로 인해 완벽한 구현이 어렵더라도, 지금처럼 빠르게 학습하고 적용하는 것이 중요합니다. 이는 앞으로 더 복잡하고 유용한 지도 기반 기능을 구현하는데 도움이 될 것입니다.
마무리를 하며... 이번 프로젝트는 앞으로 프론트엔드 개발자로서 성장하기 위한 소중한 경험을 얻은 프로젝트였습니다. 저와 함께 노력하고 협력해준 8명의 팀원들에게 감사의 인사를 전하며, 이 회고록을 마치겠습니다. 향후의 프로젝트에서 보다 나은 결과를 이루기 위해 노력하겠습니다.
