[NewsFeed-Final] FootPrint👣

👣 FootPrint newsfeed 메인 화면 및 작동 영상

 

 

• Github 주소: https://github.com/ijooha16/foot-print.git
• 배포 링크 : https://foot-print-six.vercel.app/

 

🖥️ 프로젝트 소개

• '여행'을 주제로 한 뉴스피드입니다.
• 여행 기록에 대한 내 게시물을 포함한 모든 게시물을 볼 수 있는 공간입니다.
• 원하는 게시물을 검색할 수 있고, 자신이 작성한 게시물을 수정하거나 삭제할 수 있습니다.
• styled-components를 이용하여 스타일링 하였습니다.
• Context API를 통해 전역생태 관리 방법을 사용했습니다.
• react-router-dom으로 라우팅 기법을 사용했습니다.
• BaaS(Backend As a System)- Supabase를 사용했습니다.
• 프로젝트 관리 : git, github
• 배포 : vercel

 

🕰️ 개발 기간

2025 / 02 / 12 ~ 2025 / 02 / 18

 

⚙️ 개발 환경

react, vite, context API, redux, react router, styled-components, supabase

 

📌 주요 기능

✔️ supabase 에서 제공하는 api를 이용하여 CRUD 데이터베이스 핸들링을 구현

• 로그인 후 게시글 작성 페이지에서 새로운 게시물을 작성
• 사진 업로드 시에는 사용자가 선택한 사진을 확인할 수 있는 preview 기능
• 홈페이지에서 전체, 국내, 국외 세 개의 카테고리로 나누어 사용자들의 글을 확인
• 자신이 작성한 게시글 수정, 삭제 가능
• 모달창에서는 댓글을 게시할 수 있으며 본인이 작성한 댓글만을 수정, 삭제 가능
• 수정 버튼 클릭 시 수정페이지로 이동하여 기존 내용 변동

✔️ useEffect를 통해 컴포넌트 라이프사이클 내에서 외부로부터 가져온 데이터를 관리

• 사용자의 프로필과 이미지, 댓글, 좋아요
• 카드를 클릭하여 상세 모달에서 글 내용 및 댓글 확인

✔️ Authentication 에서 제공하는 api를 이용하여 아래 회원 가입, 로그인을 구현 

• 로그인이 되지 않은 상태에서는 다른 사람들의 게시글을 확인할 수 있으며 로그인, 회원가입 페이지만 이용 가능
• 로그인 페이지에서 회원가입 버튼을 통해 사용자의 정보를 입력하고 이를 DB에 저장(아이디, 비밀번호, 비밀번호 확인, 닉네임)
• 로그인 상태에서는 게시물을 작성 및 수정하며 마이페이지에서 사용자의 정보 확인 가능

✔️ 전역상태를 Context API를 이용하여 구현

 

✔️ RRD로 페이지 라우팅 구현

• 홈
• 마이페이지
• 로그인과 회원가입 페이지
• 게시물 작성 및 수정 페이지

✔️ 좋아요 기능

• 하트를 클릭하여 좋아요를 추가 및 취소
• 홈페이지에서의 좋아요가 모달창에도 반영

✔️검색 기능

• 상단 검색창에서는 제목, 내용, 닉네임, mbti를 포함하여 글을 검색

✔️ 마이페이지

 

✔️ 무한 스크롤

 

 

🚨 트러블 슈팅

1. S.A, 와이어 프레임, 팀 규칙 정하기
2. supabase 감잡기(UI / 데이터 가져오기-Promise.all)
3. supabase 동기화
4. context 전역 관리, Modal 연결하기
5. data 필터링(검색어, 카테고리)

 

✨마무리

혼자 진행하는 프로젝트에 익숙해진 나에게 새로운 과제가 주어졌다. 바로 협업 프로젝트! 첫 협업을 앞두고 설렘보다는 긴장이 더 많이 들었다. 함께 프로젝트를 하기 위해서는 git은 필수일텐데.. 내가 날리면 안 될텐데.. 그동안 저지른 git 오류들이 큰 짐으로 느껴졌다.

 

협업은 생각보다 좋았고 생각보다 힘들었다.

같은 내용을 공부했지만 다른 방식으로 사용하는 부분을 볼 수 있었으며 어떤 일이든지 함께 의견을 나눌 수 있었다.

DB를 자유자재로 다루시는 분, 배운 메서드를 능숙하게 다루시는 분, css 중 grid를 익숙하게 적용하시는 분, 자신이 이해할 때까지 질문하시는 분들을 보며 정말 많은 것을 배웠다.

하지만 여러 사람이 한 가지의 목표를 두고 걸어간다는 것은 쉬운 일이 아니었다. 짧은 시간이라 모두의 시간을 맞추기도 어려웠을 뿐더러 개발을 하며 각기 다른 방식이 이런 부분에서는 힘든 점으로 다가올 수도 있었다.

그치만, 새로 익힌 기술로 이만큼 해냈다는 것이 참 대단한 일이라고 생각된다!

우리는 배우기 위해 모였으니 이 또한 학습의 일부라 생각하며~

 

확실히 느낀 건, 모두가 공통으로 사용하는 부분(전역상태, 데이터 가져오기 등)은 초반에 확실히 방향을 두고 진행한다면

시작은 느릴지라도 훨씬 탄탄하고 디테일한 프로젝트를 완성할 수 있으리라는 것이다.