커리큘럼
home
React
home

[펫톡] 예비 집사 및 집사들을 위한 반려동물 커뮤니티

Section info
Section B
B10
반려동물
Specialty
React
날짜
도메인(IP) 주소

반려동물 커뮤니티 사이트

서비스 둘러보기 : (https://petalk.vercel.app/)

아키텍처

기술적 의사결정

사용 기술
기술 설명
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가 내장되어 있어 비동기 처리 및 미들웨어 추가가 편리하게 사용되었다.

트러블슈팅

글 작성시 에디터 선정

카카오 API 선정

서버를 대신 해줄 DB 선정

주요기능

 디테일페이지 (Firebase)
로그인,회원가입 (Firebase)
글쓰기
마이페이지
검색기능(KaKaoAPI)

팀원 소개

Search
이름
이메일
깃허브
phae0704@gmail.com