전체 글130 presence에서 config의 key를 커스텀 설정하는 용도와 이유 presence에서 config의 key를 커스텀 설정하는 용도와 이유**presence**는 Supabase의 실시간 채팅이나 여러 사용자가 동시에 참여하는 시스템에서 사용자들의 접속 상태를 추적하는 시스템입니다. 이 시스템에서 중요한 부분 중 하나가 key 값입니다. key는 유저를 고유하게 식별하는 값으로 사용됩니다.key 값의 설정을 어떻게 하느냐에 따라, 실시간으로 트래킹되는 사용자의 구분 방법이 달라지며, 여러 사용자가 같은 key를 사용하면, 그들은 하나의 유저로 간주될 수 있습니다. 따라서 key를 어떤 값을 설정하느냐에 따라 접속자 관리 방식이 달라집니다.이제 key 값을 커스텀으로 설정하는 이유와 용도를 구체적으로 설명할게요.1. key란?key는 유저를 식별하는 값으로, Supabas.. 2025. 5. 2. Supabase에서 sync, join, leave Supabase에서 sync, join, leave는 realtime 실시간 통신 기능에서 사용되는 메서드들입니다.특히 broadcast와 presence 기능을 다룰 때 자주 사용됩니다. sync() - 현재 presence 상태를 모두 받아옵니다. 서버와 클라이언트의 상태를 동기화하는 데 사용됩니다.join() - 현재 클라이언트가 채널에 참여한다는 것을 알리고, presence에 나타나게 합니다.leave() - 현재 클라이언트가 채널에서 나갔다는 것을 알리고, presence에서 제거됩니다.Supabase는 join / leave 이벤트가 발생할 때마다 자동으로 sync 이벤트를 트리거합니다. 즉, 최종적으로는 Sync를 통해 가장 정확한 전체 상태를 다시 보내줍니다. 따라서 Sync()에서만 s.. 2025. 5. 2. key의 우선순위: config vs track key의 우선순위: config vs trackkey를 config에서 커스텀으로 설정하고, 그 아래에서 track() 메서드를 사용하여 { userId }를 전달하는 경우, track()에서 전달하는 값이 우선시됩니다. 자세히 설명하자면:config에서 설정한 key는 채널이 처음 생성될 때 유저를 식별하는 기본적인 키로 사용됩니다. 즉, config에서 설정한 key 값은 초기화 과정에서 유저를 구분하는 기준이 됩니다.track()에서 전달한 값은 유저 상태를 추적하는 데 사용되는 값으로, track() 메서드를 호출할 때마다 업데이트됩니다. 이때 전달한 값은 key와 연결되어 해당 상태를 실시간으로 추적하는 데 사용됩니다. 1. config에서 key 설정config에서 설정한 key는 채널이 처음.. 2025. 5. 2. REST 규칙 REST 란? HTTP를 어떻게 사용할 것인지에 대한 설계 원칙HTTP는 통신을 위한 기본적인 규약이라면, REST는 그 위에서 어떻게 설계할지에 대한 원칙을 제공하는 것입니다.REST는 HTTP 프로토콜을 사용해서 자원을 표현하고, 자원에 대해 어떻게 요청을 보낼지 정의합니다. HTTP = 서버-클라이언트 간 통신규칙. (어떻게 데이터를 전송할것인지)HTTP 요청/응답은 어떻게 형식이 되어야 하고, 클라이언트는 서버에 어떤 **메서드(GET, POST, PUT, DELETE)**를 사용하여 요청을 보낼 것인지, 상태 코드는 어떤 형식으로 반환될 것인지 등을 정의합니다.REST = HTTP를 더 효과적으로 사용하는 방법을 제시하는 규약 자원(Resource)을 어떻게 정의하고, HTTP 메서드(GET, .. 2025. 4. 28. layout.tsx와 page.tsx 역할 layout.tsx페이지를 감싸는 공통 레이아웃 컴포넌트페이지 이동해도 유지 하도록 설계했어요.헤더, 사이드바, 푸터, 전역 Toast, 이런 것들을 매번 페이지 이동할 때마다 새로 렌더링하면 비효율적이니까, layout은 한번만 마운트되고 재사용합니다.즉, layout은 변하지 않는 틀처럼 작동.page.tsx실제로 라우트별로 보여줘야 할 내용다른 페이지로 이동할 때는 현재 page.tsx를 언마운트하고, 새로운 page.tsx를 새로 마운트합니다.이유는 페이지마다 보여줘야 할 내용이 다르기 때문이에요.요약🔹 layout.tsx : 페이지를 감싸는 고정 틀 (한 번 마운트되고 유지) 🔹 page.tsx : 페이지별 구체적 콘텐츠 (페이지 이동 시 언마운트 후 새로 마운트) 2025. 4. 27. Supabase Realtime 동작 방식 Supabase의 실시간 DB(Realtime)는WebSocket + Realtime 서버 + Postgres 복제위 3가지가 합쳐져 동작한다. WebSocket : 실시간 연결통로 (채널로 쓰임)Realtime 서버 : Supabase의 실시간 중계자Postgres Logial Replication : DB변경을 실시간으로 Realtime 서버에 전달하는 Postgres의 기능 [유저 A 브라우저] [유저 B 브라우저] │ │ ▼ ▼ supabase.js supabase.js │ │ .. 2025. 4. 25. 이전 1 2 3 4 ··· 22 다음