172만명의 커뮤니티!! 함께 토론해봐요.
해결됨
[VOD] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)
안녕하세요. 강사님. 다름이 아니라 1)커서룰을 종종 커서가 찾지 못하는 경우가 발생해서 매번 커맨드 창에 직접 @으로 명시를 해주는 상황이 발생됩니다. 프롬프트 문장에 조건 커서룰) @01-common.mdc 명시된 이 부분을 찾지 못하더라구요. 2)추가로 프롬프트 파일 화면 우클릭 후 new Chat 하면 해당 파일을 참조로 물고가면 좋겠는데 강의와는 다르게 참조가 누락되어 이것도 매번 드래그해서 참조를 걸어줍니다. 그에 대한 강사님만에 팁이 있을까요?
미해결
한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
말그대로 input 입력시 리스트가 리렌더링 되는거로 데브툴에서 보이는데 리스트 리렌더링이 안되게 하려면 어떻게 해야 하나요? 일전 한입리액트에서는 contextApI를 사용해서 그런가 생각을 하고 넘어갔었는데 지금도 동일하네요.
미해결
한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
강의 28:25 정도에 컨텐츠 부분 테일윈드 클래스 설정에 오타인지 확인해 주세요. break-words 가 word-break 를 표기한 건 가요? 아니면 테일윈드 버전에 따른 클래스 네임 변경인가요? {/* 2-1. 컨텐츠 */} <div className="line-clamp-2 break-words whitespace-pre-wrap"> {post.content} </div> 그리고 좋아요 버튼, 댓글 버튼 부분 에서 border-1 도 border 로 수정해야 할 듯 합니다. border 의 1은 단위를 생략하는 것으로 압니다.
미해결
타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게
todoListItem을 React.memo로 메모이제이션 했음에도 todo를 추가했을때 리렌더링이 되는데 이때 todo 자체는 변한것이 아니고 todolist 컴포넌트에서 map으로 쓰고있기 때문에 전달받은 props가 변해서 리렌더링이 된것은 아니다 라고 하셨는데 그러니까 리스트아이템에서는 todo 배열 전체를 받은것이 아니고 todolist 컴포넌트에서 map으로 배열의 요소(객체)를 todolisitem에서 props로 전달받았기때문에 todo가 변한것이 아니다 이렇게 이해했는데 정확한 이해인지 궁금합니다
미해결
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 지원이 가능하다, 대신 파일 경로를 수정해주어야 한다는 차이가 있던데, 관련해서 혹시 추가 차이점이나 주의사항이 있는지 궁금합니다. 좋은 강의 감사합니다!
