[여행sns사이트]회고록

프로젝트 개요🎬

이번 프로젝트는 여행sns사이트로, 사용자끼리 경험했거나 가고 싶은 여행지를 추천하며, 댓글/좋아요 기능이 제공된다.

기술 스택🧷

• 프론트엔드 : React, react-router , context API , styled-components , react-toastify , sweetalert2 , timeago , supabase

개발과정🎈

아이디어 구상

• 이번에는 팀프로젝트로, 팀원들과 상의하여 기획하게 되었으며, 바로 와이어프레임을 작성한 후에 스타일 가이드를 작성했다. 

구현

• 맨 처음 진입시 로그인 / 회원가입 화면 노출
  • 비밀번호 찾기 기능 구현
• ✔️ 메인화면인 home에서는 게시글 리스트가 노출 (담당)
  • 게시글 삭제(알럿창) , 수정(페이지 전환)
  • 댓글, 좋아요 기능 구현
• 작성/수정 페이지
  • 이미지 최대 3장 첨부 가능
  • 수정페이지 진입시 작성했던 데이터가 노출
• 마이 페이지
  • 작성한 글, 좋아요 받은 갯수 노출
  • 프로필 수정가능

테스트 및 배포

• vercel에 배포
  링크

Voir le chemin

 

배운점🤖

• 기술적 성장: supabase의 데이터 관리, context로 전역 상태 관리, useEffect로 데이터 상태관리 , sweetalert2 라이브러리 사용가능
• 문제 해결: 팀원들과 이슈가 있을때마다 서로 공유하며 해결

후기✏️

처음으로 팀프로젝트를 하게 되었는데, 솔직히 배포까지 한번도 충돌이 난적이 없었다. 다른 팀들은 여러 충돌이 있었다고 들었지만 진짜 우리조는 소통을 그동안 꾸준히 한 덕분인지 전혀 문제가 없었다^__^

대신 다들 배워가는 중이라서 막히는 부분이 많아서, 그때마다 서로 도와주고 하느라 시간이 꽤 오래걸린것같다.

근데 진짜 배워가고 싶었던 부분이 서로 기능 구현이 끝나도 계속 기능을 뭔가 추가하려하며, 아직 구현 안된 팀원을 도와주며 정말 멋졌다.

 

supabase를 처음써봤는데, 정말 어려웠다 그전에 firebase보다 훨씬 관리하기가 용이하지만, 그만큼 기능들도 많고 공부가 부족하여 많이 버벅였던것같다.

그리고 재사용가능한 로직들을 따로 커스텀훅이나 api파일을 만들어서 export하며 관리했으면 좀더 데이터 관리나 유지보수에 용이했을텐데 라는 아쉬움도 남는다

플러스로 깃 커밋 컨벤션을 맞추지않아서 깃을 보면 다들 제각각이다ㅎㅎ,,, 아숩...

 

그외에 기능 구현 하면서 어려웠던 점은  supabase에서 데이터를 가져와서 context 전역으로 뿌려주는데 이때 데이터들을 각각 useState로 만들어서 관리했어야했는데, supabase의 join이란 기능이 편해보여서 한 useState로 관리를 해버렸다..

처음에는 편했지만, 갈수록 기능구현을 할때마다 데이터가 섞여있어 관리하기도 힘들고, 코드도 지저분해졌다💩

 

const [data, setData] = useState([]);

useEffect(() => {
    const fetchPostsData = async () => {
      const { data, error } = await supabase.from('posts').select(`
          *,
          users (user_nick_name,id,user_profile_image),
          comments(*),
          likes(*)
        `);
      if (error) {
        console.error(error);
      } else {
        setData(data);
      }
    };
  }, []);

 

그리고 context분리를 내가 잘못 리드해서 유지보수하기가 너무 어려워졌으며, provider로 서로 내보내는게 많아졌다..

<HomeContext.Provider
  value={{
    chatToggle,
    setChatToggle,
    data,
    setData,
    postId,
    setPostId,
    chat,
    setChat,
    commentsData,
    setCommentsData
  }}
>

 

제일 시간도 많이 뺏겼던 부분은 댓글 작성/삭제후 바로 ui에 적용하는 부분이였다

useEffect으로 구현했으나, 의존성 배열에 어떤 변수를 넣어야 했는지 헤맸다거나, 

댓글을 최신순으로 정렬했는데, 갑자기 여기서 꼬여버리거나 데이터가 추가/삭제가 안된다거나...

 

정말 기능 하나를 해결하면 다른 에러를 맞닥들이고 멘붕이였다...

그래도 팀원들과 머리도 싸매고, 열심히 찾아보고 한끝에 배포전날 해결!

(얼마나 급했으면 오타도 났다..)

useEffect(() => {
    const filtedComment = commentsData.filter((data) => data.post_id === id);
    setCommentList(comments);
    setCommentCount(filtedComment.length);
  }, [commentsData]);

 

짧다면 짧았던 4~5일동안 팀원분들과 정말 하루종일 열심히 했던것같다

사실 너무 힘들었던 순간이 많았는데, 그때마다 서로 격려하고 도와주고 많은 의지가 되었던 것 같다. 

이런 팀원분들을 만나서 행복했다🥰

 

📌코드보러가기

GitHub - hansolChoi29/newspeedproject