안녕하세요 강사님, 복습하는 과정 중에 Page Router 기준으로 SSR + 프리패칭 + Hydration 흐름을 제가 이해한 대로 정리해보았는데, 이게 맞는지 확인 부탁드립니다. 사용자가 /a 페이지에 있을 때 <Link href="/c" prefetch> 가 있으면, 브라우저는 백그라운드에서 /c.js (코드 스플리팅된 JS 청크)만 미리 받아 캐시에 저장해둔다. → 이 단계에서는 HTML이나 데이터( getServerSideProps 결과)는 가져오지 않는다. 사용자가 실제로 /c 를 클릭하면, 서버가 getServerSideProps 를 실행해서 데이터를 패칭하고, 그 결과를 반영한 SSR HTML + JSON을 브라우저에 내려준다. 브라우저는 HTML을 먼저 렌더링해서 FCP가 나오고, 이어서 캐시에 있던 /c.js 를 실행한다. 그 후 React가 HTML과 JS를 매칭시켜 Hydration을 수행하여 이벤트 핸들러를 연결한다. 즉, SSR 페이지 전환 시 1. User 클릭 → (서버) HTML 생성 및 데이터 패칭 → (브라우저) HTML 렌더링 → JS 실행 → Hydration 이고, 프리패칭은 그 전에 JS만 준비해 두는 과정으로 이해했습니다. 제가 이해한 흐름이 맞을까요? 머메이드로 도식화하자면 다음과 같습니다 . 위가 맞다면, 빠른 페이지 전환을 위해하는 프리패칭을 했지만 결국 데이터 패칭 및 HTML을 서버에서 다시 그려오는데 빠른 전환이 가능한건지 궁금합니다. 혹시 여기서 놓치고 있는 부분이나, 실제 네트워크 요청에서 다른 점이 있다면 알려주시면 감사하겠습니다!
안녕하세요 정환님 강의를 듣다 우연히 궁금한 점이 생겨 문의드립니다. 제가 리액트 > 타입스크립트 > next.js 까지 쭉 듣고있는데요! 파일명을 짓는 기준이 궁금하여 문의드려요 리액트 컴포넌트파일명을 지을때는 맨 앞글자가 대문자가 기준인 것으로 알고있었는데 next.js 에서 ${페이지}.tsx 로 지으실때는 search-layout.tsx global-layout.tsx 이런식으로 대시방식을 사용하시는것같더라구요!! 혹시 현업에서 사용하는 파일명짓는 기준이나 일반적인 react,next.js에서 사용하는 파일명 기준이 있을까요?? 실무를 겪어보지 못해 잘 몰라서 해당건 질문드립니다,,,,,, 강의 항상 잘 듣고있어요 감사합니다 🙂
Supabase에서 Table Editor > 테이블 옆에 Unrestricted가 아래처럼 뜨시는 분들은 RLS disabled를 클릭한 후에 RLS를 Enable로 해주시면 됩니다. RLS(Row Level Security)가 꺼져 있으면, 누구나 API로 테이블 데이터를 볼 수 있습니다. 실제 서비스에서는 RLS를 반드시 켜고, 접근 정책(Policy)을 설정해야 데이터가 안전하게 보호됩니다. RLS 활성화는 Table Editor에서 “Enable RLS” 클릭 → 정책 추가로 진행하면 됩니다.
7.중첩 라우터와 그룹폴더의 활용 / 영상 시작 0:30 질문: ### /home -> / ### 이 아니라 ### /index -> / ### 아닌가요? 이 부분 설명에서 /home 은 실제 home 디렉토리를 찾습니다. 상위 경로에 _layout.tsx, index.tsx 가 있으면 상위 경로 index.tsx 로 이동하니까 index.tsx 파일이 설명에 부합하는거 같아서 질문드립니다. ### /index -> / ###
아래 코드는 강사님의 git에서 가져온 코드입니다. auto // [Next.js 프로젝트] // pages/blog/index.js import { useEffect, useState } from "react"; export async function getServerSideProps(context) { // http://localhost:3000 에서의 쿠키를 API 요청에 활용 const headers = { Cookie: context.req.headers.cookie, }; console.log("headers: ", headers); const url = "http://localhost:8000/blog/whoami/"; const response = await fetch(url, { headers }); const responseText = `상태코드: ${response.status} ${await response.text()}`; // props로 전달한 값이 컴포넌트의 속성값으로 주입 return { props: { message: responseText } }; } // 웹브라우저에 코드가 다운로드된 후에 수행. function WhoamiPage({ message: messageSSR }) { const [messageCSR, setMessageCSR] = useState("no message"); // 컴포넌트 초기화 시에 1회만 실행. useEffect(() => { fetch("http://localhost:8000/blog/whoami/") .then((response) => response.text()) .then((responseText) => { setMessageCSR(responseText); }); }, []); return ( <div> <h2>whoami</h2> <pre>CSR: {messageCSR}</pre> <pre>SSR: {messageSSR}</pre> <hr /> <small>by Next.js</small> </div> ); } export default WhoamiPage; 강의에선 "fetch api 에서 config 설정도 없이 protocol host 포트 번호를 제거하고 호출합니다..."라고 말씀하셨습니다. 그런데 위 코드는 protocol + host + port 번호까지 전부 적혀 있는 상태이지 않나요? 그런 이유로 해당 코드는 localhost:3000/blog에서 CORS 오류가 발생합니다. 저 코드를 사용하신 이유를 잘 모르겠어요.
안녕하세요 강의 듣던 중 질문 있습니다. access token 을 넣어서 fetch 함수를 사용하고 싶은데 클라이언트 레이어에서는 정상적으로 주입한 access token이 보이는데 서버 레이어에서는 구워진 access token이 없더라고요. 혹시 짐작 가는게 있으실까요?? 감사합니다.
14-06수업에서 07 수업할 때 이를 주석처리하도록 의미하셨는지는 모르겠더라구요. 07수업에서 해당 내용에 대한 언급이 없어서 계속해서 localhost :3000에서 원하는 결과를 얻지 못했어요. 그래서 SESSION_COOKIE_DOMAIN을 None으로 하니까 되더라구요. (당연하게도) 다른 분들에게 도움되라구 남겨요~
