[WIL] 팀 프로젝트 회고 (React 뉴스피드 프로젝트)

---

1. 프로젝트 개요

1) 프로젝트명 및 내용

🛒 알뜰살뜰 살말 서비스

사고싶은 물건에 대한 글을 게시글로 올리면, 해당 게시글의 리스트를 조회할 수 있고, 제품의 구매 여부를 댓글로 평가해주는 뉴스피드 사이트

 

Vercel 배포 https://news-feed-ten.vercel.app 

알뜰살뜰 살말

 

2) 프로젝트 기간

2023. 6. 26 - 2023. 7. 3

 

3) 사용 스택

React, Firebase, Redux, Styled-components, React-Router

 

 

4) 프로젝트 구조

📦src
 ┣ 📂components
 ┃ ┣ 📂authentication
 ┃ ┃ ┣ 📜Login.jsx
 ┃ ┃ ┗ 📜SignUp.jsx
 ┃ ┣ 📂comments
 ┃ ┃ ┣ 📜AddComments.jsx
 ┃ ┃ ┗ 📜CommentsList.jsx
 ┃ ┣ 📂contents
 ┃ ┃ ┣ 📜AddContents.jsx
 ┃ ┃ ┣ 📜DetailContetsList.jsx
 ┃ ┃ ┗ 📜PreviewContentsList.jsx
 ┃ ┣ 📂profile
 ┃ ┃ ┣ 📜ChangeProfileImg.jsx
 ┃ ┃ ┣ 📜ChangeUserNameAndPw.jsx
 ┃ ┃ ┗ 📜MyContents.jsx
 ┃ ┣ 📂ui
 ┃ ┃ ┗ 📜Header.jsx
 ┃ ┗ 📜.DS_Store
 ┣ 📂pages
 ┃ ┣ 📜ContentsForm.jsx
 ┃ ┣ 📜Detail.jsx
 ┃ ┣ 📜Main.jsx
 ┃ ┗ 📜MyProfile.jsx
 ┣ 📂redux
 ┃ ┣ 📂config
 ┃ ┃ ┗ 📜configStore.js
 ┃ ┗ 📂modules
 ┃ ┃ ┣ 📜auth.js
 ┃ ┃ ┣ 📜comments.js
 ┃ ┃ ┣ 📜contents.js
 ┃ ┃ ┗ 📜myprofile.js
 ┣ 📂shared
 ┃ ┗ 📜Router.js
 ┣ 📜.DS_Store
 ┣ 📜App.jsx
 ┣ 📜GlobalStyle.jsx
 ┣ 📜fbase.js
 ┗ 📜index.js

 

 

5) 와이어 프레임

 

 

---

2. 내가 맡은 기능

회원가입/로그인, 마이 페이지(프로필 수정, 내가 쓴 글)

 

1) 회원가입 및 로그인

회원가입

 

로그인

• E-mail/password, Google 두 가지 방식으로 회원가입 및 로그인 가능하도록 구현
• 회원가입 및 로그인 시 UX 측면 고려하여 에러 메시지 핸들링
  • '이미 가입된 이메일입니다', '비밀번호와 비밀번호 확인이 일치하지 않습니다', '가입된 이메일이 아닙니다', '이메일과 비밀번호가 일치하지 않습니다' 등
• E-mail 가입 시 비밀번호 찾기 가능 - 가입한 이메일로 비밀번호 재설정 메일 전송
  • 가입되지 않은 이메일로 비밀번호 찾기 시, '가입된 이메일이 아닙니다' 에러메시지 출력

 

 

 

2) 마이 페이지

프로필 변경

• 프로필 사진, 닉네임, 비밀번호 변경 및 검증 기능 구현
• 내가 쓴 글 최신 순으로 모아보기

 

 

---

3. 팀원들과 함께 작성한 KPT (Keep-Problem-Try)

keep

• 팀원 간 서로 연락도 잘 되고, 진행 상황에 대해 공유하고 문제점을 함께 해결하려고 했던 점
• 초반 와이어 프레임과 API를 구체적으로 정해놓고 시작해서 프로젝트 진행하는데 참고하기 좋았음
  • 협업하며 완성 결과물에 대한 렌더링 될 구체적인 화면과, 코드 작성 시 네이밍에 대한 통일성 유지
• 문제 발생시 팀원들과 함께 공유하고 해결하는 것
  • 해결 방법과 원인을 찾기위해 끝까지 노력한 점 (비록 끝내 해결하지 못했더라도)
• 격려하고 칭찬하며 프로젝트를 진행한 점
• 팀원 간 소통이 잘 되어 서로 부족한 부분, 서로의 장점을 최대한 살리며 작업할 수 있었던 점
• 쿠션어의 적절한 사용과 팀원들에 대한 배려를 기반으로 서로 기분이 상하지 않게 협업했던 점
• 이메일을 통한 직접적인 회원가입 외에도, 소셜 로그인을 가능하게 하여 사용자의 편의를 최우선으로 고려한 점

 

problem

(1) 로그인/회원가입

• 로그인, 회원가입 창을 modal로 구현하는게 더 좋았을지? 아니면 현재처럼 Header에서 드롭다운되는게 더 좋았을지? ux 측면에서 어떻게 하는게 더 좋았을지에 대한 고민
• 프로필 이미지 수정하는 과정에서 img 파일을 업로드, 업데이트 하는 더 나은 방법이 있을 것 같다는 생각 (이번에 사용한 방법은 FileReader 웹API)
• 비밀번호 설정 시 유효성 검사에 대한 부분
  • 기본 Firebase에서 요구하는 6자리 이상 + 비밀번호/입력 확인까지는 구현했는데, 비밀번호에 영문자나 특수문자를 필수로 넣어야하는 유효성 검사도 해보고 싶었는데 아쉬움

(2) 게시글

• 게시글 입력폼 : NAN 대신 → placeholder에 “숫자만 써주세요” or 숫자 외의 문자는 입력안되게 했으면 좋았을 듯
• 미로그인시 게시글 등록하려다 안되면 → 로그인 페이지로 바로 이동하게 했으면 ux 측면에서 더 좋았을 듯

(3) 댓글

• 게시글 삭제 시 해당 게시글에 달린 댓글까지 firebase db에서 삭제되게 하고 싶었는데, 구현하지 못해서 아쉬움이 남는다.
• 댓글 승낙/거절 비율을 보여주고, 수정과 삭제 기능도 구현했으면 좋았겠다

(4) 헤더, 마이 프로필

• 내가 쓴 글 리스트와 더불어 내가 쓴 덧글 리스트도 구현에 성공하였으면 좋았겠지만, 구현하지 못하였다.
• <탑버튼> -Top-button이 여러 페이지에서 반복되어 사용되는데 이를 페이지마다 중복되게 여러번 작성하여 아쉬움이 남는다.

 

try

• 좋아요 구현한 후, 댓글 승낙/거절 비율 (네이버 기사처럼) 도전
• 카테고리 기능: 결재 원하는 물품의 타입별로 필드 나눠보기 (음식/ 전자기기 / 도서 / 옷 / 등등) 도전
• 팔로우한 사람 / 스크랩 기능 도전
• prettierrc 사용
• useCallback, useMemo 최적화
• redux의 최신 기술이라고 볼 수 있는 redux toolkit 사용해보기
• API를 더욱 더 적절하고, 다양한 사용하고 함께 공유하기
• styled-component만 따로 분류하여 가독성 높이기
• 댓글 수정, 삭제 기능 추가

 

 

---

4. 개인적인 소감

이번 팀플은 개인적으로 매우 뜻깊은 팀플이었다. 배운 점도 많고, 내 스스로 부족한 점이 무엇인지도 많이 느끼는 프로젝트였다. 개발 능력 뿐 아니라 협업을 하는 연습을 계속 하고 싶었는데, 특히 협업하는 부분에서 많은 의미가 있었다.

 

지금 진행하는 프로젝트는 업무가 아니고, 배우는 과정에 있기 때문에 팀원들이 각자 배우는 속도가 다르다. 이번 프로젝트를 진행하면서는 이 서로 다른 속도를 어떻게 조정하면서 과제를 완성할 수 있을까에 대한 고민을 많이 하게 했던 것 같다.

 

공부하기 위해 하는 프로젝트인데, 데드라인은 정해져있다.

그럼 내꺼를 먼저 끝냈으니 데드라인을 위해 다른 팀원이 완성하지 못하는 부분을 내가 같이 하는게 맞는 것인지? 아니면, 그 팀원이 스스로 해결하고 방향을 찾을 수 있도록 어느 정도의 가이드라인에 대해서만 같이 논의를 해야 하는지?

 

아직도 뾰족한 답은 잘은 모르겠다. 이번에는 어쨌든 완성이 중요하다고 생각했고, 완성되지 못한 기능에 대해서 내 스스로 적극적으로 코드를 짜보기도 했다. 결과적으로는 주말에는 새벽 2, 3시, 마지막 날에는 해결되지 않는 부분 때문에 새벽 5시까지 코드를 들여다보기도 했다.

 

그리고 마지막에 느꼈던 중요한 점은, 기능 구현을 못했거나 각자 단점이 있지만 또 잘하는 특기도 있기 때문에 팀원 간에 서로 보완하며  이 프로젝트가 완성이 될 수 있었다는 점이다. 나는 발표에 약한데, 누군가가 발표로 내 단점을 커버해줬다. 누군가 기능구현에 어려움을 겪을 때, 다른 팀원들이 함께 도와가며 그 기능을 어설프게나마 완성해냈다.

 

값진 협업 경험, 그리고 트러블슈팅 경험이었다!

다음 팀 프로젝트는 더 잘 해내고 싶다! 😆