프론트엔드 개발 포트폴리오 | 반려동물 커뮤니티

내일배움캠프 4기 웹 개발 과정 React 트랙 수료생 최종 프로젝트 ‘펫톡’을 소개합니다.
Sep 04, 2023
프론트엔드 개발 포트폴리오 | 반려동물 커뮤니티

반려동물 커뮤니티 사이트

 
 
  • Github Repository : ()
 

🛠️ 아키텍처

notion image
 

🔧 기술적 의사결정

사용 기술
기술 설명
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를 이용한 데이터 호출
  • 댓글 기능 구현
  • 작성 댓글에 대한 타임스태프 기능
    • notion image
✅ 로그인,회원가입 (Firebase)
  • Firebase를 이용하여 소셜로그인 기능 구현
  • 회원가입 및 로그인 시 유효성 검사
    • notion image
✅ 글쓰기
  • 원하는 카테고리를 지정하여 글 작성 가능
  • 제목 및 사진, 내용 작성
  • 글 쓰기 완료 시 지정했던 카테고리 페이지로 이동
    • notion image
✅ 마이페이지
  • 내가 쓴 글 확인 가능
  • 내가 쓴 글 삭제 가능
  • 작성한 글에 대한 타임스태프 기능
 
notion image
 
✅ 검색기능(KaKaoAPI)
  • 원하는 키워드로 검색하여 해당하는 게시글 검색 기능
  • 해당 게시글 링크 클릭시 본문으로 이동
    •  
      notion image
 

👥 팀원 소개

Share article
Subscribe Newsletter
Stay connected for the latest news and insights.
RSSPowered by inblog