yj-front
미니 프로젝트 - 이미지 포스팅 커뮤니티 본문
개요
- 개인 프로젝트
- 프로젝트 주제: 이미지 게시물 공유 커뮤니티
- 개발 기간: 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
웹 사이트 url: hanghae-post.firebaseapp.com/
'프로젝트' 카테고리의 다른 글
최종 프로젝트 - AFTERWORK | 퇴근하고 뭐하지? (0) | 2021.05.30 |
---|---|
미니 프로젝트 - 웹사이트 클론 코딩(다노 샵) (0) | 2021.05.27 |
미니프로젝트 - Palette (0) | 2021.04.25 |
미니 프로젝트 - 일정관리 캘린더 (0) | 2021.03.25 |
미니 프로젝트 - 여행 리뷰 프로젝트 Dotrip (0) | 2021.03.07 |