172만명의 커뮤니티!! 함께 토론해봐요.
미해결
React Native with Expo: 제로초에게 제대로 배우기
eas build:configure 안되는데, "git"이 반드시 설치되어 있어야 하나요?
해결됨
[VOD] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)
안녕하세요. 다름이 아니라 프롬프트를 실행 할 경우 매번 md 파일로 만들어져서 루트 디렉토리에 쌓이게 되더라구요. 이게 많아지면서 뭔가 자꾸 컨텍스트를 들고 가는지 요구사항을 제대로 못지키는 현상이 발생되는 것 같아 md-files를 만들고 옮겨두었더니 이젠 거기에 md 파일을 생성합니다. 이럴 경우 컨텍스트가 늘어나 원하는 프롬프트 요구사항을 제대로 이행하지 못하는게 맞을까요? 강사님이라면 해당 md 파일 생성은 하지말라는 프롬프트를 추가하셨을까요?
미해결
한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
선생님 제공 자료 eslint.config.js 파일에서 아래 코드로 작성되어 있는데 no-explicit-any 규칙이 오타난 걸까요? 강의는 2:40 쯤입니다 "@typescript-eslint/no-explicity-any": "off",
미해결
한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
이미 가입된 이메일로 다시 회원가입 시도하면 강의에서는 400 오류?가 발생하는데 저는 오류는 발생하지 않고 response에서 session 부분만 null 로 오는데 빠진 설정이 있을까요?
미해결
한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
안녕하세요, 선생님. 강의 너무 잘 듣고 있습니다! 강의 수강 중 이해가 되지 않는 부분이 있어 질문남깁니다. 질문부분: (4.7) 캐시 데이터 다루기 1 (8:05~) 질문내용: " ['todos'] 에 대해 쿼리 무효화할 경우 ['todos', id] 쿼리키에 대해서도 불필요하게 리페칭이 수행된다." 부분이 잘 이해가 가질 않습니다. 구글링하고 챗지피티에 물어본 결과, 두 개는 각각 다른 쿼리키 배열로 판정될 거라고 생각했습니다. 따라서 앞선 내용의 '리페칭'은 수행되지 않을 것이라고 예상했습니다. 제가 어느 부분을 놓치고 있는지 보충 설명 해주시면 감사하겠습니다:)
미해결
한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
관련 섹션: 42. (6.2) 회원가입 구현하기 질문 내용 회원가입 요청을 보냈을 때 반환되는 data 객체 안에 user 값은 있는데, session 값이 null입니다. 강의에서 알려주신 대로 진행했고, 한 가지 다르게 진행한 부분은 Supabase 이메일 세부옵션에 'Confirm email'이 존재하지 않아 이 부분만 off 처리를 하지 못했습니다. 회원가입 요청을 보내면 반드시 data 객체 안에 session값까지 포함되어야 할까요?
미해결
Next + React Query로 SNS 서비스 만들기
리액트 쿼리의 suspense 스트리밍 기능 구현 중 버그가 발생해 인사이트를 얻고자 질문드립니다. 상위 컴포넌트에서 useInfiniteQuery 로 promise를 반환하고, 해당 promise를 자식 컴포넌트의 props로 넘긴 뒤 React의 use hook으로 감싸서 data를 반환하도록 구현했습니다. 그리고 promise를 throw하는 자식 컴포넌트를 Suspense로 감싸서 promise를 캐치하도록 했는데요. 페이지 렌더링 자체는 정상적으로 되는데, request가 완료되지 않는 문제가 있습니다. 크롬 개발자도구의 Network 탭에서 document를 확인하면 "Caution: request is not finished yet"이라는 경고가 표시됩니다. TanStack Query 공식 문서에도 useInfiniteQuery 의 promise 사용 시 "This can be used with React.use() to fetch data"라고 명시되어 있어 React use 와 함께 사용하라고 안내하고 있는데, 혹시 이 문제의 원인을 알 수 있을까요? 참고로 prefetch는 안했습니다. 그리고 prefetch 안하는 방법으로 suspense 스트리밍을 구현하고 싶습니다. 코드는 아래와 같습니다. 감사합니다! export default function DetailReviewWrapper({ pid, userId }: DetailReviewProps) { const { infoData, observerRef, isFetchingNextPage, refetch, promise } = useReviewListInfinity({ userId, pid, }) return ( <Suspense fallback={<DetailReviewLoading />}> <DetailReview pid={pid} userId={userId} promise={promise} refetch={refetch} isFetchingNextPage={isFetchingNextPage} observerRef={observerRef} /> </Suspense> ) } export default function DetailReview({ pid, userId, promise, refetch, isFetchingNextPage, observerRef, }: DetailReviewProps) { const data = use(promise) return ( <> <section> <ReviewListView userId={userId} pid={pid} data={data?.list || []} className={cn('review-list')} refetch={refetch} showPoint /> {isFetchingNextPage && <Loading />} <div ref={observerRef} /> </section> export function useReviewListInfinity(params: UseReviewListInfinityProps) { const section = useSearchParams().get('contentType') as SectionType const orderType = useRecoilValue(commentOrderState) const filterType = useRecoilValue(filterTypeState) const { fetchNextPage, hasNextPage, isFetchingNextPage, isLoading, refetch, promise } = useInfiniteQuery({ queryKey: [REVIEW_LIST_KEY, params, orderType, filterType, section], queryFn: ({ pageParam = 1 }) => getReviewApi({ uid: params.userId, pid: params.pid, section, pageInfo: { curPage: pageParam, pageSize: 20, }, orderType: orderType === 'RECOMMENDED' ? 'like' : 'date', filterType, }), select: (data) => { return { list: data.pages.flatMap((page) => page.data.list), info: data.pages[0].data.info, } }, getNextPageParam: (lastPage) => { const nextPage = lastPage.data.pageInfo.curPage + 1 return nextPage <= lastPage.data.pageInfo.pageCount ? nextPage : undefined }, initialPageParam: 1, }) const { observerRef } = useIntersectionObserver({ onScroll: () => { if (hasNextPage && !isFetchingNextPage) { fetchNextPage() } }, }) return { isLoading, isFetchingNextPage, observerRef, refetch, promise, } } const getQueryClient = (): QueryClient => new QueryClient({ defaultOptions: { queries: { refetchOnWindowFocus: false, refetchInterval: false, refetchOnReconnect: true, refetchOnMount: true, staleTime: Infinity, gcTime: Infinity, retry: false, experimental_prefetchInRender: true, }, }, }) 무한 로딩 시 개발자 도구 캡쳐이미지입니다.
미해결
Next.js 까보기: "쓸 줄 아는 개발자"에서 "알고 쓰는 개발자"로
리액트 쿼리의 suspense 스트리밍 기능 구현 중 버그가 발생해 인사이트를 얻고자 질문드립니다. 상위 컴포넌트에서 useInfiniteQuery 로 promise를 반환하고, 해당 promise를 자식 컴포넌트의 props로 넘긴 뒤 React의 use hook으로 감싸서 data를 반환하도록 구현했습니다. 그리고 promise를 throw하는 자식 컴포넌트를 Suspense로 감싸서 promise를 캐치하도록 했는데요. 페이지 렌더링 자체는 정상적으로 되는데, request가 완료되지 않는 문제가 있습니다. 크롬 개발자도구의 Network 탭에서 document를 확인하면 "Caution: request is not finished yet"이라는 경고가 표시됩니다. TanStack Query 공식 문서에도 useInfiniteQuery 의 promise 사용 시 "This can be used with React.use() to fetch data"라고 명시되어 있어 React use 와 함께 사용하라고 안내하고 있는데, 혹시 이 문제의 원인을 알 수 있을까요? 참고로 prefetch는 안했습니다. 그리고 prefetch 안하는 방법으로 suspense 스트리밍을 구현하고 싶습니다. 코드는 아래와 같습니다. 감사합니다! export default function DetailReviewWrapper({ pid, userId }: DetailReviewProps) { const { observerRef, isFetchingNextPage, refetch, promise } = useReviewListInfinity({ userId, pid, }) return ( <Suspense fallback={<DetailReviewLoading />}> <DetailReview pid={pid} userId={userId} promise={promise} refetch={refetch} isFetchingNextPage={isFetchingNextPage} observerRef={observerRef} /> </Suspense> ) } export default function DetailReview({ pid, userId, promise, refetch, isFetchingNextPage, observerRef, }: DetailReviewProps) { const data = use(promise) return ( <> <section> <ReviewListView userId={userId} pid={pid} data={data?.list || []} className={cn('review-list')} refetch={refetch} showPoint /> {isFetchingNextPage && <Loading />} <div ref={observerRef} /> </section> export function useReviewListInfinity(params: UseReviewListInfinityProps) { const section = useSearchParams().get('contentType') as SectionType const orderType = useRecoilValue(commentOrderState) const filterType = useRecoilValue(filterTypeState) const { fetchNextPage, hasNextPage, isFetchingNextPage, isLoading, refetch, promise } = useInfiniteQuery({ queryKey: [REVIEW_LIST_KEY, params, orderType, filterType, section], queryFn: ({ pageParam = 1 }) => getReviewApi({ uid: params.userId, pid: params.pid, section, pageInfo: { curPage: pageParam, pageSize: 20, }, orderType: orderType === 'RECOMMENDED' ? 'like' : 'date', filterType, }), select: (data) => { return { list: data.pages.flatMap((page) => page.data.list), info: data.pages[0].data.info, } }, getNextPageParam: (lastPage) => { const nextPage = lastPage.data.pageInfo.curPage + 1 return nextPage <= lastPage.data.pageInfo.pageCount ? nextPage : undefined }, initialPageParam: 1, }) const { observerRef } = useIntersectionObserver({ onScroll: () => { if (hasNextPage && !isFetchingNextPage) { fetchNextPage() } }, }) return { isLoading, isFetchingNextPage, observerRef, refetch, promise, } } const getQueryClient = (): QueryClient => new QueryClient({ defaultOptions: { queries: { refetchOnWindowFocus: false, refetchInterval: false, refetchOnReconnect: true, refetchOnMount: true, staleTime: Infinity, gcTime: Infinity, retry: false, experimental_prefetchInRender: true, }, }, }) 무한 로딩 시 개발자 도구 캡쳐이미지입니다.
해결됨
1시간만에 Chat GPT 클론 with Cursor (원데이 클래스)
영상처럼 curl -X POST로 시작하는 명령어가 아닌, 다른 명령어가 나오는 거 같습니다. 어떤 점이 문제일까요? 포트는 3001으로 수정된 상태입니다.
미해결
1시간만에 Chat GPT 클론 with Cursor (원데이 클래스)
안녕하세요 클론 코딩 인강을 듣고 있는 대학생입니다. 다름이 아니라, 제목처럼 localhost 사이트에 접속하는 것이 제한되어 이렇게 문의드립니다. 위와 같이 연결할 수 없다는 에러가 발생하여 이에 대한 해결방법이 궁금합니다! 우선 현재 사용중인 랩탑의 프록시 설정 및 방화벽은 별도로 활성화하고 있지 않습니다.
미해결
React Native with Expo: 제로초에게 제대로 배우기
.
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
2.14) 비동기 작업 처리하기 3. Async&Awat 강의 예제 질문 async function getData() { return new Promise((resolve, reject) => { setTimeout(() => { resolve({ id: "Lu75", username: "Lu", }); }, 1500); }); } async function printData() { const data = await getData(); console.log(data, "...?"); return data; // 아마도 저 await 동작을 기다리기 전에 반환 처리가 먼저 되는 것일까? } console.log(printData()); // Promise 객체가 콘솔에 찍힙니다. 질문 요약: printData()를 호출한 값을 console.log()로 출력할 때, 왜 Prmise 객체가 찍히는 걸까요? 예제 코드에서 printData() 함수에서 data 라는 변수에 getData() 함수의 실행 결과? Promise 객체에서 resolve 값이 담기는 거로 이해하고 있어서 data 변수를 return을 해서 console.log()로 출력을 해봤는데 제가 예상한 값이 나오지 않았습니다. 강의에서 나온 내용으로 제가 이해하기로는 await 키워드는 비동기의 작업을 기다려준다고 하여 data 변수에 당연히 getData()에서 Promise 객체가 resolve한 결과 값이 담기고 그 후에 return을 하는 줄 알았거든요! printData()를 호출한 값이 data의 값이 아닌 Promise 객체가 출력되어 이해가 되지 않아 질문을 합니다. getData() 함수에서 Promise의 executor 함수 부분에서 setTimeout()을 사용하여 1500ms를 기다리기 전에 printData()가 실행이 종료되어 그런걸까요..? 실행 순서가 잘 이해가 되지 않아 질문 남깁니다...!
해결됨
한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
todo.ts에서 26번째줄에 사진과 같이 뜨는데 왜 이렇게 뜨는지 궁금합니다.
미해결
AI와 함께 배우는 Next.js
퀴즈에 1., 2. 이런 문자들이 있어서 보기가 조금 불편합니당 ..! 그래도 이해는 가능합니다 ..ㅎㅎ
해결됨
[Live 챌린지] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)
Cursor를 업데이트하고 기능을 확인하던 중에 Rules 말고도 Commands 라는 기능을 있는걸 봤어요. 설명을 읽어보고, 몇 번 실행해 보긴 했는데 Rules 를 배우고 적용해보는게 이번이 처음이라서 그런지 두 개가 비슷해보이고 차이점을 잘 모르겠네요. 제가 이해할 수 있는건 Rules는 코드를 바꿀 수 있고, Commands 바꿀 수 없다 정도인 것 같아요. Commands를 잘 쓰면 팀에서 쓰기도 좋을 것 같은데, 혹시 현재 쓰고 계신다면 라이브 강의에서 간단하게 라도 설명해주실 수 있나요? 아래는 Commands 관련 공식 링크 입니다: https://cursor.com/ko/docs/agent/chat/commands
해결됨
[Electron #1] Electron + React로 만드는 타이머 앱 (With Zustand)
질문 내용 안녕하세요! 강의 너무 잘 들었습니다. 회사에서 electron으로 앱을 만들어야 해서 참고하게 되었는데 많은 도움이 되었습니다. 추가로 질문이 있는데, 강의에서 loadURL 방식으로 앱을 가져와서 돌리게 되어있는데, 혹시 해당 강의에서 loadFile로 빌드된 파일을 가져와서 동작시키지 않은 이유가 있으실까요? 찾아보니 빌드를 해서 사용하면 offline 지원이 가능하다, 대신 파일 경로를 수정해주어야 한다는 차이가 있던데, 관련해서 혹시 추가 차이점이나 주의사항이 있는지 궁금합니다. 좋은 강의 감사합니다!
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요. vue.js를 사용하다 리액트를 배우고 있습니다. 현재 회사에서 진행중인 프로젝트에서 일부는 뷰, 일부는 뷰+nuxt.js를 사용합니다. 뷰만 사용하는 페이지는 SSR이고, nuxt.js는 CSR라고 합니다.(상사의 설명) 질문 // 리액트는 무조건 CSR로 되는건가요? next.js를 사용하면 크게 어떤점이 다른가요? (이 프로젝트 후 한입next 수강예정입니다..간단하게 먼저 질문드립니다.) 프로젝트와 뷰js를 완벽하게 이해하지 못해서 질문이 명확하지 못해 죄송합니다.
해결됨
한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
안녕하세요. 섹션 3 퀴즈에서 5번 문제 관련 질문 드립니다. 질문: persist 미들웨어 사용 시, 액션 함수가 기본적으로 저장되지 않는 이유는 무엇일까요? 해설: persist 미들웨어는 상태를 JSON 형태로 저장하기 때문에, JSON으로 직렬화할 수 없는 함수는 저장하지 않아요. 따라서 serialize 옵션으로 상태만 저장하는 것이 좋습니다. 강의에서 serialize 가 아닌 partialize 로 설명해주셨는데, 이 부분 확인 부탁드립니다.
해결됨
한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
안녕하세요. 좋은 강의 잘 수강하고 있습니다! 다름이 아니라 포스트 삭제 후에 무한 스크롤이 작동하지 않는 문제가 발생했습니다. 문제 상황은 다음과 같습니다. 첫 페이지(다음 페이지의 데이터를 페칭하지 않은 상태)에서 작성한 포스트를 삭제 이후 페이지 최하단까지 스크롤 했지만 무한 스크롤 데이터 페칭이 이루어지지 않음 부족한 실력이라 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
안녕하세요. 좋은 강의로 Next.JS 수강을 마쳤습니다. 그런데 수업노트에 있는 강의 피드백 폼 링크가 엉뚱한 곳으로 연결 됩니다. https://forms.gle/MhvAagJvttQCtS1f6 링크 주소를 치고 들어가면 제대로 들어 접근하는데.. 링크를 클릭하면 다른 곳으로 연결됩니다. 수정이 필요합니다.
