COMMEET

Project Stack

• React
• React Router v6
• Redux
• Redux-toolkit
• Styled-components
• Firebase
• Github-pages

기능

• 로그인 시
  • 모든 게시물 보여주기
    • 게시물의 작성자의 프로필, 본문, 사진, 업로드 시간 출력
    • 게시물의 authorId를 비교하여 삭제 / 수정 보여주기
    • 댓글 보여주기
      • 댓글 작성자의 프로필, 댓글, 업로드 시간 출력
      • 댓글의 commentAuthorId를 비교하여 삭제 보여주기
  • 네비게이션
    • 다크모드
      • styled-components와 리덕스 활용
    • 글쓰기
      • 본문, 사진 업로드
    • 프로필
      • 프로필 사진, 닉네임 변경
      • 나의 총 게시물 수, 게시물 썸네일 출력
    • 로그아웃
• 비 로그인 시
  • 인증 폼 보여주기
    • 정규식을 활용하여 비밀번호에 유효성 검사 추가
    • 구글, 깃허브 로그인

후기

강의를 들으면서 코드를 이해하고 따라치는 것은 ‘내 것’ 으로 만들기에는 부족함을 느끼고 예전부터 다짐만 해왔던 토이 프로젝트를 실행에 옮겨보기로 하였다.

Firebase를 이용하여 백엔드와 db를 하였다. 코드를 직접 짜는 것이 아닌 firebase에서 제공해주는 짧은 코드를 사용하여 인증, db사용 등을 구현할 수 있었다. 토이 프로젝트와 같은 규모가 작은 프로젝트에 사용하면 아주 편리한 플랫폼인 것 같다.

Firestore는 NoSQL 데이터베이스이기 때문에( JOIN을 지원하지 않음 ) 댓글 컬렉션에 게시물 id를 필드로 추가하여 연결하였다. 거의 마지막에 댓글 기능을 구현 한거라 허겁지겁 하였지만 지금 생각해보면 팔로잉, 스크랩 등 여러가지 기능도 firestore를 이용해 구현할 수 있을 것 같다.

아쉬운 점에도 있겠지만 리덕스를 근사하게 써보고 싶다. redux-thunk랑 redux-saga도 더 공부해서 해보아야겠다. ( 너무 어렵다 )

styled-components로 가장 만만한게 다크모드라 구현하였지만 역시 난 디자인에는 소질이 없나 보다. 색을 고르는 데 시간을 생각보다 많이 썼다. 지금도 예쁘진 않지만 여자친구가 도와주지 않았더라면 훨씬 못생긴 사이트가 나왔을 것 이다.

‘어떤 목적으로 하는 페이지를 제작해보자’가 아닌 ‘내가 배우고 공부한 것들을 활용 해보자’ 라는 목적이 큰 프로젝트였기 때문에 확실한 기획도 없이 무작정 시작하였다. 비록 부족한 게 많고 허접해 보이는 사이트지만 나름 고생하여 만들었고 처음 목표로 했던 내가 공부한 것들을 활용하여 스스로 만들었기 때문에 성취감을 느낄 수 있었다.

아쉬운 점

1. 리덕스를 제대로 활용하지 못했다.
   • 내 기준 가장 아쉽고 내가 더 공부해야 하고 고민해야 할 부분이다.
   • 리액트 개발자라면 필수라고 여겨지는 리덕스를 사용해보겠다고 호기롭게 시작하였으나 User 정보를 가져오는 것 외에는 ( 특히 게시물에 관한 상태관리 ) 제대로 써보지 못한 것 같다.
2. 무작정 시작 했기에 무엇을 먼저 어떻게 해야 할 지 제대로 판단하지 못했다.
   • 구현할 기능을 정하지 않아서 프로젝트 도중 어떤 기능을 넣을까 말까 고민하면서 코드 수정도 많았다.
   • 라우터 구조도 체계적이지 않은 것 같다

깃허브 : https://github.com/bohongu/commeet

GitHub - bohongu/commeet

프로젝트 : https://bohongu.github.io/commeet/

Commeet