[사이드] AllFood 웹사이트

태그
Next.js
상세설명레시피 정보 검색, 저장 하는 WEB
Github https://github.com/pminsun/AllFood
작성일자2024.06.10

레시피 정보 검색, 저장 하는 WEB

해당 프로젝트는 Edamam api / firebase / OpenWeather api / Youtube api를 활용해서 만든 Next.js 웹사이트입니다.

Screenshots

image

Tech Stack

Tech Stack : Next.js, Javascript, React.js, firebase, react-query

홈페이지 링크

테스트 아이디 : user@test.com | 테스트 비번 : test1234!@

https://www.myallfood.com/

Github 링크

https://github.com/pminsun/AllFood

아키텍처

image

프로젝트에서 배운 점

문제

  • 계정 별 레시피 관리가 필요하다.
  • 새로 고침 하면 Dynamic Routing으로 받은 값이 사라져 유지가 필요하다.
  • 같은 api를 사용하는 4개의 youtube 채널을 불러와야 된다.

    • 해결

  • firebase의 auth를 활용해 계정 생성 시 database에 user.uid 명의 문서가 생성되어 하위에 레시피 정보를 저장할 수 있다.
  • getServerSideProps를 활용하여 query에 저장된 값을 서버 측에서 가져와 새로 고침 시에도 데이터를 유지할 수 있다.
  • useQueries 훅을 사용하여 여러 채널의 데이터를 병렬로 가져와 비동기 쿼리를 동시에 실행하며, 여러 쿼리를 하나의 배열로 관리하고 상태와 오류 처리를 일관성 있게 처리할 수 있다.