욕심도 참 많아

크롬 익스텐션을 개발하며, 사용자의 데이터를 어떻게 관리하면 좋을지 고민하다가 Indexed DB에 대하여 공부하게 되었다. Indexed DB는 LocalStorage보다 많은 용량의 데이터를 브라우저에 영구적으로 저장하는 방법이다.또한컴퓨터 재부팅브라우저 종료 후 재실행인터넷 끊김이런 경우에도 사용자가 브라우저 데이터/캐시를 직접 삭제하지 않는 이상 사용자 데이터를 장기 보관하기 매우 적합하며, JS에서 사용하는 객체 형식 그대로 저장할 수 있다. 사용방법 1. DB open 요청 및 Object Storage사용const request = indexedDB.open("DatabaseName", version);request.onerror = (event) => { console.error("Dat..

프로젝트를 진행하던 중, Github Action으로 테스트 빌드를 하는 과정에서 에러가 났다. pnpm build를 하는 과정에서 에러가 났고,에러 로그는 이렇게 떴었다.관련 로그를 찾아보니 Github Action 에서 러너로 VM을 제공하는데, 이때 VM에서 node.js와 패키지 매니저를 받아올때 생기는 에러로 추측됐다.그래서 우선 node.js버전을 최신화 해보려다가, 바로 전에 node20 , node22 두 버전 모두 잘 돌아갔던걸 확인했기에 pnpm의존성 문제가 있나 확인해보았다.pnpm package들의 버전과 현재 프로젝트의 node간의 문제는 없었고, 로컬에서는 멀쩡하게 빌드가 잘 되고 있었기에 대체 어디가 문제인가 해서 ci.yml파일에 # 캐시 삭제- name: Clear PNPM..

저번 글에 이어서, 오늘은 react-hook-form을 사용할때 놓칠수 있는 점들과, 여러가지 팁에 대해서 다뤄보겠습니다. watch / useWatch 1. watch watch는 useForm 훅에서 반환되는 함수 중 하나로, 지정된 폼 필드의 현재 값을 반환하여 줍니다. 폼 필드의 값 변화를 실시간으로 관찰 할 수 있으며, 특정 필드 또는 전체 폼의 값을 얻을 수 있습니다. => 주로 폼 컴포넌트 내에서 사용되며, 해당 컴포넌트의 리렌더링 범위에 영향을 줍니다. 즉, watch를 사용하는 컴포넌트는 관찰하는 필드 값이 변경 될 때마다 리렌더링 됩니다. 2. useWatch useWatch는 리훅폼에서 제공하는 별도의 훅으로, watch와 유사하게 폼 필드의 값 변화를 관찰합니다. 하지만 useWa..

import axios from "axios"; const api = axios.create({ baseURL: "어쩌구저쩌구백엔드url", timeout: 3000, headers: { "Content-Type": "application/json", }, }); export default api; 기존 코드이다. Axios 로 baseURL을 이용해서 그냥 요청을 보내면 network 탭에서 그대로 URL이 노출 되기 때문에 rewrite 기능을 사용하였다!! /** @type {import('next').NextConfig} */ const nextConfig = { async rewrites() { return [ { source: "/api", destination: "어쩌구저쩌구백엔드url", ..

Axios 란 브라우저 를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리 이다. Fetch에 비해 별도의 설치가 필요하지만, fetch보다 더 많은 기능 지원과 문법을 간소화 해준다. 나는 이번 프로젝트를 진행하면서 전역적으로 사용하기 위하여, axios.create 를 사용해 주었다 import axios from "axios"; const api = axios.create({ baseURL: "~~", timeout: 3000, headers: { "Content-Type": "application/json", }, }); export default api; 해당 파일을 생성해 준뒤, api만 따로 import 하여 URL은 뒤에 추가만 해주면 된다! import api fro..

회사에서 firebase database에서 데이터들을 받아오고 화면에 띄우는 작업을 하는 도중, 전체 데이터가 안받아져 오는 에러를 발견했다. 코드상 문제는 없었다고 생각해서 계속 고쳐봤는데도 똑같은 문제가 발생해서 서칭을 해보니 js 에서 map 은 그 자체로 체이닝을 할 수 없고 , map 이후에 코드를 실행하려면 Promise.all 을 사용해 줘야 한다는 것을 발견했다. Promise.all(arr.map(data)=>{ ~~~~~~~~ ).then(()=>{ ~~~~ }) } 이런식으로 map 을 한번에 Promise.all() Scope 로 감싸주면 , map에서 여러번 반복되는 데이터를 한꺼번에 모아서 할수있어진다! 하지만 이 방식은 map 의 새로운 원소들은 끝나는 순서대로 리턴되기에, ..

외부 API POST 호출시에 The 'Access-Control-Allow-Origin' header has a value 'https://localhost:3000' that is not equal to the supplied origin. 라는 오류를 마주하고, CORS에러라는 것에 대하여 알게 되었다. CORS정책이란? CORS란 교차 출처 리소스 공유(Cross Origin Resource Sharing)의 줄임말로, 서로다른 출처간의 리소스를 전달하는 방식을 제어하는 체제 이다. 나 같은 경우에서는 localhost3000인 프론트엔드에서 localhost8000인 백엔드로 리소스를 전달하는데에 있어 CORS정책으로 인해 차단된 것이다. 우선 출처(Origin)이란, Protocol(http,..