[섹션4-4 클라이언트 컴포넌트에서 ServerActions 사용하기] 제가 사용하고있는 라이브러리 버전입니다. "next": "^15.0.0-canary.181", "next-auth": "^5.0.0-beta.22", "react": "^18", "react-dom": "^18" useFormState 현재 공식문서 에선 useFormState from 'react-dom' 이 아닌 useActionState from 'react` 로 사용하도록 되어있더라구요. 그래서 해당 변경사항대로 사용해도 문제가 없을지 궁금합니다. useFormStatus 공식문서 를 읽어보는데 " useFormStatus 는 동일한 컴포넌트에서 렌더링한 <form> 에 대한 상태 정보를 반환하지 않습니다." 라고 명시가 되어있더라구요. 그런데 현재 제로초님의 코드는 동일한 컴포넌트의 form에 대해서 pending 값을 받고 있는데, 문제가 발생하지 않는 이유에 대해서 궁금합니다.
패키지 매니저를 pnpm으로 사용하고 pnpm i 후 pnpm run build && pnpm run start 시 validator 모듈이 없다고 나와서 rm -rf node_modules pnpm-lock.yaml 후 npm으로 모듈들 설치 및 빌드, 서버 실행이 됩니다. npm이 유령 의존성 이슈가 있다고 들어서 pnpm 또는 yarn을 이용하려 한 건데, 오히려 npm을 사용해야만 문제없이 돌아가는 상황에 대해, 이게 어떤 상황인지 알 수 있을까요?
🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨 질문 하시기 전에 꼭 확인해주세요 - 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다) - 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다) - 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢 ) 질문 하실때 꼭 확인하세요 - 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X) - 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지) - 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우) - 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요 - 강의의 몇 분 몇 초 관련 질문인지 알려주세요! - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요. Nextjs 개념을 다시 공부를 하고 있는데 헷갈리는 부분이 있어서 글을 작성하게 되었습니다. 우선 App Router 강의에서 이해 한 내용으로는 초기접속시 서버컴포넌트들은 사전랜더링 작업시 실행이 되면서 HTML로 만들어져서 브라우저로 보내지고 이후에 JSBundle 있다면 JSBundle이 내려가져서 하이드레이션이 이루어진다라고 알고 있습니다. 공식문서 Full Page Reload Client영역 2번 문장이 내용 입니다. https://nextjs.org/docs/app/building-your-application/rendering/client-components#full-page-load Full page load Then, on the client: The React Server Components Payload is used to reconcile the Client and Server Component trees, and update the DOM. 그런데 해당내용으로 보면 RSC Payload는 클라이언트와 서버컴포넌트 트리를 재조정하는데 사용되어진다라고 하는거 같은데 RSC Payload값도 FullPage리로드시에 내려오는걸까요? 그리고 저기서 말하는 서버컴포넌트 트리라고 말하면 초기에 내려주는 사전랜더링 HTML을 말하는지 궁금합니다. 감감사합니다.
제목과 같습니다! SSG와 SSR을 동시에 사용할 수 없을 뿐더러 요새는 하나의 페이지에 정적인 데이터만 존재하는 페이지는 거의 없다고 생각하거든요 떄문에 과연 프리패칭은 하고 싶지만 정적인 데이터가 너무 커서 SSG를 선택하는 경우의 수가 얼마나 있을까?? 하는 추측이 드는데요. 저의 이런 추측이 충분히 가능성 있는 의문인지 궁금합니다!
전공자따라잡기 데이터베이스 공부중에 mysql 대신 이 강의 할때 깔았던 postgreSQL로 연습해보려고 하다가 질문드립니다 서버그룹 우클릭 -> register -> server 하면 사용자 이름으로 된 기본db와 함께 zcom이 항상 같이 생성되는데 이 zcom db 생성안되게 하려면 어떻게 해야하나요?
강의 너무 잘 듣고 있습니다. 현업에서 next.js 15 기반으로 큰규모의 프로젝트인 wms (창고관리 시스템)을 구현 예정중에 있습니다. mssql react18 / next14 typescript material UI 사용예정중에 있습니다. 혹시 위와 같은 프로젝트에서 추천해주실만한 상태관리 도구 가 있으실까요? redux, zustand, recoil 등 선택지가 많은데 선뜻 선택하기가 쉽지 않네요 ㅠ
현재 페이지 라우터 강의까지 듣고 궁금한 점이 생겨서 질문드립니다! Q1. 다음과 같은 상황일 때, book페이지는 어떤 렌더링 방식이 적합한가요? SSG, SSR, ISR 모두 완벽히 맞아 떨어진다는 생각이 들지 않아 질문드립니다 데이터 변경 가능성이 적고, 관리자 서비스를 통해 데이터가 변경되나, 변경 시점이 명확하지 않은 경우 on-demand revalidation 사용이 안되는 경우 (next12) Q2. 만약 on-demand revalidation을 사용할 때, 별도의 서비스에서 일어난 요청을 기준으로 렌더링을 해야한다면 그 요청이 일어났음을 알 수 있는 방법이 있나요?
각 페이지에 레이아웃을 덮어씌워 보내는 함수인 getLayout이라는 메소드는 저희가 정의한 커스텀 메소드인데 이 메소드가 받는 page라는 인자는 어떻게 현재 페이지가 되는지 모르겠습니다. 떄문에 app.tsx에서 해당하는 Component(접속한 페이지)의 getLayout이라는 메소드가 없을 경우에 (page)=> page라는 함수를 리턴시켜 기본의 페이지를 리턴한다는 맥락도 또한 이해가 가지 않습니다. page라는 인자는 도대체 왜 현재페이지라고 인식해서 오는지요ㅠㅜ
동료들과 협업할때 CSS를 작성하는 방법을 module로 할지 Styled-Component로 할지 고민인데요. module로 하면 className에 계속 "style." 접두사를 넣어주어야 한다는 불편함이 있고 Styled-Component를 쓰게 되면 하나의 파일에 줄이 길어지는 단점과, 스타일링을 코드 한줄 넣고싶어도 하나의 스타일 컴포넌트를 만들어야 한다는 단점이 있더라고요. 강사님꼐서는 module을 추천하시기에 module을 강의에 넣으신걸까요??
카카오 로그인 까지 구현 후 vercel에 배포 까지 한 상태이고 아직 도메인은 등록 하지않았습니다만 집에서 할 때는 vscode로 로컬 서버를 열어놔서 몰랏었는데 로컬 서버를 열어놨을 때는 잘되지만 밖에서 제가 vercel에 배포한 사이트를 들어가서 카카오 로그인을 시도해보니 localhost에서 연결을 거부했습니다. ERR_CONNECTION_REFUSED 에러가 나오는데 어디가 문제 인걸까요? ㅠ
Dynamic Page로 설정되는 기준 중에서 동적 함수(쿠키, 헤더, 쿼리스트링)을 사용하는 컴포넌트가 있을때가 있다고 말씀해주셨습니다. 그리고 웬만하면 Static Page로 만드는 것이 성능 측면에서 좋다고 하셨습니다. 하지만 예를 들어, 거의 모든 페이지에서 header나 footer 컴포넌트를 공통 컴포넌트로 쓰고있고, 그 컴포넌트에서 쿠키를 통해 어떤 값을 세팅한다면 Static Page는 거의 없을 것으로 판단이 되는데 따로 해결방안이 있을까요? Dynamic Page로 설정되는 기준 중에서 아래와 같이 캐시되지 않는 data fetching을 사용하는 경우가 있다고 하셨는데 async function Comp() { const response = await fetch('...') return <div>...</div> } async function Comp() { const response = await fetch('...', {cache : "no-store"}) return <div>...</div> } 아래와 같이 revalidate로 캐시 옵션이 세팅되었을때는 Static Page로써 적용이 되는 것이지요? 그 이유가 해당 time이 지났을때는 데이터캐시에 있는 값이 stale되었다고 판단이 되어 캐싱되어있는 값을 가져오지않고 새로운 값을 가져오기 때문이라고 보면 되는걸까요? async function Comp() { const response = await fetch('...', { next: { revalidate: 3 } }) return <div>...</div> }
getServerSideProps 함수 내부에서 context.query.q로 데이터를 불러오는데, 이러한 querystring을 활용하는 요청 또한 사전 렌더링으로 처리를 할 수가 있나요? 초기 접속 요청(인덱스 페이지)에서 서버는 유저가 querystring을 입력하기 전까지는 querystring의 값을 모르지 않나요? 어떻게 context.query.q도 사전 렌더링의 SSR 방식으로 처리를 할 수가 있나요?
img 태그를 사용할 때처럼 이미지 사이즈를 따로 작성하지 않고 그 공간의 크기에 따라 자동으로 이미지 사이즈가 적용되는 방법은 없을까요? 예를 들어 화면이 줄어들면 리스트 아이템들도 사이즈가 줄어들어 이미지 사이즈도 자동으로 줄어들게 되는 것처럼 그 부모에 맞춰(이때 부모도 사이즈 고정x) 사이즈가 자동으로 변하도록 하는 방법이 있는지 궁금합니다
안녕하세요 제로초님! 제로초님 강의 보면서 개인 프로젝트 해보고 있는 수강생입니다. 현재 로그인과 회원가입 페이지를 인터셉트와 패러렐 라우트를 이용했는데, (저의 현재 폴더 구조입니다.) app/ ├── layout.tsx ├── page.tsx // 메인 페이지 ├── @modal/ │ ├── (.)login/ │ │ │ └── page.tsx // 로그인 모달 페이지 │ ├── (.)signup/ │ │ │ └── page.tsx // 회원가입 모달 페이지 // 프로필 수정 모달 페이지 │ ├── [...catchAll]/ │ │ └── page.tsx // 모달을 닫기 위한 catch-all 라우트 ├── (auth)/ │ ├── login/ │ │ └── page.tsx // 로그인 페이지 │ ├── signup/ │ │ └── page.tsx // 회원가입 페이지 └── 기타 페이지들... 회원가입이 되면 메인 페이지('/')로 이동하게 했는데 router.push, replace로는 경로는 이동이 되나 모달이 닫히지 않는 문제가 있었습니다. 그래서 catch-all route를 이용해서 특정 경로에 매칭되지 않으면 모달이 닫히도록 null을 반환하였습니다. // catch-all route export default function ModalCatchAll() { console.log('CatchAll triggered'); return null; } 그런데 router.push('/') 메인 홈페이지인 '/' 경로로 이동을 해도 catch-all route가 실행되지 않았는데, 메인 경로 외에 게시글 라우트로 router.push('/foster') 경로를 변경했더니 catch-all route가 실행이 되었습니다. router.back 말고도 push나 replace를 사용하고 싶어서 catch-all route를 사용했는데 메인 홈 경로는 안되고 다른 경로로 이동시킬 때는 catch-all route가 왜 적용되는지 모르겠어서 질문 남깁니다..
