미니 프로젝트 - 이미지 포스팅 커뮤니티

개요

• 개인 프로젝트
• 프로젝트 주제: 이미지 게시물 공유 커뮤니티
• 개발 기간: 2021.03.29 ~ 2021.04.01
• React + firebase 사용
• 데이터 베이스: firestore
• 형상관리 툴: git

 

프로젝트 특징

• 본 프로젝트는 개인 프로젝트로 이미지 업로드 기능이 있는 커뮤니티 사이트를 React와 서버리스 플랫폼인 firebase를 이용하여 구현
• UI 부분은 styled-components, material-ui를 사용
• 모든 페이지는 PC, 모바일, 태블릿에서 확인했을 때 뷰가 깨지지 않도록 반응형으로 구현
• 컴포넌트 구성: 컴포넌트는 중간단위 및 페이지 단위로 구성했으며 디렉토리로 구분함
• 주요 기능: 로그인, 회원가입 기능, 게시물 추가, 조회, 수정, 삭제, 좋아요 기능, 무한스크롤, 게시물 업로드, 수정 시 레이아웃 설정
• DB구성
• postDB {comment, image_url, insert_dt, like, selectedValue, user_id, user_name}
• likeDB {is_like: 좋아요 여부, post_id: 게시물 id, user_id: 유저아이디}

 

상태관리 패키지

• react-redux, redux (+ redux-actions, immer 사용)
• redux-middleware(redux-thunk)
• react-router-dom

후기

저번주와 마찬가지로 이번주도 리액트와 서버리스 플렛폼 파이어베이스를 이용해 미니 프로젝트를 진행했다. 이번 프로젝트를 진행하면서 정규식을 이용한 회원가입 및 로그인 시 형식 체크 기능, 조건에 따른 버튼 활성화기능, 조건부 렌더링, 이미지 게시물 업로드, 조회, 수정, 삭제, 좋아요 기능, 레이아웃 선택 버튼, 무한스크롤 등 정말 다양한 기능을 구현해봤다.

프로젝트의 전반적인 흐름을 잘 파악한 것 같으며 여러 프로젝트를 진행하면서 CRUD에 대한 기능을 반복해서 구현하다보니  CRUD에 대해서는 많이 익숙해진 것 같다. 그 외에 자주 쓰는 기능은 잘 구현하게 된 것 같다.

지금까지 리액트 프로젝트를 파이어베이스를 이용해서 데이터를 관리하다보니 많이 편했지만 실무에서는 클라이언트와서버간 통신에 대해 잘알아야 하므로 이 부분을 많이 공부해야할 것 같다는 생각이 들었다. 또한 무한스크롤 기능은 아직까진 완벽하게 이해를 하진 못했지만 일정 높이가 남았을때 DB에 호출을 해서 정해진 갯수만큼 뿌려진다는 개념적인 부분은 짚고 넘어갔다. 이 부분도 많이 구현을 해보면 익숙해질꺼 같다. 마지막으로 좋아요기능을 구현하는데 다소 시간이 오래 걸렸다. 로그인 한사람이 이미 게시물에 좋아요를 했는지 여부를 알아야하고, 좋아요를 눌르면 +1 이 되고 좋아요된 상태에서 다시 좋아요 버튼을 눌르면 -1 이 되게 끔 한다는게  개념적으로 쉽다 생각하고 접근했지만 생각보다 난이도가 있어서 시간이 오래걸렸던 것 같다. 이후 프로젝트를 진행함에 있어 새로운 기능 구현(이번에 이미지를 다뤄봤으니 다음은 동영상을 다뤄본다거나)이나 무한스크롤, 좋아요 기능 등 아직 미숙한 기능을 다시 한번 구현해보고 싶다.

 

 

 

github url: github.com/noh-yj/postpage

noh-yj/postpage

웹 사이트 url: hanghae-post.firebaseapp.com/

항해99 | 커뮤니티

회원가입 페이지

로그인 페이지

메인 페이지

업로드 페이지

수정 페이지

작성자 디테일 페이지 + 좋아요 눌렀을때

레이아웃 별 디테일 페이지