프론트엔드 개발 포트폴리오 | 반려동물 커뮤니티
내일배움캠프 4기 웹 개발 과정 React 트랙 수료생 최종 프로젝트 ‘펫톡’을 소개합니다.
Sep 04, 2023
반려동물 커뮤니티 사이트
- 서비스 둘러보기 : (https://petalk.vercel.app/)
- Github Repository : ()
🛠️ 아키텍처
🔧 기술적 의사결정
사용 기술 | 기술 설명 |
react-slick | React-slick은 리액트 프로젝트에서 캐러셀을 구현하기 쉽게 도와주는 모듈이다.
여기서 캐러셀이란, 유저가 스크롤을 내리지 않고도 볼 수 있는 정보의 양을 극대화하기 위해 사용하는 기법을 말한다. |
styled-components | 페이지에서 렌더링되는 요소에 맞춰 자동으로 해당 스타일만 삽입합니다.
스타일에 대한 고유 클래스명을 생성합니다.
더이상 사용되지 않는 CSS를 쉽게 삭제할 수 있습니다.
동적 스타일링이 편해집니다. 이 props가 있다면 A, 없다면 B와 같이 직관적으로 개별 스타일링이 가능해요. |
react-query | 서버의 상태 업데이트, 데이터 패칭, 캐싱 등을 쉽게 할 수 있도록 도와준다
react-query는 작성해야 하는 많은 코드들을 간단하게 처리해주고 그로인해 유지보수가 쉬워진다. |
axios | 상대적으로 fetch 보다 많은 기능들이 있고 axios는 크로스 브라우징 최적화로 브라우저 호환성이 뛰어나서 axios를 사용했습니다. 비동기로 HTTP 통신을 할 수 있으며 return을 promise 객체로 해주기 때문에 response 데이터를 다루기 쉽습니다. |
redux-toolkit | action type이나 action creator를 따로 생성해주지 않아도 되고. immer가 내장되어 있어 mutable 객체를 사용할 수 있었다. redux-thunk가 내장되어 있어 비동기 처리 및 미들웨어 추가가 편리하게 사용되었다. |
📌 트러블슈팅
✔️ 글 작성시 에디터 선정
요구사항커뮤니티 게시글인만큼 글 작성시 사용자에게 많은 기능을 제공하고싶다
선택지1안) CK Editor 사용
2안) Toast Editor 사용
의견 조율이미지 업로드 시에 한 개만 올라가는 단점 보유
다른 설정 없이 기본적인 기능들 제공
의견 결정이전에 사용했던 에디터인 CK Editor의 정보량 부족과 설정 없이 기능들을 지원 해주는 이용량이 많은 Toast Editor에디터 사용
✔️ 카카오 API 선정
요구사항단순한 커뮤니티페이지가 아닌 사용자가 필요시 반려동물에대한 정보들도 제공하고자 뉴스피드 적용
선택지1안) 웹 API 검색
2안) 블로그 API 검색
의견 조율웹 검색API를 사용하려고했으나, 키워드 검색시 웹페이지의 성격과 어울리지않은 검색어들이 출력돼 웹 검색 API가 아닌 다른 API를 사용해야 할듯하다.
의견 결정 블로그 검색API 사용
✔️ 서버를 대신 해줄 DB 선정
요구사항백엔드 개발자 없이 여러 데이터값을 불러오고 보내주는 웹페이지를 만들어야 하였습니다.
선택지1안) Firebase
2안) aws
의견 조율Firebase를 사용하면 여러가지 db와 collection, storage등 여러가지 기능들을 추가로 이용할 수 있고, 백엔드 지식이 없어도 충분히 서버를 만들 수 있다.
의견 결정 Firebase를 사용하여 서버를 이용하였고, 추가적인 기능들을 이용하여 데이터 값을 저장 밑 호출 하여 페이지를 구현하였습니다.
🔎 주요기능
✅ 디테일페이지 (Firebase)
- Firebase를 이용한 데이터 호출
- 댓글 기능 구현
- 작성 댓글에 대한 타임스태프 기능
✅ 로그인,회원가입 (Firebase)
- Firebase를 이용하여 소셜로그인 기능 구현
- 회원가입 및 로그인 시 유효성 검사
✅ 글쓰기
- 원하는 카테고리를 지정하여 글 작성 가능
- 제목 및 사진, 내용 작성
- 글 쓰기 완료 시 지정했던 카테고리 페이지로 이동
✅ 마이페이지
- 내가 쓴 글 확인 가능
- 내가 쓴 글 삭제 가능
- 작성한 글에 대한 타임스태프 기능
✅ 검색기능(KaKaoAPI)
- 원하는 키워드로 검색하여 해당하는 게시글 검색 기능
- 해당 게시글 링크 클릭시 본문으로 이동
👥 팀원 소개
Share article
Subscribe to our newsletter