묻고 답해요
137만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결Next + React Query로 SNS 서비스 만들기
position: fixed;를 top 속성 없이 사용이 가능한 이유
[제로초 강좌 질문 필독 사항입니다]질문에는 여러분에게 도움이 되는 질문과 도움이 되지 않는 질문이 있습니다.도움이 되는 질문을 하는 방법을 알려드립니다.https://www.youtube.com/watch?v=PUKOWrOuC0c0. 숫자 0부터 시작한 이유는 1보다 더 중요한 것이기 때문입니다. 에러가 났을 때 해결을 하는 게 중요한 게 아닙니다. 왜 여러분은 해결을 못 하고 저는 해결을 하는지, 어디서 힌트를 얻은 것이고 어떻게 해결한 건지 그걸 알아가셔야 합니다. 그렇지 못한 질문은 무의미한 질문입니다.1. 에러 메시지를 올리기 전에 반드시 스스로 번역을 해야 합니다. 번역기 요즘 잘 되어 있습니다. 에러 메시지가 에러 해결 단서의 90%를 차지합니다. 한글로 번역만 해도 대부분 풀립니다. 그냥 에러메시지를 올리고(심지어 안 올리는 분도 있습니다. 저는 독심술사가 아닙니다) 해결해달라고 하시면 아무런 도움이 안 됩니다.2. 에러 메시지를 잘라서 올리지 않아야 합니다. 입문자일수록 에러메시지에서 어떤 부분이 가장 중요한 부분인지 모르실 겁니다. 그러니 통째로 올리셔야 합니다.3. 코드도 같이 올려주세요. 다만 코드 전체를 다 올리거나, 깃헙 주소만 띡 던지지는 마세요. 여러분이 "가장" 의심스럽다고 생각하는 코드를 올려주세요.4. 이 강좌를 바탕으로 여러분이 응용을 해보다가 막히는 부분, 여러 개의 선택지 중에서 조언이 필요한 부분, 제 경험이 궁금한 부분에 대한 질문은 대환영입니다. 다만 여러분의 회사 일은 질문하지 마세요.5. 강좌 하나 끝날 때마다 남의 질문들을 읽어보세요. 여러분이 곧 만나게 될 에러들입니다.6. 위에 적은 내용을 명심하지 않으시면 백날 강좌를 봐도(제 강좌가 아니더라도) 실력이 늘지 않고 그냥 코딩쇼 관람 및 한컴타자연습을 한 셈이 될 겁니다. 안녕하세요 로초님! 강의 잘 보고 있습니다. 다름 아니라 position:fixed;는 뷰포트를 기준으로 레이아웃을 배치하게 만드는 속성값이라서, top, left, bottom, right 중 하나 이상을 써야 레이아웃이 정상적으로 된다고 알고 있는데, (afterLogin)/layout.module.tsx의 .leftSectionFixed와 .search에서는 top같은 거 없이도 의도한 대로(sticky처럼?) 기능하는 이유가 무엇인지 궁금합니다. 옛날에 제가 다른 프로젝트 만들었을 때는 fixed랑 top을 같이 안 써서 헤맨 적이 있어서, 앞으로는 top을 꼭 같이 써야겠다고 알고 있었고,지금 구글링 해서 fixed의 사용법을 찾아봐도 다들 top같은 걸 써야 한다고 말하고 있어서, 혹시 다른 사용법이 있는 건지 궁금해서 여쭈어봅니다. 답변 기다리겠습니다. 감사합니다:)
-
미해결Next + React Query로 SNS 서비스 만들기
브라우저에서 svg 태그 복사 시 왜 outerHTML로 복사 하나요?
특별한 이유가 있나요?
-
미해결Next + React Query로 SNS 서비스 만들기
Server Action에 대한 질문과 클라이언트 컴포넌트에서 ServerAction을 활용할 때의 장점이 궁금합니다.
선생님의 설명 덕분에 클라이언트 컴포넌트에서도 Server Action을 활용하는 방법을 알게 되었습니다. 하지만 몇가지 의문이 있는 상태입니다. ㅜㅜServer Action이라는 것이 클라이언트 컴포넌트에서 직접 DB에 접근하거나 별도의 브라우저에서 요청하지 않더라도 서버에 요청을 보내서 Prerendering 하는 방식이 맞을까요?그러면 보안 상의 장점도 가질 수 있고, 속도에도 개선이 생기는게 맞을까요?클라이언트 컴포넌트에서 Server Action을 사용하게 된다면 기존의 Server Action의 장점이 없어지는 것 같은데 사용하는 이유가 단순히 강의에서의 설명을 위함이신지 아니면 별도의 장점이 있으셔서 강의에 넣으실 계획을 하신 건지 궁금해서 질문남깁니다!
-
미해결Next + React Query로 SNS 서비스 만들기
MSW의 http.ts / browser.ts에 대해서 질문 있습니다!
제가 이해한 것이 맞는지 확인차 질문 남기게 되었습니다!MSW의 경우, service worker가 브라우저의 요청을 뺏어서 browser.ts로 요청을 전달하는 게 맞을까요?그렇다면 http.ts같은 경우는 서버 컴포넌트에서 서버로 요청을 보낼 때는 next 서버에서 요청을 보내고 난뒤의 데이터를 가지고 서버에서 미리 렌더링하기 때문에 이 요청을 mocking하기 위해 만들어두신 개념이 맞을까요?
-
해결됨Next + React Query로 SNS 서비스 만들기
generateMetadata에서 getSinglePostServer로 분리하신 이유가 있을까요?
안녕하세요! 강의 중간에 generateMetadata 를 사용하는 부분에서 왜 서버 api로 분리를 했는지에 대해 의문이 생겨서 질문드립니다.generateMetadata 에 사용할 getSinglePost 함수는 원래 아래와 같은 코드로 작성되어있었습니다. 여기서 generateMetadata 를 구현하실때, 기존의 getSinglePost 를 사용하시지 않고, getSinglePostServer 를 사용하셨는데 혹시 왜 이렇게 서버 API로 분리를 하셨는지 알 수 있을 까요? 처음에는generateMetadata 는 서버 환경에서 진행이 되기 때문에 서버에서 돌아가는 api를 작성해야 한다그렇기 때문에 credentials: 'include 를 사용하는 부분이 있다면 이는 클라이언트 환경에서만 적용이 되는 것이므로 headers: { Cookie: cookies().toString() } 를 사용해야 한다라고 저는 이해를 했었기 때문에 getSinglePost 대신 getSinglePostServer 로 분리를 하신거라고 생각했습니다. 근데 기존의 getSinglePost 는 애초에 인증 여부가 필요한 부분이 아니어서 credentials: 'include 는 없었는데 왜 강의에서getSinglePostServer로 따로 분리하시고 headers: { Cookie: cookies().toString() } 를 추가로 적용하셨는지 궁금합니다!
-
미해결Next + React Query로 SNS 서비스 만들기
클라이언트 컴포넌트 자식으로 서버 컴포넌트를 넣었을 때의 원리에 대해서 질문있습니다!
서버 컴포넌트가 프론트 서버에서 미리 렌더링되는 것으로 알고 있었습니다. 이것이 맞을까요??클라이언트 컴포넌트랑 서버 컴포넌트의 렌더링 방식을 찾아봤음에도 여전히 헷갈리는데 시간적 여유가 되신다면 쉽게 알려주실 수 있을까요??클라이언트 컴포넌트 사이에 서버 컴포넌트를 넣으면 렌더링 동작이 어떻게 수행되는지 궁금합니다.강좌에서는 PostArticle이라는 클라이언트 컴포넌트의 자식으로 서버컴포넌트를 넣는데, 공식문서에서는 클라이언트 컴포넌트가 DOM Tree의 끝에 오도록 하는 것을 권장하는 것으로 알고 있었는데 제가 잘못 알고 있던 것이었을까요??
-
해결됨Next + React Query로 SNS 서비스 만들기
Package path ./browser is not exported from package...모듈을 찾을수 없다는 문구가 발생합니다.
안녕하세요~ 양질의 강의 잘 수강중입니다.https://github.com/mswjs/msw/issues/1801 종종 발생하는 이슈 같은데 (제로초님 코멘트도 있네요!) 저도 제로초님 코드 그대로 따라해보았지만 해당 이슈가 계속 발생하네요ㅠㅠ어떤 문제 때문인지 감이 잘 잡히지 않는데 MSW를 다운그레이드 하는 방법 밖에 없을까요? 조언 부탁드립니다ㅠ
-
미해결Next + React Query로 SNS 서비스 만들기
Error: CredentialsSignin
백엔드소스 받아 로컬에 서버 가동시켰고, 레디스 서버도 켜두었고강사님이 올려주신 클라이언트 ch4소스에서 실행시켜, 회원가입 도중 에러가 발생합니다. postresql 디비에는 정상적으로 회원정보가 등록되긴 하였습니다만, 프론트에서 아래와 같은 에러가 있는데요원인이 무엇일까요? Error: CredentialsSignin at signIn (webpack-internal:///(action-browser)/./node_modules/next-auth/lib/actions.js:62:22) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async $$ACTION_0 (webpack-internal:///(action-browser)/./src/app/(beforeLogin)/_lib/signup.ts:53:9) at async /Users/yhj/Desktop/yhj_projects/next-app-router-z-master/ch4/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:38:489 at async tX (/Users/yhj/Desktop/yhj_projects/next-app-router-z-master/ch4/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:37:5313) at async rl (/Users/yhj/Desktop/yhj_projects/next-app-router-z-master/ch4/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:38:23339) at async doRender (/Users/yhj/Desktop/yhj_projects/next-app-router-z-master/ch4/node_modules/next/dist/server/base-server.js:1406:30) at async cacheEntry.responseCache.get.routeKind (/Users/yhj/Desktop/yhj_projects/next-app-router-z-master/ch4/node_modules/next/dist/server/base-server.js:1567:28) at async DevServer.renderToResponseWithComponentsImpl (/Users/yhj/Desktop/yhj_projects/next-app-router-z-master/ch4/node_modules/next/dist/server/base-server.js:1475:28) at async DevServer.renderPageComponent (/Users/yhj/Desktop/yhj_projects/next-app-router-z-master/ch4/node_modules/next/dist/server/base-server.js:1852:24) at async DevServer.renderToResponseImpl (/Users/yhj/Desktop/yhj_projects/next-app-router-z-master/ch4/node_modules/next/dist/server/base-server.js:1890:32) at async DevServer.pipeImpl (/Users/yhj/Desktop/yhj_projects/next-app-router-z-master/ch4/node_modules/next/dist/server/base-server.js:902:25) at async NextNodeServer.handleCatchallRenderRequest (/Users/yhj/Desktop/yhj_projects/next-app-router-z-master/ch4/node_modules/next/dist/server/next-server.js:266:17) at async DevServer.handleRequestImpl (/Users/yhj/Desktop/yhj_projects/next-app-router-z-master/ch4/node_modules/next/dist/server/base-server.js:798:17)
-
미해결Next + React Query로 SNS 서비스 만들기
안녕하세요 (.)에 관해 질문이 있습니다
[제로초 강좌 질문 필독 사항입니다]질문에는 여러분에게 도움이 되는 질문과 도움이 되지 않는 질문이 있습니다.도움이 되는 질문을 하는 방법을 알려드립니다.https://www.youtube.com/watch?v=PUKOWrOuC0c0. 숫자 0부터 시작한 이유는 1보다 더 중요한 것이기 때문입니다. 에러가 났을 때 해결을 하는 게 중요한 게 아닙니다. 왜 여러분은 해결을 못 하고 저는 해결을 하는지, 어디서 힌트를 얻은 것이고 어떻게 해결한 건지 그걸 알아가셔야 합니다. 그렇지 못한 질문은 무의미한 질문입니다.1. 에러 메시지를 올리기 전에 반드시 스스로 번역을 해야 합니다. 번역기 요즘 잘 되어 있습니다. 에러 메시지가 에러 해결 단서의 90%를 차지합니다. 한글로 번역만 해도 대부분 풀립니다. 그냥 에러메시지를 올리고(심지어 안 올리는 분도 있습니다. 저는 독심술사가 아닙니다) 해결해달라고 하시면 아무런 도움이 안 됩니다.2. 에러 메시지를 잘라서 올리지 않아야 합니다. 입문자일수록 에러메시지에서 어떤 부분이 가장 중요한 부분인지 모르실 겁니다. 그러니 통째로 올리셔야 합니다.3. 코드도 같이 올려주세요. 다만 코드 전체를 다 올리거나, 깃헙 주소만 띡 던지지는 마세요. 여러분이 "가장" 의심스럽다고 생각하는 코드를 올려주세요.4. 이 강좌를 바탕으로 여러분이 응용을 해보다가 막히는 부분, 여러 개의 선택지 중에서 조언이 필요한 부분, 제 경험이 궁금한 부분에 대한 질문은 대환영입니다. 다만 여러분의 회사 일은 질문하지 마세요.5. 강좌 하나 끝날 때마다 남의 질문들을 읽어보세요. 여러분이 곧 만나게 될 에러들입니다.6. 위에 적은 내용을 명심하지 않으시면 백날 강좌를 봐도(제 강좌가 아니더라도) 실력이 늘지 않고 그냥 코딩쇼 관람 및 한컴타자연습을 한 셈이 될 겁니다. 안녕하세요질문은 인터셉팅라우트의 (.)i폴더 입니다 @modal이 주소에 관계없기때문에(beforeLogin)의 i/flow/login를 대체할 수 있다고 하셨는데요 (beforeLogin)도 주소와 관계가 없다고 하셨어서 (.)i가 무엇을 기준으로 대체하는 것인지 헷갈립니다. 또한 @modal의 경우에는 @modal/i/flow/login과 같이 연결되는 주소가 있어보여서 (.), (..)등의 인터셉팅라우트의 키워드가 무엇을 기준으로 하는지 명확하게 이해가 안됩니다
-
해결됨Next + React Query로 SNS 서비스 만들기
안녕하세요, react-query 관해서 궁금해서 질문드립니다.
react-query의 쓰임새가 잘 이해가 안가서 질문드립니다.1. 컴포넌트가 server component 일때는 react-query에 prefetchQuery를 사용하여 미리 서버에서 데이터를 가져오고 dehydrate를 통하여 클라이언트에 전송할수있는 형태로 만들어주고,HydrationBoundary 로 감싸여진 클라이언트 컴포넌트는 서버에서 미리 가져온 데이터를 클라이언트의 쿼리 캐시에 적용하여, getQueryData를 사용하여 네트워크 요청 없이 데이터를 가져올수있고,useQuery 같은 경우에는 미리 가져온 데이터 외에 클라이언트에서 데이터를 가져올 때 사용하는 걸로 이해했습니다. 맞을까요??2. queryKey 같은 경우에는 queryFn에 있는 함수에 queryKey를 넘기는 경우가 있고 안넘기는 경우가 있던데 강의에서 props에 따라 키가 바뀌는 경우에만 넘기게 된다고 이해했습니다.그러면 server component에서 모든걸 prefetchQuery 해서 getQueryData 로 가져다 쓰지 않는 이유가 useQuery를 이용해서 key 값을 다이나믹하게 바뀌는 요청들을 컨트롤 하기 위해서라고 생각이 들었습니다.하지만 아래와 같이 queryKey를 넘기지 않는 경우에도 useQuery를 사용하는데 prefetchQuery를 해놓고 getQueryData 를 사용할지, prefetchQuery 를 사용하지않고 useQuery를 사용할지 에 대해서 나누는 기준이 있을까요?const { data } = useQuery<Hashtag[]>({ queryKey: ["trends"], queryFn: getTrends, staleTime: 60 * 1000, gcTime: 300 * 1000, enabled: !!session?.user, });
-
해결됨Next + React Query로 SNS 서비스 만들기
스웨거 명세서와 다르게 반환되는 것 같은데 어느 부분을 수정해야 할지 모르겠습니다
안녕하세요 강사님!optimistic update 관련 강의를 듣던 도중에 API반환값이스웨거에 명시된 부분과 다르게 반환이 되는 것 같아서 질문드립니다! 현재 id값을 기반으로 한 유저 정보 api에 대한 명세가스웨거에 명시된 바로는 Follwers 배열이 있어야 하는데이상하게 브라우저에서는 Follwers 배열 속성이 누락되어 있습니다..유저 정보를 가져오는 api를 호출하는 코드입니다혹시 MSW에서 백엔드 API를 사용하게 될 때 다른 설정도 추가해줘야 하는 것이 있나요?
-
미해결Next + React Query로 SNS 서비스 만들기
로그인시 CallbackRouteError
강사님~ 챕터 3-2 올려주신 소스에서도 갑자기 CallbackRouteError 가 발생하네요.지난주까지는 이상없이 동작했는데요...확인 좀 부탁드려요 [auth][error][CallbackRouteError]: Read more at https://errors.authjs.dev#callbackrouteerror[auth][cause]: TypeError: fetch failed at Object.fetch (node:internal/deps/undici/undici:11576:11) at process.processTicksAndRejections (node:internal/process/task_queues:95:5)[auth][details]: { "errno": -61, "code": "ECONNREFUSED", "syscall": "connect", "address": "::1", "port": 9090, "provider": "credentials"
-
해결됨Next + React Query로 SNS 서비스 만들기
POST 요청 시 {"statusCode":500,"message":"Internal server error"}가 발생합니다ㅠ
안녕하세요! '서버 쿠키 공유하기 & 게시글 업로드 완성' 강의에서 백엔드 전용 토큰을 생성하고 난 다음에 발생하는 에러가 있습니다. 현재 connect.sid는 잘 받아와 졌고 게시글과 사진을 올린 다음에 게시하기를 누르게 되면 강사님과 다르게{"statusCode":500,"message":"Internal server error"} 가 발생합니다 서버쪽 에러로그는 다음과 같습니다 제가 백엔드쪽은 아예 몰라서... 혹시 추가로 첨부해야 할 코드가 있다면 말씀해주시면 감사하겠습니다
-
미해결Next + React Query로 SNS 서비스 만들기
Next.js호환 CSS 관련 문의
안녕하세요. 제로초님. 질문 많이 드려서 죄송합니다.아마 마지막 질문이 될 것 같아요. 강의에서 CSS-in-JS 라이브러리와 Next의 호환성 문제를 언급해주셨음에도 불구하고, styled-componets로 진행을 하다가 문제점을 깨닫고 멈춘 상태입니다.제가 꾸역꾸역 styled-componets 써보려고 한 이유는 다음과 같았습니다.프로젝트를 마이그레이션 하는 과정에서 라이브러리를 바꾸게 됐을 때의 비용이 너무 많이 발생한다고 판단함.Next에도 babel, swc 등의 설정 파일을 추가 하면 사용할 수 있다는 글들이 구글링에 많이 보였기 때문에, '이제 업데이트 돼서 가능한가?' 싶었음. 하지만 결론적으로 layout.tsx, page.tsx 파일에도 스타일이 들어가지 않을 수 없었고, use client로 떡칠된 프로젝트가 되어서 next.js를 사용하는 의미를 잃었습니다.서론이 길었습니다. 위와 같은 이유로 아래 내용 질문드립니다.styled-component가 된다고 우기는 블로그들은 다 ssr의 이점을 버리고 사용중인 거라고 보면될까요?채용공고에서 next와 styled-component를 동시에 요구하는 공고는 두 개를 같이 쓰고 있는 곳일까요?현실적으로 next와 함께 쓰일만한 라이브러리는 유명한 라이브러리 중에서 postCSS, SASS 가 전부인가요?
-
미해결Next + React Query로 SNS 서비스 만들기
webstorm 테마 어떤거 사용하시나요?
저도 webstorm 사용하는데 영상에 사용하신 테마가 궁금합니다!!!
-
해결됨Next + React Query로 SNS 서비스 만들기
Next 기본 내장 loading.tsx 의 기능에 대한 질문이 있습니다!
안녕하세요!'Suspense로 Streaming하여 최적화하기(feat. loading.tsx, error.tsx)' 강의를 듣던 도중 갑자기 궁금한 것들이 생겨서 이렇게 질문드립니다! “ /home은 서버컴포넌트여서 서버에서 다 그려서 보내주기 때문에초기 로딩 자체가 존재하지 않는다. 그러므로 /home에서 새로고침을 해도 loading.tsx 가 적용되지 않는다그렇지만 /explore에서 ‘새로고침 하고’ /home이라는 페이지로 넘어가면 /explore에서 /home페이지를 새로 로딩한다. 그래서 loading.tsx 가 적용된다 ”라고 말씀하셨는데 여기서‘/explore에서 새로고침을 하고난 다음에 /home페이지로 가면 해당 페이지를 새로 로딩한다’ 는 개념이 무슨 말씀이신가요? 이와 관련된 Next.js 의 개념 키워드가 있을까요? “첫 페이지를 로딩 할 때 서버에서 미리 로딩된 것을 불러오기 때문에 Next에서 구성해주는 loading.tsx나, 리액트 쿼리에서 사용하는 isPending둘 다 의미가 없다. Next에서 첫 페이지의 데이터는 서버에서 전부 로딩하고 이걸 가져다 쓰기 때문이다“라고 하셨는데 여기서 첫 페이지가 정확히 무엇을 의미하는 것인가요?최초 렌더링인지, 새로고침 이후 접근하는 페이지인지, 아니면 다른 페이지를 갔다가 그대로 다시 돌아오면 그것도 첫페이지가 되는 것인지 헷갈립니다ㅠㅠ (Next의 Streaming with Suspense 를 사용하기 전 내용입니다) API에 await delay(3000) 를 사용했을 때,prefetchInfiniteQuery를 사용한 PostRecommends.tsx 에서는리액트 쿼리의 isPending은 적용되지 않지만, loading.tsx로 지정한 로딩 스피너는 보여집니다.loading.tsx로 지정한 로딩 스피너가 보여질 때, 어쨌든 prefetchInfiniteQuery 를 통해 서버측에서 미리 데이터를fetch할 때 API를 사용할텐데 이 때 API에 await delay(3000)가 있음에도loading.tsx는 항상 await delay(3000)와 관계없이 아주 짧은 시간동안만 (거의 0.5초?) 나타나는데 이는 왜 그런가요?최소 이 때 역시 API 호출로 인해 delay(3000)가 작동되면 3초 이상이 걸려야하는게 맞지 않나요?이는 혹시 prefetchInfiniteQuery가 컴포넌트가 마운트 되기 전에 미리데이터를 받아놓기 때문에 dealy(3000)이 직접적으로 체감되지 않기 때문인가요?
-
해결됨Next + React Query로 SNS 서비스 만들기
현업에서 사용하는 마이그레이션 방식 문의
안녕하세요 제로초님, 강의 완강했습니다.덕분에 많은 지식 얻었었습니다. 감사합니다.이제 여기서 배운 내용을 바탕으로 제 리액트 프로젝트 하나를 next로 마이그레이션 해보려고 합니다.마이그레이션이 처음이라 막상하려고하니, 폴더 구조가 완전히 바뀌고, 거의 모든게 달라지기 때문에 어떻게 마이그레이션을 시작해 나갈지 의문이 듭니다. 구글링에서도 뚜렷하게 방법을 설명해주는 글이 보이지 않아 문의 드립니다.질문1. 기존 프로젝트는 git-flow 전략을 통해 v1.0.0까지 배포를 마친상태입니다. 마이그레이션을 해서 v2.0.0로 배포를 하면 좋을 것 같은데, 기존 develop 브랜치에서 feature/next-migration 브랜치를 따서 작업하는게 좋을까요?질문2. next를 설치하는 순간 많은 설정이 달라져서, 기존 코드 파일들을 그대로 두면 npm start시 에러가 날 것 같습니다. 현업에서는 기존 파일을 다 삭제하고 next의 디렉토리 구성을 만들어 놓은 다음에 다른 브랜치에서 코드를 복사해와서 재작성을 하나요? 아니면 다른 좋은 방법이 있나요?
-
미해결Next + React Query로 SNS 서비스 만들기
next aws s3 가능 여부 문의
혹시 aws s3로는 배포가 불가능 할까요??
-
미해결Next + React Query로 SNS 서비스 만들기
/login 라우팅시 발생하는 컴포넌트 업데이트 오류
Warning: Cannot update a component (`Router`) while rendering a different component (`RedirectLoginPage`). To locate the bad setState() call inside `RedirectLoginPage`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render at RedirectLoginPage (webpack-internal:///(app-pages-browser)/./src/app/(beforeLogin)/login/page.tsx:15:78) at StaticGenerationSearchParamsBailoutProvider (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/static-generation-searchparams-bailout-provider.js:15:11) at InnerLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:240:11)로그인 버튼 클릭시 '/login' 이동하면 이런 Warning 이 발생하는데 빌드시에도 Error occurred prerendering page "/login". Read more: https://nextjs.org/docs/messages/prerender-error ReferenceError: location is not defined위 같은 에러가 발생합니다. location을 사용하는 부분도 없고, useRouter도 'next/navigation' 에 있는 것을 사용중입니다. 해결법으로는 useEffect로 감싸주는 법이 있어 useEffect((router.replace(path)) => []) 이런방식으로 해봤는데 오류는 해결되네요.하지만 오류 내용대로 해석해보면 렌더링 도중 set을 통한 상태변화를 하지 않는데 오류가 나는 이유는 뭔가요? return 으로 Main 컴포넌트를 그려주어야하는데 replace시 LoginModal의 컴포넌트를 그려주어야해서 렌더링해야할 컴포넌트가 겹쳐서 발생하는 문제인가요?
-
미해결Next + React Query로 SNS 서비스 만들기
섹션3 마지막 강의. suspense 관련 간단 질문입니다.
안녕하세요 강의 잘 듣고있습니다 제로초님! 질문 한 가지 있습니다!섹션3 마지막 강의 suspense 관련 간단 질문입니다.검색 엔진이 로딩화면을 긁어가서 SEO가 안 좋아지는 것을 막기위해서 preFetchInfiniteQuery를 통해 SSR를 구현해야한다고 하셨는데, 마지막에 알려주신 post 목록에 suspense로 따로 로딩을 구현한 부분은 검색 엔진에 감지 되나요? 만약에 감지가 되지 않는다면 가장 중요한 게시물의 내용이 안보이게되는 셈이 될텐데 괜찮나요?