173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
왜 mutationfn은 비동기 함수를 할당해주고 async () => { return createTodo(todoInput)} 왜 queryfn은 그냥 일반 함수를 할당한건가요? () => getTodo(), 차이가 무엇인지 궁금합니다.
미해결
Next + React Query로 SNS 서비스 만들기
export async function getSearchResult({ queryKey }) { const [_1, _2, searchParams] = queryKey; const res = await fetch(api url, next: { tags: ["posts", "search", searchParams] }, cache: 'no-store' ) } next tags를 사용하는이유가 revalidate를 하기 위해서인데 fetch 옵션을 'no-store'로 주면 캐시가 되지 않는걸로 알고있어서 tags 사용안해도 되지않나요??
미해결
Next + React Query로 SNS 서비스 만들기
제로초님의 next-auth 작업하시는걸 보고 프론트에서 next-auth로 로그인하는것을 구현을 하긴 했는데 로그인(인가)을 하는 주체가 프론트다 보니 기존에 배웠을때는 nest 또는 node에서 passport를 이용해서 작업을 했엇는데 이제는 passport로 인가 하는 작업이 필요가 없어진건지 궁금합니니다. 필요가 없다라고 하면 백엔드서버에서는 이사람이 로그인을 했는지 안했는지를 알아야 할텐데 그거는 어떻게 구현을 해야할지가 막막해서 질문드립니다 ㅠㅠ
해결됨
[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
https://github.com/supabase/storage/issues/207 모든 파일을 제거했을 때 갑자기 .emptyFolderPlaceholder가 파일 리스트에 나오는 문제입니다. 슬랙에 올라온 질문인데 같은 이슈를 겪는 분들이 종종 계실 것 같아 인프런 커뮤니티에도 해결책을 공유드립니다.
해결됨
[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
Slack에 올라온 질문이 좋아서 인프런 커뮤니티에도 공유드립니다.
미해결
Next + React Query로 SNS 서비스 만들기
강좌와 git을 보면서 했는데, 왜 아래에 회색영역이 생기는 건지 잘 모르겠습니다.ㅜㅜ 세로로 생기는 스크롤도 흰색영역에만 생깁니다. 그런데 로그아웃버튼은 회색영역에 생기네요 이리저리 해봐도 잘 모르겠어서 도움을 요청합니다
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세여 제로초님 UserInfo에서 팔로우버튼을 누르면 팔로잉으로 변해야되고 다시 한번 누르면 팔로우로 변해야되는데 버튼을 누르고 새로고침을 해야지만 반영이됩니다... 팔로우 추천에서는 바로 반영이 되는데.... 깃허브 ch3-2 UserInfo에 있는 코드로 가져다 써도 안되네여 ㅠㅠ "use client"; import style from "@/app/(afterLogin)/[username]/profile.module.css"; import BackButton from "@/app/(afterLogin)/_component/BackButton"; import { useQuery, useQueryClient, useMutation } from "@tanstack/react-query"; import { User } from "@/model/User"; import { getUser } from "@/app/(afterLogin)/[username]/_lib/getUser"; import cx from "classnames"; import { MouseEventHandler } from "react"; import { Session } from "@auth/core/types"; type Props = { username: string; session: Session | null; }; export default function UserInfo({ username, session }: Props) { const { data: user, error } = useQuery< User, Object, User, [_1: string, _2: string] >({ queryKey: ["users", username], queryFn: getUser, staleTime: 60 * 1000, // fresh -> stale, 5분이라는 기준 gcTime: 300 * 1000, }); const queryClient = useQueryClient(); const follow = useMutation({ mutationFn: (userId: string) => { console.log("follow", userId); return fetch( `${process.env.NEXT_PUBLIC_BASE_URL}/api/users/${userId}/follow`, { credentials: "include", method: "post", } ); }, onMutate(userId: string) { const value: User[] | undefined = queryClient.getQueryData([ "users", "followRecommends", ]); if (value) { const index = value.findIndex((v) => v.id === userId); if (index > -1) { console.log(value, userId, index); const shallow = [...value]; shallow[index] = { ...shallow[index], Followers: [{ id: session?.user?.email as string }], _count: { ...shallow[index]._count, Followers: shallow[index]._count?.Followers + 1, }, }; queryClient.setQueryData(["users", "followRecommends"], shallow); } } const value2: User | undefined = queryClient.getQueryData([ "users", userId, ]); if (value2) { const shallow: User = { ...value2, Followers: [{ id: session?.user?.email as string }], _count: { ...value2._count, Followers: value2._count?.Followers + 1, }, }; queryClient.setQueryData(["users", userId], shallow); } }, onError(error, userId: string) { console.error(error); const value: User[] | undefined = queryClient.getQueryData([ "users", "followRecommends", ]); if (value) { const index = value.findIndex((v) => v.id === userId); console.log(value, userId, index); if (index > -1) { const shallow = [...value]; shallow[index] = { ...shallow[index], Followers: shallow[index].Followers.filter( (v) => v.id !== session?.user?.email ), _count: { ...shallow[index]._count, Followers: shallow[index]._count?.Followers - 1, }, }; queryClient.setQueryData(["users", "followRecommends"], shallow); } const value2: User | undefined = queryClient.getQueryData([ "users", userId, ]); if (value2) { const shallow = { ...value2, Followers: value2.Followers.filter( (v) => v.id !== session?.user?.email ), _count: { ...value2._count, Followers: value2._count?.Followers - 1, }, }; queryClient.setQueryData(["users", userId], shallow); } } }, }); const unfollow = useMutation({ mutationFn: (userId: string) => { console.log("unfollow", userId); return fetch( `${process.env.NEXT_PUBLIC_BASE_URL}/api/users/${userId}/follow`, { credentials: "include", method: "delete", } ); }, onMutate(userId: string) { const value: User[] | undefined = queryClient.getQueryData([ "users", "followRecommends", ]); if (value) { const index = value.findIndex((v) => v.id === userId); console.log(value, userId, index); if (index > -1) { const shallow = [...value]; shallow[index] = { ...shallow[index], Followers: shallow[index].Followers.filter( (v) => v.id !== session?.user?.email ), _count: { ...shallow[index]._count, Followers: shallow[index]._count?.Followers - 1, }, }; queryClient.setQueryData(["users", "followRecommends"], shallow); } const value2: User | undefined = queryClient.getQueryData([ "users", userId, ]); if (value2) { const shallow = { ...value2, Followers: value2.Followers.filter( (v) => v.id !== session?.user?.email ), _count: { ...value2._count, Followers: value2._count?.Followers - 1, }, }; queryClient.setQueryData(["users", userId], shallow); } } }, onError(error, userId: string) { console.error(error); const value: User[] | undefined = queryClient.getQueryData([ "users", "followRecommends", ]); if (value) { const index = value.findIndex((v) => v.id === userId); console.log(value, userId, index); if (index > -1) { const shallow = [...value]; shallow[index] = { ...shallow[index], Followers: [{ id: session?.user?.email as string }], _count: { ...shallow[index]._count, Followers: shallow[index]._count?.Followers + 1, }, }; queryClient.setQueryData(["users", "followRecommends"], shallow); } } const value2: User | undefined = queryClient.getQueryData([ "users", userId, ]); if (value2) { const shallow = { ...value2, Followers: [{ userId: session?.user?.email as string }], _count: { ...value2._count, Followers: value2._count?.Followers + 1, }, }; queryClient.setQueryData(["users", userId], shallow); } }, }); console.log("error"); console.dir(error); if (error) { return ( <> <div className={style.header}> <BackButton /> <h3 className={style.headerTitle}>프로필</h3> </div> <div className={style.userZone}> <div className={style.userImage}></div> <div className={style.userName}> <div>@{username}</div> </div> </div> <div style={{ height: 100, alignItems: "center", fontSize: 31, fontWeight: "bold", justifyContent: "center", display: "flex", }} > 계정이 존재하지 않음 </div> </> ); } if (!user) { return null; } const followed = user.Followers?.find((v) => v.id === session?.user?.email); console.log(session?.user?.email, followed); const onFollow: MouseEventHandler<HTMLButtonElement> = (e) => { e.stopPropagation(); e.preventDefault(); console.log("follow", followed, user.id); if (followed) { unfollow.mutate(user.id); } else { follow.mutate(user.id); } }; return ( <> <div className={style.header}> <BackButton /> <h3 className={style.headerTitle}>{user.nickname}</h3> </div> <div className={style.userZone}> <div className={style.userRow}> <div className={style.userImage}> <img src={user.image} alt={user.id} /> </div> <div className={style.userName}> <div>{user.nickname}</div> <div>@{user.id}</div> </div> {user.id !== session?.user?.email && ( <button onClick={onFollow} className={cx(style.followButton, followed && style.followed)} > {followed ? "팔로잉" : "팔로우"} </button> )} </div> <div className={style.userFollower}> <div>{user._count.Followers} 팔로워</div> <div>{user._count.Followings} 팔로우 중</div> </div> </div> </> ); } 제가 보기에는 useQuery가 제대로 작동안하는거같은데...제로초님 의견이 궁금합니다 팔로우버튼 안눌렀을때 팔로우버튼 눌렀을때
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요 선생님. 요즘 기업 트렌드에 맞게 tailwind로 진행해보려고 하는데 강의 css 참고하면서 저 만의 방법으로 tailwind로 수정해서 진행해도 상관없겠죠! 혹시 css로 진행한 이유가 있을까요? 요즘 기업에선 tailwind를 더 추구하나요? 저는 tailwind가 더 익숙하더라구요.. 유튜브에서 우연히 제로초 개발자님을 뵙게되어, 제로초의 JS교재와 함께 큰 도움이 되어서 인프런 강의까지 듣게됐네요. 감사합니다!
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요 개발자님. 백엔드를 만약 구축한다고했을때 구글링해보면 보통 prisma랑 mongoDB를 같이 쓰더라구요 저는 이때까지 mongoDB만 써서 백엔드를 구축했는데 풀스택으로 만든다고 하면 prisma, mongoDB를 같이 쓰는게 좋나요? 둘 사이에 쓰임에 대해서 어떤 다른 목적이 있나요? 아마 목적에 따라 사용하는게 다를 것 같긴한데.. 개발자님께서는 어떻게 생각하시나요?
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요, next-auth 5 베타를 사용하다가 "r is not a function"이라는 에러 메시지 때문에 next-auth 버전을 "^4.24.5"로 낮추었더니 해결되었습니다. 그런데 vercel에 배포하려하니 자꾸 아래의 사진과 같은 에러 때문에 어려움을 겪고 있습니다...ㅜ 해당 에러 구글에 찾아봐도 해결방법을 모르겠던데 도와주실 수 있으실까요ㅠㅠㅠ
미해결
Next + React Query로 SNS 서비스 만들기
아래와 같은 에러가 발생하는 이유가 제가 처음부터 파일구조를 강사님과 다르게 해서 그런가 싶어서 이미 코드는 짜놓은 상태이지만 src폴더를 만들고 그 안에 app 폴더를 넣어 구조를 똑같이 하니 레이아웃이 깨져서(원인은 아직 못 찾았습니다만 단순 import 위치 문제는 아님은 확실합니다.) 다시 src가 없는 상태로 회귀했습니다. auth.ts 파일을 app 폴더와 같은 위치에 두라고 강의에서 말씀하셔서 그대로 두기도 해보았고 혹시나해서 app 폴더 안에 위치시켰으나 handler를 못찾는 에러는 동일했습니다. 혹시 create next 이후에 다시 src를 만들어서 넣는것이 불가능한가요? 불가능하다면 auth.ts와 middleware.ts의 위치를 현재 제 파일 구조상태에서 어느 위치에 두는 것이 맞나요?
미해결
Next + React Query로 SNS 서비스 만들기
/home 페이지에서 prefetch를 해주지 않고 PostRecommends & followingPosts에서 useQuery로만 데이터를 불러와도 상관없나요 ?? 1번이 맞다고 하면 prefetch를 통해서 dehydrated를 해주는 이유가 궁금합니다. 아니면 서버 컴포넌트에서 react-query를 이렇게도 사용할 수 있다를 보여주신건지 궁금합니다:)
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
deviceHeight > 700 ? .. : .. 강사님께서 700을 분기점으로 잡으셨는데요. 혹시 700인 이유가 있는걸까요? 아니면 700이라는 수치는 의미가 없고, 분기가 가능하다는 걸 가르쳐주시려는 의도인건가요?
미해결
Next + React Query로 SNS 서비스 만들기
뭔가요?
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
프로젝트를 실행했는데 강의와 달리 App.tsx 파일이 없습니다. 다운그레이드를 해서 실행해야 할까요? 만약 그렇다면 버전을 알려주시면 감사하겠습니다.
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요 강의 수강 후에 자체 프로젝트를 진행하고 있는데 소셜 로그인 처리 중 궁금한 점이 있어 질문 드립니다. 기존에는 Google, Naver, Kakao, Facebook 등 5가지 소셜 로그인을 각각 OAuth 리디렉션 방식으로 구현했으나, 이번에는 NextAuth를 활용하여 간편하게 통합적으로 구현하려고 합니다. 소셜 로그인은 authorization code 발급용으로만 사용하고 실제 access, refresh token 발급은 자체 서버에서 처리를 하려고 합니다. 따라서 인가 과정만 next auth를 활용하고 callbacks 내부에서 인가 코드를 전달하여 access token 발급 과정을 진행하려 했습니다. /api/auth/[...nextauth]/route.ts const authOptions = { // Configure one or more authentication providers providers: [ GoogleProvider({ clientId: process.env.GOOGLE_ID ?? "", clientSecret: process.env.GOOGLE_SECRET ?? "", }), ], callbacks: { async signIn({ account, profile }: any) { if (account.provider === "google") { const response = await fetch( `${process.env.GATEWAY_SERVER_URL}/auth/v1`, { method: "POST", headers: { "Content-Type": "application/json", devicetype: "1", }, body: JSON.stringify({ sns_type: "GOOGLE", key: 인가코드, }), } ); } return true; // Do different verification for other providers that don't have `email_verified` }, }, }; const handler = NextAuth(authOptions); export { handler as GET, handler as POST }; 하지만 알아본 결과 NextAuth의 callbacks에서는 access token이 발급되고 authorization code는 받을 수 없게 되어있는 것 같은데 authorization code 발급용으로만 사용하기에는 next auth를 사용하는것이 적합하지 않은 것인지 궁금합니다. 또한 authorization code를 받을 수 있는 방법이 있다면 알려주시면 감사하겠습니다!
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
안녕하세요 강사님. 리액트를 배울때, 컴포넌트 내에서 object를 초기화하면 성능 문제가 생길 수 있다고 배웠습니다. 근데, [2-4] 네비게이션 타이핑 강의(1:29)를 보면, function AuthStackNavigator() { const Stack = createStackNavigator(); return (~~) } 와 같이, 컴포넌트 내부에 Stack이 선언되어 있습니다. 이러면 화면이 재랜더링 될 때 마다, Stack이 선언되어 성능문제가 생기는건 아닌가요?
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
❗ 질문 작성시 꼭 참고해주세요 최대한 상세히 현재 문제(또는 에러)와 코드(또는 github) 를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다. 맥/윈도우, 안드로이드/iOS, 버전 등의 개발환경 도 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요! 로그아웃 클릭 후 로그인 및 회원가입 버튼누르면 아래처럼 로그아웃안된것처럼 나오며 아래처럼 Warning로그가나오는데 혹시 이게문제인가요?? 구글찾아봐도 해결이안되서 게시판에 글 올립니다 ㅠㅠ
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
"[1-2] 맥-IOS 환경 설정"을 보고 있습니다. 저는 node를 설치하지 않고, nvm만 설치해서 사용하고 있는데요. 강사님께서는 brew install node 이후에 nvm을 설치하시네요. 저는 이렇게 하면 글로벌 node가 있고, nvm도 있는거라 혹시 꼬일까봐 node 설치 없이 nvm만 설치했는데요. 강사님 의견도 궁금합니다.
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
서버랑 피그마 파일도 직접 제작하신건가요? 강사님 정말 대단하시네요. 강사님 처럼 되려면 어떻게 해야 하나요? (어떻게 셋 다 잘하나요?)
