개발기록창고

공공데이터 API를 이용하여 추천 레시피를 개발하다가 오류를 발견했다. 찜한 목록에서 각각의 레시피를 불러올 때 제대로 불러오지 않는 현상이 발생했다. (그간 1~2개로만 테스트를 해봤을 때는 잘 떠서 오류를 확인을 못했었다.) 3개의 레시피를 불러와야하는데 현재 2개의 레시피만 불러오고 있다. 네트워크를 확인해보니 불러와지지 않은 레시피는 CORS 오류가 뜬 것을 확인할 수 있다. 그런데 공공데이터 API는 인증키만 필요할 뿐 오픈되어있기 때문에 CORS 오류가 일어날 일이 없는데.. 왜 발생하는지 의문이 들었다. 우선 CORS를 해결하기위해 기본적으로 백엔드에서 처리하는 것이 바람직하지만 공공데이터이므로 프론트에서 임시로 처리하기 위해 Proxy설정을 할 수 있다. vite.config.ts에서 Pr..

냉장고의 이미지를 가져오는데 늦게 뜨는 현상이 발생한다. 해당 이미지를 불러오는 코드는 export const getFoodImage = async (image: string) => { const storage = getStorage(app); const imageRef = ref(storage, `cart/${image}`); return await getDownloadURL(imageRef); }; 처음에 데이터를 가져올 때 이미지 url이 저장되어 있지 않고 위와 같이 파일명이 저장되어있는데 storage에 저장된 사진 파일을 불러온다. 정리해서 이미지 url이 저장되어있지 않으므로 바로 이미지를 불러오는 게 아닌 다시 firebase에 요청해서 가져오므로 한 번 더 거치기 때문에 HTTP/2 in..

토이 프로젝트를 만들면서 레시피에 대한 공공데이터 API가 필요하여 공공데이터활용에서 제공하는 Open API를 가져오려고 한다. 1. Open API 신청하기 https://www.foodsafetykorea.go.kr/apiMain.do 식품안전나라 공공데이터 검색 식품의약품안전처 및 연계기관에서 개방하는 데이터를 검색할 수 있습니다. 검색어를 입력하세요. --> 검색 www.foodsafetykorea.go.kr 여기서 원하는 데이터를 검색하고 해당 데이터에 Open API 이용 신청을 하면 된다. 요청주소, 요청인자, 출력항목이 나와있어서 처음 Open API를 사용해보는 나도 쉽게 이용할 수 있었다. 제공해주는 데이터가 많기 때문에 그 중 내가 필요한 데이터만 가져오기 위해 JSON형식으로 가져..

프로젝트에서 공공API를 통해 레시피를 가져오는데 데이터가 이런식으로 되어있었다. MANUAL01 ~ MANUAL20까지 Key가 존재한다는 것은 알고 있으나 해당 메뉴에 메뉴얼이 몇 개 있는지는 모르는 상태이므로 우선 01부터 20까지 하나하나 확인해주는 코드를 작성했다. import type { RecipeData } from "@/types/recipe.types"; const manualFilter = (recipe: RecipeData) => { const manuals = []; for (let i = 1; i { const manuals = []; for (let i = 1; i

처음 설계할 때 전역 상태 관리에 쓰일 만한 게 유저정보, 선택 카테고리 정도였지만 프롭스 드릴링 현상으로 상태 관리 도구가 필요했다. 굳이 무겁고 보일러 플레이트가 있는 redux나 다른 도구를 사용하기보다는 간단하고 이번기회에 사용해볼겸 Context API를 선택하였다. 유저 상태 관리랑 카테고리 상태 관리를 분리하였는데 Context API의 단점인 Provider로 감싼 자식 컴포넌트들이 상태값이 변경될 때 리렌더링이 된다는 것이다. 불필요한 리렌더링을 없애기 위해 유저 로그인 정보만 Context API로 관리하고 나머지 상태 관리는 Zustand로 관리하는 것으로 변경하였다. 많은 전역 상태 관리 도구 중에서 Zustand를 선택한 이유는 짧은 러닝 커브와 간편하기 때문에 골랐다.

Firebase로 쉽게 구글 로그인을 이용할 수 있는 기능이 있어서 구현해보았다. Firebase 접속 > Authentication > Sign-in method > 새 제공업체 추가 firebase.ts import { getAuth } from "firebase/auth"; const app = initializeApp(firebaseConfig); const auth = getAuth(app); export { ..., auth }; Firebase 인증 기능을 연동하기 위해 getAuth를 import한다 import { GoogleAuthProvider, signInWithPopup } from "firebase/auth"; import { auth } from "@/firebase"; con..

프로젝트에서 혼자 프론트엔드로 만들고 있기에 DB가 따로 필요했다. 백엔드 없이 사용할 수 있는 Firebase를 이용하여 만들기로 함 npm install firebase 우선 프로젝트에 firebase 패키지 설치. src폴더에 firebase.js과 .env파일을 만들어준다. firebase.ts에는 APiKey를 넣어줘야하는데 github에 올리면 그대로 노출이 되므로 .env파일에 넣어서 환경 변수로 설정해서 관리해줘야한다. .gitigore에 #firebase .env 추가해준다. firebase.ts파일에는 import { initializeApp } from "firebase/app"; import { getFirestore } from "firebase/firestore"; const f..

React & TypeScript & styled-components로 Modal 공통컴포넌트 만들기 우선 모달창의 옵션에는 1. x버튼을 누르면 창이 닫혀야한다. 2. EscKey를 누르면 창이 닫혀야한다. 3. 모달창 외의 외부를 누르면 창이 닫혀야한다. 3가지 조건을 충족하도록 만들었다. 우선 모달창 상태와 이를 관리할 수 있는 훅을 제작한다. useModal.ts import { useState } from "react"; export const useModal = () => { const [isOpen, setIsOpen] = useState(false); const openModal = () => { setIsOpen(true); }; const closeModal = () => { setIs..