개발 블로그

Supabase는 오픈 소스 서비스로, Firebase의 대안으로 사용할 수 있는 serverless DB 솔루션 입니다.PostgreSQL을 DB engine으로 사용하고 있어 복잡한 쿼리 작업도 용이하게 사용할 수 있습니다.   주요 기능실시간 데이터베이스 (Real-time Database)PostgreSQL의 데이터 변경 사항(삽입, 수정, 삭제 등)을 실시간으로 감지하여 클라이언트에 전달합니다.실시간 기능은 웹소켓(WebSocket)을 통해 동작합니다.인증(Authentication)사용자 등록, 로그인, 소셜 로그인(Google, Facebook 등) 같은 인증 기능을 지원합니다.Role-Based Access Control(RBAC) 및 JWT 토큰 기반 인증 제공.스토리지(Storage)파..

useOptimistic (state, updateFn): 사용자가 폼을 제출할 때(네트워크 요청과 같은 백그라운드 작업이 완료되기 전),  서버의 응답을 기다리는 대신 UI를 기대하는 결과로 즉시 업데이트하여 유저에게 보여주고 싶을 때 사용한다.   const [optimisticState, addOptimistic] = useOptimistic(state, updateFn);  useOptimistic은 비동기 작업이 진행 중일 때 다른 상태를 보여줄 수 있게 해주는 React hook입니다.현재 상태와 작업의 입력을 취하는 함수를 제공하고, 작업이 대기 중일 때 사용할 상태를 반환합니다. 이 상태는 “낙관적” 상태라고 불리는데, 실제로 작업을 완료하는 데 시간이 걸리더라도사용자에게 즉시 작업의 결..

useRef useRef는 useState와 동일하게 컴포넌트 내부에서 렌더링이 일어나도 변경 가능한 상태값을 저장할 수 있습니다.하지만 useState와 구별되는 큰 차이점이 있습니다.useRef는 반환값인 객체 내부에 있는 current로 값에 접근 또는 변경할 수 있다.useRef는 그 값이 변하더라도 렌더링을 발생시키지 않는다. 렌더링에 영향을 미치지 않는 고정값을 관리하기 위해서 useRef를 사용한다면,그냥 함수 외부에서 값을 선언하여 관리해도 되지않을까? 생각이 들 수 있습니다.let value = 0;const Component = ()=> { const handleClick = ()=> { value += 1 }} 이와 같은 방식의 단점은렌더링 되기 전부터 value라는 값이..

React의 대표 hooks - useState 리액트 함수 컴포넌트에서 가장 중요한 개념은 바로 훅입니다.훅은 클래스 컴포넌트에서만 가능했던 state, ref등의 리액트의 핵심적인 기능을 함수에서도 가능하게 만들었고,무엇보다 클래스 컴포넌트보다 간결하게 작성할 수 있어 훅이 등장한 이후로 대부분의 React 코드는 함수 컴포넌트로 작성되고 있습니다.이러한 hook중 가장 대표적인 useState에 대해서 상세하게 알아보려합니다.      1. useState는 Closure를 통해 상태관리를 한다. React의 가장 기본적인 훅은 당연 useState 일것입니다.useState는 함수 컴포넌트 내부에서 상태를 정의하고, 이 상태를 관리할 수 있게 해주는 훅입니다.  만약 useState를 사용하지 않..

리액트 렌더링렌더링이란 단어는 많이 듣고 사용하지만, 명확히 개념을 설명하기는 어려워 정리를 해보려고합니다.브라우저에서의 렌더링은 HTML과 CSS리소스를 기반으로 웹페이지에 필요한 UI를 그리는 과정을 말하고,리엑트에서의 렌더링은 브라우저의 렌더링에 필요한 DOM tree를 만드는 과정을 말합니다.좀 더 상세하게 말하자면 React application tree안에있는 모든 컴포넌트들이 자신의 props와 state를 가지고어떻게 UI를 구성하고 이를 바탕으로 어떤 DOM 결과를 브라우저에 제공할 것인지 계산하는 과정을 말합니다.    re-rendering 리엑트에서 렌더링은 유저가 처음 application에 진입하면 최초 렌더링이 발생합니다. (root component 호출)import Imag..

리엑트의 생명주기 / 라이프 사이클생명주기 메서드가 실행되는 시점은 크게 3가지로 나눌 수 있습니다. mount : 컴포넌트가 마운팅(생성)되는 시점update : 이미 생성된 컴포넌트의 내용이 변경(업데이트)되는 시점unmount : 컴포넌트가 더 이상 존재하지 않는 시점    1. class component의 Life cycle  render()render는 React Class Component의 유일한 필수값으로 쓰입니다.이 함수는 컴포넌트가 UI를 렌더링하기 위해서 쓰이고, mount와 update 과정에서 일어납니다. render() 함수는 항상 순수해야하며, 부수 효과가 없어야 한다는 것이 특징입니다. (no side effects)순수해야 한다는 것은 입력값이 있으면 항상 똑같은 결과물을..