프로젝트 설명

프로젝트 요구사항

• 기간 : 6/17(월)~6/21(금)
• 필수 요구 사항
  • 아래 3가지 중에 한 가지를 반드시 활용해서 만들어주세요.
    • 지도 API
      지도상에 Marker를 표시하고 활용해 보세요
      네이버 / 카카오 / 구글 지도 등 api 종류는 자유롭게 조사하여 선택하세요
    • Youtube API
      Youtube API의 하루 할당량(quota)은 10,000 이며, API 종류에 따라 quota cost가 다르니 고려해서 선택해야 합니다. (참고: search list API는 1회 당 100 이므로 하루 최대 100번까지만 검색 기능 사용 가능)
    • 설문조사
      • 심리검사, MBTI 등과 같은 설문조사 웹사이트를 만들어주세요.
• 전역 상태 관리 라이브러리
  • (필수) Tanstack Query
  • (선택) RTK, Zustand, Jotai, Recoil, ContextAPI
• DB 활용: Supabase

1이 커지니까 1단 해보조(A01조) 프로젝트 정보

• 프로젝트 명 : 보드메이트
• 소개
  • 한 줄 정리 : 보드게임 참여 인원을 구할 수 있는 지도 API 기반 커뮤니티
  • 주요 기능
    지도 api를 기반으로 보드게임 참여 인원 모집, 모임 검색
  • 페이지 구성
    • 로그인/회원가입
    • 마이페이지
      • 프로필 업로드/수정
      • 닉네임 변경
      • 본인 게시글 리스팅
    • 메인페이지
      • 게시글 리스팅(최신순)
    • 게시글 상세 페이지
      • 장소, 날짜, 제목, 내용
      • 수정/삭제
    • 게시글 작성 페이지
      • 지도상으로 위치 선택 후 해당 페이지로 이동

내가 담당한 부분

• supabase & Tanstack Query
  • supabase 테이블 로직 작성 및 관리
  • Tanstack Query 사용하여 supabase CRUD 구현
  • 유저 정보 받아오는 함수 제작
  • 첫 가입 시 프로필 사진 기본으로 설정
• 메인 페이지
  • supabase posts read 구현
  • useInfiniteQuery 이용하여 더보기 기능 구현
• 게시물 작성 페이지
  • supabase posts create 구현
  • 선택한 지도 화면 구현
• 댓글
  • 삭제 버튼 클릭 시 동시에 새 댓글 달리는 문제
  • 댓글 추가 시 화면에 바로 구현되지 않는 문제
• 장소 지정 페이지
  • 지도 API 정보 게시물 작성 페이지로 전송 및 등록 구현
• 게시물 상세 페이지
  • 등록된 지도 화면 구현
• 마이 페이지
  • 내 게시물 불러오는 필터링 기능 구현
• 시연 영상 촬영 및 등록

결과물 이미지

메인 페이지

회원가입 페이지

로그인 페이지

장소 선택 페이지

게시물 작성 페이지

게시물 상세 페이지

게시물 수정 페이지

마이 페이지

발표 피드백

• 보드게임이라는 주제가 흥미롭기에 즐겁게 진행했을 것 같다.
• useInfiniteQuery를 사용한 부분에서, 처음에 3개의 게시물만 나오는 것은 사용자 입장에서 귀찮을 수 있으니, 약간의 수정이 들어가면 좋을 것 같다.
• 로그인 기능 및 기본적인 CRUD가 익숙해보인다. 점점 익숙해지고 있는 것이므로 마지막엔 더 많이 발전할 것 같다.
• 새롭게 배운 useInfiniteQuery 및 createBrowserRouter를 사용한 게 좋다. 새로운 걸 배울 때 금방금방 할 수 있는 능력이 생길 것이다.
• 의지가 있다면 좀 더 완성된 웹 사이트를 만들면 이력서 넣을 때도 좋을 것이다.

Liked

• 소통이 정말 잦고 잘 되어 좋았다. 주말이나 휴일이 중간에 껴있지 않아서 더 잘 된 것 같기도 하지만, 그런 부분을 제외하고도 역대급으로 소통이 잘 된 팀이었다.
• 이번에도 내가 맡은 부분 이상으로는 활약한 것 같아 다행이라고 생각했다. 다들 내 능력을 믿고 맡겨 주시는 것 같아 감사했다.
• 새로 배운 useInfiniteQuery를, 스탠다드반 수업에서 배운 다음 날 바로 적용해보았다. 적용시키는 과정에서 많은 공부가 되었고, 새로운 기술을 Tanstack Query, 지도 API 적용을 제외하고 아무것도 사용하지 않을 뻔해서 이 기술을 적용한 게 좋았던 것 같다.
• supabase 테이블 로직을 첫 날 바로 제작하고 supabase+Tanstack Query를 이용한 CRUD 기능도 곧바로 제작한 게 좋았다. 그렇게 하니 확실히 데이터에 대한 문제나 수정이 줄어들었다.

Lacked

• 발표 때 다른 팀들의 프로젝트를 보니 꽤 다양한 사이트를 제작해서, 우리 사이트가 뉴스피드 프로젝트에 지도 API 정도만 추가한 느낌인 게 아쉬웠다. 조금 더 과감하거나 실험적으로 진행했어도 재밌었을 것 같다.
• 피그마에 UI가 있는 상황에서 UI를 먼저 그리지 않고 기능부터 얼른 제작하는 상황이 많이 보였는데 이 부분은 확실히 아쉬웠다. UI를 먼저 제작하고 그 다음이 기능이어야한다고 생각하는데, 사실 무엇이 맞는건지 긴가민가한 상태라서 크게 의견을 내세우지는 않았지만, 튜터님께서도 그렇게 말씀해주셔서 의견이 확고해졌다.
• 추가적으로 하고싶었던 것들이 너무 많은 우리 팀이었지만 자잘한 오류들을 해결하느라 시간을 많이 사용하여 결국 우리가 하려던 필수적인 부분밖에 하지 못한 게 아쉽다. 저번부터 계속 이런 아쉬움이 남는다.

Learned

• 소통과 믿고 맡길 수 있는 마음의 중요성에 대해서 배웠다. 내가 리더는 아니었지만, 언젠가 리더 역할을 맡게 됐을 때 확신이 없더라도, 혼자서 진행하거나, 다른 사람에게 맡기는 게 더 좋을 것 같더라도, 마음의 여유를 가지고 믿고 맡길 수 있는 역량 및 용기가 필요하다는 것을 배웠다.
• 팀플도 확실히 할 수록 는다는 걸 배웠다. 소통 과정의 갈등이 싫어 팀플을 원치 않았던 내가 이제는 그 때보다 훨씬 아무렇지 않게 잘 진행할 수 있는 능력도 배운 것 같다.

Longed for

• 다음 프로젝트가 어떻게 될지는 모르지만, 마감 기한을 맞추기 위해 안전하게 가는 것도 좋지만 조금은 더 실험적이거나 추가적인 부분을 넣어보기.
• 기능도 당연히 중요하지만, UI 디자인이 나와있는 상태에서는 우선 UI를 완성하는 것을 우선 순위에 두기.