안녕하세요! 이번에 새롭게 강의를 듣기 시작하게 된 sunny라고 합니다! 학습용 DB를 설정하고 있는 상황인데됴! 말씀주신대로 code를 다운로드 받고, 사용 폴더로 이동시킨 후 npm i , Supabase 설정하여 .env 파일에 DATABASE_URL 변수까지 잘 설정해주었습니다. 이후 과정인 npx prisma db push 과정에서 소요시간이 너무 오래 걸려서.. 혹시 제가 확인해볼 수 있는 방법 혹은 예측되는 상황이 있으실까 하여 질문드리게 되었습니다!! ㅠㅠ 혹시 몰라 node_modules 폴더 삭제 후 재실행 했는데도 동일한 현상이 발생하고 있는데.. 제가 확인해볼 수 있는 부분들이 있을까요?? 감사합니다!
// promise 복습 promise 객체(executor 콜백함수(resolve, reject)) const delay= // delay는 ms값을 받아 promise 객체를 리턴 (ms)=>{return new Promise( // 인수로 함수를 받음, resolve(성공)를 인수로 받아 처리하는 지연함수(executor) (resolve)=>{setTimeout( // setTimeOut은 callback함수와 ms초값을 받음 ()=>{resolve();},ms);} ); } const start=()=>{delay(2000).then(()=>{console.log("대기");});} start(); // async const delay2= (ms)=>{return new Promise( (resolve)=>{setTimeout( ()=>{resolve();},ms);} ); } // 함수의 오른쪽에 작성 -> promise 객체 반환 const start2=async()=>{delay2(2000).then(()=>{console.log("async 대기");});} console.log(start2()); 섹션 4에 5강 async, await를 수강하던 중에 영상과 다른 결과가 출력 되어 질문 드립니다. 두 코드의 결과를 서로 비교하고 싶어서 코드를 2개로 나누었는데요. async를 적은 코드는 pending상태의 promise객체 가 나온다고 하셨는데 저는 계속 fulfilled가 나와서 제가 코드를 잘못 썼는지 질문 드리고 싶습니다. 위의 코드의 영향이 있을까 싶어 주석 처리 해도 결과는 같았습니다.
브라우저 환경에서 window객체가 Global 스코프 역할까지 한다고 이해했습니다. 그런데 let,const로 정의한 함수들을 this, window를 명시하지 않고 실행하면 잘 실행되는 이유를 말씀하시면서 'let,const로 정의하면 Global스코프라고 볼 수 있는 Script스코프에 올라간다' 라고 하셨는데 여기서 말하는 Global 스코프는 window객체를 말하는 Global스코프와 다른건가요? 그럼 Global스코프(브라우저의 window보다 포괄적인 범위)는 내부에서 또 Script스코프와 Global스코프(브라우저환경에선 window객체)로 나눠지는거라고 이해하면 되는게 맞을까요...?
안녕하세요. 강사님 React 로 CSR 개발/배포된 시스템을 운영해본 적이 있는데요. nginx 가 단순히 정적 파일들만 클라이언트로 전달하니 서버 성능을 생각할 필요가 전혀 없었습니다. 그런데 Next.js 강의를 들으면서 SSR/SSG 에 대한 설명을 듣고나니 이 경우에는 서버 성능이 중요할 것 같다는 생각이 드네요. SSR/SSG 는 사용자 요청량이 증가하는만큼 서버 스펙도 확장될 수 있는 고민들이 필요한가요?
안녕하세요 강의 잘 수강하고있습니다! 저번 강의에서 bigNumber 라이브러리, 이번강의에서 moment라이브러리 설명을 해주셔서 사용하다가 문제가 생겨 질문드립니다. 두 라이브러리모두 cdn방식으로 사용을하면 잘 됩니다. 그치만 두 라이브러리 모두 npm으로 설치를 하여 사용하려고 시도를 하니 에러가 뜹니다. moment라이브러리의 경우, 설치를 다 하고난 뒤, script 태그 안에 import moment from 'moment'를 작성하고 사용하려고 하자, SyntaxError: Unexpected identifier 'moment'. import call expects one or two arguments. 라는 오류가 뜹니다. 코드는 이런식으로 짰는데 어떤 점이 문제일까요?
this.template = () => 에서 temp에 태그들을 넣어주고 하는 부분에 input에는 클로징태그가 필요없는 건가요? 클로징태그를 작성시 input에 value에 자동으로 /값이 들어가게 되는 상태가 되어 클로징태그가 필요 없는 부분인가? 필요 없는 이유는 무엇인지..에 대한 궁굼증이 생겨 질문드립니다 <div class='search'> <input type="text" placeholder="Search" id="search" autocomplete="off" value=${searchWord} > </div>
안녕하세요 강의를 듣는중 추가적으로 tanstack-query를 공부하다가 혼자서 도저히 이해를 할수 없는 부분이 있어서 이 부분에 대해 혹시 조언을 받을수 있을까 싶어 문의드립니다. prefetchQuery가 개인적으로 잘 이해가 안되어서 별도로 프로젝트를 생성하여 기본적인 것부터 다시 공부하고 있었습니다만, tanstack-query 공식사이트에서 권장하던 방법대로 임의적으로 코드를 생성하였더니 router.push()로 다른 페이지에 갔다가(->홈으로[/]) 다시 돌아오는것(->Post페이지(/post))을 반복하다보면 가끔 서버 컴포넌트에 있는 prefetchQuery안의 fetch와 클라이언트 컴포넌트에 있는 useQuery의 fetch가 동시에 실행이 되는 일이 가끔 발생을 해서요. fetch가 이중으로 실행이 되고 있는것 같은데 아무리 코드를 살펴봐도 제가 잘못한 부분을 찾을수가 없어서 조언을 구합니다ㅠ page.tsx import { dehydrate, HydrationBoundary, QueryClient } from '@tanstack/react-query'; import Post from './_component/Post'; import getPostRecommends from './_hook/fetch'; export default async function tanstackQuery() { const queryClient = new QueryClient(); await queryClient.prefetchQuery({ queryKey: ['movies'], queryFn: getPostRecommends, }); const dehydratedState = dehydrate(queryClient); return ( <HydrationBoundary state={dehydratedState}> <Post /> </HydrationBoundary> ); } post.tsx 'use client'; import { useQuery } from '@tanstack/react-query'; import getPostRecommends from '../_hook/fetch'; import { useRouter } from 'next/navigation'; export default function TanstackQuery() { const { data } = useQuery({ queryKey: ['movies'], queryFn: getPostRecommends, }); const router = useRouter(); type PostItem = { id: number; title: string; }; return ( <div> <button onClick={() => router.push('/')}>홈으로</button> {data?.map((item: PostItem) => { return ( <div key={item.id}> <h2>{item.title}</h2> </div> ); })} {data?.message} </div> ); } getPostRecommends export default async function getPostRecommends() { if (typeof window === 'undefined') { console.log('서버에서 fetch 실행' + new Date()); } else { console.log('클라이언트에서 fetch 실행' + new Date()); } const response = await fetch('https://jsonplaceholder.typicode.com/posts?_page=1&_limit=10', { cache: 'no-store', }); if (!response.ok) { throw new Error('Failed to fetch data'); } const res = await response.json(); return res; } 기본 provider 설정 'use client'; import { isServer, QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { ReactNode } from 'react'; import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; function makeQueryClient() { return new QueryClient({ defaultOptions: { queries: { staleTime: 6 * 1000, }, }, }); } type Props = { children: ReactNode }; let browserQueryClient: QueryClient | undefined = undefined; function getQueryClient() { if (isServer) { return makeQueryClient(); } else { if (!browserQueryClient) browserQueryClient = makeQueryClient(); return browserQueryClient; } } export default function Providers({ children }: Props) { const queryClient = getQueryClient(); return ( <QueryClientProvider client={queryClient}> {children} <ReactQueryDevtools /> </QueryClientProvider> ); } 서버 콘솔 브라우저 콘솔 위에 캡쳐화면 같이 fetch가 거의 동시간에 발생을 하고 있는 모습입니다. next.js router cache 때문에 30초마다 서버 컴포넌트쪽이 리랜더링 되어서 페이지를 새로고침을 하지 않고 router.push로 다시 페이지에 들어가도 서버 컴포넌트쪽이 다시 실행된다는건 이해를 했는데, 그렇다면 초기 랜더링할때와 똑같이 데이터가 prefetch되어서 클라이언트쪽 useQuery가 실행이 되지 않아야하지 않나요? 왜 두번이나 fetch가 도는건지 아무리 자료를 찾아봐도 잘 모르겠어서 결국 문의드리게 되었습니다ㅠ
3.6 네비게이팅 18분 10초 관련해서 질문있습니다. 이전 서버 컴포넌트 강의에서는 상호작용이 없는 페이지는 JS가 없기 때문에 RSC로 HTML을 만들어 보내고, JS 번들은 보내지 않는다고 이해했습니다. 그래서 프로젝트상 /book1/1 페이지는 상호작용이 없는 페이지라 프리페칭 받아도 RSC Payload만 받는게 맞지 않나?라 생각했습니다. 그런데 /book/1 페이지가 동적인 페이지라서 JS 번들을 안 받는다고 말씀하셔서 좀 헷갈립니다. 즉, 말씀하시는 부분이 상호작용이 있는 페이지라도 동적인 페이지라면 RSC만 보내주신다는 말씀인가요??
