inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

5.5 클라이언트 라우터 캐시 관련 질문입니다

해결됨

한 입 크기로 잘라먹는 Next.js

예를들면 헤더컴포넌트에서 실시간으로 현재 시간을 보여주고싶은 경우가 있다면 헤더 컴포넌트는 모든 페이지에서 보여지는 레이아웃이기때문에 클라이언트 라우터 캐시가 되어서 제가 새로고침을 하는게 아니라면 모든 페이지에서 시간이 멈춰있다는건데 해당 기능을 구현하기 위해서 클라이언트 라우터 캐시를 사용안할수는없나요?

  • react
  • typescript
  • next.js
eko09 댓글 1 좋아요 0 조회수 303

이벤트헨들러)화살표함수 안에 함수를 넣는 이유가 어렵습니다 ㅠㅠ

해결됨

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

onClick에 onClickButton(-10) 이 아닌 화살표 함수를 이벤트 핸들러로 설정하고 그 안에 호출하는 이유가 어렵습니다 ㅜㅜ 5.5)이벤트처리하기, 6.3) 기능구현하기 강의에서 함수호출의 결과를 넣으면 안되고 인수를 넘기기 위해서 라고 하셨는데 바로 onClickButton(1)를 왜 넣으면 안되는지 모르겠어요,, 자바스크립트만 하다 리액트 하려니 헷깔리네여 ㅜㅜ <button onClick={() => { onClickButton(-10); }} > 🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨 질문 하시기 전에 꼭 확인해주세요 - 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다) - 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다) - 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢 ) 질문 하실때 꼭 확인하세요 - 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X) - 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지) - 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우) - 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요 - 강의의 몇 분 몇 초 관련 질문인지 알려주세요! - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

  • javascript
  • react
  • node.js
dlrkxks1028 댓글 2 좋아요 0 조회수 336

안녕하세요. 9장 질문입니다. 아래와 같은 에러가 발생했어요..

미해결

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

소스코드: movies_df['genres_literal'] = movies_df['genres'].apply(lambda x : (' ').join(x)) count_vect = CountVectorizer(min_df=0, ngram_range=(1,2)) genre_mat = count_vect.fit_transform(movies_df['genres_literal']) print(genre_mat.shape) 에러 코드: InvalidParameterError Traceback (most recent call last) Cell In[99], line 10 8 count_vect = CountVectorizer(min_df=0, ngram_range=(1,2)) 9 # print(movies_df['genres_literal']) ---> 10 genre_mat = count_vect.fit_transform(movies_df['genres_literal']) File D:\dev03\anaconda\Lib\site-packages\sklearn\base.py:1467, in _fit_context.<locals>.decorator.<locals>.wrapper(estimator, *args, **kwargs) 1462 partial_fit_and_fitted = ( 1463 fit_method.__name__ == "partial_fit" and _is_fitted(estimator) 1464 ) 1466 if not global_skip_validation and not partial_fit_and_fitted: -> 1467 estimator._validate_params() 1469 with config_context( 1470 skip_parameter_validation=( 1471 prefer_skip_nested_validation or global_skip_validation 1472 ) 1473 ): 1474 return fit_method(estimator, *args, **kwargs) File D:\dev03\anaconda\Lib\site-packages\sklearn\base.py:666, in BaseEstimator._validate_params(self) 658 def _validate_params(self): 659 """Validate types and values of constructor parameters 660 661 The expected type and values must be defined in the `_parameter_constraints` (...) 664 accepted constraints. 665 """ --> 666 validate_parameter_constraints( 667 self._parameter_constraints, 668 self.get_params(deep=False), 669 caller_name=self.__class__.__name__, 670 ) File D:\dev03\anaconda\Lib\site-packages\sklearn\utils\_param_validation.py:95, in validate_parameter_constraints(parameter_constraints, params, caller_name) 89 else: 90 constraints_str = ( 91 f"{', '.join([str(c) for c in constraints[:-1]])} or" 92 f" {constraints[-1]}" 93 ) ---> 95 raise InvalidParameterError( 96 f"The {param_name!r} parameter of {caller_name} must be" 97 f" {constraints_str}. Got {param_val!r} instead." 98 ) InvalidParameterError: The 'min_df' parameter of CountVectorizer must be a float in the range [0.0, 1.0] or an int in the range [1, inf). Got 0 instea

  • python
  • 머신러닝
  • 통계
자스민 댓글 1 좋아요 0 조회수 166

동영상 버그

해결됨

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

동영상 재생이 제대로 보이지 않고 버그 현상이 반복 됩니다 한번쯤은 점검이 있어야 될 것 같네요

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

학습노트 실습코드 링크 수정해주세요.

미해결

실무 중심! FE 입문자를 위한 React

학습노트 pdf에서 4-2 실습코드 링크와 4-3 실습 코드 링크가 동일합니다. 수정 부탁드립니다. 그리고 5-1 강의에서 HTML과 리액트의 onclick/onClick 설명해주시는 화면에 둘 모두 onclick으로 되어 있음을 제보 드립니다.

  • react
  • redux
  • node.js
  • sass
  • swr
조동희 댓글 1 좋아요 0 조회수 440

section04 포트폴리오 리뷰

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

지금 section04 포트폴리오 리뷰까지 왔는데 지금은 작성자, 비밀번호 , 제목 , 내용을 입력하고 등록하기 버튼을 눌러도 등록안되고 에러뜨는게 정상인건가요? 저만 안되는건가 싶어서요

  • react
  • node.js
  • seo
  • graphql
  • next.js
댓글 2 좋아요 0 조회수 193

Next.js 사전 렌더링에 대해서 더 궁금한 부분이 있습니다.

해결됨

한 입 크기로 잘라먹는 Next.js

안녕하세요 Next.js 강의를 잘 보고 있습니다. Next.js 장단점 내용을 보고 궁금한 점이 생겨서 질문드립니다. 1. 8:59초에 서버에서 모든 컴포넌트를 사전 렌더링을 한다고 말씀하셨는데, 작성한 모든 컴포넌트의 HTML을 서버에 생성해놓는다는 의미인가요? 그렇다면 그 HTML을 받아서 브라우저가 파싱할 때, 서버로부터 받는 스크립트는 해당 컴포넌트의 관련된 로직의 js 파일을 받아오는건가요? 이 동작까지 Next.js에서 담당해주는건가요..? 사용자의 접속 요청이 들어왔을 때, FCP는 빠르겠지만 이 과정에서 서버에서 모든 컴포넌트의 사전 렌더링이 진행되고, 하이드레이션 과정까지 있습니다. 전처리 작업은 늘어난 것 같고, 사용자의 인터렉션이 불가한 지점까지 있는데 이 부분은 어떻게 핸들링하는지와 과연 FCP가 단축된게 장점이라고 할 수 있는지 궁금합니다. 해소가 안되는 부분들이 계속 생기는데, 영상을 계속 보다보면 뒤에서 다 설명을 해주시는 부분들일까요...?

  • react
  • typescript
  • next.js
mins 댓글 4 좋아요 0 조회수 595

useMemo 사용 시 체크 박스 오류

미해결

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

useMemo 강의에서 함수를 작성할 때, const { totalCount, doneCount, notDoneCount } = useMemo(() => { const totalCount = todos.length; const doneCount = todos.filter((todo) => todo.isDone; ).length; const notDoneCount = totalCount - doneCount; return { totalCount, doneCount, notDoneCount }; }, [todos]); 위의 코드처럼 작성하고 아이템의 체크 박스를 누르면 아래 사진과 같은 오류가 발생합니다. todos 배열 객체의 isDone 속성이 정의되지 않았다고 하는 것 같은데 해결 방법을 몰라 질문 드립니다...ㅠㅠ 혹시 몰라 List.jsx 전체 코드도 같이 올려두겠습니다. 항상 좋은 강의 만들어주셔서 감사합니다! import "./List.css"; import { useState, useMemo } from "react"; import TodoItem from "./TodoItem"; function List({ todos, onUpdate, onDelete }) { const [search, setSearch] = useState(""); const searchHandler = (e) => { setSearch(e.target.value); }; const filterFunc = () => { if (search === "") { return todos; } return todos.filter((todo) => todo.content.toLowerCase().includes(search.toLowerCase()) ); }; const filterArr = filterFunc(); const { totalCount, doneCount, notDoneCount } = useMemo(() => { const totalCount = todos.length; const doneCount = todos.filter((todo) => todo.isDone; ).length; const notDoneCount = totalCount - doneCount; return { totalCount, doneCount, notDoneCount }; }, [todos]); return ( <div className="List"> <h4> Todo List 🌱</h4> <div> <div>total: {totalCount}</div> <div>done: {doneCount}</div> <div>notDone: {notDoneCount}</div> </div> <input placeholder="검색어를 입력하세요" onChange={searchHandler} value={search} ></input> <div className="wrapper"> {filterArr.map((todo) => { return ( <TodoItem key={todo.id} {...todo} onUpdate={onUpdate} onDelete={onDelete} /> ); })} </div> </div> ); } export default List;

  • javascript
  • react
  • node.js
강두희 댓글 2 좋아요 0 조회수 275

세팅

미해결

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

안녕하세요. 강의 그대로 따라해도 세팅부터 막히는데 어떻게 하나요? 파일을 만들고 나서 셀에 입력하는 화면이 안나오는데요. 강의에서 python3으로 들어가면 강의에서는 셀을 입력할 수 있도록 나오는데 저는 python3이라는게 뜨지를 않습니다.

  • python
  • 웹-크롤링
고예진 댓글 1 좋아요 0 조회수 73

leftChilde is missing in props validation 오류

해결됨

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

안녕하세요! Header.jsx 파일에서 이 오류가 사라지지 않아서 질문 드립니다! 어떻게 해결해야 하나요...?

  • javascript
  • react
  • node.js
cei8645 댓글 1 좋아요 0 조회수 105

SSR실습 질문

해결됨

한 입 크기로 잘라먹는 Next.js

파라미터를 받아서 특정 도서 상세페이지로 이동하는 [id].tsx에서 이전에 사용하던 export default async function fetchBooks(q?: string): Promise<BookData[]> { let url = `http://localhost:12345/book`; export default async function fetchBooks(q?: string): Promise<BookData[]> { let url = `http://localhost:12345/book`; if (q) { url += `/search?q=${q}`; } try { const response = await fetch(url); if (!response.ok) { throw new Error(); } return await response.json(); } catch (err) { console.error(err); return []; } } 이 코드에서 아래와 같은 방식도 가능할까요? export default async function fetchBooks(q?: any): Promise<BookData[]> { let url = `http://localhost:12345/book`; if (typeof q === "string") { url += `/search?q=${q}`; } else if (typeof q === "number") { url += `/${q}`; } try { const response = await fetch(url); if (!response.ok) { throw new Error(); } return await response.json(); } catch (err) { console.error(err); return []; } }

  • react
  • typescript
  • next.js
tkv00 댓글 1 좋아요 0 조회수 158

섹션5 <공지>

미해결

[개정판] 딥러닝 컴퓨터 비전 완벽 가이드

섹션5 <공지> 코드 https://github.com/chulminkw/DLCV <여기에 있나요?? 찾아도 없어서요.

  • python
  • 머신러닝
  • 딥러닝
  • keras
  • tensorflow
  • 컴퓨터-비전
WY Lee 댓글 1 좋아요 0 조회수 112

On-Demand-ISR 방식을 index 페이지에 적용하는 방법

해결됨

한 입 크기로 잘라먹는 Next.js

안녕하세요 선생님! 해당 수업에서 On-Demand-ISR을 적용하기 위해 page/api/revalidate.ts 파일에 재 생성을 요청하는 handler 함수를 정의를 했습니다. // 강의에서 작성한 handler 코드 export default async function handler( req: NextApiRequest, res: NextApiResponse ) { try { // 인덱스 페이지를 요청받을 때 revalidate 되도록 하기 await res.revalidate("/"); // 재 생성이 잘 완료되었다는 걸 리턴함 return res.json({ revalidate: true }); } catch (err) { // 재생성 실패 했을 떄 실행할 코드 res.status(500).send("실패"); console.error(err); } } 현재 강의에서는 직접 localhost:3000/api/revalidate 를 입력해 수동으로 페이지를 재 생성했는데, 만약 인덱스 페이지 접속할 때마다 자동으로 페이지를 재 생성하고 싶으면 useEffect 훅을 사용하면 될까요? 아래는 제가 작성한 코드입니다! useEffect(() => { fetch("/api/revalidate") .then((res) => res.json()) .then((data) => { if (data.revalidate) { console.log("페이지가 성공적으로 재생 성되었습니다."); } }); }, []);

  • react
  • typescript
  • next.js
yeongi0111 댓글 2 좋아요 0 조회수 371

배포 방법

미해결

Slack 클론 코딩[실시간 채팅 with React]

제가 백엔드 강의는 수강한 적이 없어서요, 대신 노드js 교과서 책을 구매해서 가지고 있는데.. 우선 프론트는 네트리파이로 배포 완료했습니다 https://admirable-donut-f22cc6.netlify.app/ 백엔드 배포는 선생님 책 노드js 교과서 722쪽 AWS 배포하기 부터 보면서 하면 별 문제없지 진행할 수 있을까요? 추가적으로 백엔드쪽 코드 수정이 필요할지.. 배포할 레포 구조는 아래 처럼 루트 폴더 하위에 백엔드, 프론트 폴더 각각 있습니다

  • react
  • 웹팩
  • typescript
  • socket.io
  • babel
  • 클론코딩
루룸 댓글 2 좋아요 0 조회수 324

나만의 Azure OpenAI service (gpt-4o) 구성하기

해결됨

Azure Native로 나만의 GPT 만들기

조금씩이지만 열심히 따라서 구현을 해 보려고 하지만 모르는게 너무 많아 조금은 힘드네요 그래도 강의 내용이 스텝 바이 스텝으로 상세해 아주 큰 도움이 됩니다 저희 중요 업무는 고객 요구 사항들 (텍스트/ 이미지)이 기록되어 있는 문서를 참조로 현재 개발된 디자인이 모든 요구 사항들을 다 잘 지켜서 개발이 완료된 건지를 체크하는 일입니다 기존에 일일히 하나하나 체크를 하다 보니 시간도 너무 오래 걸리고 일부 경험 많은 엔지니어의 경우 기존 경험에 의존해 체크가 누락되는 경우도 발생이 되고 있습니다 이에 고객 요구 사항들을 AI (gpt-4o)에게 학습시키고 완료된 디자인 문서를 프로프팅 창에 입력해 자동으로 미지원 항목을 체크해 알려주는 기능을 만드는 것이 목표입니다 이를 위해 프롬프트 창에 디자인 문서 (텍스트/ 파워포인트/ PDF/ JPG 등) 멀티모달 프롬프팅이 되어야 디자이너 스스로 자기가 만든 디자인 파일의 셀프 체크가 가능하기에 gpt-4o를 선택해서 구현을 할려고 합니다 여기서 중요한건 비교를 해야 하는 고객 요구 사항을 어떻게 gpt-4o에게 학습시키는지에 대해 잘 몰라 난감해서 문의 드립니다 가장 효과적인 학습 방법에 대한 조언을 주실 수 있으실지요? 사내 전용 우리 회사만의 GPT라면 비교 자료도 나만의 자료가 되는게 필요해서 문의 드립니다 답변 부탁 드리겠습니다 감사합니다

  • javascript
  • python
  • mongodb
  • azure
  • FastAPI
tk.lee 댓글 2 좋아요 1 조회수 362

완전탐색 숫자야구 뭐가 틀린지 모르겠어요..

해결됨

2주만에 통과하는 알고리즘 코딩테스트 (2024년)

n = int(input()) hint = [list(map(int,input().split())) for _ in range(n)] answer = 0 #100 ~ 999 for a in range(1,10): # 100의 자리 for b in range(10): # 10의 자리 for c in range(10): # 1의 자리 if (a == b or b == c or c == a): continue cnt = 0 for arr in hint: number = list(map(int, str(arr[0]))) strike = arr[1] ball = arr[2] ball_count = 0 strike_count = 0 #스트라이크카운트 자리수,숫자 둘다 if number[0] == a: strike_count += 1 if number[1] == b: strike_count += 1 if number[2] == c: strike_count += 1 #볼카운트 자리수는 안맞고 숫자만 if a in number and number[0] != a: ball_count += 1 if b in number and number[1] != b: ball_count += 1 if c in number and number[2] != c: ball_count += 1 if ball == ball_count and strike == strike_count: cnt += 1 if cnt == n: answer += 1 print(answer)

  • python
  • 코딩-테스트
  • 알고리즘
댓글 2 좋아요 1 조회수 230

소스코드는 어디서 받을 수 있는지요...

미해결

(2025 최신 업데이트)리액트 : 프론트엔드 개발자로 가는 마지막 단계

소스코드는 어디서 받을 수있는지요..

  • react
  • redux
  • web-api
소나무77 댓글 1 좋아요 0 조회수 275

투두 수정 / 삭제 질문

해결됨

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

투두를 수정, 삭제하는 강의를 보면서 버튼을 클릭할 때, 제가 누른 버튼이 어떤 버튼인지 알 수 없기 때문에 이벤트 객체를 이용해야 한다고 생각했습니다. 내가 클릭한 버튼의 아이디를 수정, 삭제하는 함수의 인수로 전달해야 한다고 생각해서 아래와 같은 코드로 작성해야한다고 생각했습니다. const onChageCheckBox = (e) => { onUpdate(e.target.id); }; const deleteHandler = (e) => { onDelete(e.target.id); }; 하지만 강의에서는 아래 코드처럼 알려주셔서요! const onChageCheckBox = () => { onUpdate(id); }; const deleteHandler = () => { onDelete(id); }; 이벤트 객체를 사용하지 않고 id만으로 함수가 실행되는 점이 이해가 가지 않아 질문 드립니다. 더불어 이벤트 객체를 사용해서 코드를 작성하는 방법도 있는지 질문 드립니다. 항상 좋은 강의해주셔서 감사합니다!

  • javascript
  • react
  • node.js
강두희 댓글 2 좋아요 0 조회수 194

가운데 정렬

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

container 중앙으로 이동시킬때 .container { background: #eeeeee; display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 50px; } 라고 하셨는데 가운데 정렬하게 될때 , margin: 0 auto; 하는것과 어떤차이가 있을까요 ??

  • react
  • node.js
  • seo
  • graphql
  • next.js
SJ 댓글 2 좋아요 0 조회수 129

SyntaxWarning: invalid escape sequence '\.' 에러가

미해결

[신규 개정판] 이것이 진짜 크롤링이다 - 실전편 (인공지능 수익화)

제가 뭘 건든건지 잘되던게 갑자기 SyntaxWarning: invalid escape sequence '\.' 에러가 출력됩니다. 셀레니움 css셀렉터에서 검색 카피해와서 붙였는데 그중에 \ 들어가면 에러를 내보네요.. 이유를 모르겠습니다.

  • python
  • 웹-크롤링
J Park 댓글 2 좋아요 1 조회수 2104

인기 태그

인프런 TOP Writers

주간 인기글