Direct connection / Transaction pooler / Session pooler 차이가 무엇인가요?

질문 주셔서 감사합니다. ~강의에서 사용하는 방법은 : Direct connection 방법 입니다.1.DB에 직접 연결하는 전통적인 방식은 Direct connection 입니다.아래와 같은 프로토콜을 따르죠.postgresql://postgres:[PASSWORD]@db.[PROJECT REF].supabase.co:5432/postgres2.근데 위 방식은 max_connections의 제한도 있으니, 확장성에 문제가 있죠.하나의 커넥션(연결 고리를 가지고) 여러 클라이언트가 공유하는 방식 으로 해결가능해요.Transaction Pooler 방식입니다.DB에 작업을 끝내면 다른 사람이 커넥션을 이어 받아, 작업이 가능합니다.Session pooler 는 조금 더 장기적으로 커넥션을 빌려간다라고 생각하면 됩니다. 명확하게는 아래 요약을 참고해주세요.!Direct connection / Transaction pooler / Session pooler 차이점 1. Direct Connection (직접 연결)• 애플리케이션이 PostgreSQL 데이터베이스에 직접 연결하는 방식이에요.• 연결이 많아지면 데이터베이스의 max_connections 제한에 도달할 수 있어요.• 고부하 환경에서는 비효율적일 수 있어요. 2. Transaction Pooler (트랜잭션 풀러)• 여러 클라이언트가 동일한 데이터베이스 연결을 공유하는 방식이에요.• 트랜잭션이 끝나면 즉시 다른 클라이언트가 같은 연결을 사용할 수 있어요.• PostgreSQL의 연결 수를 절약할 수 있어서 대량의 짧은 요청 처리에 유리해요.• Supabase에서 포트 6543을 사용해요.• 단점: 트랜잭션이 끝날 때마다 상태가 초기화되므로, SET 같은 세션 기반 설정은 유지되지 않아요. 3. Session Pooler (세션 풀러)• 하나의 클라이언트가 하나의 연결을 독점적으로 사용하는 방식이에요.• 연결이 유지되는 동안 동일한 클라이언트만 해당 연결을 사용해요.• 트랜잭션이 끝나도 세션 상태(SET 변수 등)가 유지돼요.• Supabase에서 포트 5432를 사용해요.• 단점: 연결을 다른 클라이언트가 즉시 재사용할 수 없어서 비효율적일 수 있어요.요약 비교(사진) 방식연결 공유사용 사례장점단점Direct Connection❌ (없음)낮은 연결 수, 고성능 DB간단한 설정, 세션 유지max_connections 제한 초과 가능Transaction Pooler✅ (트랜잭션 단위)대량의 짧은 요청 처리연결 수 절약세션 상태 유지 불가Session Pooler✅ (세션 단위)장기 실행 쿼리, 세션 유지 필요세션 상태 유지 가능연결 사용 비효율적어떤 방식을 선택할지는 애플리케이션의 특성에 따라 달라요. 짧고 많은 요청이면 트랜잭션 풀러, 세션 유지가 필요하면 세션 풀러, 연결이 적으면 직접 연결이 적합해요. 참고 자료 : https://supabase.com/docs/guides/troubleshooting/supavisor-and-connection-terminology-explained-9pr_ZO

3.2, 3.3 화면에 아무것도 나오지 않고 있습니다!

제가 확인해보니 제 컴퓨터에서는 잘 되고 있습니다. 시스템상 DRM 같은데요. 아래 방법 한번 시도해보세요.!1.듀얼 모니터 제거 후 영상 재생 , ( 맥북,아이패드 등의 사이드카 포함 )2.화면 녹화 프로그램 제거 후 영상 재생 ( 예, OBS )

LiveDemo 페이지 정상작동하나요?

답변이 좀 늦어서 죄송합니다. 라이브 프로젝트 복구는 되었습니다.!supabase 무료 버전을 사용하다보니 최대 1주 접속이 없는 경우라면 프로젝트가 프리즈되어 복구 했습니다.알려주셔서 감사합니다.! 추후 강의 진행에 어려운점 있으시면 질문 많이 부탁드립니다.~

서버 컴포넌트에서 API 호출 시 Supabase의 클라이언트/서버 클라이언트 차이점이 궁금합니다.

React Server Component ( RSC )는 기본적으로 서버에서 동작합니다. 하지만 브라우저에서도 동작하도록 "use client" 디렉티브를 줄수 있죠. React Server Component ( RSC ) = SSRReact Server Component ( RSC ) + "use client" = SSR +CSR Next.js AppRouter에서 RSC 으로 SSR, CSR 를 모두 커버 했다라고 보면됩니다.

서버 컴포넌트에서 API 호출 시 Supabase의 클라이언트/서버 클라이언트 차이점이 궁금합니다.

결론먼저 말씀드리면 서버에서 실행되는 코드라면 createServerSideClient, 브라우저에서 실행되는 코드라면 createBrowserSideClient 을 사용하면 됩니다. *supabase 응답을 콘솔로그를 찍었을때 vscode 라면 서버사이드, 브라우저라면 클라이언트 사이드 입니다. 1.서버 컴포넌트는 서버와 브라우저에서 모두 동작할 수 있습니다. ( React Server Component != SSR ) 2 서버 컴포넌트의 서버 실행 구간2.1 Supabase createServerSideClient : 모든 기능이 잘 동작합니다.2.2 Supabase createBrowserSideClient : 사실 이렇게 써도 잘 동작 합니다. 브라우저에서 돌리는 코드는 서버에서도 동작하죠. ( 대신 createServerSideClient과 다르게 req 객체의 쿠키 조작과 같은 작업은 못하겠죠. ) 3. 서버 컴포넌트의 브라우저 실행 구간( RSC 가 브라우저로 넘어와서 하이드레이션 과정을 거쳐서 리액트 App으로 돌아간다고 했었죠.! ) 3.1 Supabase createServerSideClient : 사용이 불가능합니다.3.2 Supabase createBrowserSideClient : 그래서 반드시 요것을 써야하죠.

7.2 구글 로그인 1 - AuthUI 구현 구글 로그인 관련 질문드립니다.

Unsupported provider: provider is not enabled애러 메시지를 보니 provider가 enable이 안된것으로 보이네요. 아래 이미지를 참고해서 Google Login 켜주시면 됩니다. (사진)

7.2 강 구글 로그인 1 강좌에서 redirectTo 로 설정해도 이동이 안되요.

Redriect URLs 설정이 없다면 기본 Site URL로 리다이렉트가 들어갑니다.

7.2 강 구글 로그인 1 강좌에서 redirectTo 로 설정해도 이동이 안되요.

(사진) Redirect URLsURLs that auth providers are permitted to redirect to post authentication. Wildcards are allowed, for example, https://*.domain.com 위 부분 설정을 하셨는지 체크 부탁드려요. 모든 Auth 설정에 공통 적용되는 설정인데요, 허용 가능 리다이렉트 경로를 화이트 리스팅 처리해야 합니다.

코드가 왜 그런지 모르겠는데, 이럴땐 어떻게 공부해야하나요?

2) 태그를 감쌀때 어떤 것은 div로 컨테이너를 주시고 어떤것은 안주시는 경우가 있는데, 차이를 모르겠음.여러 목적이 있는데요.1.레이아웃 잡을 용도로 넣기도 합니다.2.스타일 wrapper 목적으로 넣기도 합니다.3.Tree를 깔끔하게 만들기 위해서도 넣습니다.3) useUIState에 저장된 변수 이름이 "homeCategory"인데, 제 생각엔 이것 보다는 "selectedSubject" 같은 이름이 더 직관적이라 생각하는데, 그럼에도 제 생각보단 선생님 생각이 맞을건데 제 생각이 어느부분이 부족한질 모르겠음.아뇨, 변수명에 정답이 없어서 생각해주신 방향으로 해주셔도 됩니다. 아래 중에서 제일 직관적인것을 생각하는것도 좋겠네요.음악 카테고리에 사용할 수 있는 변수명을 추천해드릴게요:1. genreFilter - 장르를 기준으로 필터링하는 경우2. moodFilter - 음악의 분위기나 감정을 기준으로 필터링하는 경우3. artistFilter - 아티스트를 기준으로 필터링하는 경우4. releaseYearFilter - 발매 연도를 기준으로 필터링하는 경우5. instrumentFilter - 악기를 기준으로 필터링하는 경우이 변수명들은 필터링하려는 기준에 따라 유연하게 사용할 수 있어요! 4) 위와 같은 문제들을 해결하고 싶어서, 책을 찾아보려 하는데 리액트 훅을 설명해주는 책들은 많은데, HTML CSS를 어떤 구조로 짜야 하는지, 리액트 앱 만들때 폴더구조는 어떻게 하는게 좋은지에 대한 책은 없어서 어떻게 해야할지 모르겠음.*HTML/CSS 구조를 예쁘게 만드는것이 개발자의 덕목이긴 합니다. 근데 실무에서는 마감일을 맞추고 잘동작하는것이 더 중요하죠. 이것을 선행후 리팩토링때 고려해보면 좋겠네요.HTML, CSS -> 조은님의 html , 구조는 시멘틱, 접근성 고려하면 좋겠네요.*https://www.inflearn.com/course/html-%ED%91%9C%EC%A4%80-%EA%B8%B0%EC%B4%88?srsltid=AfmBOop5ewJcABGFZYw6P38Xsdk-cuq3oAwsIp_Di0hrQOJdaE1-cSvS리액트 앱 만들때 폴더구조 -> 유용태 님의 FSD 글 추천합니다.https://velog.io/@teo/separation-of-concerns-of-frontend

코드가 왜 그런지 모르겠는데, 이럴땐 어떻게 공부해야하나요?

1.components/elements vs components 의 차이를 제대로 말씀 안드리고 넘어갔을수 있겠네요.그 둘의 차이점은 elements는 조금 더 작은 컴포넌트 조각을 넣었구요.그를 이용한 더 큰 컴포넌트를 components에 정의했어요.*사람마다 다른 기준으로 묶기 때문에 각자의 원칙에 고민 해주시면 좋겠네요.