[TIL] 2/2 React 숙련주차(5) Supabase, LocalStorage

BaaS

Backend as a System

 

필요한 이유 : 프론트엔드 개발에 집중하고 싶어서

장점 : 개발 속도 향상(백엔드를 직접 만들 필요가 없음), 유지보수 간편, 자동 확장

단점 : 유연성 부족, 비용 예측 어려움, 플랫폼 의존성

---

Supabase

PostgreSQL을 기반으로 하는 오픈 소스 BaaS 플랫폼

Firebase의 대안으로 자리잡으면서, 관계형 데이터베이스를 사용하면서도 실시간 기능을 원하는 개발자들 사이에 인기

 

React에서 사용하기

설치 및 세팅

yarn add @supabase/supabase-js

---

useEffect를 사용하는데 fetch가 2번 된다?

 

supabase로 데이터를 추가하는 로직을 배우고 있는데 fetch가 2번 되는걸 발견했다

fetchData()는 여기 한번만 쓰였는데 network창에서는 2번 되었다

구글링을 통해 클로저로 해결하면 되는걸 알았다 새로운 버전의 버그인 것 같다

위의 코드에서 주석처리한 부분이 해결하는 부분이다

주석 처리한 부분을 다시 살리면 이렇게 정상적으로 한번만 패치된다

 

참고한 깃헙 주소 : https://github.com/facebook/react/issues/24553

Bug: useEffect called twice in Strict Mode · Issue #24553 · facebook/react

++ 튜터님께 이유를 듣고 왔다

Strict Mode 즉, 개발자 모드에서는 디버깅을 용이하게 하기 위해 2번씩 출력을 해주지만 실제 배포할 때는 한번만 출력 된다고 한다

하지만 헷갈린다면! main.jsx에 넣어준 <StrictMode>를 빼주면 해결된다

---

LocalStorage

브라우저에 key-value값으로 브라우저 Storage에 저장할 수 있다

저장한 데이터는 새로고침을 해도 유지된다

 

window.localStorage.000

• setItem(): key,  value 추가
• getItem(): value 가져오기
• removeItem(): item 삭제
• clear(): 도메인 내의 localStorage 전체 값 삭제
• length: 전체 item 갯수
• key(): index로 key값 찾기
• localStorage에는 문자열만 저장할 수 있다
  => 객체나 문자열을 저장하려면 const objString(arrString) = JSON.stringify(obj/arr)로 문자화 시켜줘야 한다

과제를 하면서 localStorage를 처음 써봤는데 좀 어려웠다

key-value 형태인 딕셔러리 라는 것 기억하기!