분류 전체보기129 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. Next.js 프로젝트 tailwind.config 파일 생성하기 Next.js프로젝트를 설치해도 tailwind.config.js는 자동으로 생기지 않기 때문에 Tailwind는 별도로 설정해줘야 합니다 ✅ Next.js에서 Tailwind CSS 설정 순서1. Next.js 프로젝트 생성npx create-next-app 프로젝트 이름2. Tailwind CSS 설치npm install -D tailwindcss postcssnpx tailwindcss init -p //tailwind.config 파일과 postcss.config 파일 생성 npx tailwindcss init : tailwind.config.js 만 생성함npx tailwindcss init -p : tailwind.config.js + postcss.config.js 같이 생성 2025. 4. 18. 이전 1 2 3 4 ··· 22 다음