미리보기

레시픽은 요리 레시피를 업로드하여 공유하는 목적의 SNS입니다.
 서비스 사용자는 레시피 재료를 태그로 사용하여 비슷한 재료를 사용한 다른 사용자의 레시피를 참고할 수 있습니다.
 또한, 태그를 통해 자신이 직접 기른 채소와 과일 등 레시피 재료를 판매할 수 있습니다.
 이외에도 레시픽은 게시물 및 댓글 작성, 사용자 검색, 팔로우 기능을 제공합니다.

∙ 프론트엔드 4명

∙ 프론트엔드 담당

∙ ReactJS, styled-components, github

∙ DEMO : https://recipick.netlify.app/

∙ 테스트 계정

∙ ID : recipick@gmail.com

∙ PW : asdf1234

<DX>

∙ 코드를 공유하는 모든 동료에게 시간 절약과 편리함을 주기위해

GitHub 의 Issue와 PR 템플릿을 공유하고 eslint/prettier 설정 직접 진행

∙ useDebouce, useTheme 등 복잡하고 반복되는 로직에 대해서 custum hook으로 만들어서 재사용성 향상

<UX>

∙ 프로젝트를 사용하는 유저의 불필요한 작업을 하지 않기 위해 input에 validation을 추가 지원

∙ 여러 웹사이트에서 지원하는 무한 스크롤, 다크모드를 지원

<구현>

∙ 회원가입 / 로그인 / 리액션 / 검색 기능 구현

∙ 토큰 유무에 따라서 Router를 분리해 로그인 검증 기능 구현

∙ IntersectionObserver API를 활용하여 무한 스크롤 구현

∙ 보안을 위해 React-cookie 라이브러리를 활용하여 사용자 인증 토큰을 클라인트에 저장

<개선>

∙ useEffect의 클린업 함수에서 AbortController를 활용하여 컴포넌트 언마운트 시 진행 중인 API 요청을 중단함으로써 불필요한 네트워크 트래픽과 리소스 소비를 최소화

∙ 디바운스 기법을 적용하여 사용자의 검색 입력에 대한 API 요청을 최적화

∙ layout style을 방해하는 모달 기능을 React Portal로 해결