Next.js 15에서 Material Tailwind 설정

안녕하세요~ 슬랙 채널로 Github Repository Link와 함께 문의주시면 디버깅 같이 진행해드리겠습니다.감사합니다.

smtp 사용

안녕하세요 😄 smtp가 필수 정책으로 변경되었군요! 알려주셔서 감사합니다.추가 강의를 제작하기에 앞서 우선 당장 문제를 해결하셔야 할 것 같아 아래 링크를 보내드립니다. 저의 경우 Resend 무료서비스를 활용해서 Supabase에 smtp 연동을 추가하고 있어요 ㅎㅎ 우선 아래 글을 따라하시면서 연동 진행해보시고 막히는 부분이 있다면 슬랙으로 문의 부탁드립니다.감사합니다.https://velog.io/@dev_leewoooo/supabase%EC%97%90-Customer-SMTP-Provider-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0-with-Resend

build 오류

typing 오류같아 보입니다. ping pong을 여러번 해야 하는 오류일 것 같은데 슬랙 채널로 Github Repository 링크와 함께 다시 질문주시면 디버깅을 같이 도와드리겠습니다 😄

채팅 관련 부분, useInfiniteQuery

안녕하세요 김용민님! 답변이 늦어져 죄송합니다. 해결이 안된 질문이 있는지 모르고 있었네요 🙀 우선 reverseInfiniteQuery가 react-query에서 공식적으로 지원되지 않는 함수처럼 보이는데 혹시 해당 함수에 대한 설명을 따로 받아볼 수 있을까요?역무한스크롤의 경우 별도의 함수가 필요한 작업은 아니어보이고, 스크롤 인식과 최상위 컴포넌트가 화면상에 렌더링 되었는지 인식하도록 intersection observer를 작업해주시면 될 것 같습니다 😄 refetch의 경우 최적화를 질문주신 것 같은데, infinite scroll 최적화 관련 좋은 아티클이 2개가 있어서 같이 공유드려요! 카카오 엔터프라이즈에서 나온 아티클을 best practice로 보시면서 공부해보시는 것을 추천드립니다 ㅎㅎhttps://tech.kakaoenterprise.com/149https://bttrthn-ystrdy.tistory.com/139

Supabase smtp 추가 강좌 계획

안녕하세요 🙂 답변이 늦었습니다. smtp 관련 강좌 제작 계획은 따로 없었는데 추가 제작 후보로 등록해놓을게요! 서버 비용은 개인 블로그는 트래픽이 엄청나지 않는 한 무료로 사용 가능하실거라 믿습니다 ㅎㅎ

유효성 검사 누락된 부분...

아 네네! 해당 부분은 Yup라는 라이브러리와 formik을 사용하시면 더 좋은 코드를 작성하실 수 있어요 😄 해당 부분은 시간이 되면 보충강의로 작성해서 업로드 해드리겠습니다. https://github.com/lopun/inflearn-supabase-instagram-clone/commit/2cbd87cbc312a05361e75086d98f64f93f5ea1ddsignup쪽만 유효성 검사를 추가해보았습니다. 참고하셔서 리팩토링 진행 부탁드립니다 😉

npm run dev 오류 내용을 모르겠습니다

안녕하세요~ 전체 코드 Github에 업로드 해주시면 디버깅 같이 진행해드리겠습니다.

npm error could not determine executable to run

supabase cli 패키지를 사용하기 위해서는 설치를 먼저 해주셔야 하는데요!아래의 두가지 방법중 하나를 택해주시면 됩니다.npm i -g supabase && supabase login로 해결하시거나npx supabase login 으로 해결하시면 됩니다.강의에서 누락이 되었는지 확인하고 보충강의 제작해서 업로드 하도록 할게요 😉

getPublicUrl로 이미지 URL 받는 방법?

Supabase의 getPublicUrl을 Next.js 14에서 사용하는 방법을 간단히 설명해드릴게요. 1. getPublicUrl 사용법Supabase Storage에 저장된 파일의 공용 URL을 생성하려면, 아래처럼 getPublicUrl을 사용하면 됩니다.export async function getPublicImageUrl(path) { const { data } = supabase .storage .from('your-bucket-name') // 버킷 이름 .getPublicUrl(path); // 파일의 경로 return data.publicUrl; }이 함수는 주어진 경로에 해당하는 파일의 공용 URL을 반환합니다. 예를 들어, images/example.png 파일의 URL을 가져올 수 있습니다. 2. Next.js에서 활용하기- 서버 컴포넌트에서 이미지 URL을 미리 생성하고 렌더링할 수 있습니다: // app/page.js import { getPublicImageUrl } from './supabase-client'; export default async function Page() { const imageUrl = await getPublicImageUrl('images/example.png'); return ( (사진) ); } - 클라이언트 컴포넌트에서 동적으로 URL을 가져와 렌더링할 수도 있습니다: import { useEffect, useState } from 'react'; import { getPublicImageUrl } from './supabase-client'; export default function ImageComponent() { const [imageUrl, setImageUrl] = useState(''); useEffect(() => { async function fetchImageUrl() { const url = await getPublicImageUrl('images/example.png'); setImageUrl(url); } fetchImageUrl(); }, []); return ( {imageUrl && (사진)} ); } 요약- getPublicUrl을 사용해 Supabase Storage에서 파일의 공용 URL을 가져올 수 있습니다.- 서버 또는 클라이언트 컴포넌트에서 이 URL을 활용해 이미지를 렌더링할 수 있습니다. 더 궁금한 점이 있으면 편하게 말씀주세요!

reactQuery와 supabase의 channel등

좋은 질문 주셨네요! React Query의 캐시 키와 Supabase의 채널명 사용에 대해 궁금해하시는 부분을 잘 짚어주셨어요. 우선, 이 둘은 각각의 라이브러리에서 중요한 역할을 하지만, 그 이름 자체는 특정 기능을 가지기보다는 주로 식별 용도로 사용됩니다.먼저 React Query의 queryKey (`['users']`)부터 설명드릴게요. 이 키는 React Query가 캐시를 관리할 때 데이터를 구분하는 데 사용됩니다. 예를 들어, ['users']라는 키를 주면, React Query는 이 키를 기준으로 서버에서 가져온 데이터를 캐시에 저장합니다. 나중에 동일한 키로 요청이 들어오면, 서버에 재요청하지 않고 캐시에서 데이터를 가져오죠. 키에 userId 같은 특정 값을 추가하면, 해당 값이 바뀔 때마다 데이터를 새로 가져오게 됩니다. 언급해주신 것처럼 queryKey는 useEffect의 의존성 배열처럼 작동하는 부분이 있어요. 결국 'users'는 데이터를 구분하기 위한 이름표 같은 역할을 합니다.Supabase의 "online_users" 채널명도 비슷한 맥락에서 이해하시면 됩니다. 이 채널명은 Supabase의 리얼타임 기능에서 이벤트를 구독할 때 사용됩니다. 예를 들어, "online_users" 채널에 구독을 걸어두면, 해당 채널에 연결된 이벤트가 발생할 때마다 이를 받아볼 수 있습니다. 당장은 저희가 한곳에서만 사용하기 때문에 이 이름이 특별한 기능을 하지는 않지만, 한 이벤트 채널을 여러 컴포넌트들이 공유할 때는 이 이름을 별도로 관리해주시는게 좋으세요! 이벤트를 구독하고 관리하기 위해 꼭 필요한 식별자 역할을 합니다.요약하자면, React Query의 queryKey나 Supabase의 채널명 모두 이름 자체에 어떤 기능이 있는 건 아니고, 각각의 데이터를 구분하고 관리하기 위한 용도로 사용되는 식별자라고 보시면 됩니다. 답변이 되셨을까요?또 궁금한 점 있으시면 언제든지 질문해 주세요! 😉