안녕하세요! '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로 마이그레이션 해보려고 합니다. 마이그레이션이 처음이라 막상하려고하니, 폴더 구조가 완전히 바뀌고, 거의 모든게 달라지기 때문에 어떻게 마이그레이션을 시작해 나갈지 의문이 듭니다. 구글링에서도 뚜렷하게 방법을 설명해주는 글이 보이지 않아 문의 드립니다. 질문1. 기존 프로젝트는 git-flow 전략을 통해 v1.0.0까지 배포를 마친상태입니다. 마이그레이션을 해서 v2.0.0로 배포를 하면 좋을 것 같은데, 기존 develop 브랜치에서 feature/next-migration 브랜치를 따서 작업하는게 좋을까요? 질문2. next를 설치하는 순간 많은 설정이 달라져서, 기존 코드 파일들을 그대로 두면 npm start시 에러가 날 것 같습니다. 현업에서는 기존 파일을 다 삭제하고 next의 디렉토리 구성을 만들어 놓은 다음에 다른 브랜치에서 코드를 복사해와서 재작성을 하나요? 아니면 다른 좋은 방법이 있나요?
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의 컴포넌트를 그려주어야해서 렌더링해야할 컴포넌트가 겹쳐서 발생하는 문제인가요?
안녕하세요 강의 잘 듣고있습니다 제로초님! 질문 한 가지 있습니다! 섹션3 마지막 강의 suspense 관련 간단 질문입니다. 검색 엔진이 로딩화면을 긁어가서 SEO가 안 좋아지는 것을 막기위해서 preFetchInfiniteQuery를 통해 SSR를 구현해야한다고 하셨는데, 마지막에 알려주신 post 목록에 suspense로 따로 로딩을 구현한 부분은 검색 엔진에 감지 되나요? 만약에 감지가 되지 않는다면 가장 중요한 게시물의 내용이 안보이게되는 셈이 될텐데 괜찮나요?
섹션4 2번째 강의 내용입니다. 회원가입 진행시에 home으로 redirect 되지 않아 문제를 파악중에 네트워크탭에서 대기중인 상태가 지속되는 것을 확인했습니다. db에는 user data가 정상적으로 들어온 것을 확인했습니다. 어디 잘못된 부분이 있나 싶어 강사님 코드를 그대로 복사해서 다시 실행 해 보았지만 안되고 있는데 혹시 짐작 가시는 부분 잇으실까요. 회원가입 버튼을 누른후에 x 버튼도 되지 않고 있습니다.
안녕하세요 제로초님 소중한 강의 감사히 보고있습니다. 다름이 아니라 강의를 잘 이해하다가 Server action 부터 잘 와닿지가 않아서 질문드립니다. SignupModal.tsx 를 server component로 변경하는 과정을 보고있는데요. 리액트에서는 input 태그의 입력값을 useState와 onChange로 관리하지 하지 않으면, "A component is changing an uncontrolled input to be controlled" 와 같은 에러를 띄웠기 때문에 모든 input 값은 useState를 통해 관리하는게 바람직하다고 생각해왔습니다. 리액트 기반으로 동작하는 next도 당연히 그럴 줄 알았습니다. 그런데 센세이셔널하게 server action에서 그게 통째로 사라져 버리니 매우 혼란스럽습니다. 단지 서버 컴포넌트로 바뀌었기 때문에 없어져도 상관없는건가요? input태그 입력은 데이터가 실시간으로 입력되는 과정이니까 클라이언트 컴포넌트에서 이루어지는게 맞다고 생각을 해와서그런지 쉽게 받아들여지지 않습니다. 또한 말씀하신 방법을 사용했을 때, 만약 입력값 유효성 검사에 있어서 단순히 입력 유무를 확인하는 required 속성 말고도, 입력값을 실시간으로 체크해 유효성 검사 결과를 로직(ex) '사용할 수 있는/없는 비밀번호입니다'를 실시간으로 보여주는 helperText )같은 경우는 구현이 불가능한게 되는 것인지 궁금합니다. 모든 컴포넌트를 다 sever action을 활용하는 방식으로 바꾼다면, useState는 사용될 일이 거의 없어지는 건가요..?
브라우저 콘솔에 Image with src "/_next/static/media/zlogo.f72788b6.png" was detected as the Largest Contentful Paint (LCP). Please add the "priority" property if this image is above the fold.Read more: https://nextjs.org/docs/api-reference/next/image#priority 와 같은 warning이 뜨길래 공식문서와 블로그 글을 참고해 봤는데 이미지 로딩의 우선권을 주는 기능인 것 같던데요 그냥 유저가 이미지가 들어가 있는 페이지에 접속했을때, 빠른 로딩 우선권을 주는 거라고 생각하면 되는 걸까요?
안녕하세요! 제로초님! 보너스 강의까지 잘 챙겨보고 있습니다. 매번 감사합니다! 제 질문은..! server action 함수쪽에서 fetch config 객체에 credentials 을 include로 해줘야 쿠키(세션)를 API 요청 시 같이 태워서 보낼 수 있다고 설명해주셨는데, 혹시 이것이 next-auth 로부터 도움을 받는 것일까요? 강의 수강 후, next 14로 프로젝트를 구현하고 있는데, fetch 할 때, credentials 를 include 해주었음에도 불구하고, 브라우저 application 탭에서 확인 할 수 있는 쿠키가 태워지지 않아서요. 해당 쿠키는 서버에서 로그인 시에 set-cookie 해준 쿠키이고, 프론트엔드는 localhost , 서버는 ec2에 배포된 서버입니다. 그래서 현재는 server action 함수내에서 next.js에서 지원해주는 cookie() 를 이용해서 fetch config 객체 내 headers 에 직접 쿠키를 넣어주고 있는데, 강의에서는 credentials 만으로 API 요청시 쿠키(세션)을 잘 태워서 보내주고 있는 것 같아 질문을 남기게 되었습니다.
제로초님은 항상 _component 폴더를 만드시는데 이런 폴더를 만들지 않고 그냥 컴포넌트를 만드는건 어떻게 생각하시나요?? 어차피 폴더내에서는 page라는 파일만 페이지로 라우팅이 되기 때문에 별 상관없을 것 같습니다. 단순히 취향차이로 보면 될까요?? ex) as is src/app/search/_component/Tab.tsx to be src/app/search/Tab.tsx
안녕하세요! mac에서 백엔드 서버 세팅 중 에러가 발생해 해결했던 방법을 남깁니다. 강의 수강 중 섹션 4 [백엔드 서버 세팅하기] 강의에 맞춰 아래와 같이 진행하였습니다. postgresql 설치 pgAdimin 세팅 github nest-prisma repository 클론 nest-prisma 디렉토리에서 npm i && npm run migrate:dev npm run start:dev 실행 시 아래 에러 발생 Error: connect ECONNREFUSED 127.0.0.1:6379 구글링을 해보니 redis 설치 및 redis-server 명령어를 실행하라고 해 따라했더니 에러가 사라졌습니다. 제가 중간에 세팅 과정을 잘못 했거나 위 해결 방법이 틀린건지도 모르겠지만 혹시 도움이 될까 해서 남깁니다.
[제로초 강좌 질문 필독 사항입니다] 질문에는 여러분에게 도움이 되는 질문과 도움이 되지 않는 질문이 있습니다. 도움이 되는 질문을 하는 방법을 알려드립니다. https://www.youtube.com/watch?v=PUKOWrOuC0c 페러렐 라우트용 @modal 페이지를 메인 page.tsx ( src/app/page.tsx ) 에서 사용하기위해 (beforeLogin) 경로로 이동시켰는데, Next.js 가 어떻게 메인페이지를 인식하고 표시하는지가 궁금합니다. Next.js 프로젝트 폴더구조에서 가장 app 폴더와 근접해있는 page.tsx 파일이 메인으로 인식되는건가요.. ㅠㅠ? 현재 app 폴더에 layout.tsx(RootLayout) 밖에 없는데 그 파일에서 children 으로 받아지는 page.tsx 가 어떻게 결정되는지가 궁금합니다.
https://github.com/ZeroCho/next-app-router-z/blob/master/ch3-1/src/app/(afterLogin)/compose/tweet/page.tsx 3-1 보면서 학습 중입니다. /compose/tweet 새로고침 시에도 모달이 보여야하는데 안 되길래.. /compose/tweet/page.tsx에 <TweetModal /> 이 빠져있어서 안 됐어요 혹시나 저같은 초보자들은 헤매실까봐.. 글 남겨둡니다~
안녕하세요, 제로초님 이전 노드버드 강의부터 z.com 까지 강의 유익하게 잘 보고 있습니다. 섹션3 [react-query를 쓰는 이유와 fresh, stale, inactive] 강의 수강 중 궁금한 부분이 있어서 문의드립니다. 강의에서 react-query의 데이터가 inactive 상태가 아니더라도 gcTime이 경과되면 gc가 이뤄진다고 말씀해주셨습니다. 그래서 staleTime을 gcTime보다 길게 설정하더라도 실제론 gcTime을 넘을 수 없다고도 연이어 설명해주시는 내용이 나옵니다. 제가 이전에 react query 블로그에서 본 gcTime 관련 설명에는 ' The duration until inactive queries will be removed from the cache.' 라고 적혀있었는데요, 이 내용을 보고선 inactive된 데이터만 gc가 이뤄지는 걸로 알고 있었는데... 혼란스러워 문의드립니다. ㅠㅠ gcTime 관련 내용은 아래 링크에서 읽어봤습니다. https://tkdodo.eu/blog/practical-react-query 미리 답변 감사드립니다.
<Link href="/login"> 클릭을 통해서 (beforeLogin)/login/page.tsx 로 이동 여기서는 replace('i/flow/login') 으로 리다이렉트 어쨋거나 <Link> 를 통해 이동 -> 리다이렉트 됐으니 인터셉팅 라우팅한 (.i)/flow/login/page.tsx 로 이동 i/flow/login/page.tsx 는 새로고침 시 이동 할 때 보여줌 이 맞나요?.? 넥스트 처음이라 너무 어렵네요.. 눈물이 앞을 가립니다.. 제대로 이해한건지 모르겠어서 확인하고자 질문 드려봅니다.
