메인 프로젝트 회고

한달간의 메인프로젝트가 끝이났다. 매일 만나서 아침에 회의하는게 익숙해질때가 되니까 끝이 나는 것 같다. 

 

 사실상 처음으로 제대로 진행하는 그룹 프로젝트이다. 직전에 진행했던 프리 프로젝트는 기존에 있는 stackoverflow라는 사이트를 클론 코딩하는 프로젝트여서 약간 학습의 연장선? 같은 느낌이었는데 메인 프로젝트는 실제로 기획부터 배포까지 전부 하게되어서 실제로 사용될 서비스를 만드는 느낌으로 작업을 진행했던 것 같다.

 

제대로 진행한 프로젝트이니 만큼 끝까지 제대로 하기 위해서 회고 블로그도 열심히 작성해 보기로 했다!

 

프로젝트 소개

프로젝트 이름 : 나만의 친환경(Our ECO Story)

 

프로젝트 소개 : 친환경 생활 실천을 공유하고 공감하는 우리들의 커뮤니티

 

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

 

배포 주소 : http://ourecostory.s3-website.ap-northeast-2.amazonaws.com/

나만의 친환경 - 친환경 생활 실천을 공유하고 공감하는 우리들의 공간

기간 : 2023.04.28 ~ 2023.05.25 (약 4주)

 

팀 구성 : Front-end 3명, Back-end 3명

 

기술 스택 

화면 구성

랜딩 페이지 및 홈화면 

랜딩 페이지에서 화살표를 마우스 클릭하면 홈 화면으로 이동합니다.

 

홈 화면에는 관리자 채택글이 캐러셀 형태로 렌더링 됩니다.

 

회원가입, 로그인 화면

회원가입 및 로그인은 일반회원 및 구글 Oauth 회원 로그인이 가능합니다.

회원가입때 작성한 정보를 바탕으로 아이디 찾기 및 비밀번호 찾기가 가능합니다.

 

 

게시판

카테고리에 따라 게시판 이동을 할 수 있고, 게시글 목록에는 썸네일, 제목 작성자가 보입니다.

글 목록에서 좋아요와 북마크를 할 수 있습니다.

 

게시글 상세 페이지에는 게시글을 볼수 있으며 댓글, 대댓글을 작성할 수 있습니다. 좋아요, 북마크도 가능합니다. 

관리자 계정으로는 게시글을 채택할 수 있으며 약간의 수정을 거쳐 채택하게 되면 홈 화면에 관리자 채택글로 게시글을 볼 수 있습니다.

 

마이페이지

 

마이페이지 - 내정보 페이지에서 나의 정보(닉네임, 프로필사진, 비밀번호)를 수정할 수 있고 회원 탈퇴도 할 수 있습니다.

마이페이지 - 북마크 페이지에서 내가 북마크한 게시글을 카드형태로 볼 수 있습니다. 클릭시 해당 게시글로 이동합니다.

마이페이지 - 내가 쓴 글 페이지에서 내가 쓴 게시글과 댓글을 볼 수 있습니다. 클릭시 해당 게시글로 이동합니다.

 

 

내가 담당한 부분 : 회원가입 및 로그인, 홈 화면, 마이페이지-북마크 

 

KPT 회고

Keep

- 매일 하는 회의

 매일 10시 FE회의, 1시 전체 팀회의를 하면서 각자 어느 부분 어떻게 진행되고 있는지 공유하고, 문제가 있는부분이나 제안 사항 같은것을 공유했다. 특별한 사정이 없는 한 모든 팀원이 회의에 전부 참석했다. 내 파트 뿐만 아니라 프로젝트의 전체적인 진행정도와 완성도를 계속 인지한 채로 내가 맡은 파트 중 어떤 부분이 먼저 구현되어야 할지 우선순위를 정하면서 팀원의 진도에 맞추어서 프로젝트를 진행할 수 있었다.

 

- Userflow

 첫 주에 기획을 거의 다 한 시점에 멘토님께서 글로 간단하게 해봐도 좋으니 Userflow를 작성해보는게 좋다고 하셔서 userflow를 그려본 것이 굉장히 도움이 되었다. 우리가 기획 단계에서 생각하지 못한 많은 부분이 userflow를 작성하면서 하나하나 눈에 들어오고, 페이지 단위로 연결되는 것을 눈으로 보니 웹페이지의 구조가 좀 더 명확하게 그려져서 레이아웃을 잡고 기능을 구현하는데도 도움이 되었다.

 

Problem

- 계속 변하는 기획안

 기획단계에서 세세하게 사항을 정하지 않아서 그런지 프로젝트가 진행되면서 여러가지 기능이 바뀌거나 추가, 삭제 되는등 변동이 많았다.

 특히 더미데이터로 프론트쪽 기능을 구성해 놓았는데, 나중에 백엔드가 구현되고 보니 end point도 다르고, request body, response body도 다 다르고, 심지어는 통신 메서드까지도 다른 경우가 있었다. 이러한 현상이 생긴 이유는 처음에 API 문서를 제대로 작성하지 않아서 각자 하던대로 endpoint와 데이터 body를 정해서 그런 것 같다. 소통 미스도 한 몫 한것 같다. 

 

- PR 리뷰

 PR을 올리면 팀원끼리 리뷰를 하고 merge 하기로 했었는데, 한 2주차 정도까지는 팀원의 코드를 보고 간단하게라도 리뷰를 남기고 했었는데 어느순간부터 리뷰를 하지 않고 바로 merge를 진행했다. 약간 귀찮아진 느낌도 있었고 사실 팀원의 코드를 리뷰하고 피드백 한다는게 쉽지 않아서 피하게 된 것 같다. 아직 남의 코드를 평가하거나 개선 idea를 생각하는게 힘들다고 생각했는데, 지금와서 생각해보니 조금이라도 이상하거나 내생각에 개선할 부분이 보인다면 팀원과 이야기를 하면서 정답을 찾는 것은 아니더라도 좀 더 나은 방향으로 코드를 개선할 수 있지 않았을까 한다. 

 

- 개인플레이?

 FE팀에서 작업할 때 페이지별로 작업을 진행하게 되었는데, 이렇게 하니 뭔가 개인플레이 하는 느낌이 들었던 것 같다. PR 후 merge를 진행할 때도 conflict가 거의 일어나지 않았고, 다른 팀원이 작성한 코드가 내 코드에 영향을 주는 경우도 거의 없었다. 원래 이런건가? 싶기도 하고 뭔가 팀플레이를 잘 못하고 있는건가 싶기도 한데, 아직은 경험이 부족해서 잘못된건지 아닌지도 잘 모르겠다..

 

- 반응형 디자인 기획

 디자인에 익숙하지는 않아서 기능을 다 구현하고 그냥 적당하게 보기 싫지 않을 정도로만 디자인을 했다. 그런데 웹페이지를 거의 다 만들고 반응형 디자인을 구현하려고 하니 화면크기에 따라 레이아웃이 다 깨져 버려서 굉장히 곤란한 상황이 발생했다. Due까지 2일정도 남은 상태였어서 결국은 반응형 디자인은 포기하는 방향으로 프로젝트를 진행했다. 

 반응형 디자인 같은 경우 처음부터 기획에 포함하여 레이아웃잡을 때 반응형을 고려하여 잡아야 한다고 한다. 우리는 PC화면을 완성하고 반응형 디자인을 넣으려고 하니 css를 처음부터 끝까지 다시 작성해야 하는 상황이었다. 다음부터는 반응형 디자인을 구현할꺼면 모바일, 태블릿 환경까지 고려하여 레이아웃을 기획해야 할 것 같다.

 

Try

- Quill editor 적용 및 개선 해보기

우리팀에서 Quill Editor를 사용해서 게시글에 이미지를 넣는 기능을 구현했다. 팀원의 설명을 듣고 코드를 보니 로직자체는 적당히 어떻게 되는지 눈에 들어오는데, 나중에 코드를 작성하면서 좀 더 익혀봐야 할 것 같다. 

 

- 조금 더 세세한 기획해보기

 기획단계에서 놓친게 많은것 같다. API 명세서나 화면 정의서 같은것은 처음에 확실하게 잡고 가야 나중에 고생하지 않을 것 같다. 꼼꼼하게 디테일한 사항 하나하나를 검토해보고 문서 최신화도 자주해서 프론트-백엔드 간의 소통이 원활하게 되도록 해야 할 것 같다. 

 

- 쿠키, 세션 방식으로 인증 흐름 구현해보기

 이번에는 JWT기반의 Token 방식으로 로그인을 구현했는데, 사실 현업에서는 토큰보다는 쿠키, 세션 방식으로 로그인을 주로 구현한다고 들었다. 쿠키, 세션 방식의 인증 흐름도 공부해서 구현해봐야 할 것 같다.

 

 

주저리주저리..

 사실상 처음으로 0부터 시작하는 팀 프로젝트인데 굉장히 무난하게 흘러간 것 같다. 우리팀들은 다들 순둥순둥해서 그런지 심각한 갈등같은건 없었고 다들 제 역할을 잘 해준거 같아서 좋았다. 매일 모여서 자잘하게 의견을 나눴던게 도움이 된 것 같다.

 

 프론트, 벡엔드가 협업해서 프로젝트를 진행하는데, 백엔드는 초반에 바쁘고, 프론트는 후반에 바쁘다는것을 학습했다. 백엔드 API가 완성될 때 까지 프론트는 할 수 있는 최대한의 작업을 해놔야(레이아웃, UI 등등) 나중에 API가 구현되고 데이터를 받아서 기능을 구현할 시간을 확보할 수 있을 것 같다.

 웹페이지를 만들 때 생각보다 디테일이 중요하다는것도 배웠다. 통신 에러 코드에 따른 분기라던가, 여러가지 상황에서의 Edge Case, 사용자의 특이한 행동 등 디테일적으로 신경써야 할 부분이 많았다. 최대한 이상한 버그없이 깔끔하게 웹페이지를 만들려고 노력했는데 그래도 우리가 구현한 기능 내에서는 어느정도 목표치에 도달한 것 같다.

 

확실히 공부만 해서는 알 수 없는 프론트 끼리의 소통, 프론트와 백엔드의 소통이 어떻게 이루어지는지를 배울 수 있었다. 팀 프로젝트를 해보니 현업에서 소통을 왜 강조하는지 조금은 알게 된 것 같다.

 

 이렇게 끝나고 블로그 작성하는데 뭔가 시원하면서 섭섭한 것 같다. 메인프로젝트의 끝이면서 코드스테이츠 6개월 과정의 마지막이라고 생각하니까 약간 실감이 안된다.. 매일매일 9시에 출첵하는게 습관이 됐는데..