Static Page로 설정되는 기준은 동적함수가 아니거나 데이터 캐시에 저장해주는 경우 설정된다고 하셨는데요 만약 그렇다면 강의 자료에서도 백엔드에서 받아온 데이터가 데이터 캐시부분을 그냥 지나가는 게 아니라 'SET' 해야하는거 아닌가 궁금합니다 🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨 질문 하시기 전에 꼭 확인해주세요 - 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다) - 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다) - 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢 ) 질문 하실때 꼭 확인하세요 - 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X) - 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지) - 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우) - 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요 - 강의의 몇 분 몇 초 관련 질문인지 알려주세요! - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
혹시 해당 내용을 공식문서에서 직접 찾아보려구 했는데 안나와서요 해당 내용이 문서 어디를 참조하면 될까요? 🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨 질문 하시기 전에 꼭 확인해주세요 - 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다) - 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다) - 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢 ) 질문 하실때 꼭 확인하세요 - 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X) - 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지) - 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우) - 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요 - 강의의 몇 분 몇 초 관련 질문인지 알려주세요! - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
> onebite-books-server@0.0.1 seed > tsx prisma/seed/seed.ts file:///Users/majunghan/dev/onebite-books-server/node_modules/tsx/dist/resolve-ts-path-DUkQ8uuR.mjs:1 import o from"node:path";import{parseTsconfig as x,getTsconfig as m,createFilesMatcher as u,createPathsMatcher as g}from"get-tsconfig";let i,r,l=!1;const j=s=>{let t=null;if(s){const e=o.resolve(s);t={path:e,config:x(e)}}else{try{t=m()}catch{}if(!t)return}i=u(t),r=g(t),l=t?.config.compilerOptions?.allowJs??!1},P=` ^^^^^^^^^^^^^^^^^^ SyntaxError: The requested module 'get-tsconfig' does not provide an export named 'createPathsMatcher' npm run seed하고 이런 에러뜨면은 1. npm install get-tsconfig@latest 2. node modules 폴더 지우기 3. npm i 4. npm run seed 하시면 잘됩니다.
데이터 패칭 후 캐싱 옵션에 따라 넥스트 서버에서 캐싱된 데이터를 갖고 있을 수도 있다고 하셨는데 캐싱을 강제하는 옵션인 'force-cache'를 했을 경우 브라우저에서 캐시 비우기 및 강력 새로고침을 하게 되면 다시 데이터 패칭을 해오더라구요 캐싱 데이터는 next서버에 저장돼있는 건데 왜 브라우저의 기능에 영향을 받는 건지 알 수 있을까요??? 🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨 질문 하시기 전에 꼭 확인해주세요 - 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다) - 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다) - 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢 ) 질문 하실때 꼭 확인하세요 - 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X) - 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지) - 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우) - 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요 - 강의의 몇 분 몇 초 관련 질문인지 알려주세요! - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
처음 index페이지에 접근할 땐 사전렌더링 후 하이드레이션 과정을 거치게 되고 그 후 라우팅을 하며 페이지 이동과정에선 CSR 방식으로 동작하는 걸로 이해하고 있습니다! 책 디테일 페이지의 경우 서버 컴포넌트이며 데이터 페칭을 받아 렌더링 되는 코드가 적혀있는데 만약 인덱스 페이지에서 디테일 페이지로 링크 컴포넌트를 통해서 페이지를 이동하게 되면 서버에서 클라이언트로 데이터 페칭을 마친 후 RSC 페이로드를 내려주는 게 맞을까요?? 그리고 클라이언트에서는 이 페이로드를 역직렬화 하여 화면에 렌더링 해주게 되는 걸까요? 🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨 질문 하시기 전에 꼭 확인해주세요 - 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다) - 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다) - 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢 ) 질문 하실때 꼭 확인하세요 - 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X) - 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지) - 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우) - 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요 - 강의의 몇 분 몇 초 관련 질문인지 알려주세요! - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
안녕하세요! 이정환 강사님. next 강의를 거의 다 수강해가는 것 같아서 배운걸 활용해 혼자 간단한 투두리스트를 구현해보고 있는데요. 새로고침 시에도 할일목록이 유지되도록 하기 위해 로컬스토리지에 저장된 목록을 가져오고 또 저장하는 로직을 작성하였더니 ReferenceError: localStorage is not defined 이와 같은 오류를 만나서 useEffect를 사용해서 아래와 같이 작성하였습니다. // useTodo 커스텀 훅 일부 const [todoList, setTodoList] = useState<Todo[]>([]); const [isLoading, setIsLoading] = useState(true); useEffect(() => { const storedTodos = getStoredTodoFromLocalStorage(); setTodoList(storedTodos); setIsLoading(false); }, []); useEffect(() => { if (todoList.length > 0) saveTodoToLocalStorage(todoList); }, [todoList]); // ToDoItemList.tsx export default function ToDoItemList({ isLoading, todoList, toggleTodoCompletion, }: ToDoItemListProps) { if (isLoading) { return <S.ToDoItemList>로딩중...</S.ToDoItemList>; } if (todoList.length === 0) return ( <S.ToDoItemList> <S.EmptyList>할일을 생성해보세요✨</S.EmptyList> </S.ToDoItemList> ); return ( <S.ToDoItemList> {todoList.map(todo => ( <ToDoItem key={todo.id} todo={todo} toggleCompletion={toggleTodoCompletion} /> ))} </S.ToDoItemList> ); } 처음엔 로딩상태를 만들지 않고 todolist.length가 0이면 "할일을 생성해보세요"가 보이고 아니면 할일 목록을 보여주도록 했습니다. 하지만 그렇게 하니까 할일 목록을 작성하고 새로고침을 누르면 "할일을 생성해보세요"가 잠깐 나타나고 기존에 작성한 할일 목록이 나타나더라구요... 그래서 로딩중을 추가했는데 이제는 이 투두리스트에 처음 접근한 사람도 아직 아무 데이터도 없는데 로딩중이 보이고 할일을 생성해보세요가 나타나게 되는 문제에 직면했습니다. 이러한 로직은 어떻게 다루어야 좋을까요?? 제가 의도했던 건 처음 투두리스트 작성하려는 유저에겐 "할일을 생성해보세요"가 바로 보이고, 할일을 작성하면 할일목록을, 새로고침을 해도 할일목록을 보여주기 이전에 작성한 투두리스트가 있는 유저에겐 할일 목록을 보여주고 새로고침을 해도 그대로 유지해서 보여주기 인데 어떻게 해결할 수 있을지 모르겠습니다... 🥲
페이지 라우터의 경우 props를 통해서 데이터를 받을 수 있다고 하셨는데 index파일 부모컴포넌트가 아닌 하위 child 컴포넌트에서는 데이터를 불러올 수 없는 건가요?? 🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨 질문 하시기 전에 꼭 확인해주세요 - 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다) - 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다) - 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢 ) 질문 하실때 꼭 확인하세요 - 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X) - 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지) - 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우) - 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요 - 강의의 몇 분 몇 초 관련 질문인지 알려주세요! - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
안녕하세요 정환님. SSR 개념 강의 이후 실습을 위해서 서버 세팅을 하는 과정 중 데이터베이스 스키마 설정하는 부분에서 진행이 되지 않아 문의드립니다. supabase DATABASE_URL 환경변수 설정 npx prisma db push 명령어 실행 스키마 설정이 진행되지 않음 [버전] prisma : 5.13.0 @prisma/client :5.13.0 Node.js : 20.11.1
서버 컴포넌트에서 클라이언트 컴포넌트에게 직렬화 되지 않는 Props는 전달 불가하다. 라고 하셨는데 서버에서 -> 서버로 함수 props를 넘겨주는 경우에는 괜찮은 걸까요?? RSC payload로 변환되는 과정에서 결국 그 함수 Props도 직렬화되는 거 아닌가요?? 🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨 질문 하시기 전에 꼭 확인해주세요 - 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다) - 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다) - 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢 ) 질문 하실때 꼭 확인하세요 - 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X) - 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지) - 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우) - 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요 - 강의의 몇 분 몇 초 관련 질문인지 알려주세요! - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
강의에서 처음 build 할 때 searchbar 컴포넌트에서 suspense 에러가 나타나는데, 이 때 suspense를 하고 다시 build를 하면 인덱스 페이지는 dynamic page로 빌드 됩니다. dynamic page는 빌드 타임에서 생성하지 않는 것으로 전 강의에서 이해했습니다. 그런데 왜 빌드 타임에서 생성하지 않는 인덱스 페이지에서(dynamic) useSearchParams() 를 실행하는데 에러가 나타나는 건지 잘 모르겠습니다. 질문 드립니다
안녕하세요. 강사님! 강의에서는 폴더에 상관없이 파일명을 모두 소문자로 하셨는데 이게 혹시 next에서 관례인가요? 제가 components 폴더 내 컴포넌트들 이름을 그동안 리액트에선 파스칼 케이스를 따라서 습관적으로 최근 next 과제에도 그렇게 제출했는데 이게 모던하지(?)않은 방식이었나 싶어서요!! 스타일의 차이인지 아니면 더 유용한 쪽이 있는지 궁금합니다. 🧐
결국 next js 에서만 http.ts 를 만들어주어서 express 서버로 mock server(?)를 직접 띄우는 형식인것 같은데 맞나요? 또 제 생각에는 이렇게 msw 를 사용하면, 내가 백엔드 서버로 요청을 보내도 그 요청을 중간에 가로채서 mock api 로 요청이가고 내가만든 가짜응답을 보내주는것이 되어야 할것같은데, 지금은 저희가 띄운 9090으로 요청을 보내고 있네요. (이 내용도 맞는지 궁금합니다, next 프로젝트가 아니라면 localhost:8888(실제 나의 백엔드 서버)로 요청을 보냈다고 가정할때 msw가 요청을 가로채가나요?) 그렇다면 굳이 msw 를 사용하는 이유가 무얼까요..? 혼자 express 서버를 만들어서 가짜응답 전해주는것과 차이를 모르겠습니다..! 감사합니다
CSR 과 다르게 서버에서 렌더링 과정을 거쳐 보여주는 것이라면.. 결국 이 과정이 SSR 이라는 것으로 이해를 했는데요. 강의 목차를 보니 SSR, SSG(?) 는 또 따로 나와있어서요.. 궁금해서 질문 드립니다 !!! 추후 배울 내용이라 지금 시점에서는 SSR 과는 다르게 Next.js 에서는 "사전 렌더링"이라는 것이 따로 존재한다고 이해하면 되는걸까요?
안녕하세요, 선생님! 강의를 듣다가 startTransition에 대해 더 찾아봤는데, startTransition()은 우선순위가 낮은 상태 업데이트나 비동기 작업을 처리할 때, 고우선순위 비동기 작업보다 나중에 실행되도록 하는 함수라고 이해했습니다. 그런데, startTransition()이 비동기 작업을 동기적으로 처리하도록 사용된다는 이야기는 찾지 못했습니다. startTransition()을 비동기 작업을 동기적으로 처리하기 위해 사용해도 괜찮은 건가요?
