[React] 리액트 숙련주차 팀프로젝트 과제 (뉴스피드 제작하기)

 

🔥 React 숙련주차 팀프로젝트 과제 🔥

 

 

< 필수 구현 기능 >

 

로그인, 회원 가입

• Authentication 에서 제공하는 api를 이용하여 아래 회원 가입, 로그인을 구현해보기
  • 아이디(이메일), 패스워드
  • 소셜 로그인 (구글, 깃헙)

 

CRUD

• • Firestore 에서 제공하는 api를 이용하여 CRUD 데이터베이스 핸들링 구현
  • CUD(등록, 수정, 삭제)가 일어날 때 마다 R(조회)해서 자연스럽게 화면 변경

 

마이 페이지

• 내 게시물 보기
•   Authentication 에서 제공하는 uid 를 이용해서 내 게시물들이 모일 수 있게 해보기

• 프로필 수정 기능
• Storage 에서 제공하는 api를 이용하여 이미지 업로드와 다운로드 url 을 받아서 이미지 핸들링

 

배포하기

• Vercel 이라는 호스팅플랫폼을 이용해 배포
• 배포에 적용될 브랜치는 main 또는 master 브랜치로 적용

 

Git을 최대한 활용해보기!

• Pull Request 활용하기!
  • Merge는 Pull Request를 활용하여 진행한다.
  • 참고
    • https://xo.dev/github-collaboration-guide/#pull-request-만들기
• Branch 만들어 작업하기
  • 참고
    • https://xo.dev/github-collaboration-guide/#git-브랜치-만들어-작업하기
    • https://blog.outsider.ne.kr/1505
• 코드 리뷰 해보기!

 

 

< 추가 기능 구현 >

• 비밀번호 찾기 기능
• 팔로우, 팔로워 기능
• 댓글 기능
• 좋아요, 북마크 기능
• 무한 스크롤 기능
• 더보기 기능
• useMemo, useCallback을 활용하여 렌더링 최적화 적용하기
• Vercel에 배포한 뒤 커스텀 도메인 적용하기

 

---

 

 

프로젝트 명 : Try Eat

소 개 : food & beverage 뉴스피드

내 용 : 본인만의 맛집을 소개하고 공유해요

 

 

 

 

와이어프레임

 

이렇게까지 페이지 별로 자세하고 구체적인 와이어프레임을 처음 작성해봤는데

보기에도 깔끔하고, 기능을 구현할 때 css 부분에 대한 고민을 많이 하지 않아도 돼서 굉장히 편리했다

와이어프레임의 중요성을 깨달았다!

 

 

 

API 명세서

 

한 눈에 보기 쉽게 사용한 API를 작성했다.

 

 

메인페이지

 

 

 

 

 

상세페이지

 

 

 

 

회원가입 페이지

 

 

 

글 등록 페이지

 

 

 

 

 

 

마이페이지

 

 

 

 

 

 

회원정보 수정

 

 

 

 

 

수정된 프로필

 

 

 

 

---

 

 

 

Git-Hub 주소

https://github.com/h0ngwon/sparta-week8-project

GitHub - h0ngwon/sparta-week8-project

 

 

 

배포된 링크 

https://sparta-week8-project.vercel.app/

 

Try Eat

 

 

 

노션 링크

 

https://teamsparta.notion.site/6-8727fb2403e94ff990d717a5ea546fc6

6캔두잇

 

 

KTP 회고

 

Keep - 현재 만족하고 있는 부분

• 마이 페이지 나의 게시글과 좋아요 목록 분류
• 데이터 수신을 기다리는 로딩페이지
• 프로젝트가 요구하는 필수기능 구현
• 함께 고생했던 팀원들과의 팀워크
• 꼼꼼한 와이어 프레임의 설계로 구현해야 할 기능과 페이지 디자인을 정리하고 업무 분담
• 오류상황을 다각도로 분석하여 해결
• 브랜치를 기능별로 나누어 협업시 충돌이 없게 버전별로 관리
• Pull Request시 구체적인 피드백과 PR리뷰 작성
• merge를 수시로 진행하여 큰 conflict없이 진행
• Commit 컨벤션을 지켜서 Commit 하기
• 서로에 대한 배려와 존중을 기반으로 원활한 소통
• 같은 목표로 의지를 갖고 노력한 점
• 서로의 지식을 공유하고 배우려고 한 점

 

Problem - 불편하게 느끼는 부분

• 구현하고 싶었으나 못한 기능 (상세 페이지 댓글기능,카테고리 별 게시글 분류
• 사용자 측면 (UX) 보다는 개발자 입장에서 개발한 점
• 원리를 정확히 이해하고 개발하기 (React Lifecycle, useEffect) → 무한로딩
• custom modal이 아닌 내장된 alet창 사용한 점
• 디테일한 부분의 css 디자인 (버튼 크기 등)
• 코드의 컨벤션이 하나로 통일되지 않은점 → 화살표 함수와 선언식 혼용
• 기능 개발의 데드라인을 정하지 않았고 전체적인 계획에 비해 하루 계획이 불분명 했던점

 

Try - Problem에 대한 해결책, 당장 실행 가능한 것

• 게시글 등록시 지역 또는 음식에 따른 카테고리 선택탭 추가 이후 메인 페이지 좌측에 카테고리 검색기능 추가 및 상세페이지 하단에 댓글창 만들기
• 사용자 측면에 서비스를 고민하여 디테일한 기능 구현하기
• 컴포넌트 분리 및 코드 리팩토링을 하며 React 최적화 해보기
• custom modal 구현하여 적용
• 코드의 컨벤션을 팀원과 정하여 클린코드 사용
• 기능 개발의 데드라인 지정 및 하루 계획을 설정하고 개발하기
• Redux가 아닌 Context API 사용
• 객체지향적으로 개발하기 (Class 사용)

 

 

 

팀프로젝트 후기

 

프로젝트 시작 전 팀원들과의 규칙이나 목표를 적었었는데 규칙도 다 지켜졌고 목표에선 좌.절.금.지 항목이 조금 지켜지지 않았지만 전반적으로 다 해냈다! 특히 취침시간 5시간은 굳은 의지를 표현하는 장난반 진담반으로 적어놨는데 이게 실제로

지켜줄 줄이야.... 팀원들 모두 열심히 해준 덕분이었다.. 주말에도 빠짐없이 나와서 했던 것이 좋은 결과를 이끌어냈다!