묻고 답해요
160만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결한 입 크기로 잘라먹는 실전 프로젝트 - SNS 편
섹션 3 퀴즈 5번 문제 해설 관련 질문
안녕하세요.섹션 3 퀴즈에서 5번 문제 관련 질문 드립니다. 질문: persist 미들웨어 사용 시, 액션 함수가 기본적으로 저장되지 않는 이유는 무엇일까요?해설: persist 미들웨어는 상태를 JSON 형태로 저장하기 때문에, JSON으로 직렬화할 수 없는 함수는 저장하지 않아요. 따라서 serialize 옵션으로 상태만 저장하는 것이 좋습니다. 강의에서 serialize가 아닌 partialize로 설명해주셨는데, 이 부분 확인 부탁드립니다.
-
미해결한 입 크기로 잘라먹는 실전 프로젝트 - SNS 편
(7.14) 포스트 삭제 후 무한 스크롤이 작동하지 않는 문제
안녕하세요. 좋은 강의 잘 수강하고 있습니다!다름이 아니라 포스트 삭제 후에 무한 스크롤이 작동하지 않는 문제가 발생했습니다.문제 상황은 다음과 같습니다.첫 페이지(다음 페이지의 데이터를 페칭하지 않은 상태)에서 작성한 포스트를 삭제이후 페이지 최하단까지 스크롤 했지만 무한 스크롤 데이터 페칭이 이루어지지 않음 부족한 실력이라 AI의 도움을 받아 원인을 분석했을 때 다음과 같았습니다. 아래는 AI의 답변입니다.무한 스크롤이 작동하지 않는 원인 분석:getNextPageParam의 로직useInfinitePostData 훅에서 다음 페이지를 불러올지 결정하는 로직은 다음과 같습니다:// src\hooks\queries\use-infinite-posts-data.ts // ... const PAGE_SIZE = 5; // ... getNextPageParam: (lastPage, allPages) => { if (lastPage.length < PAGE_SIZE) return undefined; // 🚫 문제의 원인 return allPages.length; }, 이 로직은 "마지막으로 불러온 페이지의 항목 개수가 PAGE_SIZE (5개)보다 적으면, 더 이상 데이터가 없으므로undefined를 반환하라 (즉, 다음 페이지를 불러오지 마라)"고 지시합니다. 삭제가 로직에 미치는 영향:초기 상태: 0번 페이지에 5개의 게시글이 있습니다. (lastPage.length = 5)삭제 이벤트: 사용자가 0번 페이지의 게시글 1개를 삭제합니다.캐시 업데이트:useDeletePost의 onSuccess에서 해당 게시글 ID를 0번 페이지의 캐시 데이터에서 제거합니다.결과: 0번 페이지의 항목 개수가 5개에서 4개로 줄어듭니다.무한 스크롤 시도: 사용자가 스크롤하여 ref(inView)가 활성화됩니다.getNextPageParam 실행: React Query는 0번 페이지의 현재 캐시 데이터를 확인합니다. lastPage.length는 이제 4입니다.잘못된 판단:4 < PAGE_SIZE (5)이므로, getNextPageParam은 즉시 undefined를 반환합니다.따라서 1번 페이지(실제 서버에는 데이터가 있을 수 있음)를 불러오기도 전에, 캐시 데이터가 줄어든 것 때문에 다음 페이지 로딩이 차단되어 무한 스크롤이 작동하지 않게 되는 것입니다.마지막 페이지에 속한 포스트를 삭제했을 때, PAGE_SIZE보다 항상 작아지니 다음 페이지가 없다라고 판단하기에 무한 스크롤이 작동하지 않는다고 이해했습니다.캐시를 무효화해 리페칭해서 해결하려고 하는데, 다른 대안이 있을까요?혹여 제 실수로 잘못된 동작이 일어난 건지 GitHub Repo도 같이 첨부했습니다!https://github.com/scseong/onebite-sns
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
Next.js 마치며.. 강의 피드백 폼 링크 연결 문제가 있습니다.
안녕하세요. 좋은 강의로 Next.JS 수강을 마쳤습니다.그런데 수업노트에 있는 강의 피드백 폼 링크가 엉뚱한 곳으로 연결 됩니다. https://forms.gle/MhvAagJvttQCtS1f6 링크 주소를 치고 들어가면 제대로 들어 접근하는데..링크를 클릭하면 다른 곳으로 연결됩니다. 수정이 필요합니다.
-
미해결코드로 배우는 React 19 with 스프링부트 API서버
이강의 듣고 소화시켰다면 몇년차 정도 개발자라고 할수 있을까요?
그냥 갑자기 궁금해서 선생님의 개인적인 의견 궁금합니다.
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
revalidateTag 에서 매개 변수가 하나 더 늘어서 질문합니다.
안녕하세요. next.js 16 버전으로 해당 강의를 보며 달리고 있는데요.revalidateTag 설정에서 파라미터 값이 하나 더 늘어나 있습니다.revalidateTag(tag: string, profile: string | { expire?: number }): void; tag 파라미터 뒤에 profile 파라미터를 넣어야 하네요.기본적으로는 'max' 값을 넣었고, expire로 사용자 지정 만료 동작을 위한 값을 지정하게 되어 있습니다.이것이 구체적으로 어떤 매개변수인지 궁금합니다.그리고 이전의 tag 파라미터만 있을 경우 와 같은 조건의 매개변수 값은 어떻게 되는지 알고 싶습니다.
-
미해결한 입 크기로 잘라먹는 실전 프로젝트 - SNS 편
토큰 관리에 대해 질문을 드리고 싶습니다.
안녕하세요 멘토님, 정말 쉽게 설명해주셔서 수업 잘 듣고 있습니다.인증 처리하기 부분에 대해서 흐름도를 자세하고 재밌게 설명해주셔서 덕분에 이해하기 수월했습니다. 다만 현재 토큰들을 localStorage에 저장하고 이 값을 zustand로 관리하고 있는 것 같은데 사실 토큰을 storage에 저장하는 방식이 일반적이지는 않은 것 같습니다.이 부분에 대해서 찾아본 결과 supabase를 이용하기에 쿠키에 저장하는 건 무리인 것 같고, 그렇다면 그나마 토큰을 메모리에 저장하는 방식이 안전할 것 같습니다.로그인을 진행하면 토큰이 localStorage에 저장되는 형태인데, 이때 만약 storage에 저장하지 않고 메모리에 받게하려면 어떻게 할 수 있을까요 .. ?또한 사실 토큰 자체를 zustand에서 가지고 있는 것도 괜찮은지 의문입니다.. 전역상태로 들고 있는 것이라서 충분히 탈취위험이 있을 것이라고 생각이 되어서요..사실 백엔드 서버가 있었다면 쿠키에 저장하는 로직으로 진행했을 거 같은데만약 이때는 로그인 상태를 어떻게 판별하는지에 대해서도 궁금합니다 !
-
미해결한 입 크기로 잘라먹는 실전 프로젝트 - SNS 편
fetch api의 상태값 유지
안녕하세요..강의 잘 보고 있습니다. import { ITodoInfo } from "@/utils/types"; export async function fetchTodos(blngCoCd:string, userId:string) { const respose = await fetch( `${process.env.NEXT_PUBLIC_API_SERVER_URL}/todo/list?blngCoCd=${blngCoCd}&userId=${userId}` ); if (!respose.ok) { throw new Error("Fetch Todo Error"); } const data: ITodoInfo[] = await respose.json(); console.log('todo data=',JSON.stringify(data, null, 2)); return data; } import { fetchTodos } from "@/api/todo/fetch-todos"; import useUserInfoStore from "@/store/user-info-store"; import { ILoginUserInfo } from "@/utils/types"; import { useQuery } from "@tanstack/react-query"; export function UserTodosData() { const loinData: ILoginUserInfo = useUserInfoStore((state) => state.userInfo); return useQuery({ queryFn: () => fetchTodos(loinData.blngCoCd, loinData.userId) , queryKey: ["todos"], }); }이런식으로 zustand의 유저 정보를 가져와 훅에서 api를 호출을 하면 처음은 정보를 가져오는데.refresh를 하면 다시 가져 올때 blngCoCd와 userId가 null이 되면서 리스트를 가져오지 못하네요.zustand의 정보는 localstorage로 보관하고 있고... const loinData: ILoginUserInfo| null = useUserInfoStore((state) => state.userInfo); const blngCoCd = loinData?.blngCoCd; const userId = loinData?.userId; // blngCoCd와 userId가 모두 존재할 때만 쿼리를 활성화합니다. const enabled = !!blngCoCd && !!userId; return useQuery({ queryFn: () => fetchTodos(blngCoCd, userId) , queryKey: ["todos", blngCoCd, userId], enabled: enabled, });이렇게 변경을 했는데...api에 파라미터를 넘겨야 하는경우 새로고침을 할 경우 이런식으로 하는게 일반적인가요?
-
미해결타입스크립트 입문 - 기초부터 실전까지
vscode eslint server 오류
ESLint server is starting. 2025-10-31 16:07:45.117 [info] ESLint server running in node v22.19.0 2025-10-31 16:07:45.120 [info] ESLint server is running. 2025-10-31 16:07:46.021 [info] ESLint library loaded from: /Users/ijinseob/learn-typescript/node_modules/eslint/lib/api.js 2025-10-31 16:07:46.026 [error] An unexpected error occurred: 2025-10-31 16:07:46.026 [error] Error: Could not find config file. at assertConfigurationExists (/Users/ijinseob/learn-typescript/node_modules/eslint/lib/config/config-loader.js:80:17) at LegacyConfigLoader.loadConfigArrayForFile (/Users/ijinseob/learn-typescript/node_modules/eslint/lib/config/config-loader.js:414:3) at async ESLint.lintText (/Users/ijinseob/learn-typescript/node_modules/eslint/lib/eslint/eslint.js:1123:4) at async /Users/ijinseob/.vscode/extensions/dbaeumer.vscode-eslint-3.0.16/server/out/eslintServer.js:1:189380 at async O (/Users/ijinseob/.vscode/extensions/dbaeumer.vscode-eslint-3.0.16/server/out/eslintServer.js:1:182146) at async /Users/ijinseob/.vscode/extensions/dbaeumer.vscode-eslint-3.0.16/server/out/eslintServer.js:1:29208 at async /Users/ijinseob/.vscode/extensions/dbaeumer.vscode-eslint-3.0.16/server/out/eslintServer.js:1:11102 2025-10-31 16:07:55.052 [error] An unexpected error occurred: 2025-10-31 16:07:55.053 [error] Error: Could not find config file. at assertConfigurationExists (/Users/ijinseob/learn-typescript/node_modules/eslint/lib/config/config-loader.js:80:17) at LegacyConfigLoader.loadConfigArrayForFile (/Users/ijinseob/learn-typescript/node_modules/eslint/lib/config/config-loader.js:414:3) at async ESLint.lintText (/Users/ijinseob/learn-typescript/node_modules/eslint/lib/eslint/eslint.js:1123:4) at async /Users/ijinseob/.vscode/extensions/dbaeumer.vscode-eslint-3.0.16/server/out/eslintServer.js:1:189380 at async O (/Users/ijinseob/.vscode/extensions/dbaeumer.vscode-eslint-3.0.16/server/out/eslintServer.js:1:182146) at async /Users/ijinseob/.vscode/extensions/dbaeumer.vscode-eslint-3.0.16/server/out/eslintServer.js:1:29208 at async /Users/ijinseob/.vscode/extensions/dbaeumer.vscode-eslint-3.0.16/server/out/eslintServer.js:1:11102extension 설치는 했는데 config 설정에서 계속 뭔가 안되네요ㅠ
-
해결됨React Native with Expo: 제로초에게 제대로 배우기
혹시 해당 강의 보면서 테스트용으로 사용할 맥북을 구매할 예정인데 어느정도 스펙 이상으로 사야 할지 의견 받아볼수있을까요?
혹시 해당 강의 보면서 테스트용으로 사용할 맥북을 구매할 예정인데 어느정도 스펙 이상으로 사야 할지 의견 받아볼수있을까요?
-
미해결React Native with Expo: 제로초에게 제대로 배우기
[TypeError: Cannot read property 'find' of undefined] 문제
제로초님 안녕하세요!! 강의에 나온대로 top tabs 적용중인데, withLayoutContext에 제네릭 타입까지 강의와 같이 적용하려고 했으나import type { TabNavigationState, ParamListBase } from '@react-navigation/native';위 코드에서 '"@react-navigation/native"' 모듈에 내보낸 멤버 'ParamListBase'이(가) 없습니다.ts(2305)ParamListBase를 불러오지 못해서 우선 타입스크립트 적용하지 않고 아래 코드와 같이 테스트했습니다.import { withLayoutContext } from 'expo-router'; import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs'; import { Text, View } from 'react-native'; import { useSafeAreaInsets } from 'react-native-safe-area-context'; const { Navigator } = createMaterialTopTabNavigator(); export const MaterialTopTabs = withLayoutContext(Navigator); const GitCallbackLayout = () => { const insets = useSafeAreaInsets(); return ( <View style={{ paddingTop: insets.top }}> <Text>Callback Layout</Text> <MaterialTopTabs> <MaterialTopTabs.Screen name="index" options={{ title: 'GitHub' }} /> <MaterialTopTabs.Screen name="gitlab" options={{ title: 'GitLab' }} /> <MaterialTopTabs.Screen name="bitbucket" options={{ title: 'Bitbucket' }} /> <MaterialTopTabs.Screen name="devops" options={{ title: 'DevOps' }} /> </MaterialTopTabs> </View> ); }; export default GitCallbackLayout; 폴더 구조는 아래와 같고 index, gitlab, devops, bitbucket 컴포넌트는 모두 default export 돼있는 상태입니다.이 상태에서 페이지에 /settings/manage-git/verify 경로로 접근하면 ERROR [TypeError: Cannot read property 'find' of undefined] Code: _layout.tsx 31 | <View style={{ paddingTop: insets.top }}> 32 | <Text>Callback Layout</Text> > 33 | <MaterialTopTabs> | ^ 34 | <MaterialTopTabs.Screen name="index" options={{ title: 'GitHub' }} /> 35 | <MaterialTopTabs.Screen name="gitlab" options={{ title: 'GitLab' }} /> 36 | <MaterialTopTabs.Screen name="bitbucket" options={{ title: 'Bitbucket' }} />이렇게 에러가 나는 상황인데,, 계속 해결이 안되네요ㅠ 어떤 문제인지 아시면 도움 부탁드려요
-
미해결한 입 크기로 잘라먹는 실전 프로젝트 - SNS 편
댓글 수정, 삭제 시 캐시 수정
강의 정말 잘 듣고있습니다!10.6 강의 수강 중 댓글 추가 시에는 Comment 타입과 일치시키기 위해 프로필 데이터를 조회해서 author 객체를 포함시켜주었는데 수정, 삭제 시에는 왜 따로 처리를 하지 않는지 궁금합니다.삭제 시에는 해당 데이터를 삭제하기에 불필요하다고 생각되긴하는데 수정 시에는 왜 에러가 발생하지 않나요??
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
빠르게 실행해보고싶습니다.
강의를 다 듣지 않은 상태에서 빠르게 실행을 해보고 싶습니다.서버 실행, 데이터베이스 연결 이런 건 잘 했는데지도 라이브러리 다운 및 설정 등 일부 강의만 듣고 설정해서 실행하려고 하니 문제가 생기네요.필요한 라이브러리 버전 등 실행에 필요한 정보가 한꺼번에 나와있는 글은 없나요? ❗질문 작성시 꼭 참고해주세요에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다.질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github을 첨부해주세요.개발중인 OS, ReactNative, Node 버전 등의 개발환경을 알려주셔야합니다.에러메세지는 일부분이 아닌 전체 상황을 올려주세요. 일부만 보여주시면 답변이 어렵습니다. (에러 일부만 자르거나 일부만 복사하지말아주세요)
-
미해결한 입 크기로 잘라먹는 실전 프로젝트 - SNS 편
forget-password 이후 reset password 이메일이 오지 않네요.
강의 잘 듣고 있습니다. 다름이 아니라, forget-password 로 정상적으로 처리가 되었다고 하는데요. 그러나, 등록해 둔 이메일로 reset password 메일이 오지 않네요. 혹시 Supabase 셋팅에서 어떤 부분을 확인해야 할까요? 검색을 해보니 이렇게 셋팅하라고 해서 한 상태입니다답변 부탁드립니다.
-
미해결한 입 크기로 잘라먹는 실전 프로젝트 - SNS 편
[staleTime 설정] 새로고침 시 로딩 중 대신 에러 메세지 출력
staleTime 을 5초로 설정하고 slow4G 로 설정한 다음 /todos/1 페이지 에서 새로고침을 했는데 로딩중입니다.. 가 아니라 오류가 발생했습니다. 가 잠깐 나오고 페이지가 정상적으로 랜더링 되어서 아래와 같이 error 조건문을 수정하고 data?.content 로 바꾸니까 강사님께서 알려주신대로 로딩중입니다.. 가 잠깐 나오고 페이지가 정상적으로 랜더링 됩니다. 혹시 이렇게 해도 상관이 없는건지 여쭤봅니다
-
미해결한 입 크기로 잘라먹는 실전 프로젝트 - SNS 편
Zustand 사용 중 컴포넌트 리렌더링 관련 질문
관련 챕터: Zustand 기본 사용법 2질문 관련 부분: 4:34 ~ 6:20 질문 내용: 역할에 따라 컴포넌트를 분리하는 과정에서,count 값 변경 시 Controller 컴포넌트까지 리렌더링되는 이유에 대해 설명해주셨는데요. 제가 맞게 이해했는지 헷갈려서 질문 드립니다.count 값이 바뀔 때마다 Viewer, Controller 컴포넌트가 동시에 리렌더링된다. 버튼 태그를 포함하는 Controller 컴포넌트까지 리렌더링되는 이유는 1. Zustand는 store 안의 state가 바뀌면 store를 가져다 쓴 모든 컴포넌트가 다시 그 state값을 반영하도록 리렌더링된다. 2. Controller는 구조분해 할당으로 increase, decrease만 쓴다고 해도, 훅이 반환한 객체 안에 count도 포함돼 있으므로 count가 바뀌면 Controller도 리렌더링된다. 제가 맞게 이해한 걸까요?
-
미해결한 입 크기로 잘라먹는 타입스크립트(TypeScript)
7:17초 업캐스팅 질문이있습니다!
안녕하세요 선생님!다름이아니라 c = d; 부분에서 업캐스팅이라고 하셨는데 혹시 다운캐스팅이 아닌가 하는 생각이 들어서 질문을 남깁니다!type C는 슈퍼타입(넘버타입)이고, type D는 서브타입(넘버 리터럴타입) 입니다.c = d;즉, c라는 변수에 d라는 값을 할당합니다.슈퍼타입의 자리에 서브타입을 할당합니다.결국 슈퍼타입이 서브타입이 되므로 다운캐스팅이라고 이해했습니다.아래는 제가 생각한 코드의 흐름입니다. 21번째 줄) type C = (value: number) => void; >> "C"라는 타입을 타입별칭으로 설정24번째 줄) let c: C = (value) => {}; >> "c"라는 화살표 함수를 정의. 여기서 매개변수로 타입"C"를 받음.24번째 줄) let c: (value: number) => void = (value) => {};>> "C"라는 타입별칭을 사용하는 대신, 직접 타입 작성 >> c함수는 (number) => void를 기대함.>> d함수는 (10) => void 만 처리할 수 있음.>> c함수는 10 뿐만이 아닌, 다른 숫자가 와도 처리 가능 = d함수보다 넓은 범위를 처리할 수 있음.= 함수타입에서는 슈퍼타입의 자리에 서브 타입을 넣는건 값이 제한적이어서 안전하지않음 - 에러발생느슨한 조건(슈퍼타입)에서 -> 구체적인 조건(서브타입)으로 = 다운캐스팅 혹시 제가 어디서 잘못된걸까요..??
-
미해결한 입 크기로 잘라먹는 실전 프로젝트 - SNS 편
tailwind css / sass 사용율? 에 대해서 궁금합니다
저는 항상 scss를 많이 사용해서 쭉 사용하고있었는데 tailwind 가 무섭게 치고 올라오는거 같더라구요 ㅎㅎ 둘다 공부를 하면서 사용해보고있는데 혹시 실무나 이런쪽에서는 어느걸 더 많이 활용하는지도 궁금합니다 ㅎㅎ
-
미해결한 입 크기로 잘라먹는 실전 프로젝트 - SNS 편
4.6 useMutation 관련 질문 !
useMutation에 대해 설명하실 때, createTodo라는 비동기 함수의 상태를 관리해야 하기 때문에 별도의 state를 만들어야 한다. 하지만, useMutation을 사용하면 이러한 상태까지도 관리해준다. 라고 설명해주셨는데여기서 말씀하신 "비동기 함수의 상태 관리" 라는 것이 isLoading이나 isPending 이런 것들을 의미하는 걸까요??
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
강의 수강 순서 관련
강의를 11강 이후의 백엔드 구현 먼저 듣고 앞부분으로 돌아와도 문제가 있을까요? 수업이 구성된 방식이 궁금합니다.
-
미해결한 입 크기로 잘라먹는 Next.js(v15)
수강생 디스코드 커뮤니티 관련 질문
개인적으로 오픈 채팅방이나 카페는 별로 선호하지 않아서 혹시 안내된 디스코드 같은 경우에는 링크가 없을까요?