inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

172만명의 커뮤니티!! 함께 토론해봐요.

[그랩님께,Ngrok 악성코드 인식 해결방법]질문 드립니다.

해결됨

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

그랩님, 강의 잘 듣고 있습니다. Ngrok에러 가 앞전에 이어 지금도 있어서 처음부터 다시 시작해보려고 윈도우 크롬 다운로드 파일에서 다운로드한 Ngrok파일을 삭제 후 다시 https://ngrok.com/download/windows?tab=download 에 들어가서 다운로드 후 압축을 풀려고 하는데, 이것을 컴퓨터 알약 프로그램이 아래 첨부한 사진처럼 악성 코드로 분류해서 치료할 것인지 프로그램이 물어봐서 제가 치료하기 누르는 순간 결국 삭제되어서 Ngrok 진행을 하지 못하고 있습니다. 왜 예전에는 다운로드 할 시에는 악성코드 문제 이슈가 전혀 없었 는데요, 지금은 아래와 같은 첨부 사진 처럼 뜨기에 혹시나 보안에 취약해지면 컴퓨터가 잘못 될 수도 있을 것 같아서 이것을 제대로 알고 시도 해 봐야 될 것 같아 질문을 다시 드리게 되었습니다. 아래는 ngrok 가서 다운 받은 [다운로드 폴더] 스샷 입니다. 아래는 ngrok 다운 받은 파일 실행 후 스샷 입니다. 마지막 사진은 ngrok 다운로드 받고 압축 해재하려면 아래와 같이 뜨는 스샷입니다. 질문 요약 : ngrok 다운 받으면 알약에서 악성코드로 인지 해서 악성코드 치료 하면 ngrok.exe가 지워집니다 . 어떻게 해야하나요? 그냥 치료 안하고 설치해도 되는 건가요? 이렇게 그냥 치료 안하고 진행해도 해킹 문제 나 보안 문제가 발생하지 않을까 걱정 이 들어서 전문가이신 그랩님께 여쭈어 봅니다. 빠른 답변 부탁 드립니다.

  • HTML/CSS
  • javascript
  • react
  • node.js
  • react-native
  • 머신러닝
  • express
  • tensorflow
isbcom1004 댓글 2 좋아요 0 조회수 291

깃에 소스코드를 찾을 수 없습니다.

미해결

Next + React Query로 SNS 서비스 만들기

36강을 보고 소스코드를 가져오려고 하는데 깃에 src/app/(beforeLogin)/@modal/(.)i/flow/signup/page.tsx 파일을 업데이트하려고하는데 깃에는 강의와 다른 코드가 올라와있습니다. 3-1 코드에도 그렇고 완성 코드도 <난 가로채기지롱> 이 코드만 나와있는데 어디서 찾을 수 있나요?

  • react
  • next.js
  • react-query
  • next-auth
  • msw
김영제 댓글 2 좋아요 0 조회수 153

.

미해결

React Native with Expo: 제로초에게 제대로 배우기

.

  • react
  • react-native
  • 하이브리드-앱
  • typescript
  • expo
이영훈 댓글 2 좋아요 0 조회수 112

8.1-6강의 수강중 init에 대한 질문입니다.

해결됨

The 10x AI-Native Developer: 회사에서 AI로 압도적 성과를 내는 법

[진도] 1주차 6강 실습중 [질문] blog 프로젝트를 처음 /init 하였을때 claude.md 파일에 약 690줄이 생성되는데 claude 버전이 2.5로 업그레이되서 강의와 다른건가요? 아니면 제가 다른 모드를 쓰고 있어서 그럴까요? 과도하게 많이 토큰을 소비하고 있나 궁금하여 질문드립니다. 어떻게 해결하면 될까요?

  • claude
카이 댓글 2 좋아요 0 조회수 106

커서룰을 종종 찾지 못하는 경우

해결됨

[VOD] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)

안녕하세요. 강사님. 다름이 아니라 1)커서룰을 종종 커서가 찾지 못하는 경우가 발생해서 매번 커맨드 창에 직접 @으로 명시를 해주는 상황이 발생됩니다. 프롬프트 문장에 조건 커서룰) @01-common.mdc 명시된 이 부분을 찾지 못하더라구요. 2)추가로 프롬프트 파일 화면 우클릭 후 new Chat 하면 해당 파일을 참조로 물고가면 좋겠는데 강의와는 다르게 참조가 누락되어 이것도 매번 드래그해서 참조를 걸어줍니다. 그에 대한 강사님만에 팁이 있을까요?

  • react
  • next.js
  • cursor
  • 프롬프트엔지니어링
  • 바이브코딩
이동규 댓글 2 좋아요 0 조회수 121

input 입력시 리스트 리렌더링 질문입니다.

미해결

한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편

말그대로 input 입력시 리스트가 리렌더링 되는거로 데브툴에서 보이는데 리스트 리렌더링이 안되게 하려면 어떻게 해야 하나요? 일전 한입리액트에서는 contextApI를 사용해서 그런가 생각을 하고 넘어갔었는데 지금도 동일하네요.

  • react
  • typescript
  • react-query
  • supabase
  • zustand
조민영 댓글 2 좋아요 1 조회수 75

tailwind css 클래스 네임 오타인가요?

미해결

한 입 크기로 잘라먹는 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
  • typescript
  • react-query
  • supabase
  • zustand
Codingbear 댓글 2 좋아요 1 조회수 121

158번 강의 질문입니다

미해결

타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게

todoListItem을 React.memo로 메모이제이션 했음에도 todo를 추가했을때 리렌더링이 되는데 이때 todo 자체는 변한것이 아니고 todolist 컴포넌트에서 map으로 쓰고있기 때문에 전달받은 props가 변해서 리렌더링이 된것은 아니다 라고 하셨는데 그러니까 리스트아이템에서는 todo 배열 전체를 받은것이 아니고 todolist 컴포넌트에서 map으로 배열의 요소(객체)를 todolisitem에서 props로 전달받았기때문에 todo가 변한것이 아니다 이렇게 이해했는데 정확한 이해인지 궁금합니다

  • react
  • react-router
  • redux-toolkit
  • zustand
  • react.js
홍재훈 댓글 2 좋아요 0 조회수 57

프롬프트를 실행 시키면 md 파일로 만들어지는데

해결됨

[VOD] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)

안녕하세요. 다름이 아니라 프롬프트를 실행 할 경우 매번 md 파일로 만들어져서 루트 디렉토리에 쌓이게 되더라구요. 이게 많아지면서 뭔가 자꾸 컨텍스트를 들고 가는지 요구사항을 제대로 못지키는 현상이 발생되는 것 같아 md-files를 만들고 옮겨두었더니 이젠 거기에 md 파일을 생성합니다. 이럴 경우 컨텍스트가 늘어나 원하는 프롬프트 요구사항을 제대로 이행하지 못하는게 맞을까요? 강사님이라면 해당 md 파일 생성은 하지말라는 프롬프트를 추가하셨을까요?

  • react
  • next.js
  • cursor
  • 프롬프트엔지니어링
  • 바이브코딩
이동규 댓글 2 좋아요 0 조회수 249

제공 코드 eslint.config.js 파일 질문

미해결

한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편

선생님 제공 자료 eslint.config.js 파일에서 아래 코드로 작성되어 있는데 no-explicit-any 규칙이 오타난 걸까요? 강의는 2:40 쯤입니다 "@typescript-eslint/no-explicity-any": "off",

  • react
  • typescript
  • react-query
  • supabase
  • zustand
우잉 댓글 1 좋아요 2 조회수 80

중복 회원가입

미해결

한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편

이미 가입된 이메일로 다시 회원가입 시도하면 강의에서는 400 오류?가 발생하는데 저는 오류는 발생하지 않고 response에서 session 부분만 null 로 오는데 빠진 설정이 있을까요?

  • react
  • typescript
  • react-query
  • supabase
  • zustand
댓글 2 좋아요 0 조회수 98

'쿼리키 관리의 필요성' 도입부 설명에 대한 보충설명 필요

미해결

한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편

안녕하세요, 선생님. 강의 너무 잘 듣고 있습니다! 강의 수강 중 이해가 되지 않는 부분이 있어 질문남깁니다. 질문부분: (4.7) 캐시 데이터 다루기 1 (8:05~) 질문내용: " ['todos'] 에 대해 쿼리 무효화할 경우 ['todos', id] 쿼리키에 대해서도 불필요하게 리페칭이 수행된다." 부분이 잘 이해가 가질 않습니다. 구글링하고 챗지피티에 물어본 결과, 두 개는 각각 다른 쿼리키 배열로 판정될 거라고 생각했습니다. 따라서 앞선 내용의 '리페칭'은 수행되지 않을 것이라고 예상했습니다. 제가 어느 부분을 놓치고 있는지 보충 설명 해주시면 감사하겠습니다:)

  • react
  • typescript
  • react-query
  • supabase
  • zustand
wonza4372 댓글 2 좋아요 0 조회수 86

회원가입 구현 관련 질문

미해결

한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편

관련 섹션: 42. (6.2) 회원가입 구현하기 질문 내용 회원가입 요청을 보냈을 때 반환되는 data 객체 안에 user 값은 있는데, session 값이 null입니다. 강의에서 알려주신 대로 진행했고, 한 가지 다르게 진행한 부분은 Supabase 이메일 세부옵션에 'Confirm email'이 존재하지 않아 이 부분만 off 처리를 하지 못했습니다. 회원가입 요청을 보내면 반드시 data 객체 안에 session값까지 포함되어야 할까요?

  • react
  • typescript
  • react-query
  • supabase
  • zustand
댓글 3 좋아요 1 조회수 102

useInfiniteQuery promise와 react use 사용시 페이지 무한 로딩

미해결

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, }, }, }) 무한 로딩 시 개발자 도구 캡쳐이미지입니다.

  • react
  • next.js
  • react-query
  • next-auth
  • msw
변재정 댓글 1 좋아요 0 조회수 124

useInfiniteQuery promise와 react use 사용시 페이지 무한 로딩

미해결

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, }, }, }) 무한 로딩 시 개발자 도구 캡쳐이미지입니다.

  • react
  • typescript
  • next.js
변재정 댓글 1 좋아요 0 조회수 81

api 테스트용 curl 생성 오류

해결됨

1시간만에 Chat GPT 클론 with Cursor (원데이 클래스)

영상처럼 curl -X POST로 시작하는 명령어가 아닌, 다른 명령어가 나오는 거 같습니다. 어떤 점이 문제일까요? 포트는 3001으로 수정된 상태입니다.

  • react
  • typescript
  • tailwindcss
  • nextjs
  • chatgpt
forever1542 댓글 3 좋아요 0 조회수 145

https://localhost:3000/ 링크가 안열려요

미해결

1시간만에 Chat GPT 클론 with Cursor (원데이 클래스)

안녕하세요 클론 코딩 인강을 듣고 있는 대학생입니다. 다름이 아니라, 제목처럼 localhost 사이트에 접속하는 것이 제한되어 이렇게 문의드립니다. 위와 같이 연결할 수 없다는 에러가 발생하여 이에 대한 해결방법이 궁금합니다! 우선 현재 사용중인 랩탑의 프록시 설정 및 방화벽은 별도로 활성화하고 있지 않습니다.

  • react
  • typescript
  • tailwindcss
  • nextjs
  • chatgpt
forever1542 댓글 1 좋아요 0 조회수 560

.

미해결

React Native with Expo: 제로초에게 제대로 배우기

.

  • react
  • react-native
  • 하이브리드-앱
  • typescript
  • expo
이영훈 댓글 2 좋아요 0 조회수 129

강의 예제 관련해서 질문이 있습니다.

해결됨

한 입 크기로 잘라 먹는 리액트(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()가 실행이 종료되어 그런걸까요..? 실행 순서가 잘 이해가 되지 않아 질문 남깁니다...!

  • javascript
  • react
  • node.js
Lucy 댓글 3 좋아요 1 조회수 103

인기 태그

인프런 TOP Writers

주간 인기글