[코드스테이츠] 4주 Final 프로젝트 회고

코드스테이츠에서 4주 Final 프로젝트를 마무리했다.

 

2주 프로젝트를 함께했던 멤버들이 좋았어서, 팀원 교체 없이 파이널 프로젝트를 진행했다.

그러나 2주 프로젝트 때와 달리 파이널 프로젝트 때 나는 팀장을 자원해서 맡았다.

 

여기서 팀장의 역할은 해야 할 태스크와 그에 따른 데드라인을 꼼꼼하게 관리하는 것이었다.

동시에 UX 관점에서도 기획을 진행하고, 이후 서비스를 다듬고 완성도를 높여야 했다.

또한 코드스테이츠의 가이드에 따라 작성하고 제출해야 할 내용들이 있었다.

이 부분에서 팀에 기여할 수 있을 것이라 생각했고, 팀원들은 개발에만 매진할 수 있게 도와주고 싶어 팀장을 맡게 되었다.

 

프로젝트 관련 영상과 회고 내용을 아래에 작성했다.

 

https://www.youtube.com/watch?v=OrqeVoGMNGA 

서비스 소개 영상

https://www.youtube.com/watch?v=73BPjRKCBBs 

기술 영상

 

제작 서비스

1.  서비스 개요

• 서비스명 : HomeTownAlba
• 기획 의도 : 기존 플랫폼과 달리, 동네 알바를 구하는 데 최적화된 서비스 제공하기
• 배포 링크 : https://www.hometownalba.com

2.  서비스 기능

• 지도에서 일자리를 확인하고 지원하기
• 지도에서 키워드 검색으로 일자리 검색이 가능하며, 목록에서 현위치 일자리 확인 가능
• 사업자 마이페이지 : 일자리 등록, 지원자 관리
• 구직자 마이페이지 : 경력 등록, 지원결과 확인

 

담당해서 개발했던 기능

1.  지도 페이지

• 마커를 통한 일자리 확인, 지원하기, 지원 결과 확인
• 위치, 월급, 근무 시간에 기반하여 데이터 필터링

2.  마이페이지

• 사업자 마이페이지 : 일자리 등록, 지원자 확인, 지원 결과 생성, 회원 정보 수정
• 구직자 마이페이지 : 경력 등록, 지원 결과 확인, 지원 삭제, 회원 정보 수정
• 비회원 마이페이지 : 일자리 등록, 경력 등록, 지원자 확인, 지원 결과 생성/확인, 지원 삭제

3.  서버

• 일자리 DB 테이블 및 CRUD API
• 경력 DB 테이블 및 CRUD API
• 지원자 조인테이블 및 CRUD API

 

해결했던 기술 문제

1.  React

• setState를 통해 state가 변경되는 순서에 적합한 코드 작성
• 객체 형태의 state 내에 key:value 추가하기
• useEffect 무한루프 해결
• setTimeout, useEffect, setState 관계를 통한 올바른 코드 작성

2.  JavaScript

• async 중복 사용 : 콜백함수 내에서 await를 사용하려면 중복이더라도 콜백함수 앞에 async 사용하기

3.  카카오맵 API

• 현재 위치 기반 데이터만 지도에 표시되도록 필터링
• 인포윈도우 위에 버튼 클릭 이벤트 등록하기
• 렌더링 이후 표시될 지도 위치 선정하기

 

느낀점

1.  완성도 100%를 향해서

• 토익 점수가 900점까지는 잘 오르지만 그 위로는 잘 오르지 않는데, 서비스 완성도를 높이는 것도 비슷한 것 같다.
• 기능 구현 단계에서는 진도가 빨리 나갔지만, 이후 UX를 개선 및 에러핸들링 과정에서 상당한 시간이 소요되었다.
• 완성도를 0에서 80%까지 끌어올리는 것과 80%에서 90%까지 끌어올리는 데에는 같은 시간이 소요된다고 한다.
• 완성도를 100% 까지 끌어올리는데 필요한 실력과 인내력 또한 전문성을 결정짓는 요소가 아닌가 싶다.
• 완성도 100%를 향해 노력하는 끈기있는 개발자가 되자!

2.  기능 구현을 넘어 성능 개선까지

• 이전까지는 기능 구현에만 초점을 맞추었으나, 지도 API를 활용해보니 성능 개선에도 관심을 갖게 되었다.
• 지도페이지가 계속 렌더링되는데, 경우에 따라 속도가 느려지며 UX가 악화되었다.
• 덕분에 처리해야할 데이터량과 처리 속도를 최소화할 필요성을 느꼈다.
• 추후 클러스터링, 마커이미지 최적화, 캐싱을 통해서 성능을 개선해보자!

3.  배포 환경에서 기능 오류

• 개발 환경인 localhost에서는 문제가 없었으나, 배포 이후 오류가 생긴 경우가 있었다. 
• 배포 서버 오작동 문제가 가장 많았고, 브라우저 화면의 폰트가 변경되기도 했다.
• 원인을 알 수 없는 오류들이라, 문제 해결력을 기르려면 경험을 많이 쌓는 방법밖에 없는 것 같다.

 

피드백

1.  Git과 버전 관리

• 이번 프로젝트는 저번보다 Git을 적극적으로 사용하여 버전관리와 Merge를 했다.
• Merge 과정에서 중요한 코드가 삭제된 적이 있지만, 브랜치에 백업된 정보로 복구할 수 있었다.
• Conflict 해결 중 필요한 코드가 삭제되는 경우가 있었는데, 휴먼 에러를 줄이도록 신중해야겠다.

2.  추후 학습할 내용

• ES Lint를 사용해보고 코드 품질 올리기
• 기능 구현과 에러핸들링에 초점을 맞추다보니 CSS 사용 경험이 부족한데, 이 부분을 학습으로 보충하기
• 프로젝트 코드 리팩토링 방향 : 클러스터링, 캐싱을 통한 성능 개선

3. 팀장으로서 아쉬웠던 점

• 비대면으로 만난 뒤 각자 태스크를 맡아서 코딩을 하다보니, 팀원들의 고충을 세심하게 살피지 못했던 것 같다.
• 자신이 맡은 태스크가 버겁더라도, 피해주지 않고 혼자 해결하려다 지치게 되는 팀원들도 있다고 느꼈다.
• 비대면 모임에서는 서로의 심리 상태를 알기 어려워, 리더로서 더 물어보고 다가가기 위해 노력해야 하는 것 같다.