서버 컴포넌트에서 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에 정의했어요.*사람마다 다른 기준으로 묶기 때문에 각자의 원칙에 고민 해주시면 좋겠네요.

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

안녕하세요.1.화살표를 45px 움직인 이유는 기존의 컴포넌트를 커스터마이징 하기 위함입니다.! 처음부터 컴포넌트를 만들었으면 그럴 이유는 없겠죠. radix에서 제공하는 ui component로 빠르게 개발하는것에 대한 단점입니다. 아래는 순수 CSS 입니다. 이를 tailwind css로 바꾼것 입니다.```html 이 박스는 왼쪽으로 45px 이동했어요!``` ```css.relative-box { position: relative; /* 박스를 기준으로 위치를 설정 */ left: -45px; /* 박스를 왼쪽으로 45px 이동 */ background-color: lightblue; width: 200px; height: 100px; padding: 10px; border: 1px solid blue;}``` - position: relative: 요소의 위치를 기준으로 이동할 수 있도록 만들어줘요. 이 경우, 요소는 원래의 위치를 기준으로 상대적인 변화를 적용받아요.- left: -45px: 요소를 왼쪽으로 45픽셀 만큼 이동시켜요. - 값이기 때문에 왼쪽으로 이동하게 돼요.이 코드를 적용하면 .relative-box 요소는 원래 위치에서 왼쪽으로 45픽셀 이동된 상태로 렌더링돼요.

강의외 복잡한 ui 입력폼 관련 질문 있습니다

코드 런타임 환경이 아니라서 사실 정확하게 답변드리기 어렵습니다. 몇단계에서 막히는지 알려주시면 추가 답변가능할수 있어요.1.드래그 시작 이벤트가 작동하는가 ? 2.드래그 끝 이벤트가 작동 하는가?3.드래그 끝으로 상태 데이터가 변경 되었는가?4.데이터 변경에 따른 UI가 업데이트 되었는가?-> 불변성 문제일 가능성이 큽니다. 데이터의 depth가 깊기 때문에 이를 위한 관리가 필요하죠. -> 배열의 key 값이 고유하지 않아도 문제가 될 수 있어요.

npx랑 yarn이랑 같이 써도 되나요?

yarn 1.x 버전으로 패키지 매니저를 사용해서, npx를 써도 무관합니다만.깃헙에 이슈를 보니 package lock 파일이 만들어지는 경우가 있다고 하네요. 그런 경우에는 yarn lock 하나만 남겨주는게 좋겠습니다. yarn dlx는 yarn 2.x 이상을 사용하면 가능한데, 이번 강의 범위에서는 벗어나서 참고만 부탁드러요.~ npm : npx shadcn@latest add accordionyarn : npx shadcn@latest add accordion-> yarn dlx shadcn@latest add accordionpnpm : pnpm dlx shadcn@latest add accordionbunx : bunx --bun shadcn@latest add accordion