지도 API / Youtube API / 설문조사 중 최소 택1하여 해당 내용을 지원하는 웹사이트 만들기
1. 주제 선정
24시 카페만 따로 모아 보여주는 곳이 없어 불편하다는 의견을 제시한 팀원의 말씀을 시작으로 카페를 분류해서 정보를 공유하는 커뮤니티를 만들면 좋겠다고 생각하여 지도 API를 사용하기로 결정했다.
1) 프로젝트 명 : 카페모아(cafemoa)
2) 소개: 다양한 카페를 카테고리별로 분류하여 사용자들에게 맞춤형 카페 정보를 제공하는 홈페이지
3) 내용: 사용자가 원하는 카페를 쉽게 찾을 수 있도록 돕는 웹 페이지로, 7가지 카테고리로 구성했습니다.
(24시카페 / 분위기 좋은 카페(이하 '분좋카') / 모여서 각자 코딩하기 좋은 조용한 카페(이하 '모각코') / 디저트카페 / 뷰 좋은 카페 / 애견동반카페 / 한옥카페)
지도 API는 네이버 지도, 카카오맵, 구글맵 세 가지 중 선택하는 거였는데 국내 카페 정보를 불러오기 위해 구글맵 보다는 네이버나 카카오맵이 알맞다고 생각했으며, 두 가지 중 카카오맵을 선택한 이유는 짧은 기간동안 개발하는 프로젝트이므로 더 배우기 쉽고 레퍼런스가 쉽게 설명되어 있는 것으로 선택했다. UI를 더 다양하게 보여줄 수 있다고도 했다.
2.프로젝트 셋업
1) 프로젝트 셋업
: yarn을 이용한 Vite 프로젝트 생성
2) .prettierrc 파일 만들기
: 팀원 한 분이 사용하는 설정으로 통일하기로 했다.
module.exports = {
singleQuote: true, // 쌍따옴표 대신 홑따옴표 사용
semi: true, // 모든 구문 끝에 세미콜론 출력
useTabs: false, // 탭 대신 공백으로 들여쓰기
tabWidth: 2, // 들여쓰기 공백 수
trailingComma: 'all', // 가능하면 후행 쉼표 사용
printWidth: 110, // 줄 바꿈할 길이
bracketSpacing: true, // 객체 괄호에 공백 삽입
arrowParens: 'avoid', // 항상 화살표 함수의 매개 변수를 괄호로 감쌈
proseWrap: 'never', // 마크다운 포매팅 제외
endOfLine: 'auto', // OS에 따른 코드라인 끝 처리 방식 사용
};3) BaaS 셋업(백엔드 시스템)
: 이번 프로젝트에서는 supabase를 사용하지 않고 Restful한 개발을 위해 json-server를 이용하여 백엔드 시스템을 세팅하기로 되어있다.
supabase나 Firebase의 경우 백엔드를 별도로 둘 필요가 없는 작은 프로젝트나 샘플 프로젝트에서만 사용하기 때문에 실무와는 거리가 있기 때문이라고 하셨다.
그러나 우리 팀 프로젝트에서는 게시글 작성 시에 이미지 파일을 복수 선택하여 불러오는 기능이 필요해서 supabase storage를 사용하기로 했다.
4) 상태 관리 도구
: Zustand / Context API / TanStack Query
5) git 브랜치 관리
브랜치 : 1. main / 2. dev / 3. feat/페이지
커밋: ex) update: OO 기능구현
(update, add, bugfix, refactor, fix, move, del, test, style, gitfix, script)
=> PR 할 때 얘기하고, 화면공유하고 같이 보면서 코드리뷰하기
3. 역할분담
1) 게시물의 상세정보를 보여주는 디테일 페이지에서 아래에 '댓글 CRUD'
2) 로그인한 유저가 찜한 게시글들만 따로 모아 보여주는 'bookmark 페이지'
잘 할 수 있겠지..? 한 번도 해보지 못한 기능이라 두려우면서도 잘 해내면 뿌듯할 것 같은데...
댓글기능은 오늘 스탠다드반 수업에서 한 거라 소스코드 보면서 스슥 .. 먼저 해봐야지
