🍹 B-tender
- 다양한 칵테일 레시피 추천 및 정보 제공
- 나만의 칵테일 레시피 공유
- 나만 아는 분위기 좋은 바 추천 및 공유
- 카카오를 통한 소셜로그인 및 기본 회원가입으로 간단하고 안전하게 회원가입 할 수 있어요!
- 마이페이지에서 내가 작성한 글의 개수, 닉네임 변경, 비밀번호 변경, 계정 탈퇴 등의 가능을 이용할 수 있어요!
- 술 목록에서 플러스 버튼으로 메인페이지 술장고에 내가 가진 술을 등록할 수 있어요!
- 기존에 존재하는 칵테일 레시피를 추천 받을 수 있어요!
- 내가 만든 나만의 칵테일 레시피를 글작성을 통해 공유할 수 있어요!
- 나만 알고 있는 분위기 좋은 바를 글작성을 통해 공유할 수 있어요!
- 마이페이지에서 내가 좋아요 누른 모든 컨텐츠를 확인할 수 있어요!
- Back-end Tech Stack
-
Front-end Tech Stack
- Front-end Library
| 라이브러리명 | 내용 | 참고 |
|---|---|---|
| axios | 서버통신 | |
| typescript | 타입스크립트 | |
| react-router-dom | 렌더링 | |
| react-query | 서버데이터관리 | |
| recoil | 전역상태관리 | |
| react-hook-form | 로그인 및 회원가입 폼 생성 | |
| react-cookie | 쿠키 사용 위한 커스텀 훅 생성 | |
| react-slick | 이미지 슬라이드 | |
| slick-carousel | 이미지 슬라이드 | |
| @ant-desingicons | 아이콘 툴킷 | |
| react-icons | 아이콘 툴킷 | |
| styled-components | css | |
| react-modal | 모달창 생성 | |
| @types/react-dom | 타입스크립트 관련 | |
| @types/react | 타입스크립트 관련 | |
| @types/node | 타입스크립트 관련 | |
| @types/jest | 타입스크립트 관련 |
- TypeScript (TypeScript vs JavaScript)
TypeScript는 정적 타입 언어이기에 js보다 컴파일시 시간이 더 걸리지만, 안정성보장과 에러를 js를 사용할 때보다 수월하게 잡을 수 있어서 선정했습니다.
- React-query (React-query vs Redux-toolkit vs Redux)
React-qeury는 서버의 값을 클라이언트에 가져오거나, 캐싱, 값 업데이트, 에러핸들링 등 비동기 과정을 더욱 편리하게 해줘서 사용했습니다.
- Recoil (Recoil vs Redux toolkit vs Redux)
Recoil은 Redux에서 비동기처리를 해야하는 경우에 Redux thunk 등에 의존하여 처리를 해왔는데, Recoil은 비동기 처리를 기반으로 작성되어 있고 useState와 유사하여 사용하기에 편리하다고 판단하여 사용했습니다.
## 🎬 시연영상
-
Back-end(Nodejs) : Back-end repo
-
Designer : DE-Figma
- 김예지
-
팀 notion : https://vine-sound-ddd.notion.site/Btender-7-D-2-74e39aa8b6714332aaf6afc6b66b2f69
- CloudFront 배포 관련 문제
❓S3 버킷의 내용을 다시 업로드하여도 캐시가 유지되어 일정 시간이 지나도 해당 변경 내용이 CloudFront에 즉시 반영되지 않는 문제가 발생했습니다.
❗️원인을 CloudFront의 캐시 삭제 정책에 시간 설정이 길게 설정된 것을 추정하였고, 확인해본 결과 TTL 설정이 24 설정되어 있었습니다. 원인을 파악한 후 CloudFront의 정책을 만들어 TTL설정을 1초로 설정했고, Invalidations(무효화)에 만든 정책을 반영하여 Edge Location에 저장된 캐시를 삭제하여 S3 버킷의 내용이 변경되면 즉시 반영되도록 하였습니다.
- 소셜로그인 관련 문제
❓소셜로그인 진행시 리다이렉트되면서 토큰값을 url로 받아오는데, 리다이렉트가 안되는 문제, 토큰값을 못 받는 문제 발생했습니다.
❗️토큰값을 쿼리 스트링으로 받아오지 않아서 주소의 파싱 params로 못 받아서 발생하는 문제였습니다. 따라서 문제를 발견하여 수정을 하였으나, 새로고침 시에만 쿠키에 토큰이 저장되는 문제를 발견하였고, 컴포넌트를 하나 더 만들어서 토큰을 받는 부분과 서버에 유저정보를 요청하는 부분을 나누어서 저장하도록하여 해결하였습니다.
- react-query 데이터 reading 관련 문제
❓react-query를 통해 받아온 데이터를 인풋의 플레이스홀더와 기본값으로 넣어줬는데 query에서 데이터를 받아오기 전에 실행되어 undefined는 map을 돌릴 수 없다는 오류가 발생했습니다. 흔히 해결방법으로 사용하는 옵셔널체이닝과 isLoading을 사용했지만 문제가 해결되지 않았습니다.
❗️
const titleData: string = query.isLoading
? "loading"
: `${query.data[0].title}`;
이와 같이 아에 상수로 지정해줘서 데이터가 불러와지지 않았을 때 loading을 출력해주고 로딩이 완료되면 데이터가 찍히도록 만들고
useEffect(() => {
setTitle(titleData);
setContent(contentData);
setAddress(addressData);
}, [titleData, addressData, contentData]);
useEffect로 데이터가 불러와지면 자동으로 렌더링 되도록 해줌.
전반적인 사용경험 만족도는 아래 사진과 같고,
유저 분들이 가장 많이 이용하신 서비스로는 칵테일 레시피 확인, 추천 바 확인, 게시글 좋아요, 마이페이지에서 좋아요 목록 확인이었습니다.
