08. Travel Vibe 뉴스피드(React) -팀프로젝트 KPT 회고

Innes·2024년 2월 14일
KPTReact내배캠내일배움캠프뉴스피드리액트회고
0

Projects

목록 보기
8/11
post-thumbnail

Travel Vibe 🏖️

React - 여행 컨셉의 뉴스피드(블로그 플랫폼) 만들기


🔽 프로젝트 소개

프로젝트명 : Travel Vibe

개발 기간 : 2024.02.07 ~ 2024.02.14 (설연휴 제외 4일간)

프로젝트 소개 : 여행 컨셉의 블로그 플랫폼으로 각 카테고리에 따라 여행에 관련된 글을 쓰고, 공유할 수 있는 블로그 플랫폼 입니다.

주요 기능 : 로그인, 회원가입, 회원정보 수정, 게시글 CRUD, 내 게시글 모아보기


🔽 팀원 소개

신서연유한빈김승희곽인해서지원

@seoyeon-1206@picoloman6@HuaHuaChiChi@innes-k@seopport
리더팀원팀원팀원팀원
마이페이지게시물 페이지 , redux, firebase, 배포게시물 작성, Storage로그인 및 회원가입 모달, Authentication메인페이지, 게시물 관리 페이지

🔽 개발 환경

  • Environment : vscode, github
  • Development : React, Javascript
  • Database : Firebase Firestore, Firebase Storage
  • Library : redux, react-router-dom, styled-components, react-icons, dotenv
  • Design : Figma
  • Login : Firebase Authentication
  • Deployment : Vercel

🔽 시작 가이드

1. git clone

$ git clone https://github.com/picoloman6/nbc_travel_vibe.git
$ cd nbc_travel_vibe

2. Firebase 환경변수 설정

3. npm start

npm i
npm start

🔽 DB ERD


🔽 화면 구성 및 기능

1. 메인 페이지

  • 메인페이지

  • 로그인 모달

  • 회원가입 모달

1.1. 로그인 및 회원가입

  • 로그인
    • 헤더의 로그인을 눌러 로그인을 할 수 있습니다.
    • 로그인을 누르면 모달창이 뜨고, 이메일과 비밀번호를 입력하고 로그인합니다.
    • 각 입력란에 대한 유효성 검사로 조건에 부합하는 값을 입력해야 합니다.

  • 회원가입

    • 로그인 정보가 없을 시 '회원 가입'을 눌러 회원을 등록할 수 있습니다.
    • 이메일과 닉네임, 비밀번호를 입력하고 회원가입합니다.
    • 각 입력란에 대한 유효성 검사로 조건에 부합하는 값을 입력해야 합니다.

  • 로그인, 회원가입 기술 환경 : firebase authentication

  • 로그인이 되지 않았을 때는 Post와 My Blog 기능을 사용할 수 없습니다.
  • 로그인 했을 시에는 로그아웃 버튼을 눌러 로그아웃할 수 있습니다.

1.2. 카테고리 탭

  • 각 카테고리에 올라온 글을 카테고리 탭에서 선별하여 조회할 수 있습니다.
  • All을 누르면 모든 카테고리의 글을 조회합니다.

1.3. 게시글 프리뷰

  • 게시글 내용 일부를 프리뷰를 통해 확인할 수 있습니다.
  • 하단의 조회수와 댓글수, 좋아요수를 통해 게시글의 통계를 확인할 수 있습니다.
  • 게시글을 누르면 게시물 상세 페이지로 이동합니다.

2. 게시물 페이지

  • 게시물의 상세 내용을 조회할 수 있습니다.
  • 게시물을 수정, 삭제할 수 있습니다.
  • 하트 버튼을 눌러 게시글에 좋아요를 표시할 수 있습니다.
  • 댓글을 작성하고 등록을 눌러 댓글을 추가할 수 있습니다.
  • 등록 한 댓글은 삭제 버튼을 눌러 삭제할 수 있습니다.
  • 게시글 수정 및 삭제
    • 현재 사용자가 게시물을 작성한 사용자인 경우에만 수정 및 삭제 버튼이 표시됩니다.
  • 댓글 삭제
    • 현재 사용자가 댓글을 작성한 사용자인 경우에만 삭제 버튼이 표시됩니다.

3. 글 작성하기

  • 헤더의 Post 버튼을 눌러 글을 작성할 수 있습니다.
  • 지정할 카테고리를 선택합니다.
  • 사진 등록하기를 눌러 사진을 등록할 수 있습니다.
    • 사진을 등록하면 회색 칸에 보여지게 되고, 사진을 클릭하면 확대하여 볼 수 있습니다.
  • 제목과 내용을 입력하고 등록 버튼을 눌러 게시글을 등록할 수 있습니다.

4. 마이페이지

  • 헤더의 프로필 이미지를 눌러 마이페이지로 이동할 수 있습니다.
  • 마이페이지에서는 닉네임과 프로필 사진을 수정할 수 있습니다.
    • 수정할 닉네임을 입력하고 수정할 사진을 첨부한 뒤 완료를 눌러 수정을 완료합니다.
    • 취소 버튼을 누르면 이전 페이지로 돌아갑니다.

5. 게시글 관리 페이지

  • 헤더의 My Blog를 눌러 자신이 쓴 게시글들을 확인할 수 있습니다.
  • 게시글을 누르면 해당 게시글 페이지로 이동합니다.

6. 회고

6.1. 기술적 어려움

  1. 파이어베이스
    • 외부 API를 가져다 쓰는 것이 어려웠다.(where 등)
  2. 리덕스
    • 리덕스 패턴에서 데이터의 흐름을 이해하는 것이 어려웠다.
    • 리듀서에 저장된 데이터를 읽고 쓰는 것이 어려웠다.
    • 리듀서에서 불변성을 유지하면서 데이터를 관리하는 것이 어려웠다.
  3. 로그인, 로그인 상태 유지
    • authentication 메서드 사용이 어려웠다.
    • 로그인 상태를 유지하는 효율적인 방법을 모른다.

6.2. 기술 이외의 어려움

  1. 협업
    • 다른 팀원이 만든 코드를 활용하거나, 내 코드를 다른 팀원이 사용하는 경우에 대한 스킬이 부족해 오류나 코드 수정이 많았다.
  2. 작업 순서
    • 컴포넌트 → 파이어베이스 및 로그인 순으로 작업하니까 코드 수정이나 오류 많았다.
    • 파이어베이스 및 로그인 → 컴포넌트 순으로 작업을 하자.

6.3. 배운점

  1. 초기 세팅 시 시간을 들여 작업환경을 맞추고, 코드 및 커밋 컨벤션을 정해서 협업을 원활하게 할 수 있었다.
  2. DB ERD를 작성하고 데이터의 흐름과 데이터 간의 관계를 이해할 수 있었다.
  3. 브랜치 관리와 PR을 통해 협업 과정에서 필요한 작업 단위를 효율적으로 관리할 수 있었다.
  4. 작업 순서를 잘 정해야 소통이 원활하고 유지보수가 효율적일 수 있다는 것을 배웠다.
  5. 공통되는 로직을 어떻게 효율적으로 관리할 수 있는지 배웠다.

🚦트러블 슈팅

1. firestore collection() 참조 오류

  • 에러 메시지 : FirebaseError: Expected first argument to collection() to be a CollectionReference

  • 원인 : collection을 참조하면서 where함수를 따로 호출하면서 생긴 오류

    const usersRef = (collection(db, 'users'), where('email', '==', email));

  • 해결 : Firestore에서 쿼리를 생성할 때, collection() 함수와 where() 함수를 따로 호출하는 대신 query() 함수를 사용하여 컬렉션과 쿼리를 동시에 정의해야 함

    const usersRef = query(
    collection(db, 'users'),
    where('email', '==', email)
  );
2. NavLink isActive 스타일 적용 문제
- **문제 :** 헤더 부분에서 Navlink를 사용하여 활성 상태에 따라 스타일을 적용하려 했으나, 현재 페이지의 URL이 NavLink의 to값과 일치함에도 isActive의 상태에 따라 지정한 스타일이 올바르게 작동되지 않는 문제가 발생했습니다.

  • 시도 :

    1. isActive props를 넘겨줄 때 path 비교 로직 추가하기

      opacity: ${(props) => props.$isActive ? '100%' : '50%'};

      $isActive prop을 받아와서 isActive 상태로 스타일을 제어하려고 했으나, opacity가 계속해서 100%로 적용되었습니다.

      $isActive={pathName==='/경로'}

      이 경우 useLocation으로 path를 받아와서 NavLink isActive props에 현재 path와 비교하는 로직을 추가하여 해결할 수 있었습니다.

    2. 클래스 선택자 사용하기

      props를 넘겨받는 방식이 아닌 .active 클래스 선택자를 사용하여 스타일을 변경하도록 하니 정상 작동하였습니다.

      &.active {
    opacity: 100%;
  }

  • 해결방안: Navlink에 $isActive prop을 넘겨주는 대신에 &.active 선택자를 사용하여 스타일을 지정하는 방법으로 문제를 해결했습니다. Navlink가 활성 상태일 때 자동으로 '.active' 클래스를 부여하므로, isActive prop을 따로 제어할 필요가 없었습니다. 이 방법을 통해 active 상태에 따라 스타일을 지정할 수 있었습니다.


KPT 회고

1. Keep(유지하고 싶은 점, 좋았던 점)

  • 초기 세팅의 중요성 : 협업에서는 모두가 같은 환경에서 작업하는 것이 중요하기 때문에 프로젝트를 시작하기 전에 CRA로 생성할지 Vite으로 생성할지 등의 작업 환경부터 해서, 폴더구조는 어떻게 할 것인지, 변수명은 어떻게 정할 것인지, 데이터 구조는 어떻게 구성할 것인지(DB ERD) 등 함께 규칙을 정하는 시간을 가졌는데, 프로젝트가 진행되면 될수록 그 시간이 매우 중요했다는 것이 와닿았습니다.

  • dead line의 중요성 : 맡은 부분을 시간 내에 구현하는 것의 중요성을 느꼈습니다. 협업 특성 상 맡은 부분을 기한 내에 끝내지 못하면 다른 팀원들에게도 피해가 가기 때문에 기한 내에 맡은 부분을 완성하는 것이 협업에서는 특히 더 중요하다는 것을 느꼈습니다.


2. Problem(아쉬웠던 점, 개선하고 싶은 점)

  • 유지보수의 어려움 : 한가지 기능을 여러명이 동시에 사용하는 경우 유지보수가 어렵다는 것을 느꼈습니다. 본인이 사용하지 않는 부분이더라도 다른 팀원이 사용중일 수 있기 때문에 협업에서는 데이터의 수정과 삭제에 특히 더 신경써야한다는 점을 깨달았습니다.

3. Try(개선 방안, 앞으로 시도해 볼 것)

  • 작업 순서를 잘 정하자!
    • DB ERD, 파이어베이스, 리듀스, 리덕스, 로그인 authentication
      → 그 다음 컴포넌트 순으로 작업을 하자.
  • 파이어베이스 API 활용하는 법을 아직 익히지 못함 → 추가적으로 공부하기
  • 유지보수 할땐 조심!
    • 내가 작성한 코드더라도 다른 부분에서 사용되고 있을 수 있으므로 함부로 건드리지 말자
profile
Innes
무서운 속도로 흡수하는 스폰지 개발자 🧽
이전 포스트

07. 팬레터함(React) - 개인프로젝트 KPT 회고

다음 포스트

09. 팬레터함 심화(JWT) - 개인프로젝트 KPT 회고

0개의 댓글