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

(해결) 각 테스트가 상태를 공유하지 않습니다.

해결됨

스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술

[질문 템플릿] 1. 강의 내용과 관련된 질문인가요? 예 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? 예 3. 질문 잘하기 메뉴얼을 읽어보셨나요? 예 [질문 내용] "회원 리포지토리 테스트 케이스 작성" 강의에서 MemoryMemberRepositoryTest 를 작성하시며 @AfterEach 를 통해 각 테스트 케이스가 끝날 때 마다 repository 필드의 상태를 초기화해야 한다고 말씀하셨습니다. 그런데 저는 별 다른 오류가 나타나진 않아서 다음과 같이 작성해봤습니다. @AfterEach void afterEach() { System.out.println(repository.hashCode()); } 그랬더니 각 repository 의 해쉬가 서로 다르더라구요. MemoryMemberRepository 구현 내부에서 상태를 출력하게 해보면, 매 테스트 케이스마다 새로운 상태가 되는 것으로 보입니다. 제가 잘못 작성한 부분이 있는 걸까요? 아니면 스프링, 라이브러리 버전의 문제인가요? 전체 코드는 다음과 같습니다. 읽어주셔서 감사합니다. // MemoryMemberRepository.java package hello.hello_spring.repository; import hello.hello_spring.domain.Member; import java.util.HashMap; import java.util.List; import java.util.Map; import java.util.Optional; public final class MemoryMemberRepository implements MemberRepository { private final Map<Long, Member> store = new HashMap<>(); private long sequence = 0; @Override public Member save(Member member) { member.setId(++sequence); store.put(member.getId(), member); return member; } @Override public Optional<Member> findById(Long id) { return Optional.ofNullable(store.get(id)); } @Override public Optional<Member> findByName(String name) { return store.values() .stream() .filter(member -> member.getName().equals(name)) .findAny(); } @Override public List<Member> findAll() { return store.values() .stream() .toList(); } public void clearStore() { store.clear(); } } // MemoryMemberRepositoryTest.java package hello.hello_spring.repository; import hello.hello_spring.domain.Member; import org.junit.jupiter.api.AfterEach; import org.junit.jupiter.api.Test; import static org.assertj.core.api.Assertions.*; class MemoryMemberRepositoryTest { MemoryMemberRepository repository = new MemoryMemberRepository(); @AfterEach void afterEach() { System.out.println(repository.hashCode()); } @Test void save() { var member = new Member(); member.setName("spring1"); repository.save(member); var result = repository.findById(member.getId()).get(); assertThat(member).isEqualTo(result); } @Test void findByName() { Member member1 = new Member(); member1.setName("spring1"); repository.save(member1); Member member2 = new Member(); member2.setName("spring2"); repository.save(member2); var result = repository.findByName("spring1").get(); assertThat(result).isEqualTo(member1); } @Test void findAll() { Member member1 = new Member(); member1.setName("spring1"); repository.save(member1); Member member2 = new Member(); member2.setName("spring2"); repository.save(member2); var result = repository.findAll(); assertThat(result).hasSize(2); } }

  • java
  • spring
  • mvc
  • spring-boot
귀여운 고양이 댓글 1 좋아요 0 조회수 260

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

미해결

파이썬/장고 웹서비스 개발 완벽 가이드 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

환경변수 이후 build failed

해결됨

스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술

환경변수 까진 다시 설정했습니다만.. build 안되네요

  • java
  • spring
  • mvc
  • spring-boot
dmlfla7520 댓글 2 좋아요 0 조회수 138

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

미해결

[퇴근후딴짓] 빅데이터 분석기사 실기 (작업형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

정신이 나갈것같아요

해결됨

스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술

ERROR: JAVA_HOME is set to an invalid directory: C:\Program Files\Java Please set the JAVA_HOME variable in your environment to match the location of your Java installation. C:\study\hello-spring> 환경변수에 java-home 추가해서 경로 다시쓰고 자바 23버전 설치하고 인텔리제이 자바23 통일하고 다해봤는데. 안되네요

  • java
  • spring
  • mvc
  • spring-boot
dmlfla7520 댓글 1 좋아요 0 조회수 224

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

명령프롬프트 gradle builder 실행

해결됨

스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술

경로 찾아서 gradle builder 하니 오류가 뜹니다. gradle clean builder 로 해도 오류가 뜨네요. 자바 경로를 찾을 수 없다고 뜨는 것 같은데...

  • java
  • spring
  • mvc
  • spring-boot
dmlfla7520 댓글 2 좋아요 0 조회수 155

원핫인코딩

해결됨

[퇴근후딴짓] 빅데이터 분석기사 실기 (작업형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

Model, model.addAttribute 생략

미해결

스프링 MVC 2편 - 백엔드 웹 개발 활용 기술

[질문 템플릿] 1. 강의 내용과 관련된 질문인가요? 예 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? 예 3. 질문 잘하기 메뉴얼을 읽어보셨나요? 예 [질문 내용] 강의에서 @PostMapping("/converter/edit") public String converterEdit(@ModelAttribute Form form, Model model){ IpPort ipPort = form.getIpPort(); model.addAttribute(form); return "converter-form"; } 와 같이 Model 을 사용하여 model.addAttribute(form)해주었는데 가독성적으로 추가한걸까요? 생략해도 동작하는걸로 알고있어서 만약 숙달되었다면 addAttribute해주는 코드를 생략해도되는지 아니면 다른이유가있는지 알고싶습니다.

  • spring
  • mvc
김태언 댓글 2 좋아요 0 조회수 175

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

SQL 문제 답변 작성시 계행 준수해야할까요?

해결됨

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

SQL 쿼리문 작성시 계행을 잘 지켜야하는지 궁금합니다

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

인기 태그

인프런 TOP Writers

주간 인기글