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 하시면 잘됩니다.
12.14)New 페이지 구현하기 2. 기능 강의를 따라 코드를 작성했는데 작성 완료 버튼을 누르면 데이터가 추가되지 않고 아래 사진과 같은 에러가 뜹니다. 왜 그런지 이유를 몰라 질문 드립니다. 소스코드는 깃헙에 올려놨습니다! https://github.com/dooheeyaa/section12
데이터 패칭 후 캐싱 옵션에 따라 넥스트 서버에서 캐싱된 데이터를 갖고 있을 수도 있다고 하셨는데 캐싱을 강제하는 옵션인 '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
안녕하세요 4분 45초에 ReactDom.create 이렇게 되어있는데 저의 경우 createRoot (document.g e 로 시작합니다. 구글에 찾아보니 17과 18의 차이라는데 https://velog.io/@citron03/React-18%EC%97%90%EC%84%9C-ReactDOM.render%EC%99%80-createRoot 그대로 진행해도 문제되지 않을까여 ? 감사합니다.
import React, {useState, useEffect} from "react"; import useCounter from "./useCounter"; const MAX_CAPACITY = 10; //최대 카운트 function Accommodate(props){ const [isFull, setIsFull] = useState(false); const [count, increaseCount, decreaseCount] = useCounter(0); useEffect(() => { console.log("===========배열없음"); console.log("useEffect is Called"); console.log(`isFull : ${isFull}`); }); //의존성 배열 없음 useEffect(() => { setIsFull(count >= MAX_CAPACITY); console.log("===========배열있음"); console.log(`Current count value : ${count}`); }, [{count}]); //의존성 배열 있음 return ( <div style={{padding : 16}}> <p>{`총 ${count}명 수용했습니다`}</p> <button onClick={increaseCount} disabled={isFull}>입장</button> <button onClick={decreaseCount}>퇴장</button> {isFull && <p style={{color:"red"}}>정원이 가득찼습니다.</p>} </div> ); } export default Accommodate; import React, { useState } from "react"; //custom Hook //초기 카운트 값을 파라미터로 받아서 카운트라는 이름의 //state를 생성하여 값을 제공하고 증감을 편리하게 할 수 있도록 하는 함수 function useCounter(initialValue){ const [count, setCount] = useState(initialValue); const increaseCount = () => setCount((count) => count+1); const decreaseCount = () => setCount((count) => Math.max(count-1,0)); return [count, increaseCount, decreaseCount]; } export default useCounter; import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import Library from './chapter03_jsx/Library'; //컴포넌트 추가 import Clock from './chapter04_elements/Clock'; import CommentList from './chapter05_component_props/CommentList'; import NotificationList from './chapter06_state/NotificationList'; import Accommodate from './chapter07_hook/Accommodate'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( //<React.StrictMode> <Accommodate /> //</React.StrictMode> ); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals reportWebVitals(); 위와 같이 Accomodate.jsx를 작성했습니다만 정원을 다 채웠을 경우 배열 있음이 한번 더 출력되는 현상이 나왔습니다. 의존성 배열이 있는 부분의 ,{count}만 넣으면 오류 워닝이 떠서 배열 취급하기 위해 []를 추가했습니다. []를 빼고 실행했을 경우 최대 카운트가 먹히지 않아 무한정으로 들어갑니다. 제가 뭔가 잘못 한 걸까요?
