inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

두개의 차이점

해결됨

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

안녕하세요, 아래 ISR에 대해서 질문드렸었는데, nextjs 에서 2가지 구현 방법이있다고 해서 두가지가 어떤 차이점이 있고 어떻게 활용하는게 좋을지 궁금해서 질문드립니다! 1번 방법 = fetch API 의 revlidate를 활용하여 ISR 구현 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 async function ProductPage () { const queryClient = getQueryClient(); await queryClient.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(queryClient)}> <ProductList /> </HydrationBoundary> </section> </> ) } import { isServer, QueryClient, defaultShouldDehydrateQuery, } from '@tanstack/react-query' function makeQueryClient() { return new QueryClient({ defaultOptions: { queries: { staleTime: 10 * 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 } } '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={true} /> </QueryClientProvider> ) } export const getProducts = async () => { const res = await fetch(`http://localhost:9090/api/products`, { method: "GET", headers: { "Content-Type": "application/json", }, next: { revalidate: 10, } }); const data = await res.json(); const currentTime = new Date().toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit', second: '2-digit', fractionalSecondDigits: 3, hour12: false, }); 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; } 2번 방법 = export const revalidate 로 시간 설정 후 fetch로 받은 data 값을 바로 렌더링 시키기 import Product from "@/component/Product"; import styles from '@/component/ProductList.module.css'; import Image from "next/image"; export const revalidate = 10; export default async function Product2Page() { const data = await fetch('/api/products'); const products = await data.json(); console.log(revalidate, 'Product2Page'); return ( <> <section className='visual-sec'> <Image src="/visual.png" alt="visual" width={1920} height={300}/> </section> <section className="product-sec"> <h2>상품 리스트</h2> <div className={styles.productList}> {products.map((product: any) => ( <Product key={product.item_no} product={product} /> ))} </div> </section> </> ) } 2개다 ISR로 구현되며, 1번 방법은 Data Cache 캐싱 매커니즘을 활용하고, 2번 방법은 Full Router Cache 캐싱 매커니즘을 활용한다의 차이점으로 생각이 드는데, 이 외에 다른 차이점과 실제 개발을 하면서 선호되는 방식이 따로 있을까요? 해당 페이지만 보았을때는 2번 방법으로 해도 어차피 주기적으로 다시 생성해서 최신 데이터를 반영하면 복잡하게 react-query를 사용하고, Hydration을 하면서 데이터를 동기화할 필요가 있나 싶어서 어떻게 사용해야할지 감이 안잡히네여

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

02-02 플레이어와 발판: PlatformBase 상속클래스 어태치문제

해결됨

[유니티6] 따라하면서 배우는 실전 게임 제작 2D Platformer

이번 강의에서 PlayerController의 다음 코드가 작동하려면 void UpdateBelowCollision (){ if ( movement . HitBelowObject . TryGetComponent < PlatformBase >( out var platform )){ if ( ! platform . IsHit ){ platform . UpdateCollision ( gameObject ); // gameObject는 플레이어 } } } 적어도 Platform_00_Moving 프리팹에, PlatformBase를 상속받은 클래스가 있는 스크립트를 어태치해야 될 것 같습니다. 그래서 GetComponent로도 찾아지고, UpdateCollision메소드도 실행되구요.

  • C#
  • unity
idim7 댓글 2 좋아요 0 조회수 186

강의 내용 정리

미해결

[리뉴얼] 파이썬입문과 크롤링기초 부트캠프 [파이썬, 웹, 데이터 이해 기본까지] (업데이트)

강의 내용을 듣고 정리하고 학습한 내용을 제 블로그나 노션에 정리해도 괜찮나요?

  • python
  • 웹-크롤링
이은수 댓글 1 좋아요 0 조회수 167

dispatch(logoutUser()) 실행시 dispatch(authuser())도 함께 실행되는 문제

미해결

따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]

dispatch(logoutUser()) 실행시 dispatch(authuser())도 함께 실행되는 문제가 발생하고 있는데 원인을 잘 모르겠습니다.

  • react
  • redux
  • node.js
  • 웹앱
  • mongodb
문주영 댓글 2 좋아요 0 조회수 257

에러서 요렇게만 해보세요

미해결

따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기

npm -v , node -v 로 버전 확인 후 package.json의 engine에서 node, npm 버전 수정 파이썬을 설치. - 설치시 ADD PATH 인가에 체크 packge.json > dependencies에서 bcrypt 삭제 npm install 설치 후 bcryptjs 추가 설치 npm install bcryptjs --save

  • react
  • node.js
  • 웹앱
  • mongodb
  • express
lanterlt 댓글 1 좋아요 0 조회수 267

동영상 소리 건의 드립니다.

미해결

FastAPI 완벽 가이드

안녕하세요, 먼저 좋은 내용의 강의 감사합니다. 다름 아니라 강의 비디오에서 'FastAPI Form 다루기 - 01'부터 녹음 된 소리가 울림이 커서 명료하지 않게 들리는 것 같습니다. 혹시 번거로우시겠지만, 좋은 강의 경험을 위해 그 전까지의 영상과 같이 오디오를 깔끔하게 변환해주실 수 있을지 문의 드립니다. 감사합니다.

  • python
  • sql
  • sqlalchemy
  • FastAPI
하하 댓글 1 좋아요 0 조회수 187

Unhandled Exception 에러 질문.(해결완료)

미해결

[C#과 유니티로 만드는 MMORPG 게임 개발 시리즈] Part4: 게임 서버

24.10.29 수정 맨 밑에 해결 방안 적어놨습니다. 저처럼 고생하는 사람 없기를 바랍니다. 24.10.24? socket 이 null인데요. 해당 호출스택입니다 socket = null 조사식 캡처본입니다. 이전 강의에서도 처음 실행했을 때 네트워크 허용 관련 창이 떴었는데 빠르게 누르면서 뭘 눌렀는지 모를정도로 가볍게 생각하고 넘어갔는데 계속 이런 상황이라 디버깅이 어렵네요. 다른 질문에도 Unhandled Exception 나온 분꺼도 읽었는데 일단 기본 테스트니까 넘어가라고 하셔서 했는데도 계속 뜨더라고요.. 4강 강의는 계속 이렇게 무시하고 진행해야 할까요? 구글링했을 때 제가 네트워크 허용안한거 같은데 다시 허용 뜨게 하는방법도 모르겠고, 조언 부탁드립니다 ㅠㅠ 24.10.27 추가 4번의 호출스택에서 _args.ConnectSocekt이 null 입니다. _args는 null이 아니고, SocketError는 success로 넘어옵니다. 그리고 네트워크 허용 창 같은 경우 방화벽을 다 해제하고도 진행해 봤었는데 그대로이며, 방화벽 다 해제하고, 다시 진행하니까 Sever를 허용 하시겠냐고 창이 떠서 이번에는 허용을 눌렀는데도 그대로입니다.. 디버깅 모드 하지 않고 실행하면 이러고 끝입니다. Socket Error 조사식. This protocol version is not supported. 저는 작업한것들을 강의마다 git으로 올려두고 있는데 혹시나하고 Session3 26강까지는 정상작동했다가 Session#4 27강에 해당 에러를 발견하게 됐습니다. 이전에 이런 에러가 없었는데.. 원인을 계속 찾아볼게요 24.10.29 해결 구글링과 gpt를 통해서 찾아봤습니다. 우선 연결할 port(7777)가 없는 것을 확인. 방화벽에서 차단하고 있는지 체크. 인바운드 규칙으로 포트 추가. 로컬 Ip를 직접 연결하고, TcpListner를 직접 Start 호출. 코드문제 1. Close 매개변수를 사용하지 않았습니다. 강의 따라가다가 놓친것 같네요.. 코드문제 2. _reserveSize == FreeSzie 같으면 null 일때 문제. 현재 Open 메서드에서 _reserveSize 가 FreeSize 와 같을 때 null을 반환하도록 되어 있습니다. 이 경우 OnConnected 메서드에서 Array.Copy 를 호출할 때 openSegment.Array 가 null이 되어 ArgumentNullException 이 발생할 수 있습니다. 이제 에러는 안나지만, 서버와 클라의 연결이 계속 안됐습니다. 이런식입니다. 그러다 멀티쓰레드를 사용하면 시간이 안맞아서 그럴 수 있다고 하더라고요 기존 IPAddress ipAddr을 원복시키고, Thread.Sleep으로 5초 늦게 연결 을 하니까 정상작동이 됐습니다 다른 도움이 필요하시면 ChatGPT에 기다려달라고하고 class 전체 복사해서 하나씩 읽게 한 다음에, 문제되는 점을 찾거나 에러 관련 질문을 넣으면 적지않게 도움을 받을 수 있을겁니다.

  • C#
  • unity
  • 네트워크
전하늘 댓글 1 좋아요 0 조회수 876

Streamlit run 이 안 돼요ㅠㅠㅠ

미해결

초보자를 위한 ChatGPT API 활용법 - API 기본 문법부터 12가지 프로그램 제작 배포까지

Python 버전을 낮게 해서 Streamlit설치까지 완료했어요. 하지만 streamlit run을 하면 사이트에서도 아무것도 안 뜨고 터미널에서도 오류가 뜬 다고 나와 요

  • python
  • 챗봇
  • streamlit
  • openai
  • chatgpt
  • streamlitrun
gimgirl 댓글 1 좋아요 0 조회수 1326

CORS 질문

미해결

FastAPI 완벽 가이드

CORS 설명 주신 부분을 보면 처음 브라우저에서 request 날릴 때에는 Origin에 아무런 값이 들어가 있지 않아서 response를 받고 그 이후에 받은 html의 javascript 쪽에서 다른 요청을 보냈을 때 기존에 요청하면서 받았던 Origin 값이 같이 들어가면서 이슈가 발생한다고 말씀주셨는데, blog json data 테스트 하는 거 보면 origin이 null인데 바로 cors 에러가 나나요 ?

  • python
  • sql
  • sqlalchemy
  • FastAPI
인프린 댓글 2 좋아요 0 조회수 172

인코딩문의

미해결

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

ㅅ선생님 이전 8회 실기준비할 때 보면 대부분 원-핫 인코딩으로 하는 분위기였는데 이번에도 그렇게 준비해도 충분 하겠죠? 뭐랄까 Label Encoder는 실전에서 코드가 생각 잘 안나기도 하고 그래서요 ㅠㅠ 타겟값 옮겨겨놓기 target = train.pop('total') # 원핫 인코딩 train = pd.get_dummies(train) test = pd.get_dummies(test) # 데이터 분할을 해보자 from sklearn.model_selection import train_test_split X_tr, X_val, y_tr, y_val = train_test_split(train, target, test_size=0.2, random_state=0) # 랜포에 넣어보자 from sklearn.ensemble import RandomForestRegressor rf = RandomForestRegresosr(random_state=0) rf.fit (X_tr, y_tr) pred = rf.predict(X_val) # 제출 해보자 pred = rf.predict(test) submit = pd.DataFrame({'pred': pred}) 이렇게만 해서 40점은 받긴 했는데... (저번에 1유형 0점맞아서 재수 중..ㅠㅠ) submit.to _csv("result.csv", Index=False)

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

pdf 14_async_sqlalchemy 데이터 검색(읽기) github 링크

미해결

처음하는 파이썬 백엔드 FastAPI 입문 (FastAPI부터 비동기 SQLAlchemy까지) [풀스택 Part1-2]

pdf 14_async_sqlalchemy 데이터 검색(읽기) github 링크가 잘못 연결되어있습니다. https://gist.github.com/DaveLee-fun/3ff74108d3b58f8ffb731c1ec106691e 연결되어 있는 페이지에 코드는 async 비동기 실행 코드가 아닌 그냥 sqlalchemy 코드입니다.

  • python
  • mvc
  • sqlalchemy
  • FastAPI
  • backend
HYO JIN Kim 댓글 1 좋아요 0 조회수 175

url 차이 질문

해결됨

FastAPI 완벽 가이드

@app.get("/items") # 함수에 개별 인자값이 들어가 있는 경우 path parameter가 아닌 모든 인자는 query parameter # query parameter의 타입과 default값을 함수인자로 설정할 수 있음. async def read_item(skip: int = 0, limit: int = 2): return fake_items_db[skip : skip + limit] @app.get("/items_nd/") # 함수 인자값에 default 값이 주어지지 않으면 반드시 query parameter에 해당 인자가 주어져야 함. async def read_item_nd(skip: int, limit: int): return fake_items_db[skip : skip + limit] 안녕하세요 url 차이에 관해 질문드립니다. 위에 url은 "/items" 인데, 아래 url은 "/items_nd/" 으로 끝에 /가 붙어있는데요. 둘다 query params로 구성되어 있는데 위는 /로 안끝나고, 아래는 왜 /로 끝났는지 이유가 궁금합니다.

  • python
  • sql
  • sqlalchemy
  • FastAPI
코드몽키 댓글 1 좋아요 0 조회수 133

분류카드 실습

미해결

[개정판] 파이썬 머신러닝 완벽 가이드

안녕하세요 위와 같이 코드를 실행하면 아래와 같이 에러가 뜨네요 ㅠ 집에선 잘됬던거 같은데 회사에서 똑같이 하니 왜그런건지 ..!..ㅠ

  • python
  • 머신러닝
  • 통계
kyb1053 댓글 3 좋아요 0 조회수 167

delegate, emit 필요한 이유

미해결

[React 1부] 만들고 비교하며 학습하는 React

안녕하세요. delegate와 emit 함수의 필요성이 잘 와닿지 않는데, 왜 필요한걸까요?

  • react
  • mvc
박호정 댓글 2 좋아요 0 조회수 227

antd Menu 질문

미해결

따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기

안녕하세요 강사님 혹시 메뉴가 한개만 있는데도 불구하고 "..." 이라는 메뉴 아래에 "나의 favorite" 으로 생겼습니다. 굳이 "..." 라는 메뉴 아래에 "나의favorite"이 생기지 않고, "Home" 오른쪽에 "나의 favorite" 을 바로 생성하고 싶은데, 이런경우 어떻게 해결 하면 될까요? [NavBar] [NavBar] [NavBar.js] import React, { useState } from 'react'; import LeftMenu from './Sections/LeftMenu'; import RightMenu from './Sections/RightMenu'; import { Drawer, Button } from 'antd'; import Icon from '@ant-design/icons'; import './Sections/Navbar.css'; function NavBar() { const [visible, setVisible] = useState(false) const showDrawer = () => { setVisible(true) }; const onClose = () => { setVisible(false) }; return ( <nav className="menu" style={{ position: 'fixed', zIndex: 5, width: '100%' }}> <div className="menu__logo"> <a href="/">Logo</a> </div> <div className="menu__container"> <div className="menu_left"> <LeftMenu mode="horizontal" /> </div> <div className="menu_rigth"> <RightMenu mode="horizontal" /> </div> <Button className="menu__mobile-button" type="primary" onClick={showDrawer} > <Icon type="align-right" /> </Button> <Drawer title="Basic Drawer" placement="right" className="menu_drawer" closable={false} onClose={onClose} visible={visible} > <LeftMenu mode="inline" /> <RightMenu mode="inline" /> </Drawer> </div> </nav> ) } export default NavBar [LeftMenu.js] import React from 'react'; import { Menu } from 'antd'; function LeftMenu(props) { return ( <Menu mode={props.mode}> <Menu.Item key="mail"> <a href="/">Home</a> </Menu.Item> <Menu.Item key="favorite"> <a href="/favorite">나의 Favorite</a> </Menu.Item> </Menu> ) } export default LeftMenu

  • react
  • node.js
  • 웹앱
  • mongodb
  • express
iokl3319 댓글 1 좋아요 0 조회수 307

프로젝트의 구조가 궁금합니다

미해결

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

백엔드는 spring 에 내장 톰캣이 서버이고 프론트엔드의 서버는 node js인가요? 그렇다면 aws에다가 백엔드 프론트 엔드 따로 서버를 구축하는게 맞는 방법인가요??

  • react
  • spring-boot
  • jpa
  • jwt
  • redux-toolkit
김우철 댓글 2 좋아요 0 조회수 196

01-04. 부서지는 타일에서 첫번째타일

해결됨

[유니티6] 따라하면서 배우는 실전 게임 제작 2D Platformer

부서지는 타일에서 이상하게도 첫번째 타일을 정확히 맞추려해도 점프가 더 안 올라가면서 막히더라구요. 그래서 게임오브젝트를 찾아보니 부서지는 타일 좌측아래부분에 Level01 게임오브젝트의 BoxCollider가 있어요. 그래서 이것의 크기를 줄여야 했습니다.

  • C#
  • unity
idim7 댓글 3 좋아요 0 조회수 201

수업자료를 어떤 곳에 넣어야 하나요?

미해결

문과생도, 비전공자도, 누구나 배울 수 있는 파이썬(Python)!

압축파일에 있는 자료를 관련 폴더에 다 넣어봐도 주피터에 뜨질 않습니다 ㅠ

  • python
댓글 1 좋아요 0 조회수 280

react에서 modal & portal 사용시 에는 어떻게 작성해야될까요

해결됨

실무에 바로 적용하는 스토리북과 UI 테스트

개요 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.

  • react
  • typescript
  • tailwind-css
  • storybook
  • ui-testing
  • modal
  • portal
  • react-modal
  • root
배찬 댓글 3 좋아요 0 조회수 410

인기 태그

인프런 TOP Writers

주간 인기글