[프로젝트 회고] SeSac, 싱그러운 우리 🌱

개발 인원 및 기간

• 개발 기간 : 2022/8/1 ~ 2022/8/12 (10일)
• 개발 인원 : FE 4명, BE 2명
  • Front-end : 김영수, 박성은, 손민지, 이금관
  • Back-end : 김동규, 박서윤

프로젝트 소개

식물 판매 및 식물 커뮤니티 사이트 싱그러운 집을 모티브로 한 프로젝트.
기존 싱그러운 집 사이트와 차별화 되는점은 e-커머셜 기능을 제외하고 커뮤니티 기능에 중점을 둔 것이다. 식물 카페 / 수목원 / 식물원 / 캠핑장 등 친환경 및 식물과 관련있는 장소에 방문하고 난 후, 해당 장소에 대한 후기를 공유하는 커뮤니티 사이트를 만들고자 하였다. 기존 사이트 '싱그러운 집'에서는 모티브만 가져왔을 뿐, 개발은 초기 세팅부터 모두 직접 구현하였으며 다양한 라이브러리와 API를 최대한 활용하는 것을 목표로 진행하였다.

사용기술

Front-end

Back-end

협업 툴

구현 목표

• 메인 페이지 (React-Slick 라이브러리를 이용한 슬라이더 구현)
• 소셜 로그인 (카카오 REST API)을 이용한 로그인 페이지
• 게시글목록 페이지
• 게시글목록 페이지 내 검색 및 필터링 기능
• 개별 게시글 상세 페이지
• 게시글 댓글, 대댓글 기능 생성, 수정 및 삭제 기능
• 글쓰기 페이지 (여러개의 사진을 Form Data를 이용하여 보내기)

시연영상

🌱 싱그러운 우리, SeSac

담당 기능 및 페이지

이번 프로젝트에서 내가 담당한 부분은 게시글의 상세 페이지이다.
상세 페이지는 사용자 Flow에서 가장 마지막에 접하게 되는 페이지가 된다.
해당 페이지에서는 사용자가 작성한 글과 사진을 조회하고, 방문한 장소의 지도 표출 및 길찾기 기능까지 연결시키고자 하였다. 또한, 자신의 방문 후기를 공유하는 커뮤니티 사이트인 만큼, 댓글과 대댓글 기능도 추가하여 커뮤니케이션 할 수 있도록 하였다.

게시글 상세 페이지

: 게시글 내용 상세(조회) 및 댓글 페이지

• KaKao Maps API를 이용한 지도 기능 구현
  - Google, Naver 등 지도 API를 제공하는 사이트가 많지만 공식문서가 가장 잘 나와있는 KaKao의 지도 API를 선택하여 사용하였다. 위도, 경도 정보를 이용해 해당 위치의 지도를 표출하고, 마커와 확대/축소 컨트롤 등을 추가하였다. 마커 위에 커스텀 오버레이를 추가할 수 있어서 해당 장소의 이름과 주소를 표시하고 길찾기 버튼을 추가해 카카오맵으로 연결하는 것까지 구현하였다.
  
• 댓글 및 대댓글의 생성, 수정, 삭제 기능 구현
  - 댓글 및 대댓글의 생성
  : input창에 댓글을 등록하면 fetch함수를 통해 'POST' 요청을 보내 댓글을 생성한다. 대댓글은 부모 댓글이 어떤 댓글인지 정보를 담은 'parent_comments_id'라는 값을 정해주고, 해당 부모 댓글의 하위에 들여쓰기 되어 보여질 수 있도록 구현하였다.
  - 수정 및 삭제
  : 수정과 삭제 기능은 자신이 작성한 댓글과 대댓글에만 가능해야하므로, 조건부 렌더링을 통해 로그인한 사용자와 댓글을 작성한 사용자의 id가 같을 때만 수정/삭제 버튼이 표출되도록 하였다. 각각 API에 'PATCH'와 'DELETE' 요청을 보내는 것으로 구현하였다.
  
• 사용자 경험을 위한 댓글 페이지네이션 기능 구현
  - 댓글은 limit = 5로 지정하여 5개씩 보여지도록 하였다. 페이지 번호를 누르거나 '<' , '>' 버튼을 눌러 해당하는 페이지의 댓글이 보여지도록 계산하여 페이지네이션을 구현하였다.
  

로딩 페이지

• 사용자 경험을 위한 로딩 페이지 생성
  - 실제 데이터에 사진이 있다보니 페이지가 로딩되는 데 시간이 소요되었다. 이때, 흰 화면만 나오는 것이 사용자 경험에 좋지 않다고 생각되어 로딩페이지를 넣었다. 처음에는 사이트의 시그니처인 새싹 로고를 이용해 만들고자 하였으나, 팀원들이 지쳐있을 때라 소소한 즐거움을 위해 팀원들의 사진을 이용해 만들어 보았다.
  

프로젝트 회고

TEAM

🥳 잘한 점

• "새싹 새싹 할 수 있다!🌱"
  : 우리 사이트의 컨셉이 '식물, 친환경' 이었기 때문에 우리 팀원들은 새싹이들🌱로 불렸다(ㅋㅋ) 워낙 세계관에 진심인 편...! 장난 반 진담 반으로 부르기 시작했지만 덕분에 정체성이 확고해져 우리 프로젝트에 더 애착을 가지고 열심히 할 수 있었던 것 같다.
  또, 1차 프로젝트 이후에 바로 시작된 2차 프로젝트 인지라 텐션이 조금 떨어져 있었는데 텐션을 끌어올리자는 의미로 팀 구호도 만들었던 게 단합에 큰 도움이 되었다. 그 구호가 바로 "새싹 새싹 할 수 있다!!!" 지금 생각해도 너무 귀엽다...🫶🏼 매일 아침 daily meeting이 끝날 때마다 외치던 게 처음엔 쑥쓰러웠지만 나중엔 진짜로 힘이 되었다! 다른 팀도 처음엔 '뭐야~~' 했지만 은근히 부러워했던 것 같기도 ^___^

• "이게 회의지"
  : 직전 프로젝트에서 아쉬웠던 점이 회의를 형식적으로 진행했던 것 같았다는 것이었다. 각자 진행 상황을 공유하기는 하지만 "말하기"에서 끝났던 느낌이랄까..?
  하지만 이번에는 "이해하기"가 된 것 같다. 백엔드와의 회의에서도 이해가 안 되는 부분은 바로바로 질문하고 대답을 들을 수 있었다. 덕분에 백엔드에서 API가 빨리 완성되지 못했을 때도 왜 그리 바쁜지, 어떤 걸 새로 배우고 있기 때문인지를 정확히 알 수 있어 더 잘 이해하고 기다릴 수 있었다.
  또, 백엔드에서는 파이썬을 사용하고 있어서 dictionary, list 같은 자료형에 대해 말하곤 했는데 그것이 자바스크립트의 object, array와 비슷한 개념이라는 것을 알 수 있었다. 그래서 서로에게 설명할 때 프론트에서는 'list 형태로 주셔도 돼요', 'dictionary로 담아 주시는 게 편할 것 같아요'와 같이 이야기할 수 있어서 소통이 더욱 원활하게 이루어졌던 것 같다.

• "뿌듯한 Notion 활용" ➪ SeSac Notion
  : 쓰면 쓸 수록 맘에 드는 노션! 정리하기 가장 쉽고 예쁜 툴인 것 같다. 이번에도 노션을 기깔나게 활용한 점이 가장 잘 한점 중 하나라고 생각한다. 팀 노션 페이지를 만들어 Github, Trello, 회의록, 데이터 모델링, 기능 및 페이지 배분, 레이아웃 디자인 등 프로젝트에 필요한 모든 자료를 한 곳에 모아두어 보기 쉽게 한 것이 좋았다.

😞 아쉬운 점

• "페이지가 1개 뿐"
  : 이번 프로젝트는 시간이 촉박한 관계로 프론트에서는 각자 담당 페이지가 1개 밖에 없었다. 물론 그 안에서 구현할 수 있는 기능들은 많았지만, 처음에는 분량이 적다고 생각해 너무 느슨하게 진행된 것이 아쉬웠다. 각자가 담당한 페이지의 기능을 빨리 끝내더라도 다른 동료의 기능을 함께 구현하거나 도움을 줄 수 있는 기회였는데 시간을 조금 더 효율적으로 쓰지 못한 것 같아서 아쉬웠다.

• "익숙한 Notion, 여전히 낯선 Trello"
  : 협업툴은 어떤 것을 사용해도 상관없지만, 여전히 익숙한 툴에만 손이 가는 것이 아쉬웠다. 새로운 툴을 접하고 빠르게 활용할 줄 아는 것도 개발자의 덕목이라고 생각하는데 자꾸 익숙한 노션에만 손이 간다ㅠ_ㅠ

Me

팀 협업과 별개로 나의 개인적인 회고를 해보자면...

🥳 잘한 점

• 팀원들에게 피드백 받기
  이번에도 개인적인 피드백 설문을 부탁해서 받아보았다. 직접적으로 대면해서 물어보면 좋은 말만 해줄 수도 있고 상대가 부담스러워할 수도 있다고 생각해서 익명 설문을 만들었는데, 팀원들도 좋은 툴이라고 따라 써도 되냐고 하셔서 기쁜 마음으로 드렸다!(뿌_듯) 차곡차곡 모아서 단점은 개선하고 장점은 지켜나가야지💪🏻

• 능동적이고 적극적으로 소통하기
  : 위에서 받은 피드백 중에 공통적인 부분이 회의 때 적극적으로 의견을 제시하고 아이디어도 많이 냈다는 것이었다. 딱 내가 맡은 부분만 하기보다는 프로젝트 전체가 곧 나의 일이라고 생각하고 늘 능동적으로 임한 것이 좋았던 것 같다.

• 깔끔하고 보기 좋은 코드
  : 멘토님께 자주 받았던 코멘트가 '보기에 깔끔하다'는 것이었다. 아직 구현한 기능이 많지 않아서 가능한 것일지 몰라도 줄바꿈이나 들여쓰기부터 네이밍, 컴포넌트 분리, 연관있는 함수끼리 붙여두기 등등에 신경을 많이 쓴 것이 좋았던 것 같다. 정리병이 여기서 빛을 발한 걸지도✨ 코드는 내가 쓰기 편한 것보다 남에게 읽히기 편한 게 중요하다는 것을 계속 신경쓰자!

😞 아쉬운 점

• 체력관리
  : 정말 공부도 체력, 일도 체력 뭐든 체력이 1순위라는 것을 다시 한번 느낀 계기였다. 프로젝트 초반에 감기를 심하게 앓아서 속도가 더뎌진 것이 큰 아쉬움으로 남았다. 문제는 한 번 그렇게 몸이 처지고 나니까 텐션을 다시 끌어올리는 데 꽤 많은 시간이 들었다는 점이다. 더 많은 것을 할 수 있었는데... 너무 아쉽다. 건강관리는 무조건 1순위로 챙길 것!

• 대댓글....쉽지않네요
  : 댓글에 대댓글이 달리는 건 당연하다고 생각했는데, 이렇게 어려운 일일 줄이야.... 코딩을 배우고 나니 모든 어플리케이션에 쉬워보이는 기능이 없다.
  댓글 하위에 대댓글을 생성하기 위해 댓글 컴포넌트인 Component 안에 Component(자기자신)을 map으로 돌려본 코드이다. 해당 Component에 '답글' 버튼이 달려있어서, 댓글 - 대댓글 - 대대댓글 .... 로 무한히 대댓글이 생성될 수 있도록 해보았다. 이렇게 하면 프론트 단에서는 무한 대댓글이 생성되지만, 백에서 이 대댓글들의 데이터를 관리하기가 너무 어려웠다. 기획상 결국에는 대댓글이 1개만 나오는 것으로 변경하여 삭제한 코드이지만, 언젠가는 무한 대댓글... 성공해보고 싶다.

• 댓글 수정, 삭제 때마다 API 호출을?
  : 위 코드는 댓글을 수정하는 코드인데, 수정 버튼을 눌러 editable을 활성화시켜 input창이 뜨게 하고, 수정된 내용을 등록하면 API에 PATCH 요청을 보낸다. 요청이 성공하면 editable을 false로 바꾸어 input창이 사라지고 수정 입력된 내용이 보이게 하는 코드이다.
  따라서 댓글 수정이 성공해도 일단 사용자에게는 수정된 것처럼 보이게 할 뿐 진짜로 수정된 데이터가 바로 보이는 것이 아니다. 실제로 수정된 내용은 해당 페이지에 다시 들어오며 댓글 데이터를 가져올 때 반영되게 된다. 이런 방법이 데이터 호출과 렌더링을 최소화시켜 더 효율적인 방법이 아닐까 생각해서 작성해 본 것인데, 맞는 방법인지 잘 모르겠다(..) 이것에 대해서 멘토님께 여쭤보고 싶었는데 시간이 없어서 정확히 짚고 넘어가지 못해 아쉬운 점에 넣어보았다.
  댓글 삭제도 마찬가지로 삭제 요청만 보내고 삭제된 것처럼 보이게만 한 뒤, 나중에 삭제된 데이터를 보여주는 방식으로 구현할 수 있다.

• 코드리뷰 또 못했어.....
  : 역시나 시간부족으로 기능구현에 바빠서 다른 팀원들과 코드리뷰를 못했다. 이건 꼭! 꼭! 다시 모여서 하기로 했다. Form data 이용해서 글쓰는 거랑 소셜 로그인 진짜 궁금하다. 서로 에러 해결해주면서 슬쩍슬쩍 보긴 했지만... 이건 꼭 나중에 모여서 서로 코드 리뷰하고 넘어가야지!

앞으로는...

• 프로젝트 진행 중에는 널널함은 없다. 차라리 빠르게 끝내고 다른 부분에서 도움을 주거나 공부할 것을 찾자!
• 다른 팀원의 코드도 가지고 있으니 한번 이해해보고 코드리뷰 시간을 짧게라도 가지자. 내 코드도 기능만 돌아가는 게 중요한 게 아니다! 동기든, 멘토님이든 가져가서 리뷰 받기✨ 더 좋은 방법 생각해보기✨
• 첫째도 체력! 둘째도 체력! 셋째도 체!!력!!!!!
  

참고

📍 프로젝트의 자세한 코드는 새싹 프로젝트 깃허브 를 참고해주세요