173만명의 커뮤니티!! 함께 토론해봐요.
미해결
Next + React Query로 SNS 서비스 만들기
이 강의를 들을때 미리 만들어보고 정답지 비교해보라는 느낌으로 강의룰 수강하라고 하셨잖아요, 근데 수강전이나 챕터별 코드를 실행해보기 전까지는 뭐를 만들어야할지 감이 안잡혀서요. 1) 한 챕터까지 코드 실행해본다. 2) 코드 구성을 봐본다. 3) 따라 만들어 본다. 4) 해당 챕터까지 강의를 들으며 비교해본다. 요렇게 해보면 될까요? 좋은 방향 있으시면 제시해주시면 감사하겠습니다.
해결됨
Next + React Query로 SNS 서비스 만들기
현재 서버 세팅을 마친 후, 백엔드 서버는 잘 돌아가는데 npm start 로 프론트 코드 실행 시 에러가 발생하고 있습니다.이전 강의를 볼 때 까지만 해도, 프론트 코드 실행이 잘 되었는데 갑자기 에러가 발생하여 의문이 듭니다ㅠㅠ 현재 노드 버전은 v18.17.0이며 해본 시도로는 다음과 같습니다. 백엔드 서버 중지 및 memurai 실행 중지 .next 파일 삭제 및 .node_modules 파일 삭제 후 재설치 npm run build 실행 후 npm start https://github.com/vercel/next.js/discussions/57066#discussioncomment-7609639
해결됨
Next + React Query로 SNS 서비스 만들기
export const TabContext = createContext({ tab: "recommend", setTab: (value: "recommend" | "following") => {}, }); {tab: "recommend", setTab:(value: "recommend" | "following") => {}} 부분을 제거하고 빈 createContext()만 생성해도 잘 동작하는거 같은데, 매개변수값은 무엇을하는건지 궁금합니다. 그냥 타입정의 한거라고 봐도될까요?
해결됨
Next + React Query로 SNS 서비스 만들기
안녕하세요. 좋은 강의 잘 듣고 있습니다. 초반에 css 쪽 선택 하실때 emotion을 쓰면 nextjs와 문제가 있다고 말씀하셨는데요. 상세한 원인을 알고 싶습니다. 감사합니다.
해결됨
Next + React Query로 SNS 서비스 만들기
children 에 해당하는 page.tsx에서 버튼을 클릭해서 i/flow/login 으로 이돌할 때 children => (beforeLogin)/i/flow/login/page.tsx modal => @modal/i/flow/login/page.tsx 이렇게 같이 바뀌어야 하는데 @modal/(.)i 에게 인터셉트! 당해서 children은 주소가 변경되지 않고 @modal(패러랠 라우트)만 이동하게 되는걸로 이해하면 될까요? (.)i 가 children 에게 일어날 라우팅을 가로챘다 라고 생각하는게 맞는걸까요?
해결됨
Next + React Query로 SNS 서비스 만들기
1:16 에서 not found.tsx가 보이는 이유는 @폴더명으로 만든 슬롯이 layout 에서 props로 값이 들어와야 하는데 @modal/i/flow/login 으로 page.tsx가 이동해버려서 layout에서 props로 가져올 modal 값이 없어져 404가 뜨는것이고, 메인 페이지에서는 모달이 필요 없기에 default.tsx를 만들어서 해결하는 것으로 이해하면 될까요?
미해결
Next + React Query로 SNS 서비스 만들기
강의 수강중에, 배운 무한스크롤을 바탕으로 개인 프로젝트를 진행중입니다. 위의, 데이터를 받아오는 것을 보면, 처음에는 2개를 불러오고, 그 이후에는 계속 5개를 불러오는데, 제가 원하는 방식은 처음부터 끝까지 5개씩 계속 일정하게 불러오는 것을 원합니다. 이유를 찾을려고 여러가지 검색을 해보며 해봤는데도, 해결되지않아서 질문드립니다. 이 경우 의심해볼 수 있는 부분은 어떤 부분이 있을까요? 최상위 페이지에서 아래와 같이 prefetch를 해오고 type HomeProps = { params: { category: string; }; }; const CategoryDetailPage: React.FC<HomeProps> = async ({ params }) => { const { category } = params; const queryClient = new QueryClient(); const college = category; // 서버에서 불러온 데이터를 클라이언트의 리액트 쿼리가 물려받음.(하이드레이트) await queryClient.prefetchInfiniteQuery({ queryKey: ['posts', college], queryFn: ({ pageParam = 1 }) => getFilteredPosts(college, { pageParam }), // searchParams 전달 // 커서 값 initialPageParam: 0 }); // hydrate라는 것은 서버에서 온 데이터를 클라이언트에서 그대로, 물려받는 것 이다. const dehydratedState = dehydrate(queryClient); return ( <HydrationBoundary state={dehydratedState}> <Container> <ListingContainerTest /> </Container> </HydrationBoundary> ); }; export default CategoryDetailPage; 실제 무한스크롤을 사용하는 곳은 아래와 같이 사용하고 있습니다. 'use client'; import { getFilteredPosts } from '@/app/lib/getFilteredPosts'; import { useInfiniteQuery } from '@tanstack/react-query'; import { usePathname } from 'next/navigation'; import { Fragment, useEffect } from 'react'; import { useInView } from 'react-intersection-observer'; import ClimbingBoxLoader from 'react-spinners/ClimbingBoxLoader'; import EmptyState from '../EmptyState'; import ListingGrid from './ListingGrid'; const ListingCard = () => { const path = usePathname(); // ['', chss] const college = path.split('/')[1]; const { data: listings, fetchNextPage, hasNextPage, isFetching, isError } = useInfiniteQuery({ queryKey: ['posts', college], queryFn: ({ pageParam = 1 }) => getFilteredPosts(college, { pageParam }), initialPageParam: 0, // 가장 최근에 불러왔던 게시글 getNextPageParam: (lastPage) => lastPage.studyList.at(-1)?.id, staleTime: 60 * 1000, gcTime: 300 * 1000 }); // lastPage.jobList.at(-1)?.id, const { ref, inView } = useInView({ // div가 보이고나서 몇픽셀 정도의 이벤트가 호출될 것 인가? 보이자마자 바로 호출.그래서0 threshold: 0, // 몇초후에 딜레이 보일것인지. delay: 0 }); console.log(listings); useEffect(() => { if (inView) { !isFetching && hasNextPage && fetchNextPage(); } }, [inView, isFetching, hasNextPage, fetchNextPage]); if (isError || listings?.pages?.length === 0) { return <EmptyState />; } return ( <> <div className="pt-24 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-8"> {listings?.pages.map((page) => // Assuming each page has a 'studyList' property page.studyList.map((listing: any) => ( <Fragment key={listing.id}> <ListingGrid data={listing} /> </Fragment> )) )} <div ref={ref} style={{ height: 50 }}></div> </div> {isFetching && ( <div className="flex items-center justify-center"> <ClimbingBoxLoader color="#36d7b7" size={20} /> </div> )} </> ); }; export default ListingCard;
미해결
Next + React Query로 SNS 서비스 만들기
클라이언트 사이드 렌더링, 서버 사이드 렌더링이 클라이언트 컴포넌트 서버 컴포넌트인가요? 예전에 사용한 getserversideprops() 이거는 이젠 안쓰는건가요? 그러면 use client를 선언하면 csr 이고 사용하지 않으면 ssr인가요?
미해결
Next + React Query로 SNS 서비스 만들기
에러 삽질 해결법 등의 노션 자료를 공유받아보고 싶습니다
미해결
Next + React Query로 SNS 서비스 만들기
강의 2분에 서버쪽에서 쿼리 가져오는게 좋은 상황이 검색 노출이 될 때 라고 하셨는데, SEO 이외에 다른 장점은 없나요? 서버사이드가 속도가 더 빠르지 않을까 라고 생각을 하고 있었습니다.
해결됨
Next + React Query로 SNS 서비스 만들기
JWT 사용해서 로그인정보는 zustand에 저장하고 middleware.ts 파일에서 zustand state에 접근해서 유저정보값이 없으면 로그인 화면으로 리다이렉트 하고 싶습니다만, middleware.ts에서는 zustand state값을 가져오질 못하는것 같은데... 방법이 없을까요?
해결됨
Next + React Query로 SNS 서비스 만들기
React Query 공식 문서에 보면 queryClient 인스턴스를 생성해서 바로 QueryClientProvider의 client로 넘겨주고 있는데 제로초님께서는 useState의 초기 값으로 QueryClient의 인스턴스를 생성해서 넘겨주는 방법을 사용하셨는데요. 이 두가지 방법 중에 어떤 것을 사용해야 좋을지 궁금합니다. // 공식 문서 const queryClient = new QueryClient() function App() { return ( <QueryClientProvider client={queryClient}> <Todos /> </QueryClientProvider> ) } // 제로초님 강의 function ReactQueryProvider({children} : Props) { const [client] = useState( new QueryClient({ defaultOptions: { queries: { refetchOnWindowFocus: false, retry: false, } } } ) ) return <QueryClientProvider client={queryClient}></QueryClientProvider> }
미해결
Next + React Query로 SNS 서비스 만들기
redirect는 try/catch문 안에 있으면 안돼서 그 위해 shouldRedirect의 값으로 조건문을 만들어 if문 안에서만 redirect하게 하셨는데, 이후에 catch문에서 return을 넣어주시더라고요. 그러면 shouldRedirect라는 변수를 쓰지 않아도 어차피 catch문이 실행된 경우에는 return 되니까 redirect를 아래에 그냥 배치해도 상관없지 않나 질문드립니다.
해결됨
Next + React Query로 SNS 서비스 만들기
강의에서 알려주신 router.replace() 를 사용하지 않고 // @/app/(beforeLogin)/@modal/(.)login/page.tsx import { redirect } from "next/navigation"; export default function Login() { redirect("/i/flow/login"); } 기존의 이 코드를 인터셉트 라우팅으로 줘서 홈페이지 -> 인터셉트 라우팅된 /login -> 인터셉트 라우팅된 /i/flow/login 으로 이동하도록 폴더를 구성해서 구현해 봤습니다. 이 방식으로 구현해도 문제 없을까요?
미해결
Next + React Query로 SNS 서비스 만들기
이미지에 Link 태그를 쓰는거에 대한 질문입니다. Link 같은 경우에는 default로 prefetch가 되는데, 이미지를 눌렀을때 나오는 정보들은 굳이 prefetch를 미리 하고 있을 필요는 없겠죠? 그러면 실제 서비스라면 prefetch를 false로 하거나 router.push를 이용하는게 좋지 않을지 궁금합니다. 페이지를 구성할때 존재하는 모든 경로를 Link 태그로 그냥 쓰게 되면 prefetch가 모두 되어버려서, 큰 카테고리를 이동하는 경우만 prefetch를 키면 되지 않을까 하는 고민입니다.
해결됨
Next + React Query로 SNS 서비스 만들기
선생님이 사용하시는 IDE는 , 속성의 종류가 회색글씨로 나오는게, 마치 타입스크립트처럼 복잡하게 생각할 필요 없이 명시적으로 나와서 편해 보입니다. 혹시 vscode에서도 저런 익스텐션이 있을까요? 아니면 웹스톰을 사용하면 저게 자동으로 나오나요?
미해결
Next + React Query로 SNS 서비스 만들기
강좌 잘 따라가고 마지막 부분에서 서버 띄우기 위해 터미널을 하나 더 열고 명령어를 적었습니다. 해당에러 node_module파일에 msw에 내부 파일에서 Response를 참지하지 못한다는 에러가 있어서 .. 브런치를 다시 지우고 작업도해보고 구글링과 공식문서를 보았는데도 문제의 해결점을 찾지 못하던 중에 12시간 전에 올라온 저와 동일한 문제를 가진 사람을 발견했어요 - ! https://www.reddit.com/r/nextjs/comments/1997wb3/msw_2x_and_nextjs_14_has_anyone_successfully/ 하지만, 이 분도 해결하지 못한거 같더라구요ㅠㅠ 현재 저의 msw버전은 msw 버전 낮춰서 작업을 하는 법이 해결방법인가요 ? 또 하나의 작은 질문입니다만, 현재 nodejs의 임시방편적인 코드를 사용하고 있는데 서버 관련 코드를 setupServer를 사용해도 괜찮을까요 ?
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요 제목 처럼, 저는 @modal을 app경로에 생성해서 root 디렉토리의 page.tsx 와 함께 layout.tsx에 그려지길 원합니다. 그래서 저는 로그인 페이지를 따로 작성해서 가지고 있지 않고, 어느 페이지에서든지 모달창이 나오게 하고 싶습니다.
미해결
Next + React Query로 SNS 서비스 만들기
/ 로 들어갈 때 (beforeLogin) 폴더에 layout.tsx가 렌더링 되는 이유가 뭐에요? (afterLogin) 폴더 밑에도 layout.tsx가 있는데 (beforeLogin) 폴더 밑에 layout.tsx가 칠드런으로 선택되는 이유가 궁금합니다.
해결됨
Next + React Query로 SNS 서비스 만들기
> duckblog@0.1.0 build > next build && next export ⚠ Invalid next.config.js options detected: ⚠ Unrecognized key(s) in object: 'appDir' at "experimental" ⚠ Unrecognized key(s) in object: 'dynamic' ⚠ See more info here: https://nextjs.org/docs/messages/invalid-next-config ▲ Next.js 14.0.4 ✓ Creating an optimized production build ✓ Compiled successfully ✓ Linting and checking validity of types > Build error occurred Error: Page "/post/[id]" is missing "generateStaticParams()" so it cannot be used with "output: export" config. at /Users/gyeongdeokpark/Documents/01.GitHub/duckblog/node_modules/next/dist/build/index.js:1012:59 at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async Span.traceAsyncFn (/Users/gyeongdeokpark/Documents/01.GitHub/duckblog/node_modules/next/dist/trace/trace.js:147:20) at async Promise.all (index 6) at async /Users/gyeongdeokpark/Documents/01.GitHub/duckblog/node_modules/next/dist/build/index.js:892:17 at async Span.traceAsyncFn (/Users/gyeongdeokpark/Documents/01.GitHub/duckblog/node_modules/next/dist/trace/trace.js:147:20) at async /Users/gyeongdeokpark/Documents/01.GitHub/duckblog/node_modules/next/dist/build/index.js:829:124 at async Span.traceAsyncFn (/Users/gyeongdeokpark/Documents/01.GitHub/duckblog/node_modules/next/dist/trace/trace.js:147:20) at async build (/Users/gyeongdeokpark/Documents/01.GitHub/duckblog/node_modules/next/dist/build/index.js:187:29) at async main (/Users/gyeongdeokpark/Documents/01.GitHub/duckblog/node_modules/next/dist/bin/next:157:5) next.config.js /** @type {{output: string, assetPrefix: string, experimental: {appDir: boolean}}} */ const nextConfig = { experimental: { appDir: true, }, output: "export", assetPrefix: "/duckblog/", // dynamic: "force-static", }; module.exports = nextConfig; build시에 발생하는 에러입니다. dynamic route에서 에러가 발생하는것 같은데 깃헙이슈나 레디스에 올라와있는 방법으로도 잘 해결이 안되네요... output export 를 없애고 빌드르 하면 아래와 같은 에러가 발생합니다 The "next export" command has been removed in favor of "output: export" in next.config.js. Learn more: https://nextjs.org/docs/advanced-features/static-html-export
