• 다양한 칵테일 레시피 추천 및 정보 제공
• 나만의 칵테일 레시피 공유
• 나만 아는 분위기 좋은 바 추천 및 공유

• 카카오를 통한 소셜로그인 및 기본 회원가입으로 간단하고 안전하게 회원가입 할 수 있어요!

• 마이페이지에서 내가 작성한 글의 개수, 닉네임 변경, 비밀번호 변경, 계정 탈퇴 등의 가능을 이용할 수 있어요!

• 술 목록에서 플러스 버튼으로 메인페이지 술장고에 내가 가진 술을 등록할 수 있어요!

• 기존에 존재하는 칵테일 레시피를 추천 받을 수 있어요!

• 내가 만든 나만의 칵테일 레시피를 글작성을 통해 공유할 수 있어요!

• 나만 알고 있는 분위기 좋은 바를 글작성을 통해 공유할 수 있어요!

• 마이페이지에서 내가 좋아요 누른 모든 컨텐츠를 확인할 수 있어요!

• Back-end Tech Stack
  
  

• Front-end Tech Stack
  
  

  

  
  
  
  

• Front-end Library

1. TypeScript (TypeScript vs JavaScript)

TypeScript는 정적 타입 언어이기에 js보다 컴파일시 시간이 더 걸리지만, 안정성보장과 에러를 js를 사용할 때보다 수월하게 잡을 수 있어서 선정했습니다.

2. React-query (React-query vs Redux-toolkit vs Redux)

React-qeury는 서버의 값을 클라이언트에 가져오거나, 캐싱, 값 업데이트, 에러핸들링 등 비동기 과정을 더욱 편리하게 해줘서 사용했습니다.

3. Recoil (Recoil vs Redux toolkit vs Redux)

Recoil은 Redux에서 비동기처리를 해야하는 경우에 Redux thunk 등에 의존하여 처리를 해왔는데, Recoil은 비동기 처리를 기반으로 작성되어 있고 useState와 유사하여 사용하기에 편리하다고 판단하여 사용했습니다.

시연 영상 링크

• Front-end(React)

  • 임준수 Github
  • 변희재 Github
    

• Back-end(Nodejs) : Back-end repo

  • 진태인 Github
  • 최봉규 Github
  • 홍승현 Github
  
  

• Designer : DE-Figma

  • 김예지
  
  

• 팀 notion : https://vine-sound-ddd.notion.site/Btender-7-D-2-74e39aa8b6714332aaf6afc6b66b2f69

1. CloudFront 배포 관련 문제

❓S3 버킷의 내용을 다시 업로드하여도 캐시가 유지되어 일정 시간이 지나도 해당 변경 내용이 CloudFront에 즉시 반영되지 않는 문제가 발생했습니다.

❗️원인을 CloudFront의 캐시 삭제 정책에 시간 설정이 길게 설정된 것을 추정하였고, 확인해본 결과 TTL 설정이 24 설정되어 있었습니다. 원인을 파악한 후 CloudFront의 정책을 만들어 TTL설정을 1초로 설정했고, Invalidations(무효화)에 만든 정책을 반영하여 Edge Location에 저장된 캐시를 삭제하여 S3 버킷의 내용이 변경되면 즉시 반영되도록 하였습니다.

2. 소셜로그인 관련 문제

❓소셜로그인 진행시 리다이렉트되면서 토큰값을 url로 받아오는데, 리다이렉트가 안되는 문제, 토큰값을 못 받는 문제 발생했습니다.

❗️토큰값을 쿼리 스트링으로 받아오지 않아서 주소의 파싱 params로 못 받아서 발생하는 문제였습니다. 따라서 문제를 발견하여 수정을 하였으나, 새로고침 시에만 쿠키에 토큰이 저장되는 문제를 발견하였고, 컴포넌트를 하나 더 만들어서 토큰을 받는 부분과 서버에 유저정보를 요청하는 부분을 나누어서 저장하도록하여 해결하였습니다.

3. 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로 데이터가 불러와지면 자동으로 렌더링 되도록 해줌.

전반적인 사용경험 만족도는 아래 사진과 같고,

유저 분들이 가장 많이 이용하신 서비스로는 칵테일 레시피 확인, 추천 바 확인, 게시글 좋아요, 마이페이지에서 좋아요 목록 확인이었습니다.