마!내가바로왕만두다

supabase  BaaS 클라우드 기반의 백앤드 서비스  예) firebase , parse, aws amplify  baas 쓰면 좋은점 개발속도 향상 . 백엔드를 직접 만들 필요가 없다 유지보수 에 좋다  단점. 비용 예측 어려움플랫폰 의존성 supabase 실시간 데이터 변경 감지 하고 반응  데이터베이스 업데이트가 필요할때마다 자동으로 반응 하여 변경사항을 보여줌  설치 방법 yarn add @supabase/supabase-js# 또는 npm install @supabase/supabase-js   api 키가 필요 import { createClient } from "@supabase/supabase-js";// 1) project urlconst SUPABASE_PROJECT_URL = "..

TIL 2024. 10. 3. 16:42

React router dom  어플리케이션에서 클라이언트 측 라우팅을 쉽구 해줄수 있도록 도와주는 라이브러리다  리액트는 spa  기반 으로 특정 Url 경로에 맞춰 컴포넌트만 변경 하는 방식으로 동작 .  리액트 라우터 돔은 spa 방식에서 여러경로 페이지 를 처리 하는 기능 을 제공 .   설치 방법  yarn add react-router-dom  src 밑에 components filte page 로 만들기 page 밑에 Home.jsx About.jsx Works.jsxContact.jsx   shared 파일 하나 더 만들어서 Router.jsx 도 만들어준다    라우터 routerurl 감지 , url 에 맞는 컴포넌트를 렌더링 해줌 . browserrouter 사용 하여 라우팅 설정 할..

TIL 2024. 10. 2. 10:59

useRef , useEffect   useRef 변수처럼 값을 기억 하고 값이 바뀌어도 다시 렌더링 하지 않도록 도와줌 값이 바뀌어도 컴포넌트가 다시 그려지지 않고 그대로있음 dom 요소에 접근 하는 역할 값을 기억 해야할떄 사용  useEffect 컴포넌트가 처음 화면에 나타날떄, 업데이트될때 , 사라질떄 (cleanup), 특정 작업을 실행 할 수있게 도와줌  api 요청 , 이벤트등록 , 데이터변경 ,등의 작업 처리할떄 유용 useRef 와 useState의 차이   useRef는 값이 바뀌어도 컴포넌트를 다시 렌더링하지 않으며, 값을 계속 유지이 값은 렌더링 사이에서도 사라지지 않고 유지함. 하지만 화면에 변화를 일으키지 않는다. 주로 DOM에 직접 접근하거나, 값이 변경되더라도 렌더링을 트리거..

TIL 2024. 10. 2. 00:02