230816 최종프로젝트 1차 S.A.

1. 프로젝트 소개

• 이름 : POPlace (가제)
• 주제 : 팝업스토어 아카이빙
• 설명 : 서울의 팝업스토어 정보를 검색 및 공유할 수 있는 웹 애플리케이션으로 해당 팝업스토어에 대한 후기를 남겨 다른 사용자들과 공유할 수 있고 해당 팝업스토어의 위치를 기반으로 주변의 핫플레이스 또한 추천하여 팝업스토어를 방문하는 사용자들에게 유용한 서비스를 제공하고자 한다.

2. 개발 기간

• 1차 개발 : 23.08.16 ~ 23.09.01
• 2차 개발 : 23.09.04 ~ 23.09.15

3. 기술 스택 및 선정 이유

• React.js : 가상 돔을 통한 효율적인 UI 업데이트를 제공하여 사용자 친화적인 웹 애플리케이션 개발을 용이하게 한다. 또한 컴포넌트 기반 아키텍처로 재사용성과 유지보수성이 뛰어나 협업에 유리하다.
• TypeScript : 명시적인 타입 정보를 제공하여 코드의 안정성을 높여 런타임 시 발생할 수 있는 많은 에러들을 컴파일 단계에서 사전 감지할 수 있으며 코드의 가독성이 향상되기 때문에 협업에 유리하며 유지 보수에도 수월하다.
• ReactQuery : 코드의 양이 적고 비동기 작업을 하기에 수월하며, 쿼리 훅을 사용하여 데이터의 실시간 반영을 빠르게 처리할 수 있다.
  API를 호출하고 데이터를 캐싱하고 상태를 업데이트하고 에러를 처리하는 과정을 통합하여 제공하기 때문에 간편하다.
• Zustand : 간단한 API와 컨텍스트를 이용해 상태를 효과적으로 관리할 수 있다. Redux와 유사하면서도 축소화시킨 느낌으로 불필요한 보일러플레이트 코드를 줄여주며, provider가 필요 없어 앱을 래핑 하지 않아도 되기 때문에 불필요한 리렌더링을 최소화할 수 있다.
• Supabase : PostgreSQL을 기반으로 데이터베이스와 API를 구축하는 데 필요한 복잡한 설정과 관리를 최소화 할 수 있다. 인증, 보안, 실시간 업데이트 등 스케일링과 같은 백엔드 기능도 제공한다. 별도의 서버를 구축하지 않고도 클라이언트 앱을 더 빠르게 개발할 수 있다.
  

4. 사용하는 라이브러리

• react-full-calendar
• react-copy-to-clipboard
• react-paginate
• react-push-notification
• MUI

5. 개발해야 할 기능

• 로그인 / 회원가입

  • 이메일 로그인
  • 소셜 로그인 (구글 / 카카오 / 네이버)

• 메인 페이지

  • 게시글 조회
  • 무한 스크롤

• 상세 페이지

  • 상세 게시글 조회
  • 북마크
  • 지도 API
  • 캘린더 라이브러리
  • 댓글 CRUD

• 마이 페이지

  • 닉네임 및 프로필 이미지 변경
  • 알람
  • 북마크 목록 조회

• 검색 페이지

  • 지역별, 기간별 필터링
  • 검색 엔진

• Contact 모달

  • Q&A 알고리즘

6. 컨벤션

• 브랜치명

  • 브랜치 메세지 작성 예시 : issue 생성 후 issue - no.N - issue 내용 기재

• 커밋 메세지

  • 커밋 메세지 작성 예시 : Feat : first commit
  • Feat 새로운 기능, 특징 추가
  • Fix 버그 수정
  • Design UI Design 변경
  • Style 코드 포맷 변경, 세미 콜론 누락 (코드 수정X)
  • Refactor 리팩토링
  • Comment 필요한 주석 추가 및 변경
  • Docs 문서 수정
  • Test 테스트 코드 (프로덕션 코드 수정X)
  • Chore 빌드 업무 & 패키지 매니저 수정, 패키지 관리자 구성 업데이트 등 (프로덕션 코드 수정X)
  • Rename 폴더 & 파일 이름 수정 및 옮기는 작업
  • Remove 파일 삭제하는 작업만 수행한 경우

• 폴더명

  • 작성 예시 : detail

• 파일명

  • 작성 예시 : MyDetail

• 변수명

  • 작성 예시 : detailPage