inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

묻고 답해요

172만명의 커뮤니티!! 함께 토론해봐요.

ISR 테스트 중 궁금점

해결됨

Next + React Query로 SNS 서비스 만들기

// src/components/TanstackQueryOption.ts import { isServer, QueryClient, defaultShouldDehydrateQuery, } from '@tanstack/react-query' function makeQueryClient() { return new QueryClient({ defaultOptions: { queries: { staleTime: 15 * 1000, }, dehydrate: { shouldDehydrateQuery: (query) => defaultShouldDehydrateQuery(query) || query.state.status === 'pending', }, }, }) } let browserQueryClient: QueryClient | undefined = undefined export function getQueryClient() { if (isServer) { return makeQueryClient() } else { if (!browserQueryClient) browserQueryClient = makeQueryClient() return browserQueryClient } } // src/components/TanstackQueryProvider.tsx 'use client' import { getQueryClient } from '@/component/TanstackQueryOption'; import { QueryClientProvider, } from '@tanstack/react-query' import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; import { ReactNode } from 'react' export default function TanstackQueryProvider({ children }: { children: ReactNode }) { const queryClient = getQueryClient() return ( <QueryClientProvider client={queryClient}> {children} <ReactQueryDevtools initialIsOpen={process.env.NEXT_PUBLIC_MODE === 'local'} /> </QueryClientProvider> ) } // src/app/layout.tsx import Banner from "@/component/Banner"; import Footer from "@/component/Footer"; import Header from "@/component/Header"; import TanstackQueryProvider from "@/component/TanstackQueryProvider"; import type { Metadata } from "next"; import { Inter } from "next/font/google"; import "@/app/global.css"; const inter = Inter({ subsets: ["latin"] }); export const metadata: Metadata = { title: "Create Next App", description: "Generated by create next app", }; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( <html lang="en"> <body> <TanstackQueryProvider> <div className='container'> <Banner/> <Header/> <main>{children}</main> <Footer/> </div> </TanstackQueryProvider> </body> </html> ); } // src/app/page.tsx import ProductList from "@/component/ProductList"; import { getQueryClient } from "@/component/TanstackQueryOption"; import { getProducts } from "@/fetch/getProducts"; import { dehydrate, HydrationBoundary, QueryClient } from "@tanstack/react-query"; import Image from "next/image"; export default function Page () { const newQueryClient = getQueryClient(); newQueryClient.prefetchQuery({ queryKey:['products'], queryFn: getProducts, }) return ( <> <section className='visual-sec'> <Image src="/visual.png" alt="visual" width={1920} height={300}/> </section> <section className="product-sec"> <h2>상품 리스트</h2> <HydrationBoundary state={dehydrate(newQueryClient)}> <ProductList /> </HydrationBoundary> </section> </> ) }; 'use client' // src/components/ProductList.tsx import Product from "@/component/Product"; import { getProducts } from "@/fetch/getProducts"; import { useQuery, useSuspenseQuery } from "@tanstack/react-query"; import styles from "@/component/ProductList.module.css"; export const ProductList = () => { const {data, isLoading, isFetching} = useSuspenseQuery({queryKey: ['products'], queryFn: getProducts}); console.log(`isLoading: ${isLoading}, isFetching: ${isFetching}`) return ( <div className={styles.productList}> {data?.map((product: any) => ( <Product key={product.item_no} product={product} /> ))} </div> ) }; export default ProductList; // src/components/Product.tsx import Link from "next/link"; import Image from "next/image"; export const Product = ({product} : any) => { return ( <Link href={`/product/${product.item_no}`} prefetch> <Image src={product.detail_image_url} alt={product.item_name} width={500} height={300} /> <h3>{product.item_name}</h3> <span>{product.price}</span> </Link> ) } export default Product; // src/app/product/[id]/page.tsx export default function ProductDetailPage() { return ( <> 상품 상세페에지 </> ) } // src/fetch/getProducts.ts export const getProducts = async () => { const res = await fetch(`http://localhost:9090/api/products`, { method: "GET", headers: { "Content-Type": "application/json", }, next: { revalidate: 10, } }); const currentTime = new Date().toLocaleTimeString(); const data = await res.json(); if (typeof window === "undefined") { console.log('fetch products', 'server', currentTime); console.table(data); } else { console.log('fetch products', 'client', currentTime); console.table(data); } if(!res.ok) { throw new Error("Failed to fetch products"); } return data; } // src/server/server.js import express from "express"; import cors from "cors"; const app = express(); const port = 9090; app.use(cors()); app.use(express.json()); app.get("/api/products", (req, res) => { const currentTime = new Date().toLocaleTimeString(); console.log(`Received request at ${currentTime}`); const products = [ { item_no: 122997, item_name: '상품 1', detail_image_url: 'https://picsum.photos/id/237/500/500', price: 75000, }, { item_no: 768848, item_name: '상품 2', detail_image_url: 'https://picsum.photos/id/238/500/500', price: 42000, }, { item_no: 552913, item_name: '상품 3', detail_image_url: 'https://picsum.photos/id/239/500/500', price: 240000, }, // { // item_no: 1045738, // item_name: '상품 4', // detail_image_url: // 'https://picsum.photos/id/240/500/500', // price: 65000, // }, ]; res.json(products); }); app.listen(port, () => console.log('Server is running')); 안녕하세요, fetch와 tanstackQuery를 사용해서 ISR 동작을 테스트하고있었습니다. 테스트 마다 .next 파일은 지우고 새로 build 하여 run start를 통하여 확인하였습니다. staleTime과 revalidate 의 시간이 서로 상이한데, 동일하게 설정했을때, 시간의 간격을 두었을때의 차이점을 직접 확인하려고 하였는데 어떤점에서 차이가 나는지 보고도 이해가 안가서 질문드립니다. 궁금점 1. staleTime과 revalidate 는 gcTime 처럼 staleTime이 revalidate보다 적은 시간으로 설정을 해야하는지? 그렇다면 그 이유는 gcTime보다 작게 설정하는 이유와 같은지? 가 궁금합니다. 2. server.js에 주석처리해놓은 item을 다시 주석을 해지하면 처음 revaildate의 10초 설정으로 인해 새로고침을해도 아이템은 계속 페이지에서 3개만 노출되고있고, 상품을 클릭해서 이동을 하면서 staleTime의 설정인 15초가 되었을때는 client 요청이 발생하여 아이템이 4개로 잘 노출되고있습니다. 하지만 이 때 새로고침을 하게되면 처음 fetch revalidate로 cache되어있던 데이터인 아이템 3개까지만 노출이 되고 새로고침을 한번 더 진행해야 그때서야 4개로 노출이되는데 클라이언트와 서버 쪽이 서로 싱크가 안맞는거같은데 이러한 문제점이 왜 일어나는지 이해가 잘안됩니다! 3. 확장된 fetch와 tanstackQuery를 어떻게 분리해서 사용해야할까도 많이 고민이 되는데.. queryFn 에 이미 fetch로 만들어둔 함수를 가져와 사용하니 분리라는 개념을 생각하면 안되는걸까요? fetch를 독립적으로 사용하는 경우도있다고하는데 이 경우는 왜 독립적으로 사용하는지 잘모르겠습니다.

  • react
  • next.js
  • react-query
  • next-auth
  • msw
밍끼 댓글 1 좋아요 0 조회수 264

작업형1 모의문제 1-2 gold값 가진 데이터 수

해결됨

[퇴근후딴짓] 빅데이터 분석기사 실기 (작업형1,2,3)

gold값을 가진 데이터 수를 구할 때 아래의 코드처럼 조건문 대신 .str과 .sum을 사용해도 괜찮은 건가요? print(df['f3'].str.contains('gold').sum())

  • python
  • 머신러닝
  • 빅데이터
  • pandas
  • 빅데이터분석기사
gniddup5 댓글 2 좋아요 0 조회수 107

mallapi 와 apiserver 프로젝트

미해결

코드로 배우는 React 19 with 스프링부트 API서버

각각 vscode, intelliJ로 생성하였는데 다른 툴을 사용한 이유가 무엇인가요 그리고 두 프로젝트는 역할이 어떻게 다른가요

  • react
  • spring-boot
  • jpa
  • jwt
  • redux-toolkit
이서연 댓글 1 좋아요 0 조회수 202

커리큘럼 관련 문의드립니다.

미해결

파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)

안녕하세요! 먼저 좋은 강의 제공해주셔서 감사드립니다. 이번에 프로젝트로 FE는 React, BE는 Django로 진행하게 되었고, 제가 Django를 맡게 되어 해당 강의를 수강 중에 있습니다. 커리큘럼을 보다보니 아래 처럼 Django로 FE부분도 구현하는 섹션들이 있는데요! 섹션 (8) 장고 Form을 활용한 생산성 높은 입력폼 처리 섹션 (10) 장고 주도의 웹 프론트엔드 기술과 웹 컴포넌트 섹션 (11) (포토로그 프로젝트) 장고 중심의 웹 서비스 개발하기 물론 나중에는 다 듣겠지만.. 아무래도 시간이 한정되어 있어, Django로 BE만 구현한다고 했을 때 이러한 섹션들도 필수적으로 들어야 하는 것인지 궁금합니다. 예를들면 이후 강의를 수강하려면 앞 강의가 필수적이여야 한다던지 등의 사유가 있을 것 같습니다. 만약에 프로젝트만을 위해서 일단 스킵 가능하다면, 이외에도 혹시 스킵 가능한 섹션이 있는지 문의드립니다! 좋은 강의 만들어주셔서 감사합니다~!

  • react
  • python
  • django
  • web-api
  • htmx
uk.choi 댓글 1 좋아요 0 조회수 135

웹뷰(Webview) 패키지 디버깅, 빌드 안 됨 문의드립니다.

미해결

[코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!

웹뷰 강의 듣는 중에 오류가 생겨 문의드립니다. pub dev에서 웹뷰 플러터 패키지를 설명대로 플러터 터미널을 이용해 내려받고 pubspec.yaml에서도 등록했습니다. 안드로이드/app/src 빌드.그래들 파일에도 minsdkversion을 19로 작성도 했습니다. 21도 적어봐라 flutter clean해서 다시 pub get 해라는 글도 봐서 그렇게 했는데도 안 됩니다...ㅜ 자꾸 디버깅 에러라며 코드 실행 자체가 안 되네요. 앱이 빌드가 안 됩니다. ㅜㅜ 웹뷰 패키지를 main.dart에 임포트할 때는 정상인데 디버깅 때 이럽니다. 그래서 pubspec.yaml에서 해당 웹뷰 패키지를 제거하면 또 잘 빌드 됩니다...해당 패키지만 켜면 안 돼요. 구글링 해보니 jdk를 21로 설정해라...그래들 업데이트를 해라 이래저래 해봤는데도 안 되네요.. 해당 내용은 이렇습니다. 어찌 해야할까요. 검색해서 이래저래 해봤는데 아무래도 한계인 거 같아 문의드립니다. Running Gradle task 'assembleDebug'... FAILURE: Build failed with an exception. * What went wrong: Execution failed for task ':webview_flutter_android:compileDebugJavaWithJavac'. > Could not resolve all files for configuration ':webview_flutter_android:androidJdkImage'. > Failed to transform core-for-system-modules.jar to match attributes {artifactType=_internal_android_jdk_image, org.gradle.libraryelements=jar, org.gradle.usage=java-runtime}. > Execution failed for JdkImageTransform: C:\Users\admin\AppData\Local\Android\sdk\platforms\android-34\core-for-system-modules.jar. > Error while executing process C:\Program Files\Android\Android Studio\jbr\bin\jlink.exe with arguments {--module-path C:\Users\admin\.gradle\caches\transforms-3\4a46fc89ed5f9adfe3afebf74eb8bfeb\transformed\output\temp\jmod --add-modules java.base --output C:\Users\admin\.gradle\caches\transforms-3\4a46fc89ed5f9adfe3afebf74eb8bfeb\transformed\output\jdkImage --disable-plugin system-modules} * Try: > Run with --stacktrace option to get the stack trace. > Run with --info or --debug option to get more log output. > Run with --scan to get full insights. > Get more help at https://help.gradle.org. BUILD FAILED in 3s Error: Gradle task assembleDebug failed with exit code 1

  • flutter
  • 클론코딩
매일커피 댓글 1 좋아요 0 조회수 784

원핫인코딩 시 표출 오류 및 컬럼수 불일치

미해결

[퇴근후딴짓] 빅데이터 분석기사 실기 (작업형1,2,3)

아래와 같이, 수업에서 나온 코드 동일하게 작성했습니다. # 원핫 인코딩 n_train, n_test, c_train, c_test = get_nc_data() # 데이터 새로 불러오기 display(c_train.head()) c_train=pd.get_dummies(c_train[cols]) c_test=pd.get_dummies(c_test[cols]) display(c_train.head()) 그러나 원핫 인코딩에서 강의처럼 코드 표출이 안 됩니다. -> true , false로 표출됩니다. 또한, 컬럼 수도 99개로 1개 모자랍니다. 무엇이 오류일까요..?

  • python
  • 머신러닝
  • 빅데이터
  • pandas
  • 빅데이터분석기사
uhroo lee 댓글 2 좋아요 0 조회수 217

22강 다차원 배열과 문자열 배열 j=0으로 선언되는 사유

해결됨

(2026 최신!) 일주일만에 합격하는 정보처리기사 실기

22강 다차원 배열과 문자열 배열 j=0으로 선언되는 사유가 궁금합니다. 04:38 에 for 문 2개인데 첫번째 for문 탈출 후에 두번째 for 문에서 j=2 상태에서 위 for문으로 올라갈때 j가 다시 j=0으로 선언되는 사유가 궁금합니다.

  • python
  • java
  • c
  • 정보처리기사
s 댓글 2 좋아요 0 조회수 184

커스텀 DateConverter

해결됨

파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)

커스텀 DateConverter 04-03 강의 링크가 잘못되어 있는 것 같습니다!!

  • react
  • python
  • django
  • web-api
  • htmx
uk.choi 댓글 2 좋아요 0 조회수 117

get_todos_handler 부분 쿼리 매개변수 인식 오류

해결됨

실전! FastAPI 입문

from fastapi import FastAPI app = FastAPI() @app.get('/') def heath_check_handler(): return {'ping': 'pong'} todo_data = { 1 : { 'id' : 1, 'contents' : '실전! FastAPI 섹션 0 수강', 'is_done' : True, }, 2: { 'id': 2, 'contents': '실전! FastAPI 섹션 1 수강', 'is_done': False, }, 3: { 'id': 3, 'contents': '실전! FastAPI 섹션 2 수강', 'is_done': False, }, } # 내림차순(큰값 -> 작은값) @app.get("/todos") def get_todos_handler(order: str | None = None): ret = list(todo_data.values()) if order and order == 'DESC': return ret[::-1] return ret 위와 같이 강사님 코드 그대로 실행하고, 패키지 버전도 FastAPI==0.97.0인데, 쿼리 매개변수가 인식이 안되는데, 무슨 문제일까요?

  • python
  • 리팩토링
  • orm
  • FastAPI
  • pytest
문승주 댓글 2 좋아요 0 조회수 154

flutter_file_downloader 패키지 설치 후 앱 실행 시 오류 발생!

미해결

Flutter로 메신저앱 만들기

안녕하세요? 강의 잘 따라해 보고 있습니다. 제목 그대로 동영상 파일을 다운로드 받기 위해 flutter_file_downloader 패키지를 설치한 이후 앱을 재실행하면 오류가 발생합니다. ----------------------------------------------- FAILURE: Build failed with an exception. * What went wrong: A problem occurred configuring project ':flutter_file_downloader'. > Could not create an instance of type com.android.build.api.variant.impl.LibraryVariantBuilderImpl. > Namespace not specified. Specify a namespace in the module's build file. See https://d.android.com/r/tools/upgrade-assistant/set-namespace for information about setting the namespace. If you've specified the package attribute in the source AndroidManifest.xml, you can use the AGP Upgrade Assistant to migrate to the namespace value in the build file. Refer to https://d.android.com/r/tools/upgrade-assistant/agp-upgrade-assistant for general information about using the AGP Upgrade Assistant. * Try: > Run with --stacktrace option to get the stack trace. > Run with --info or --debug option to get more log output. > Run with --scan to get full insights. > Get more help at https://help.gradle.org. BUILD FAILED in 889ms Error: Gradle task assembleDebug failed with exit code 1 ----------------------------------------------- 현재 최신 버전이 2.0.0 인데,, 예제 소스 상의 버전이 1.2.1 인데, 이 버전을 받아 봐도 동일한 현상입니다. 동영상 강의에서 강의노트에 설명을 달아 놓으셨다고 하는데, 강의 노트를 찾을 수가 없네요.. 조언 부탁드립니다.

  • flutter
  • android
  • firebase
  • dart
  • riverpod
011414 댓글 3 좋아요 0 조회수 1005

Gorouter 메인함수 호출관련 질문

미해결

[코드팩토리] [중급] Flutter 진짜 실전! 상태관리, 캐시관리, Code Generation, GoRouter, 인증로직 등 중수가 되기 위한 필수 스킬들!

Gorouter를 활용하여 class _App extends ConsumerWidget { const _App({Key? key}) : super(key: key); @override Widget build(BuildContext context,WidgetRef ref) { final router = ref.watch(routerProvider); return MaterialApp.router( // 시스템 설정에 따른 Theme // themeMode: ThemeMode.system, theme: TAppTheme.lightTheme, // darkTheme: TAppTheme.darkTheme, debugShowCheckedModeBanner: false, routerDelegate: router.routerDelegate, routeInformationParser: router.routeInformationParser, routeInformationProvider: router.routeInformationProvider, ); } } final routerProvider = Provider<GoRouter>((ref){ final provider = ref.watch(authProvider); return GoRouter( routes: provider.routes, initialLocation: '/splash', refreshListenable: provider, redirect: provider.redirectLogic ); }); 위와 같이 메인함수를 호출하고 있습니다. 여기서 푸쉬 알림을 받을때 특정 경로로 이동하게 하고 싶다면 GoRouter의 initiallocation을 활용해서 특정 경로로 보내야할거같은데 스플래시화면에서 로그인 검증하여 로그인 되어있다면 특정경로로 이동하고 로그인 안되어있다면 특정경로를 이동하지않고 로그인화면으로 이동하고싶은데 방법을 잘 모르겠습니다

  • flutter
  • 하이브리드-앱
dlckdals9467 댓글 2 좋아요 0 조회수 180

원핫인코딩

해결됨

[퇴근후딴짓] 빅데이터 분석기사 실기 (작업형1,2,3)

기출 3회 작업 2유형에 원핫 인코딩을 하면 0/1로 변환이 되는 것이 아니라 True/False 로 변환이 되는데.. 이유가 뭘까요?

  • python
  • 머신러닝
  • 빅데이터
  • pandas
  • 빅데이터분석기사
96dudwl 댓글 2 좋아요 0 조회수 137

중복값이 있는 데이터 생성 'car' 부분

미해결

[퇴근후딴짓] 빅데이터 분석기사 실기 (작업형1,2,3)

학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! 질문과 관련된 영상 위치를 알려주면 더 빠르게 답변할 수 있어요 먼저 유사한 질문이 있었는지 검색해보세요 계속해서 오류가 뜨는데 이유를 모르겠습니다 ㅜㅜ

  • python
  • 머신러닝
  • 빅데이터
  • pandas
  • 빅데이터분석기사
jeongyunida 댓글 2 좋아요 0 조회수 116

7.2 강 구글 로그인 1 강좌에서 redirectTo 로 설정해도 이동이 안되요.

미해결

Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)

강좌 잘 보고 있습니다. package.json 버전은 모두 같습니다. 강좌에 있는데로 모두 supabase.com 에서 셋팅을 했습니다. 구글 로그인 코드도 다 정상 작동이 되는데 http://localhost:3000 으로 이동을 하네요. Redirect URLs 에는 http://localhost:3000/auth 로 작성해 둔 상태입니다. ㅠㅠ; "use client"; import useHydrate from "@/hooks/useHydrate"; import { createSupabaseBrowserClient } from "@/lib/client/supabase"; import { Auth } from "@supabase/auth-ui-react"; import { ThemeSupa } from "@supabase/auth-ui-shared"; import { useEffect, useState } from "react"; export default function AuthUI() { const [user, setUser] = useState(); const supabase = createSupabaseBrowserClient(); const isMount = useHydrate(); const getUserInfo = async () => { const result = await supabase.auth.getUser(); console.log(result); }; useEffect(() => { getUserInfo(); }, []); if (!isMount) return null; return ( <section className="w-full"> <div className="mx-auto max-width-[500px]"> <Auth // redirectTo={process.env.NEXT_BUBLIC_AUTH_REDIRECT_TO} redirectTo="http://localhost:3000/auth" supabaseClient={supabase} appearance={{ theme: ThemeSupa, }} onlyThirdPartyProviders providers={["google", "github"]} /> </div> </section> ); }

  • react
  • 클론코딩
  • next.js
  • supabase
댓글 3 좋아요 0 조회수 444

Java기출변형

해결됨

(2026 최신!) 일주일만에 합격하는 정보처리기사 실기

29:30 마지막 세줄 System.out.println(result(1); System.out.println(result(2); System.out.println(result(3);은 왜 출력안하나요?

  • python
  • java
  • c
  • 정보처리기사
SUDAM 댓글 2 좋아요 0 조회수 184

3회 대비영상 2번째 동영상 질문있어요.

해결됨

(2026 최신!) 일주일만에 합격하는 정보처리기사 실기

int arr[2] = {++a, b++} printf(a,b) printf(arr[0],arr[1]); 배열안에는 왜 b++의 값이 6으로 출력되지 않는가요? 배열에서 후위 연산자가 적용이 안된다고 보면 되는것일까요? (설명하신대로 배열에 적용 후 +1이 되기때문에 미적용?) 왜 자식클래스의 sharedMethod 호출됨이 출력되지..? 오류가 나야하는게 아닌가..? 10분동안 봤는데 이제보니 소문자의 parent였네요.. 낚시 제대로 당했습니다..ㅠㅠ 2번은 해결완료..!

  • python
  • java
  • c
  • 정보처리기사
주서 댓글 1 좋아요 0 조회수 117

32:14 질문있습니다!

해결됨

(2026 최신!) 일주일만에 합격하는 정보처리기사 실기

안녕하세요. 혹시 답을 SELECT * FROM 제품 WHERE 단가 < (SELECT AVG(단가) FROM 제품); 으로 해도 상관 없을까요? 질문은 동영상 강의에 들어가서 오른쪽에 커뮤니티 버튼을 통해 해주세요. 그래야 어떤 강좌에서 질문하셨는지 알 수 있습니다. 영상에서 몇 분 몇 초 대를 알려주셔야 제가 한 번에 질문 내용 확인이 가능합니다. 이미 다른 누군가가 질문을 한 이력 이 있을 수 있습니다. 질문 게시판을 한 번 확인 부탁드립니다. 학교의 과제나 타 강사의 코드 등 외부 수업 자료에 대해서는 답변하지 않습니다. 제가 다루는 커리큘럼 외의 이론이나, 너무 디테일한 컴퓨터 이론에 대해서는 답변 드리지 않습니다. 시험에 안 나오는 경우가 많고, 나와 봤자 1문제 나오는데 외워야 할 부분이 많은 것 등 (예시: 서브넷 마스크 계산) 질문을 올릴 때 이 글은 모두 지우고 내용을 입력해주세요.

  • python
  • java
  • c
  • 정보처리기사
문홍준 댓글 2 좋아요 0 조회수 150

인기 태그

인프런 TOP Writers

주간 인기글