개요 react-modal 라이브러리를 사용하고 있다가 Storybook에 등록하여 관리하고 싶어서 작성하는데 아래와 같이 컴포넌트를 작성했다가 스토리북 화면에서에러가 발생하였습니다. 강사님께서는 Modal의 경우 어떤식으로 해서 Storybook을 동작가능하게 하셨는지 궁금합니다. 현재는 Modal.setAppElement('body')로 처리하여 임시로 실행되게 하였으나, 더 좋은 다른 방법이 있을지 질문드립니다. import Modal from 'react-modal'; Modal.setAppElement('#root'); // 모달이 열린 상태에서도 접근성을 보장하기 위해 필요합니다. const BaseModal: React.FC<BaseModalProps> = ({ Missing Context/Providers: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the Decorators documentation.
안녕하세요! 이번에 새롭게 강의를 듣기 시작하게 된 sunny라고 합니다! 학습용 DB를 설정하고 있는 상황인데됴! 말씀주신대로 code를 다운로드 받고, 사용 폴더로 이동시킨 후 npm i , Supabase 설정하여 .env 파일에 DATABASE_URL 변수까지 잘 설정해주었습니다. 이후 과정인 npx prisma db push 과정에서 소요시간이 너무 오래 걸려서.. 혹시 제가 확인해볼 수 있는 방법 혹은 예측되는 상황이 있으실까 하여 질문드리게 되었습니다!! ㅠㅠ 혹시 몰라 node_modules 폴더 삭제 후 재실행 했는데도 동일한 현상이 발생하고 있는데.. 제가 확인해볼 수 있는 부분들이 있을까요?? 감사합니다!
안녕하세요. 진도가 100% 완료가 안됩니다. 첨부드린 것처럼 마지막 강의가 . 으로 되어 있고 눌러봐도 영상 나오는 것도 없고 강의가 진행되는게 없습니다. 마지막 강의 완료가 안되서 진도율이 98%에서 멈춰있고 100%가 안되는거 같은데 확인 부탁드립니다. 다른 강의는 모두 수강했습니다.
안녕하세요! 먼저 좋은 강의 제공해주셔서 감사드립니다. 이번에 프로젝트로 FE는 React, BE는 Django로 진행하게 되었고, 제가 Django를 맡게 되어 해당 강의를 수강 중에 있습니다. 커리큘럼을 보다보니 아래 처럼 Django로 FE부분도 구현하는 섹션들이 있는데요! 섹션 (8) 장고 Form을 활용한 생산성 높은 입력폼 처리 섹션 (10) 장고 주도의 웹 프론트엔드 기술과 웹 컴포넌트 섹션 (11) (포토로그 프로젝트) 장고 중심의 웹 서비스 개발하기 물론 나중에는 다 듣겠지만.. 아무래도 시간이 한정되어 있어, Django로 BE만 구현한다고 했을 때 이러한 섹션들도 필수적으로 들어야 하는 것인지 궁금합니다. 예를들면 이후 강의를 수강하려면 앞 강의가 필수적이여야 한다던지 등의 사유가 있을 것 같습니다. 만약에 프로젝트만을 위해서 일단 스킵 가능하다면, 이외에도 혹시 스킵 가능한 섹션이 있는지 문의드립니다! 좋은 강의 만들어주셔서 감사합니다~!
안녕하세요. 강사님 React 로 CSR 개발/배포된 시스템을 운영해본 적이 있는데요. nginx 가 단순히 정적 파일들만 클라이언트로 전달하니 서버 성능을 생각할 필요가 전혀 없었습니다. 그런데 Next.js 강의를 들으면서 SSR/SSG 에 대한 설명을 듣고나니 이 경우에는 서버 성능이 중요할 것 같다는 생각이 드네요. SSR/SSG 는 사용자 요청량이 증가하는만큼 서버 스펙도 확장될 수 있는 고민들이 필요한가요?
state 변화에 따른 ui를 렌더링 할 때 render 함수 내부 코드가 매우 방대할 경우 보편적으로 어떤 로직 처리를 하는지 궁금합니다. (memo만 추가했지만, memo 렌더링 코드외의 다른 관련없는 렌더링 코드들이 방대할 경우입니다.) 강사님 좋은 강의 감사합니다!! 많이 배우고 있습니다 :)
오류코드: (venv) PS C:\workspace\melon_clone> python manage.py migrate music not found: C:\workspace\melon_clone\.env Operations to perform: Apply all migrations: music Running migrations: No migrations to apply. (venv) PS C:\workspace\melon_clone> 이렇게 조회하면 sql문장 다 나오는데 이제 migrate가 적용이 안됩니당.. 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
안녕하세요 강의를 듣는중 추가적으로 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가 도는건지 아무리 자료를 찾아봐도 잘 모르겠어서 결국 문의드리게 되었습니다ㅠ
리액트를 배포하려고 하는데 502error -nginx- 가 뜹니다. 환경 개요의 상태는 'Degraded'가 발생합니다. 이벤트의 로고에는 ' Environment health has transitioned from Info to Degraded. Application update completed 28 seconds ago and took 73 seconds. Impaired services on all instances.' 와 같은 문구가 발생합니다.
