묻고 답해요
164만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결한 입 크기로 잘라먹는 실전 프로젝트 - SNS 편
캐시 데이터 다루기 - 낙관적 업데이트(2)에서 질문
createTodo의 리턴값을 활용하면서 Todo를 생성했을 때, 캐시 무효화를 해서 데이터가 많은 경우 서버에 부하를 주는 코드를 개선했었었는데, 낙관적 업데이트2에서 데이터의 무결성을 위해 onSettled에서 queryClient.invalidateQueries를 호출했는데 여기서는 괜찮은 걸까요?
-
미해결React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
Tailwind 버전 확인
Tailwind 버전 확인 tailwnd 버전차이 인지요 ? (AI 질문 발췌: text-5xl은 Tailwind v4에서도 정상적으로 지원되는 클래스입니다.)스타일이 적용 될 수 있는 설정 방법이 있을까요? 강의내용에 tailwindcss 는 v3.x 이면v3 버전으로 재 설치를 해야 빠를까요?
-
해결됨한 입 크기로 잘라먹는 실전 프로젝트 - SNS 편
onError 콜백에 파라미터 없음에도 추가하신 이유가 무엇인가요?
인증에러처리하기1 의 10:29 에서 if (callbacks?.onError) callbacks.onError(errror);sign-in-page.tsx 에서 넘겨준 onError에는 파라미터가 없는데도 넘겨준 이유가 어떤건지 궁금합니다.
-
미해결React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
align-items 정렬
매번 강의를 보면서 따라 하는데매번 같은 강의를 복습을 해도..흐음..css 파일 아무리 드려다 봐도... 정렬이 conter로 가질 않고 있습니다교안을 보고 학습을 하는데... 채크 사항 답변 부탁드립니다.
-
미해결한 입 크기로 잘라먹는 실전 프로젝트 - SNS 편
(4.13) 캐시 정규화하기 2
개별 캐시 데이터는 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 명령어로 프로젝트를 만들었습니다. (vscode)
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)
안드로이드 실행 중 Drawer네비게이션과 MapView 성능 문제
서랍 네비게이션을 열 때마다 뒤에 MapView가 마운트 언마운트 되는 문제아래 링크 영상처럼 서랍 네비게이션을 열 때마다 뒤에 MapView가 언마운트 마운트가 되면서 성능 관련 문제가 생기는 것 같습니다. 이게 애뮬레이터 문제인지 제 컴퓨터 문제인지, 강의에서는 이런 문제가 안보이는데..해당 문제 해결할 방법이 혹시 있을까요?네비게이션을 열 때마다 렉이 걸려서 자꾸 애플리케이션이 다운됩니다 ㅠㅠ방법을 찾아보고 메모이제이션도 해보고, Drawer 옵션도 사용해봤는데 무용지물이네요 ㅠhttps://drive.google.com/file/d/1tM8iR9QgukKVd_I5zfk6GhbKneLE1DkZ/view?usp=drive_link
-
미해결한 입 크기로 잘라먹는 실전 프로젝트 - SNS 편
setAvatarImage(null) 부분 질문
선생님, 안녕하세요. 강의 잘 듣고 있습니다 🙂프로필 수정 기능구현하기 - 기능 강좌에서 useEffect(() => { if (profile && isOpen) { setNickname(profile.nickname); setBio(profile.bio); setAvatarImage(null); } }, [profile, isOpen]);setAvatarImage(null);setAvatarImage의 인수로 null 값으로 설정한 이유를 강의에서 말씀 주셨는데 설명을 들었는데도 아직 잘 이해가 안 돼서요 ㅠㅠ해당 부분에 대해 좀 더 부연설명 해주실 수 있나요? 감사합니다. 새해 복 많이 받으세요!
-
해결됨한 입 크기로 잘라먹는 실전 프로젝트 - SNS 편
props 질문
TodoItem 에서 todo값을 props로 넘겨줄때 왜 {...todo} 로 사용하나요? {todo} 는 안되는건가요?
-
해결됨한 입 크기로 잘라먹는 실전 프로젝트 - SNS 편
부모에서 훅 호출하여 자식에게 prop으로 내려주기 vs 자식에서 훅 호출 선생님은 어떻게 생각하시는지 궁금합니다
map 함수 안에서 자식 컴포넌트가 순회하는 코드가 있다고 할 때, 그 자식 컴포넌트 안에서 훅(ex useEditPost/useDeletePost)을 호출하는 것이 좋을까요? 아니면 부모에서 훅을 한번 호출한 뒤 자식 컴포넌트에 prop으로 내려주는 것이 좋을까요? 전자는 자식마다 호출되어 할당될 것 같아서 메모리 관리에 단점이 있을 것 같고 (추측입니다), 후자는 (훅의 함수를 받아야하는 대상 컴포넌트가 자식 내부에 더 깊은 뎁스에 있다고 할 때) Prop Drilling의 단점이 있을 것 같은데요선생님은 어떻게 생각하시나요?
-
미해결React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
31. 객체 업데이트 하기 - 10:15 질문
안녕하세요, 평소에 짐코딩님 강의 잘 듣고 있습니다.setForm에서 오브젝트로 title만 업데이트 해주더라도 기존의 description 값은 어떻게 그대로 유지가 되는 걸까요?
-
미해결한 입 크기로 잘라먹는 실전 프로젝트 - SNS 편
파일명 질문
안녕하세요 선생님선생님 리액트 기초 강의를 들었는데제 기억에서는그 리액트 파일명을 대문자로 써야한다? 이렇게 들었던 거 같은데(아니면 죄송)왜 여기에서는 파일명을 소문자로 쓸까요?그리고 파일명하고 그 내보내는 함수를 다르게 쓰는 이유가 있나요?그리고 왜 화살표함수로 안만들고 function으로 할까요?그리고 export를 아래에 안쓰는 이유가 있을까요?수업시간에 설명했는데 제가 놓친거면 죄송합니다 ㅠㅠ
-
해결됨한 입 크기로 잘라먹는 실전 프로젝트 - SNS 편
인증 처리하기에서 질문 드립니다.
안녕하세요.먼저 강의 정말 잘 듣고 있습니다. supabase를 어떤 식으로 프로젝트에 적용할 수 있을 지 배울 수 있어 유익했습니다.섹션 6강에 궁금한 점이 생겨서 질문 드립니다.강의 내용에서 조금 벗어났지만, supabase에서 회원 탈퇴하기가 궁금했습니다.auth.ts에 await supabase.auth.admin.deleteUser 를 추가하고 profile 테이블의 행을 삭제하면 될까요?admin를 호출해도 되나 싶어서 여쭤보고 싶었습니다.추후 강의에 계정 삭제하기도 포함해주시면 정말 좋을 거 같습니다!감사합니다.
-
해결됨한 입 크기로 잘라먹는 실전 프로젝트 - SNS 편
useProfileData에서 queryFn의 에러 처리
안녕하세요 선생님!대단한 질문은 아니고 의견을 여쭙고자 질문 남깁니다. useProfileData 훅에서 queryFn에 profile 조회 실패 시 createProfile을 하는 로직을 짜주셨는데요혹시 onError 콜백함수에 로직을 정의하지 않고 쿼리함수에 정의하신 이유가 따로 있을까요?개인적으론 가독성상 onError에 넣는게 조금 더 명확하지않나 싶어서 의견을 여쭤보고 싶네요!
-
해결됨한 입 크기로 잘라먹는 실전 프로젝트 - SNS 편
궁금한게 있습니다 선생님!
안녕하세요 선생님.강의를 모두 수강한 후 복습을 하던 중 궁금한 점이 생겨 질문드립니다. 좋아요 기능에서 동시성 문제를 해결하기 위해 행 잠금을 사용하는 것으로 이해했습니다.이 경우, 첫 번째 유저의 좋아요 요청이 처리되는 동안 해당 행이 잠기게 되는데, 만약 동시에 많은 사용자(수백~수천 명)가 좋아요 버튼을 누르는 상황 이라면요청들이 순차적으로 대기하게 되어 응답 지연이 발생되지는 않나요??또한 이런 이유 때문에 클라이언트 단에서는 낙관적 업데이트 를 적용하는게 맞는걸까요??
-
해결됨한 입 크기로 잘라먹는 실전 프로젝트 - SNS 편
OAuth 프로필 생성 관련 질문입니다.
안녕하세요 강의 정말 잘 듣고있습니다.현재 강의를 무한 중첩 댓글 구현하기까지 수강했습니다!테스트를 위해 여러가지 사항들을 직접 체크하고있는데 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로 로그인 하면 사용자의 프로필 이미지와 이름이 받아와졌습니다.더 효율적이거나 더 좋은 방법이 있을까요? 혹은 제가 잘못 알고 있는게 있을까요?
-
해결됨한 입 크기로 잘라먹는 실전 프로젝트 - SNS 편
6.2 회원가입 구현 18:06 AuthResponse 관련 문의
안녕하세요, 강의 잘 듣고 있습니다!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 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 퍼블릭 엑세스가 "예"로 되어있어야 하는 것만 알아주시면 됩니다.사실 여쭤보고 싶은 것 없지만 혹시나 보신다면 위 과정에서 문제될 건 없는지 알려주시면 감사하겠습니다!
-
해결됨한 입 크기로 잘라먹는 실전 프로젝트 - SNS 편
포스트 리스트를 불러오는 hook에 대하여 질문드립니다!
안녕하세요!타입 스크립트부터 현재 강의까지 너무 유용하게 잘 듣고 있는 수강생입니다! 9-1 강의를 수강하다가 문득 궁금함이 생겨서 질문 남겨 봅니다. A 유저와 B 유저가 있다고 가정했을 때A 유저가 프로필 상세 화면을 보고 있는 상태에서 B 유저가 새로운 포스트를 올렸는데,이후에 A 유저가 메인 리스트 화면으로 이동하면 B 유저가 올린 새로운 포스트가 로드되지 않는 것으로 보입니다! (새로 고침하면 당연히 정상적으로 보이고요) 제가 코드 작성을 하면서 놓친 부분이 있어 이러한 현상이 발생하는 것인지,아니면 이후 강의에서 해당 부분이 수정되는 것인지 여쭤보고 싶습니다. 늘 좋은 강의 감사합니다! 🙂 좋은 하루 보내세요~!
-
미해결[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
투두 리스트 ui 작업 중에 material-tailwind가 리액트와 호환 문제가 있는지 리액트 19에서 18로 낮춰도 인풋과 아이콘 버튼 컴포넌트가 제대로 표시되지 않아요 ㅜㅜ
✅ 모든 질문들은 슬랙 채널에서 답변드리고 있습니다.💡 ”로펀의 인프런 상담소” 슬랙 채널 가입하기 💡평일중에는 퇴근 이후(저녁 7시)에 답변을 받아보실 수 있고, 주말중에는 상시 답변드리고 있습니다. 투두 리스트 ui 작업 중에 material-tailwind가 리액트와 호환 문제가 있는지 리액트 19에서 18로 낮춰도 인풋과 아이콘 버튼 컴포넌트가 제대로 표시되지 않아요 ㅜㅜ