안녕하세요 제로초님, 강의 완강했습니다. 덕분에 많은 지식 얻었었습니다. 감사합니다. 이제 여기서 배운 내용을 바탕으로 제 리액트 프로젝트 하나를 next로 마이그레이션 해보려고 합니다. 마이그레이션이 처음이라 막상하려고하니, 폴더 구조가 완전히 바뀌고, 거의 모든게 달라지기 때문에 어떻게 마이그레이션을 시작해 나갈지 의문이 듭니다. 구글링에서도 뚜렷하게 방법을 설명해주는 글이 보이지 않아 문의 드립니다. 질문1. 기존 프로젝트는 git-flow 전략을 통해 v1.0.0까지 배포를 마친상태입니다. 마이그레이션을 해서 v2.0.0로 배포를 하면 좋을 것 같은데, 기존 develop 브랜치에서 feature/next-migration 브랜치를 따서 작업하는게 좋을까요? 질문2. next를 설치하는 순간 많은 설정이 달라져서, 기존 코드 파일들을 그대로 두면 npm start시 에러가 날 것 같습니다. 현업에서는 기존 파일을 다 삭제하고 next의 디렉토리 구성을 만들어 놓은 다음에 다른 브랜치에서 코드를 복사해와서 재작성을 하나요? 아니면 다른 좋은 방법이 있나요?
안녕하세요~~ 루비네 코딩 입니다 ^^ 최근 앱을 런칭할 때 다음과 같은 오류가 발생하고 있습니다. ModuleNotFoundError: No module named 'altair.vegalite.v4' 이런경우, 다음과 같이 altair 패키지의 버전을 바꾸어 설치해 주세요 ^^ 감사합니다~ pip uninstall altair pip install altair==4.2.2
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의 컴포넌트를 그려주어야해서 렌더링해야할 컴포넌트가 겹쳐서 발생하는 문제인가요?
강의에서 진행 된 요소 추가 전까진 정상 작동 되는 것 확인 했습니다. Menu 추가 후 아래와 같은 오류가 출력 됩니다. Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem. TypeError: Cannot read properties of null (reading 'useRef') at useRef (C:\Users\sion\node_modules\react\cjs\react.development.js:1630:21) at Object.render (C:\Users\sion\node_modules\antd\lib\menu\index.js:19:37) at ReactDOMServerRenderer.render (C:\Users\sion\Documents\prepare\front\node_modules\react-dom\cjs\react-dom-server.node.development.js:3535:44) at ReactDOMServerRenderer.read (C:\Users\sion\Documents\prepare\front\node_modules\react-dom\cjs\react-dom-server.node.development.js:3373:29) at renderToString (C:\Users\sion\Documents\prepare\front\node_modules\react-dom\cjs\react-dom-server.node.development.js:3988:27) at Object.renderPage (C:\Users\sion\Documents\prepare\front\node_modules\next\dist\next-server\server\render.js:50:851) at Document.getInitialProps (C:\Users\sion\Documents\prepare\front\.next\server\pages\_document.js:264:19) at loadGetInitialProps (C:\Users\sion\Documents\prepare\front\node_modules\next\dist\next-server\lib\utils.js:5:101) at renderToHTML (C:\Users\sion\Documents\prepare\front\node_modules\next\dist\next-server\server\render.js:50:1142) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) 터미널에 찍힌 로그입니다. react/react dom 버전은 동일함을 확인했고 16.14.0 버전 사용 중입니다. 구글링 중 react hook form을 인스톨 하라는 검색 결과가 있어 해당 패키지 설치 했습니다. 버전은 7.49.2 사용 중 입니다. 로컬에서 실행 된 화면입니다.
안녕하세요 강의 잘 듣고있습니다 제로초님! 질문 한 가지 있습니다! 섹션3 마지막 강의 suspense 관련 간단 질문입니다. 검색 엔진이 로딩화면을 긁어가서 SEO가 안 좋아지는 것을 막기위해서 preFetchInfiniteQuery를 통해 SSR를 구현해야한다고 하셨는데, 마지막에 알려주신 post 목록에 suspense로 따로 로딩을 구현한 부분은 검색 엔진에 감지 되나요? 만약에 감지가 되지 않는다면 가장 중요한 게시물의 내용이 안보이게되는 셈이 될텐데 괜찮나요?
안녕하세요! revalidateTag 함수 관련 코드를 보다가 궁금한 점이 생겨서 질문 드립니다! 우선 fetch 를 통해 데이터를 받아오는 비동기 호출은 서버 컴포넌트에서만 호출할 수 있다고 해서 날씨API나 시간API를 서버 컴포넌트에서 fetch 를 이용해 받아오는 것 까지는 이해가 갔습니다. 그런데 아래와 같이 캐시를 비우는 버튼을 만들 때는 클라이언트 컴포넌트에서 fetch 가 사용되었습니다. 'use client' type Props = { tag : string } export default function RevalidateButton({tag} : Props) { const handleClick = async () => { const res = await fetch(`/api/revalidate?tag=${tag}`, { method : 'POST' }) console.log(res) } return <button onClick={handleClick}>캐시 비우기</button> } 일단 이벤트 핸들러는 클라이언트 컴포넌트에서 사용 해야 되서 'use client' 를 작성하는 것도 이해가 갔습니다. 그리고 revalidateTag 함수는 서버 컴포넌트에서 호출되야 하니깐 'api요청을 보내야 되서 fetch 를 사용해야 한다' 라고 이해를 했는데요.. 그럼 혼란 스러운게.. ' fetch 비동기 호출은 서버 컴포넌트에서 하라고 되어 있는데 revalidateTag 같이 서버 컴포넌트에서 동작하는 함수를 호출하기 위해서는 어쩔 수 없이 fetch 를 클라이언트 컴포넌트에서 사용해야한다' 라고 이해 하는게 맞을까요?? 그리고 위의 코드에서 method : 'POST' 라고 세팅하여 주셨는데 보내는 방식은 POST 로 정해져 있는 것인지, 다른 메서드 (get, update, delete)로 사용하면 안되는 것인지 궁금합니다! 아래는 핸드북(3. Next.js 손에 익히기 / 7.날씨데이터 조회하기 / 데이터 재검증하기 )에 설명해주신 내용인데요! revalidateTag 는 서버 사이드에서 호출 가능합니다. 하지만 캐시를 풀어달라는 요청은 클라이언트(브라우저)에서 만들어집니다. 때문에 API 형태로 revalidateTag 를 호출할 수 있도록 만들어야 합니다. Next.js에서의 API는 라우트 핸들러를 통해 만들 수 있습니다. "캐시를 풀어달라는 요청은 클라이언트(브라우저)에서 만들어집니다." 라는 말이 RevalidateButton 버튼을 클릭했을 때 handleClick 함수가 호출되는 때를 말씀하신 것인지 궁금합니다. 아래는 revalidateTag 가 호출되는 서버 컴포넌트 코드입니다. import { revalidateTag } from "next/cache"; import { NextRequest, NextResponse } from "next/server"; export async function POST(req:NextRequest) { const tag = req.nextUrl.searchParams.get('tag'); if(!tag) throw new Error('태그는 필수!!') revalidateTag(tag) return NextResponse.json({message : '재검증에 성공했습니다', tag}) } revalidateTag 함수는 호출시 에러가 발생하는 경우는 없는건가요?? 제 생각에는 revalidateTag 도 제대로 작동을 안할 수도 있으니깐 try catch 문으로 감싸서 호출하는게 맞지 않을까? 생각이 들었는데 그렇게 안해도 되는 것인지 궁금합니다!
섹션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는 사용될 일이 거의 없어지는 건가요..?
@ElementCollection와 @EntityGraph사용법에 대해서 잘 숙지 하였습니다. 한가지 질문이 있습니다. JPA사용시 일반적으로 쓰이는 @OneToMany, @ManyToOne, @ManyToMany를 대신해서 @ElementCollection으로대체하여 사용이 가능할까요? 왠지 될거같은생각이 들긴하는데....
강의 듣기전부터 프리티어는 사용하고 있었는데 yarn add --dev eslint-config-prettier 이걸 입력한이후 저장시 프리티어 간격조정이 자동으로 안됩니다 format on save 다 체크 되있는 상태이고 다른폴더에선 프리티어가 되지만 yarn add --dev eslint-config-prettier 이걸 입력한 폴더만 간격 조정이 안먹는 데 이유가 뭘까요
브라우저 콘솔에 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이 뜨길래 공식문서와 블로그 글을 참고해 봤는데 이미지 로딩의 우선권을 주는 기능인 것 같던데요 그냥 유저가 이미지가 들어가 있는 페이지에 접속했을때, 빠른 로딩 우선권을 주는 거라고 생각하면 되는 걸까요?
