173만명의 커뮤니티!! 함께 토론해봐요.
미해결
React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
매번 강의를 보면서 따라 하는데 매번 같은 강의를 복습을 해도..흐음.. css 파일 아무리 드려다 봐도... 정렬이 conter로 가질 않고 있습니다 교안을 보고 학습을 하는데... 채크 사항 답변 부탁드립니다.
미해결
한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
개별 캐시 데이터는 disabled 상태라 캐시를 무효화 해봤자 데이터를 다시 불러오지 않는다고 하시면서 use-upate-todo-mutation.ts 파일에서 onSettled 이벤트 핸들러를 삭제하셨습니다. 그런데 이 부분이 이해가 잘 가지 않습니다. QUERY_KEYS.todo.list를 무효화 하면 todo 목록을 가지고 오면서 개별 캐시 데이터도 todos.forEach((todo) => { queryClient.setQueryData<Todo>(QUERY_KEYS.todo.detail(todo.id), todo); }); 이렇게 다시 세팅하는거 아닌가요?
미해결
React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
vite 명령어로 프로젝트 생성 끝 (확장 프로그램 미설치) -- App.jsx -- 위 화면 같이 붉은 라인이 생기는 이유가 무었인가요? (참고로 vscode 자동생성 기능을 off 로 설정해서 사용중) 갑자기 위와 같은 화면이 나와 전에 생성한 프로젝트를 열어 보왔는데요 멀쩡히 (붉은 색 라인 없음) 잘 나오던 파일이 위와 같은 증상이 똑같이 나오고 있습니다. 코파일럿, 구글링이 알려준 데로 처리 했는데 같은 증상이 나오고 있습니다. 원인이 무엇인지 질문드립니다. (아~ "npm run dev" : 정상 동작합니다.) Plz.... 프로젝트 생성시 TypeSCript로 생성하지 않고 일반 jsscript로 설정했습니다. ts파일 머시지 어쩌구 하는데.. 에공.. <div> 마우스 오버시 위 메지내 내용 화면> ※ vscode 에서 자동 생성을 막으려고 제가 무슨 짓을 했는지... (머 이것 저것 ctrl + shift + p로 ..내용을 찾아 뭔짓을 했는지... (json 파일) 그때 부터인듯 싶습니다. ※ vscode 재설치 : 같은 증상 질문 내용이 vscode에 관한 내용인듯 한데 소스 내용이 아닌 질문이라..죄송합니다. !!! 아무래도 vscode typescript 버전인듯 싶습니다. 근데 전 ctrl + , 를 눌러서 typescript 를 눌러서 검색해 보면 아 놔~~ 구글링에서 설명한 화면이랑 다르네요.. 하~~ 오전 부터 이게 왠 ... 우쒸~~
미해결
맛집 지도앱 만들기 (React Native & NestJS)
서랍 네비게이션을 열 때마다 뒤에 MapView가 마운트 언마운트 되는 문제 아래 링크 영상처럼 서랍 네비게이션을 열 때마다 뒤에 MapView가 언마운트 마운트가 되면서 성능 관련 문제가 생기는 것 같습니다. 이게 애뮬레이터 문제인지 제 컴퓨터 문제인지, 강의에서는 이런 문제가 안보이는데.. 해당 문제 해결할 방법이 혹시 있을까요? 네비게이션을 열 때마다 렉이 걸려서 자꾸 애플리케이션이 다운됩니다 ㅠㅠ 방법을 찾아보고 메모이제이션도 해보고, Drawer 옵션도 사용해봤는데 무용지물이네요 ㅠ https://drive.google.com/file/d/1tM8iR9QgukKVd_I5zfk6GhbKneLE1DkZ/view?usp=drive_link
미해결
한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
선생님, 안녕하세요. 강의 잘 듣고 있습니다 🙂 프로필 수정 기능구현하기 - 기능 강좌에서 useEffect(() => { if (profile && isOpen) { setNickname(profile.nickname); setBio(profile.bio); setAvatarImage(null); } }, [profile, isOpen]); setAvatarImage(null); setAvatarImage의 인수로 null 값으로 설정한 이유를 강의에서 말씀 주셨는데 설명을 들었는데도 아직 잘 이해가 안 돼서요 ㅠㅠ 해당 부분에 대해 좀 더 부연설명 해주실 수 있나요? 감사합니다. 새해 복 많이 받으세요!
해결됨
한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
TodoItem 에서 todo값을 props로 넘겨줄때 왜 {...todo} 로 사용하나요? {todo} 는 안되는건가요?
해결됨
한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
map 함수 안에서 자식 컴포넌트가 순회하는 코드가 있다고 할 때, 그 자식 컴포넌트 안에서 훅(ex useEditPost/useDeletePost)을 호출하는 것이 좋을까요? 아니면 부모에서 훅을 한번 호출한 뒤 자식 컴포넌트에 prop으로 내려주는 것이 좋을까요? 전자는 자식마다 호출되어 할당될 것 같아서 메모리 관리에 단점이 있을 것 같고 (추측입니다), 후자는 (훅의 함수를 받아야하는 대상 컴포넌트가 자식 내부에 더 깊은 뎁스에 있다고 할 때) Prop Drilling의 단점이 있을 것 같은데요 선생님은 어떻게 생각하시나요?
미해결
React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
안녕하세요, 평소에 짐코딩님 강의 잘 듣고 있습니다. setForm에서 오브젝트로 title만 업데이트 해주더라도 기존의 description 값은 어떻게 그대로 유지가 되는 걸까요?
미해결
한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
안녕하세요 선생님 선생님 리액트 기초 강의를 들었는데 제 기억에서는 그 리액트 파일명을 대문자로 써야한다? 이렇게 들었던 거 같은데 (아니면 죄송) 왜 여기에서는 파일명을 소문자로 쓸까요? 그리고 파일명하고 그 내보내는 함수를 다르게 쓰는 이유가 있나요? 그리고 왜 화살표함수로 안만들고 function으로 할까요? 그리고 export를 아래에 안쓰는 이유가 있을까요? 수업시간에 설명했는데 제가 놓친거면 죄송합니다 ㅠㅠ
해결됨
한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
안녕하세요. 먼저 강의 정말 잘 듣고 있습니다. supabase를 어떤 식으로 프로젝트에 적용할 수 있을 지 배울 수 있어 유익했습니다. 섹션 6강에 궁금한 점이 생겨서 질문 드립니다. 강의 내용에서 조금 벗어났지만, supabase에서 회원 탈퇴하기가 궁금했습니다. auth.ts에 await supabase.auth.admin. deleteUser 를 추가하고 profile 테이블의 행을 삭제하면 될까요? admin를 호출해도 되나 싶어서 여쭤보고 싶었습니다. 추후 강의에 계정 삭제하기도 포함해주시면 정말 좋을 거 같습니다! 감사합니다.
해결됨
한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
안녕하세요 선생님! 대단한 질문은 아니고 의견을 여쭙고자 질문 남깁니다. useProfileData 훅에서 queryFn에 profile 조회 실패 시 createProfile을 하는 로직을 짜주셨는데요 혹시 onError 콜백함수에 로직을 정의하지 않고 쿼리함수에 정의하신 이유가 따로 있을까요? 개인적으론 가독성상 onError에 넣는게 조금 더 명확하지않나 싶어서 의견을 여쭤보고 싶네요!
해결됨
한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
안녕하세요 선생님. 강의를 모두 수강한 후 복습을 하던 중 궁금한 점이 생겨 질문드립니다. 좋아요 기능에서 동시성 문제를 해결하기 위해 행 잠금 을 사용하는 것으로 이해했습니다. 이 경우, 첫 번째 유저의 좋아요 요청이 처리되는 동안 해당 행이 잠기게 되는데, 만약 동시에 많은 사용자(수백~수천 명)가 좋아요 버튼을 누르는 상황 이라면 요청들이 순차적으로 대기하게 되어 응답 지연이 발생되지는 않나요?? 또한 이런 이유 때문에 클라이언트 단에서는 낙관적 업데이트 를 적용하는게 맞는걸까요??
해결됨
한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
안녕하세요 강의 정말 잘 듣고있습니다. 현재 강의를 무한 중첩 댓글 구현하기까지 수강했습니다! 테스트를 위해 여러가지 사항들을 직접 체크하고있는데 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에 넣는걸 생각했습니다. createProfile export 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.ts export 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로 로그인 하면 사용자의 프로필 이미지와 이름이 받아와졌습니다. 더 효율적이거나 더 좋은 방법이 있을까요? 혹은 제가 잘못 알고 있는게 있을까요?
해결됨
한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
안녕하세요, 강의 잘 듣고 있습니다! 6.2강 회원가입 구현 강의 18:06경에 설명해주시는 AuthResponse 타입의 정의?가 변경된 것인지, 제 코드 에디터에는 아래와 같이 표시됩니다. 첫 번째 객체 부분 {data: T; error: null}은 이해가 가는데요, 두 번째 객체 부분은 강의상 화면과 차이가 좀 있어서, 추가로 설명해주실 수 있으면 감사하겠습니다.
미해결
맛집 지도앱 만들기 (React Native & NestJS)
해당 강의대로 진행하면 잘 안됩니다ㅠㅠ 일단 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 encryption app.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 퍼블릭 엑세스가 "예"로 되어있어야 하는 것만 알아주시면 됩니다. 사실 여쭤보고 싶은 것 없지만 혹시나 보신다면 위 과정에서 문제될 건 없는지 알려주시면 감사하겠습니다!
해결됨
한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
안녕하세요! 타입 스크립트부터 현재 강의까지 너무 유용하게 잘 듣고 있는 수강생입니다! 9-1 강의를 수강하다가 문득 궁금함이 생겨서 질문 남겨 봅니다. A 유저와 B 유저가 있다고 가정했을 때 A 유저가 프로필 상세 화면을 보고 있는 상태에서 B 유저가 새로운 포스트를 올렸는데, 이후에 A 유저가 메인 리스트 화면으로 이동하면 B 유저가 올린 새로운 포스트가 로드되지 않는 것으로 보입니다! (새로 고침하면 당연히 정상적으로 보이고요) 제가 코드 작성을 하면서 놓친 부분이 있어 이러한 현상이 발생하는 것인지, 아니면 이후 강의에서 해당 부분이 수정되는 것인지 여쭤보고 싶습니다. 늘 좋은 강의 감사합니다! 🙂 좋은 하루 보내세요~!
미해결
[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
✅ 모든 질문들은 슬랙 채널에서 답변드리고 있습니다. 💡 ”로펀의 인프런 상담소” 슬랙 채널 가입하기 💡 평일중에는 퇴근 이후(저녁 7시)에 답변을 받아보실 수 있고, 주말중에는 상시 답변드리고 있습니다. 투두 리스트 ui 작업 중에 material-tailwind가 리액트와 호환 문제가 있는지 리액트 19에서 18로 낮춰도 인풋과 아이콘 버튼 컴포넌트가 제대로 표시되지 않아요 ㅜㅜ
해결됨
한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
(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> }
미해결
아바타 커뮤니티앱 만들기 (React Native Expo)
ellipsis-vertical 클릭시 강의와 같이 실제 아이폰 actionsheet 처럼 보이지 않고 다른 style이 입혀진듯하게 보이고있습니다. 에러코드는 없습니다. 노드 : 20.19.6 시뮬레이터 : iOS 26.2 ReactNative : 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> ); }
해결됨
한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
안녕하세요, 이정환 강사님. 강의를 모두 수강하고 혼자 프로젝트를 진행하고 있는 수강생입니다. 모달 store를 구현하던 중 의문점이 생겨 질문합니다. 만약 postEditorModal에 더불어 다른 모달 데이터를 관리하는 스토어(예를 들어 projectEditorModal)을 만들고 싶으면, store 파일을 두 개로 나누어 만드는 것이 맞을까요? 처음에는 똑같은 state와 actions 값을 담는 store니 하나의 파일로 관리해서 만들어도 되지 않을까 생각했는데, devtools 이름을 나누어 관리하는 것이 버그 관리나 유지 보수 관점에서 더 유리할 것 같아서요. 감사합니다.
