최종 프로젝트 비드마켓 회고

데브코스 프론트엔드 코스 최종프로젝트 회고입니다.

마지막 프로젝트는 백엔드 교육생들과 팀을 이루어 함께 진행을 했습니다.

인턴 때문에 참여를 많이 못해 아쉬운 점도 있지만 간단한 프로젝트 소개와 느낀점을 남기려고합니다.

비드마켓 깃허브

비드마켓 배포링크

발표 영상

프로젝트 소개

온라인 비딩 시스템을 이용한 중고 물품 거래 서비스

구성원

FE(4), BE(5), 디자이너(1)

기간

2022.07.15 ~ 2022.08.16 (최종 제출)
2022.08.22 ~ (리팩토링)

내가 구현한 내용

회원 정보 페이지, 회원 정보 수정 페이지 구현
useForm hook 구현
S3 이미지 업로드 기능 구현
웹소켓 연결 및 채팅 기능 구현

좋았던 것

일정 관리 및 스프린트

중간 프로젝트에서는 일정관리에 어려움이 있었습니다. 정해진 팀장이 없었고 팀원 별로 일정을 분배해서 진행을 했었지만 진행상황을 지속적으로 판별을 못했기 때문에 마지막에는 일정이 밀리는걸 늦게 알게 됐습니다.
하지만 이번 최종 프로젝트 때는 스프린트 단위로 지라에서 티켓 단위로 각자 할일을 진행을 했었습니다. 보드를 통해 팀원들의 진행상황을 쉽게 볼 수 있었습니다. 그리고 처음에는 스프린트 단위를 1주일로 가져갔었지만 짧은 현재 프로젝트 기간에서는 단위가 컸기 때문에 스프린트를 더 쪼개서 진행 상황에 문제가 생길 경우 조금 더 빨리 캐치할 수가 있었습니다,

디자이너의 도움

백엔드 지인분을 통해 디자이너의 도움을 받을 수 있었습니다.
UI를 예쁘게 만드는 것은 쉽지 않은 일이였지만 디자이너 분께서 적극적으로 도와주셔서 UI의 고민을 덜 수 있었습니다.
아이콘이나 배너 같은 이미지도 만들어 주셨기 때문에 편하게 사용할 수 있었습니다.

UI 라이브러리(Chakra UI)

Chakra UI를 사용했습니다.
저번 중간 프로젝트에서는 컴포넌트 단위로 직접 만들어서 사용했었는데 Chakra UI를 사용해보니 쉽게 개발을 진행할 수 있었습니다.

브랜치 전략

Github flow 방식을 사용했습니다.
중간 프로젝트에서는 Git flow 전략을 사용했었는데 배포를 자주하는 것도 아니여서 release 브랜치를 만들다거나 hotfix를 만들일이 없다보니 Github flow 전략과 실제 작업상황이 맞지 않다고 느꼈었습니다.
이번에는 각자 feature 브랜치에서 작업한 후 PR을 올리고 main에 머지되면 바로 배포되도록 구성을 했습니다.

코드 리뷰

중간 프로젝트 때는 코드리뷰 없이 바로 각자 머지를 하는 방식으로 진행했었는데 이번에는 어프로브를 받지 못하면 머지를 할 수 없게 설정을 했습니다.
물론 마지막에는 꼼꼼하게 리뷰를 진행하지 못했지만 그 전까지는 각자 올린 PR에 성실히 코드리뷰를 달아서 서로의 생각을 공유하고 배울 수 있는 시간을 갖게 됐습니다.

어려웠던 것

stompJS 연결

웹소켓 연결에 어려움을 겪었습니다.
백엔드분께서 환경을 구성해주셨기 때문에 지정된 엔드포인트로 연결해서 사용을 하면 됐습니다. STOMP 프로토콜을 사용하기에 stompJS를 사용해서 연결을 시도했습니다.
하지만 소켓 연결부터 계속 실패를 했었는데 원인을 잘파악하지 못하고 계속 실패를 했습니다. 크롬에서 디버깅 했을 때 에러코드가 1006번이였는데 크롬 보안 정책상 메세지가 공백으로 나와서 확실한 이유를 알 수 없었습니다.
해결을 못하고 백엔드 팀원분들과 조금 더 소통을 해보니 SockJS로 연결을 해야한다는 사실을 알았습니다. 제가 이해한 내용은 SockJS는 웹소켓이 지원 안되는 브라우저에서 연결할 수 있도록 지원해주는 라이브러리로 이해했었습니다. 그렇기 때문에 저희 프로젝트에서는 필요 없다고 생각했었습니다. 그리고 엔드포인트가 wss로 시작했는데 SockJS로 연결할 때는 http나 https를 인자로 받았기 때문에 사용을 할 수가 없다고 생각했었습니다.
하지만 백엔드에서 설정으로 연결을 위해서는 SockJS로 해야만 한다는 사실을 알게 됐고 https로 소켓을 연결하고 해당 소켓을 stompJS에서 사용하도록 넘겨줘서 연결을 성공한 후 채팅 개발을 진행했습니다.

아쉬웠던 것

NextJS 이해도

NextJS를 사용했는데 아직 정확한 원리를 잘 이해못한 것 같습니다.
특히 SSR을 사용했을 때 localStorage나 WebSocket 같은 웹에 접근해야 사용할 수 있는 내용들을 쓰려고 해서 에러를 많이 마주쳤습니다.
이런 에러와 별개로 NextJS의 장점을 충분히 살렸는지는 잘 모르겠지만 우선 해당 프레임워크 문법에 맞게 적용해서 사용을 했습니다.
리팩토링을 위해서도 NextJS에 대한 이해도를 높일 필요가 있습니다.

테스트 코드 적용

이번에도 테스트 코드를 작성하지 못했습니다.
항상 시간이 부족하다는 핑계를 되게 되는데 제한된 기간안에 완성을 위해서는 우선 구현을 하게 되는 것 같습니다.
리팩토링 기간에는 기한에 제한이 없으니 여유를 갖고 작성을 해보고 싶습니다.

적은 기여도

인턴을 하고 있어서 프로젝트에 기여를 적게 했습니다.
팀원들이 배려를 해줘서 태스크를 적게 가져갈 수 있었고 무리 없이 제가 맡은 일을 완수 할 수 있었습니다.
반면에 팀원중에 한분이 코로나로 인해 아프셔서 개발을 할 수 없는 상황이 됐었습니다. 그래서 주로 두명이서 개발을 진행하게 되어서 더욱 더 고생을 시키게 된 것 같아 죄송스러운 마음도 있습니다.
백엔드 분들은 5명이서 많은 기능들을 미리 완성을 해주셨었는데 프론트 쪽에서 제한된 일정으로 해당 기능들을 모두 기간안에 적용할 수가 없어서 아쉬움이 더 컸습니다.

개선할 것

채팅 메세지 날짜 별로 구분

api로 받아오는 채팅 메세지는 날짜별로 구분되어 있지 않습니다. 하지만 보여줄 때는 새로운 날짜가 시작될 때는 먼저 해당 날짜가 UI에 보여줘야합니다.
아직 해당부분은 구현되어 있지 않고 하드코딩 되어 있습니다.
구조적으로는 날짜별로 메세지들이 있어서 해당 자료구조를 렌더링해주는게 편할 것 같은데 어떤식으로 관리를 해줄지 아직 결정하지는 못했습니다.

스피너 분리하기

우선 간단하게 spinner가 구현되어 있는데 따로 분리를 해놓지 않아서 코드가 중복되고 있습니다.
피드백 내용중에 로딩 처리가 아쉽다는 의견도 있어서 따로 분리하면서 UI적으로도 개선하면 더 좋을 것 같습니다.

마무리

5개월 여정의 마지막을 무사히 마칠수 있어서 우선 다행이라고 생각합니다. 개인 사정 때문에 적극적인 참여가 불가능 했는데도 배려를 해준 팀원들에게 너무나도 감사합니다. 또한 급작스러운 부탁이였을텐데도 너무나 예쁜 디자인을 만들어주신 디자이너 샛별님에게도 고마움을 전달하고 싶습니다. 그리고 완성만으로도 기쁜데 교육생들이 서로 평가한 결과, 2등이라는 높은 순위를 차지하게 되서 더 기뻤습니다. 월요일 부터는 다시 리팩토링 스프린트를 진행하게 될텐데 폐가되지 않도록 남은 기간도 열심히 달려야 할 것 같습니다.