안녕하세요 선생님!대단한 질문은 아니고 의견을 여쭙고자 질문 남깁니다. useProfileData 훅에서 queryFn에 profile 조회 실패 시 createProfile을 하는 로직을 짜주셨는데요혹시 onError 콜백함수에 로직을 정의하지 않고 쿼리함수에 정의하신 이유가 따로 있을까요?개인적으론 가독성상 onError에 넣는게 조금 더 명확하지않나 싶어서 의견을 여쭤보고 싶네요!

안녕하세요 선생님.강의를 모두 수강한 후 복습을 하던 중 궁금한 점이 생겨 질문드립니다. 좋아요 기능에서 동시성 문제를 해결하기 위해 행 잠금을 사용하는 것으로 이해했습니다.이 경우, 첫 번째 유저의 좋아요 요청이 처리되는 동안 해당 행이 잠기게 되는데, 만약 동시에 많은 사용자(수백~수천 명)가 좋아요 버튼을 누르는 상황 이라면요청들이 순차적으로 대기하게 되어 응답 지연이 발생되지는 않나요??또한 이런 이유 때문에 클라이언트 단에서는 낙관적 업데이트 를 적용하는게 맞는걸까요??

안녕하세요 강의 정말 잘 듣고있습니다.현재 강의를 무한 중첩 댓글 구현하기까지 수강했습니다!테스트를 위해 여러가지 사항들을 직접 체크하고있는데 Github로 로그인한 사용자의 정보들(avatar_url, name)들은 기본적으로 사용하지 않고 랜덤한 닉네임과 기본 아바타 이미지가 나오는게 정상 동작일까요?제가 이해한 흐름은 다음과 같습니다.1. Github(OAuth) 로그인2. Supabase Authentication > Users에 사용자 생성 (profile 테이블에는 아직 생성 되지 않음)3. SessionProvider에서 useProfileData 호출export default function SessionProvider({ children }: { children: ReactNode }) { const session = useSession(); const setSession = useSetSession(); const isSessionLoaded = useIsSessionLoaded(); const { data: profile, isLoading: isProfileLoading } = useProfileData( session?.user.id, ); useEffect(() => { supabase.auth.onAuthStateChange((event, session) => { setSession(session); }); }, []); if (!isSessionLoaded) return <GlobalLoader />; if (isProfileLoading) return <GlobalLoader />; return children; }4. fetchProfile(userId) 실행export async function fetchProfile(userId: string) { const { data, error } = await supabase .from("profile") .select("*") .eq("id", userId) .single(); if (error) throw error; return data; }Supabase Table Editor > profile 에는 아무런 결과가 저장되어 있지 않기 때문에 PostgrestError: PGRST116 에러 발생 useProfileData catch 블록 실행 → createProfile 호출 랜덤한 닉네임 + avatar_url이 기본으로 저장 만약 제가 이해한 흐름이 맞다면 어떤 방법을 써야할까요?제일 먼저 드는 생각은 createProfile에 session을 매개변수로 받아서 session.user.user_metadata.full_name과 avatar_url을 insert에 넣는걸 생각했습니다.createProfileexport async function createProfile(userId: string, session?: Session) { const { data, error } = await supabase .from("profile") .insert({ id: userId, // ↓ 여기 수정 했어용 nickname: session?.user.user_metadata?.full_name || getRandomNickname(), avatar_url: session?.user.user_metadata?.avatar_url || null, }) .select() .single(); if (error) throw error; return data; } use-profile-data.tsexport function useProfileData(userId?: string) { const session = useSession(); const isMine = userId === session?.user.id; return useQuery({ queryKey: QUERY_KEYS.profile.byId(userId!), queryFn: async () => { try { const profile = await fetchProfile(userId!); return profile; } catch (error) { if (isMine && (error as PostgrestError).code === "PGRST116") { return await createProfile(userId!, session!); // 여기 session 추가 했어용 } throw error; } }, enabled: !!userId, }); } 이렇게 코드를 수정하고 profile table을 삭제한 후 다시 Github로 로그인 하면 사용자의 프로필 이미지와 이름이 받아와졌습니다.더 효율적이거나 더 좋은 방법이 있을까요? 혹은 제가 잘못 알고 있는게 있을까요?

안녕하세요, 강의 잘 듣고 있습니다!6.2강 회원가입 구현 강의 18:06경에 설명해주시는 AuthResponse 타입의 정의?가 변경된 것인지, 제 코드 에디터에는 아래와 같이 표시됩니다.  첫 번째 객체 부분 {data: T; error: null}은 이해가 가는데요, 두 번째 객체 부분은 강의상 화면과 차이가 좀 있어서, 추가로 설명해주실 수 있으면 감사하겠습니다. 

해당 강의대로 진행하면 잘 안됩니다ㅠㅠ일단 Aurora and RDS로 진행했습니다.지금 날짜로 AWS에 Amazon RDS가 없더라구요그래서 문제가 있는지는 잘모르겠습니다.1. 현재 package.json 명령어에서 dist/main이 아닌 dist/main.js로 해야 합니다.이거 왜그런지 모르겠네요보안 그룹을 설정해줘야 합니다.사용자 지정 TCP 포트 3000 으로 열어줘야 합니다.3. RDS 보안그룹 문제어떤 분이 사용자 지정 TCP 해서 포트 3030을 추가해서 해결했다고 하는데 저는 잘모르겠습니다.아래 에러가 나타나는 경우1|main | [Nest] 6957 - 12/18/2025, 2:25:35 PM ERROR [TypeOrmModule] Unable to connect to the database. Retrying (7)... 1|main | error: no pg_hba.conf entry for host "172.31.32.15", user "mymap", database "mymap", no encryptionapp.module.ts에 아래 코드 추가TypeOrmModule.forRoot({ type:'postgres', host: process.env.DB_HOST, port:5432, username: process.env.DB_USER, password: process.env.DB_PASSWORD, database: process.env.DB_NAME, ssl: { rejectUnauthorized:false, }, // 추가 })왜 추가해야하는지는 아직 자세히 모릅니다.그러면 아래 에러가 뜹니다.error: database "mymap" does not exist그럼 아래 과정 수행해야 합니다.6. 이렇게 하면 아마도 잘 될 겁니다..ㅠ만약에 pgAdmin에 연결해서 보고 싶으면 구글링해서 하시면 되는데 중요한 건 보안 그룹에서 인바운드 규칙 추가하는 것(PostgreSQL/TCP/5432/0.0.0.0/0)과RDS 퍼블릭 엑세스가 "예"로 되어있어야 하는 것만 알아주시면 됩니다.사실 여쭤보고 싶은 것 없지만 혹시나 보신다면 위 과정에서 문제될 건 없는지 알려주시면 감사하겠습니다!

안녕하세요!타입 스크립트부터 현재 강의까지 너무 유용하게 잘 듣고 있는 수강생입니다! 9-1 강의를 수강하다가 문득 궁금함이 생겨서 질문 남겨 봅니다. A 유저와 B 유저가 있다고 가정했을 때A 유저가 프로필 상세 화면을 보고 있는 상태에서 B 유저가 새로운 포스트를 올렸는데,이후에 A 유저가 메인 리스트 화면으로 이동하면 B 유저가 올린 새로운 포스트가 로드되지 않는 것으로 보입니다! (새로 고침하면 당연히 정상적으로 보이고요) 제가 코드 작성을 하면서 놓친 부분이 있어 이러한 현상이 발생하는 것인지,아니면 이후 강의에서 해당 부분이 수정되는 것인지 여쭤보고 싶습니다. 늘 좋은 강의 감사합니다! 🙂 좋은 하루 보내세요~!

✅ 모든 질문들은 슬랙 채널에서 답변드리고 있습니다.💡 ”로펀의 인프런 상담소” 슬랙 채널 가입하기 💡평일중에는 퇴근 이후(저녁 7시)에 답변을 받아보실 수 있고, 주말중에는 상시 답변드리고 있습니다. 투두 리스트 ui 작업 중에 material-tailwind가 리액트와 호환 문제가 있는지 리액트 19에서 18로 낮춰도 인풋과 아이콘 버튼 컴포넌트가 제대로 표시되지 않아요 ㅜㅜ

(10.3) 댓글 조회 기능 구현하기 8:50  CommentItem에서 props를 작성하기전 <CommentItem key={comment.id} {...comment} />에 {...commnet}를 넣어도 TypeScript에서 에러가 나지 않던데 이유가 궁금합니다.  // comment-list.tsx {comments.map((comment) => ( <CommentItem key={comment.id} {...comment} /> ))} // comment-item.tsx export default function CommentItem() { // props를 안 받음 return <div>하드코딩된 내용</div> }

ellipsis-vertical 클릭시강의와 같이 실제 아이폰 actionsheet 처럼 보이지 않고 다른 style이 입혀진듯하게 보이고있습니다.에러코드는 없습니다. 노드 : 20.19.6시뮬레이터 : iOS 26.2ReactNative : 0.81.5  작업중인 시뮬레이터 화면  강의 시뮬레이터 화면  import { colors } from "@/constants"; import useAuth from "@/hooks/queries/useAuth"; import type { Post } from "@/types"; import { useActionSheet } from "@expo/react-native-action-sheet"; import { Ionicons, MaterialCommunityIcons, Octicons } from "@expo/vector-icons"; import React from "react"; import { Pressable, StyleSheet, Text, View } from "react-native"; import Profile from "./Profile"; interface FeedItemProps { post: Post; } function FeedItem({ post }: FeedItemProps) { const { auth } = useAuth(); const likeUsers = post.likes?.map((like) => Number(like.userId)); const isLiked = likeUsers?.includes(Number(auth.id)); const { showActionSheetWithOptions } = useActionSheet(); const handlePressOption = () => { const options = ["삭제", "수정", "취소"]; showActionSheetWithOptions({ options }, (selectedIndex?: number) => { console.log("selectedIndex", selectedIndex); switch (selectedIndex) { case 0: //삭제 break; case 1: //수정 break; case 2: break; default: break; } }); }; return ( <View style={styles.container}> <View style={styles.contentContainer}> <Profile imageUri={post.author.imageUri} nickname={post.author.nickname} createdAt={post.createdAt} onPress={() => {}} option={ auth.id === post.author.id && ( <Ionicons name="ellipsis-vertical" size={24} color={colors.BLACK} onPress={handlePressOption} /> ) } /> <Text style={styles.title}>{post.title}</Text> {/* numberOfLines 게시글 내용 3줄까지만 보이게 */} <Text numberOfLines={3} style={styles.description}> {post.description} </Text> </View> <View style={styles.menuContainer}> <Pressable style={styles.menu}> <Octicons name={isLiked ? "heart-fill" : "heart"} size={16} color={isLiked ? colors.ORANGE_600 : colors.BLACK} /> <Text style={isLiked ? styles.activeMenuText : styles.menuText}> {post.likes.length || "좋아요"} </Text> </Pressable> <Pressable style={styles.menu}> <MaterialCommunityIcons name="comment-processing-outline" size={16} color={colors.BLACK} /> <Text style={styles.menuText}>{post.commentCount || "댓글"}</Text> </Pressable> <Pressable style={styles.menu}> <Ionicons name="eye-outline" size={16} color={colors.BLACK} /> <Text style={styles.menuText}>{post.viewCount}</Text> </Pressable> </View> </View> ); } const styles = StyleSheet.create({ container: { backgroundColor: colors.WHITE, }, contentContainer: { padding: 16, }, menuContainer: { flexDirection: "row", alignItems: "center", justifyContent: "space-around", borderTopColor: colors.GRAY_300, borderTopWidth: StyleSheet.hairlineWidth, }, title: { fontSize: 18, color: colors.BLACK, fontWeight: "600", marginVertical: 8, }, description: { fontSize: 16, color: colors.BLACK, marginBottom: 14, }, menu: { flexDirection: "row", alignItems: "center", justifyContent: "center", paddingVertical: 16, width: "33%", gap: 4, }, menuText: { fontSize: 14, color: colors.GRAY_700, }, activeMenuText: { fontWeight: "500", color: colors.ORANGE_600, }, }); export default FeedItem;    import queryClient from "@/api/queryClient"; import useAuth from "@/hooks/queries/useAuth"; import { ActionSheetProvider } from "@expo/react-native-action-sheet"; import { QueryClientProvider } from "@tanstack/react-query"; import { Stack } from "expo-router"; import { useEffect } from "react"; import "react-native-reanimated"; import Toast from "react-native-toast-message"; export const unstable_settings = { anchor: "(tabs)", }; export default function RootLayout() { return ( <ActionSheetProvider> <QueryClientProvider client={queryClient}> <RootNavigator /> <Toast /> </QueryClientProvider> </ActionSheetProvider> ); } function RootNavigator() { const { auth } = useAuth(); useEffect(() => { auth.id && Toast.show({ type: "success", text1: `${auth.nickname ?? "회원"}님 환영합니다!`, }); }, [auth.id]); return ( <Stack> <Stack.Screen name="(tabs)" options={{ headerShown: false }} /> <Stack.Screen name="auth" options={{ headerShown: false }} /> <Stack.Screen name="post" options={{ headerShown: false }} /> <Stack.Screen name="modal" options={{ presentation: "modal", title: "Modal" }} /> </Stack> ); }

안녕하세요, 이정환 강사님.강의를 모두 수강하고 혼자 프로젝트를 진행하고 있는 수강생입니다. 모달 store를 구현하던 중 의문점이 생겨 질문합니다.만약 postEditorModal에 더불어 다른 모달 데이터를 관리하는 스토어(예를 들어 projectEditorModal)을 만들고 싶으면, store 파일을 두 개로 나누어 만드는 것이 맞을까요? 처음에는 똑같은 state와 actions 값을 담는 store니 하나의 파일로 관리해서 만들어도 되지 않을까 생각했는데, devtools 이름을 나누어 관리하는 것이 버그 관리나 유지 보수 관점에서 더 유리할 것 같아서요. 감사합니다.

안녕하세요 선생님supabase의 회원가입 기능을 사용하여 가입한 경우 자동으로 로컬스토리지에 토큰정보들이 저장이 되는 부분에서 이 부분들이 보안적으로 문제가 되지 않나요?? supabase를 사용하는 실무에서 이러한 문제를 어떤식으로 보통 해결하나요?

like테이블을 생성하고자 작성을 한 후 Add foregin key relation 을 클릭하여 public schema를 선택한 이후에도 하위 테이블 목록이 보이지 않습니다..ㅠㅠ딱히 다른 설정을 만진것이 없이 강의를 따라 쭉 해보고 있는데 무언가가 바뀐건가요?강의 내에서는 post테이블이면 public.post로 나오지만 지금 현재는 post로만 보이는 상태인데 어떤 부분이 바뀌었나? 혹은 설정을 못한 부분이 있나 잘 모르겠습니다.. 

해당강의의 교안 내용과 강의를 보며 이해한 부분을 블로그에 정리해서 글을 써도 되는지 궁금합니다!

이정환 쌤 강의는 무조건 다 듣는 프론트 개발자 학생입니다. 근데, 궁금한점이 있어 질문드려요. 리액트 강의부터 하시고, 그다음 Next.js 강의 하시고, 다시 리액트로 이번에 강의를 하시는데, 저는 이정환 쌤 Next.js 강의를 듣고 난 후에는 리액트로는 개발을 안하고 Next.js로만 개발했거든요. 다시 리액트로 돌아간 이유에 대해 궁금해서 질문드립니다. Next.js 말고 리액트를 선택한 이유가 있을까요? Next.js에 어떤 이슈가 있는걸까요?

❗질문 작성시 꼭 참고해주세요에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다.질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github을 첨부해주세요.개발중인 OS, ReactNative, Node 버전 등의 개발환경을 알려주셔야합니다.에러메세지는 일부분이 아닌 전체 상황을 올려주세요. 일부만 보여주시면 답변이 어렵습니다. (에러 일부만 자르거나 일부만 복사하지말아주세요)  8-8 듣고 있는데 다크모드에서 전체적으로 코드 변경을 하길래 참고하려고 깃에서 lecture8-8을 열었는데 약간 코드 구성이 다른거 같아요.

안녕하세요!useProfileData 훅에서 프로필 데이터를 조회하는 로직이 궁금해서 질문드립니다. useProfileData에서 PGRST116 에러 코드를 확인해서 프로필을 생성하는 로직이 있는데요,fetchProfile에서 .single() 대신 .maybeSingle()을 사용하고,null이면 createProfile을 호출하는 방식이 더 직관적인 것 같은데에러 코드를 확인하는 방식으로 구현하신 특별한 이유가 있을까요?실무에서는 어떤 방식을 선호하시는지도 궁금합니다!

안녕하세요 Tailwind CSS IntelliSense 작동이 안되서 그러는데 확인해 본 결과로 index.css에서@import "tw-animate-css"; 이거와@layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; }}이 코드가 들어가면 작동을 하지 않습니다 혹시 이게 왜 그럴까요...?

안녕하세요 선생님! 낙관적 업데이트(2) 강의 마지막에 onSettled를 통해 update가 종료된 후 기존 캐시 무효화 후 db에서 다시 받아와서 갱신시켜주는 로직을 작성한걸로 알고있는데 이때 onMutate 내부에서 setQueryData를 통해 별도의 업데이트된 정보를 캐시에 세팅시켜주는 로직은 필요가 없어지게 되는건가용? export function useUpdateTodoMutation() { const queryClient = useQueryClient(); return useMutation({ mutationFn: updateTodo, onMutate: async (updatedTodo) => { await queryClient.cancelQueries({ queryKey: QUERY_KEY.todo.list, }); const prevTodos = queryClient.getQueryData<Todo[]>(QUERY_KEY.todo.list); /* 이부분 */ queryClient.setQueryData<Todo[]>(QUERY_KEY.todo.list, (prevTodo) => { if (!prevTodo) return []; return prevTodo.map((item) => item.id === updatedTodo.id ? { ...item, ...updatedTodo } : item, ); }); /* //이부분 */ return { prevTodos, }; }, onError: (error, variable, context) => { if (context && context.prevTodos) { queryClient.setQueryData<Todo[]>( QUERY_KEY.todo.list, context.prevTodos, ); } }, onSettled: () => { queryClient.invalidateQueries({ queryKey: QUERY_KEY.todo.list, }); }, }); }

queryClient.setQueryData를 사용할 때, 단순히 새 값을 바로 전달하는 경우와 업데이트 함수를 사용하는 경우가 있던데, 각각 언제 사용해야 하는지 명확히 구분이 잘 안 돼요. 어떤 기준으로 사용하면 되는지 설명해주실 수 있을까요?..

JWT가 이론적으로는 DB에 액세스하는 과정없이 인증이 가능하다고는 하지만,, jwt.io같은데서 payload의 조회를 쉽게 할 수 있기도 하다보니 웬만한 개인정보를 넣는 것은 지양하는 걸로 알고 있습니다. 실무에서는 사실상 payload에 userId정도만 넣어두고, 서버에서 이 JWT를 받아 디코딩하여 받은 userId로 DB에 액세스하여 유저정보를 가져와서 유효한 유저인지 파악한 다음 클라이언트에 응답하는 것이 일반적인 케이스가 아닌가.. 그러면 세션과 큰차이가 사실상 없는 것이 아닌가 궁금하여 질문드립니다!