inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

묻고 답해요

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

Redux에서 <provider >사용시 오류 -Cannot read properties of undefined (reading ‘getState’)

미해결

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

안녕하세요 열심히 강의 듣고 있습니다. 거의 중 후반까지 왔어요. jwt 강의 까지 듣고 많은걸 알게 되어서 많이 기쁩니다. 자신감이 많이 생겼네요. (참고로 java는 잘 못해서 kotlin으로 다 컨버팅 했네요 .... ) https://github.com/justkjy/apiserver 컨버팅 작업 하니깐 2번 듣게 되고 정확하게 이해가 되네요 ... == 본론 === 리덕스 툴킷 설정 강의에서 알려주신 코드를 따라 쳤는데 에러가 났어요.. const root = ReactDOM.createRoot(document.getElementById('root')); // root.render( // <Provider strote={store}> // <App /> // </Provider> // ); root.render( <App /> ); Cannot read properties of undefined (reading ‘getState’) 그래서 provider를 지워라고 하네요... 이게 맞나요?? 인프런 이슈 정보에도 지워라고 하긴 하는데 =========== https://www.inflearn.com/community/questions/36034/%EC%A0%9C%EB%A1%9C%EC%B4%88%EB%8B%98-%EC%BD%94%EB%93%9C%EB%A5%BC-%EB%94%B0%EB%9D%BC%EC%84%9C%EB%8F%84-%EA%B7%B8%EB%8C%80%EB%A1%9C-%EB%B3%B5%EC%82%AC%ED%96%88%EB%8A%94%EB%8D%B0-%EC%9D%B4-%EB%AC%B4%EC%8A%A8%EC%97%90%EB%9F%AC%EC%9D%B8%EA%B0%80%EC%9A%94-%EB%AA%87%EC%9D%BC%EC%A7%B8-%ED%95%B4%EA%B2%B0-%EB%AA%BB%ED%95%98%EA%B3%A0-%EC%9E%88%EC%8A%B5%EB%8B%88%EB%8B%A4 ================================= 저렇게 하면 강의 따라 가는데 문제가 없을까요? 리덕스 툴킷 설정

  • react
  • spring-boot
  • jpa
  • jwt
  • redux-toolkit
just kim 댓글 1 좋아요 0 조회수 156

2장 클론 코딩시 화면 하단에 회색 영역이 생김니다.

미해결

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

강좌와 git을 보면서 했는데, 왜 아래에 회색영역이 생기는 건지 잘 모르겠습니다.ㅜㅜ 세로로 생기는 스크롤도 흰색영역에만 생깁니다. 그런데 로그아웃버튼은 회색영역에 생기네요 이리저리 해봐도 잘 모르겠어서 도움을 요청합니다

  • react
  • next.js
  • react-query
  • next-auth
  • msw
슈퍼아스라다 댓글 1 좋아요 0 조회수 146

서로 다른 컴포넌트간 query 일치하게 하기 강의중

미해결

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

안녕하세여 제로초님 UserInfo에서 팔로우버튼을 누르면 팔로잉으로 변해야되고 다시 한번 누르면 팔로우로 변해야되는데 버튼을 누르고 새로고침을 해야지만 반영이됩니다... 팔로우 추천에서는 바로 반영이 되는데.... 깃허브 ch3-2 UserInfo에 있는 코드로 가져다 써도 안되네여 ㅠㅠ "use client"; import style from "@/app/(afterLogin)/[username]/profile.module.css"; import BackButton from "@/app/(afterLogin)/_component/BackButton"; import { useQuery, useQueryClient, useMutation } from "@tanstack/react-query"; import { User } from "@/model/User"; import { getUser } from "@/app/(afterLogin)/[username]/_lib/getUser"; import cx from "classnames"; import { MouseEventHandler } from "react"; import { Session } from "@auth/core/types"; type Props = { username: string; session: Session | null; }; export default function UserInfo({ username, session }: Props) { const { data: user, error } = useQuery< User, Object, User, [_1: string, _2: string] >({ queryKey: ["users", username], queryFn: getUser, staleTime: 60 * 1000, // fresh -> stale, 5분이라는 기준 gcTime: 300 * 1000, }); const queryClient = useQueryClient(); const follow = useMutation({ mutationFn: (userId: string) => { console.log("follow", userId); return fetch( `${process.env.NEXT_PUBLIC_BASE_URL}/api/users/${userId}/follow`, { credentials: "include", method: "post", } ); }, onMutate(userId: string) { const value: User[] | undefined = queryClient.getQueryData([ "users", "followRecommends", ]); if (value) { const index = value.findIndex((v) => v.id === userId); if (index > -1) { console.log(value, userId, index); const shallow = [...value]; shallow[index] = { ...shallow[index], Followers: [{ id: session?.user?.email as string }], _count: { ...shallow[index]._count, Followers: shallow[index]._count?.Followers + 1, }, }; queryClient.setQueryData(["users", "followRecommends"], shallow); } } const value2: User | undefined = queryClient.getQueryData([ "users", userId, ]); if (value2) { const shallow: User = { ...value2, Followers: [{ id: session?.user?.email as string }], _count: { ...value2._count, Followers: value2._count?.Followers + 1, }, }; queryClient.setQueryData(["users", userId], shallow); } }, onError(error, userId: string) { console.error(error); const value: User[] | undefined = queryClient.getQueryData([ "users", "followRecommends", ]); if (value) { const index = value.findIndex((v) => v.id === userId); console.log(value, userId, index); if (index > -1) { const shallow = [...value]; shallow[index] = { ...shallow[index], Followers: shallow[index].Followers.filter( (v) => v.id !== session?.user?.email ), _count: { ...shallow[index]._count, Followers: shallow[index]._count?.Followers - 1, }, }; queryClient.setQueryData(["users", "followRecommends"], shallow); } const value2: User | undefined = queryClient.getQueryData([ "users", userId, ]); if (value2) { const shallow = { ...value2, Followers: value2.Followers.filter( (v) => v.id !== session?.user?.email ), _count: { ...value2._count, Followers: value2._count?.Followers - 1, }, }; queryClient.setQueryData(["users", userId], shallow); } } }, }); const unfollow = useMutation({ mutationFn: (userId: string) => { console.log("unfollow", userId); return fetch( `${process.env.NEXT_PUBLIC_BASE_URL}/api/users/${userId}/follow`, { credentials: "include", method: "delete", } ); }, onMutate(userId: string) { const value: User[] | undefined = queryClient.getQueryData([ "users", "followRecommends", ]); if (value) { const index = value.findIndex((v) => v.id === userId); console.log(value, userId, index); if (index > -1) { const shallow = [...value]; shallow[index] = { ...shallow[index], Followers: shallow[index].Followers.filter( (v) => v.id !== session?.user?.email ), _count: { ...shallow[index]._count, Followers: shallow[index]._count?.Followers - 1, }, }; queryClient.setQueryData(["users", "followRecommends"], shallow); } const value2: User | undefined = queryClient.getQueryData([ "users", userId, ]); if (value2) { const shallow = { ...value2, Followers: value2.Followers.filter( (v) => v.id !== session?.user?.email ), _count: { ...value2._count, Followers: value2._count?.Followers - 1, }, }; queryClient.setQueryData(["users", userId], shallow); } } }, onError(error, userId: string) { console.error(error); const value: User[] | undefined = queryClient.getQueryData([ "users", "followRecommends", ]); if (value) { const index = value.findIndex((v) => v.id === userId); console.log(value, userId, index); if (index > -1) { const shallow = [...value]; shallow[index] = { ...shallow[index], Followers: [{ id: session?.user?.email as string }], _count: { ...shallow[index]._count, Followers: shallow[index]._count?.Followers + 1, }, }; queryClient.setQueryData(["users", "followRecommends"], shallow); } } const value2: User | undefined = queryClient.getQueryData([ "users", userId, ]); if (value2) { const shallow = { ...value2, Followers: [{ userId: session?.user?.email as string }], _count: { ...value2._count, Followers: value2._count?.Followers + 1, }, }; queryClient.setQueryData(["users", userId], shallow); } }, }); console.log("error"); console.dir(error); if (error) { return ( <> <div className={style.header}> <BackButton /> <h3 className={style.headerTitle}>프로필</h3> </div> <div className={style.userZone}> <div className={style.userImage}></div> <div className={style.userName}> <div>@{username}</div> </div> </div> <div style={{ height: 100, alignItems: "center", fontSize: 31, fontWeight: "bold", justifyContent: "center", display: "flex", }} > 계정이 존재하지 않음 </div> </> ); } if (!user) { return null; } const followed = user.Followers?.find((v) => v.id === session?.user?.email); console.log(session?.user?.email, followed); const onFollow: MouseEventHandler<HTMLButtonElement> = (e) => { e.stopPropagation(); e.preventDefault(); console.log("follow", followed, user.id); if (followed) { unfollow.mutate(user.id); } else { follow.mutate(user.id); } }; return ( <> <div className={style.header}> <BackButton /> <h3 className={style.headerTitle}>{user.nickname}</h3> </div> <div className={style.userZone}> <div className={style.userRow}> <div className={style.userImage}> <img src={user.image} alt={user.id} /> </div> <div className={style.userName}> <div>{user.nickname}</div> <div>@{user.id}</div> </div> {user.id !== session?.user?.email && ( <button onClick={onFollow} className={cx(style.followButton, followed && style.followed)} > {followed ? "팔로잉" : "팔로우"} </button> )} </div> <div className={style.userFollower}> <div>{user._count.Followers} 팔로워</div> &nbsp; <div>{user._count.Followings} 팔로우 중</div> </div> </div> </> ); } 제가 보기에는 useQuery가 제대로 작동안하는거같은데...제로초님 의견이 궁금합니다 팔로우버튼 안눌렀을때 팔로우버튼 눌렀을때

  • react
  • next.js
  • react-query
  • next-auth
  • msw
장산 댓글 2 좋아요 0 조회수 235

수업 때 쓰셨던 txt file 공유 해주시면 좋겠습니다

해결됨

실리콘밸리 엔지니어가 가르치는 파이썬 기초부터 고급까지

나라 이름, 도시 같은 것들은 영상 아래 강의 노트에서 복붙할 수 있으면 좋겠네요 원활한 답변을 위해, 자세한 질문 사항 부탁드려요 :D

  • python
  • 알고리즘
minsu2587 댓글 1 좋아요 1 조회수 189

웹브라우저에서 글만작성하면 에러가 납니다

미해결

React + GPT API로 AI회고록 서비스 개발 (원데이 클래스)

import { Input, Button} from 'antd'; const { TextArea } = Input; import { useState } from "react";// 저장하는 곳임포트 const DiaryInput = ({ isLoading, onSubmit }) => { const [userInput, setUserInput] = useState(""); // isLoading 로딩상태에서 사용하는 변수 // inSubmit 다입력 작성하면 사용 const handleUserInput = (e) => { setUserInput(e.target.value); }; const handleClick = () => { onSubmit(userInput); }; return ( <div> <TextArea value={userInput} onChange={handleUserInput} placeholder="오늘 일어난 일들을 간단히 적어주세요." /> <Button loading={isLoading} onClick={handleClick}> GPT 회고록을 작성해줘! </Button> </div> ); } export default DiaryInput; // import { Input , Button} from 'antd'; // import { useState } from 'react'; // const { TextArea } = Input; // const DiaryInput = ({isLoading, onSubmit}) => { // const [userInput, setUserInput] = useState(""); // //사용자의 입력을 받아 상위 컴포넌트로 넘기기 // // 로딩상태에서는 제출버튼 못누루게 // const handleUserInput =(e)=>{ // setUserInput(e.target.value); // const handleClick = ()=>{ // onSubmit(userInput); // } // } // return ( // <div> // <TextArea value={userInput} onChange={handleUserInput} placeholder='오늘 하루 회고'/> // <Button loading={isLoading} onClick={handleClick}>GPT회고록 시작</Button> // </div> // ); // }; // export default DiaryInput; import { useState } from 'react'; import { CallGPT } from './api/gpt'; import DiaryInput from './components/DiaryInput'; const dummyData = { "title": "고립된 개발자의 고민", "thumbnail": "https://source.unsplash.com/1600x900/?programming", "summary": "혼자 코딩과제를 진행하면서 걱정이다.", "emotional_content": "최근 혼자 코딩과제를 진행하면서, 협업이 없이 모든 것을 혼자 결정하고 해결해야 한다는 부담감에 많이 무겁습니다. 강의를 듣고 최선을 다해 프로젝트를 진행했지만, 예상치 못한 버그들로 인해 스트레스가 많이 쌓였습니다. 스택오버플로와 GPT를 통해 문제를 해결하긴 했지만, 이러한 문제해결 방식이 정말로 제 개발 실력을 향상시키는지에 대해 의문이 듭니다. 왠지 스스로의 능력을 시험할 기회를 잃은 것 같아 아쉽고, 불안감도 커지고 있습니다.", "emotional_result": "이 일기에서 감지되는 감정은 불안, 부담감, 그리고 자신감의 결여입니다. 고립된 상황에서의 성공에 대한 압박감과 문제 해결 방법에 대한 의심은 정서적으로 큰 부담을 주고 있습니다. 자기 효능감이 낮아짐을 느끼는 상황입니다.", "analysis": "고립되어 문제를 해결하는 과정은 큰 스트레스와 불안을 유발할 수 있습니다. '혼자서 하는 일은 좋은 일이든 나쁜 일이든 더욱 크게 느껴진다'는 에릭 에릭슨의 말처럼, 혼자서 모든 것을 해결하려는 시도는 때로는 개인의 성장에 도움이 될 수 있지만, 지속적인 고립은 자기 효능감을 저하시킬 수 있습니다. 이러한 상황에서는 자신의 노력을 인정하고, 필요한 경우 도움을 요청하는 것이 중요합니다.", "action_list": [ "프로젝트 중 발생하는 문제를 혼자 해결하려 하지 말고, 멘토나 동료 개발자와 상의를 통해 해결 방안을 모색하라.", "정기적으로 자신의 학습 방법과 진행 상황을 평가하여, 필요한 경우 학습 방식을 조정하라.", "개발 과정에서의 스트레스 관리를 위해 적절한 휴식과 여가 활동을 통해 정서적 안정을 찾으라." ] }; function App() { const [data, setData] = useState(dummyData); // 우선 빈문자열로 해놓고 const [isLoading, setIsLoading] = useState(false); const handleClickAPICall = async (userInput) => { try { setIsLoading(true);// 처음에는 로딩을 트루 const message = await CallGPT({ prompt: `${userInput}`, }); // Assuming callGPT is a function that fetches data from GPT API setData(JSON.parse(message)); } catch (error) { // Handle error (you might want to set some error state here) } finally { setIsLoading(false);//다음에는 펄스로 } }; const handleSubmit = (userInput) => { handleClickAPICall(userInput); }; console.log(">>data", data); return ( <> <DiaryInput isLoading={isLoading} onSubmit ={handleSubmit} /> <button onClick={handleClickAPICall}>GPT API call</button> <div>title : {data?.title}</div> <div>analysis : {data?.analysis}</div> <div>emotional_content : {data?.emotional_content}</div> <div>emotional_result : {data?.emotional_result}</div> </> ); }; export default App; // import { useState } from "react"; // import { CallGPT } from "./api/gpt"; // import { message } from "antd"; // import DiaryInput from "./components/DiaryInput"; // const dumyData = JSON.parse(` // { // "title": "당황스러운 예제 에러", // "thumbnail": "https://source.unsplash.com/1600x900/?confused", // "summary": "가끔 예제 에러가 발생하여 당황함", // "emotional_content": "가끔 예제 에러가 나타나는 것이 정말 당황스럽다. 이런 상황들은 예상치 못한 문제로 인해 나를 혼란스럽게 만든다. 그럼에도 불구하고, 이런 에러들은 동시에 나의 문제 해결 능력을 시험한다.", // "emotional_result": "당황스러움과 혼란스러움이 느껴진다. 그러나 이는 예상치 못한 문제에 대처하는 능력을 향상시키는 과정일 수 있다.", // "analysis": "당신의 당황함과 혼란스러움은 예상치 못한 상황에 대한 불안감과 두려움을 반영할 수 있습니다. 하지만, '문제는 기회다'라는 유명한 격언을 기억하십시오. 이러한 에러들은 당신의 문제 해결 능력을 향상시키는 좋은 기회일 수 있습니다.", // "action_list": [ // "예상치 못한 에러에 대비하는 습관 만들기", // "문제 해결 능력 향상을 위한 자기계발", // "당황하지 않고 차분하게 상황을 평가하는 능력 기르기" // ] // } // `); // function App() { // const [data, setData] = useState(dumyData); // const [isLoading, setIsLoading] = useState(false); // // 여기로딩상태가 // const handleClickAPICall = async (userInput) => { // try{// try catch로 감싸서, 처음에는 로딩상태를 트루라고 하고 // setIsLoading(true); // const message = await CallGPT({ // prompt:'{userInput}', // }); // setData(JSON.parse(message));// 그리고 데이터가 잘오면 받아보자 // } catch (error){ // }finally{ // setIsLoading(false);// 나중에는 false라고 하자 // } // }; // const handleSubmit = (userInput)=>{ // handleClickAPICall(userInput); // }; // console.log(">>data", data); // return ( // <> // <DiaryInput isLoading={isLoading} onSubmit={handleSubmit} /> // // 여기로 옴 // <button onClick={handleClickAPICall}>GPT API call</button> // <div>data : {data?.title}</div> // <div>thumbnail: {data?.thumbnail}</div> // <div>summary : {data?.summary}</div> // <div>emotional_resul : {data?.emotional_resul}</div> // <div>emotional_content : {data?.emotional_content}</div> // <div>analysis: {data?.analysis}</div> // <div>action_list: {data?.action_list}</div> // </> // ); // } // export default App ;{ "name": "my-gpt-diary", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "tsc -b && vite build", "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", "preview": "vite preview" }, "dependencies": { "@ant-design/icons": "^5.4.0", "antd": "^5.20.1", "react": "^18.3.1", "react-dom": "^18.3.1", "styled-components": "^6.1.12" }, "devDependencies": { "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", "@typescript-eslint/eslint-plugin": "^7.15.0", "@typescript-eslint/parser": "^7.15.0", "@vitejs/plugin-react": "^4.3.1", "eslint": "^8.57.0", "eslint-plugin-react-hooks": "^4.6.2", "eslint-plugin-react-refresh": "^0.4.7", "typescript": "^5.2.2", "vite": "^5.3.4" } }

  • HTML/CSS
  • javascript
  • react
  • node.js
  • chatgpt
코딩의외로 댓글 1 좋아요 0 조회수 480

강의 자료 다운로드 자료요청

미해결

평생 써먹는 데이터 기반 투자법 with 파이썬 퀀트 투자

안녕하세요. 저도 강의자료를 다운로드하면 압축파일에 requirement.txt 파일만 나오고 다른 파일들은 보이지 않습니다. 앞에서 문의한 분처럼 저도 이메일로 보내주시면 감사하겠습니다. kimv100@gmail.com 감사합니다.

  • python
  • pandas
  • 투자
  • 퀀트
김승백 댓글 2 좋아요 0 조회수 235

업캐스팅 강의 마지막 예제 관련 질문입니다.

해결됨

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

내가 나를 낳은 형태에서 예제와 같이 special draw를 호출하면 오류가 나지 않을까요??

  • python
  • java
  • c
  • 정보처리기사
유호영 댓글 2 좋아요 0 조회수 142

다음 강의로 넘어 가지를 않습니다.

미해결

김대리님 이게 바로 업무 자동화입니다 (엑셀 + 파이썬)

혹시, 하루에 들을 수 있는 강의 수가 정해져 있는지요? 4번째 강의(회사별 행 끊어내기) 강의가 끝난 후 아래 이미지의 "다음 수업보기"를 클릭해도 강의가 진행되지 않습니다. (4번째 강의 듣는 것만 3~4번 해봤는데 그 이후에 역시 안됩니다.) 그리고 이상한 것은 아래 이미지 처럼 제가 듣지 않은 강의가 체크 되어 있습니다. (심지어 마지막 강의도 체크되어 있네요.) 강의를 계속 들으려면 어떻게 해야 하는지 방법 부탁 드립니다.

  • python
  • excel
김동근 댓글 3 좋아요 0 조회수 248

강의문의드려요

해결됨

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

질문은 동영상 강의에 들어가서 오른쪽에 커뮤니티 버튼을 통해 해주세요. 그래야 어떤 강좌에서 질문하셨는지 알 수 있습니다. 영상에서 몇 분 몇 초 대를 알려주셔야 제가 한 번에 질문 내용 확인이 가능합니다. 이미 다른 누군가가 질문을 한 이력 이 있을 수 있습니다. 질문 게시판을 한 번 확인 부탁드립니다. 학교의 과제나 타 강사의 코드 등 외부 수업 자료에 대해서는 답변하지 않습니다. 제가 다루는 커리큘럼 외의 이론이나, 너무 디테일한 컴퓨터 이론에 대해서는 답변 드리지 않습니다. 시험에 안 나오는 경우가 많고, 나와 봤자 1문제 나오는데 외워야 할 부분이 많은 것 등 (예시: 서브넷 마스크 계산) 질문을 올릴 때 이 글은 모두 지우고 내용을 입력해주세요. 정처기 비전공자인데요 섹션1 설명듣고 섹션2듣는데 계속 문제만 풀던데요 아무 개념이없이 복합문제 푸는 느낌이 들어서요 섹션3에 있는 c언어, 자바, 파이썬 강의듣고 섹션2를 들어야 하는거죠?

  • python
  • java
  • c
  • 정보처리기사
박창현 댓글 1 좋아요 0 조회수 242

npm i npm warn 에러

해결됨

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

🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨 질문 하시기 전에 꼭 확인해주세요 - 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다) - 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다) - 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢) 질문 하실때 꼭 확인하세요 - 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X) - 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지) - 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우) - 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요 - 강의의 몇 분 몇 초 관련 질문인지 알려주세요! - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful. npm warn deprecated @humanwhocodes/config-array@0.11.14: Use @eslint/config-array instead npm warn deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported npm warn deprecated @humanwhocodes/object-schema@2.0.3: Use @eslint/object-schema instead npm i를 할 때마다 언제부턴가 npm warn이라는 경고창이 뜹니다 왜 이런거죠? ㅠㅡㅠ 찾아보니 최신화를 시켜주라는 말이 있던데 잘 모르기도 하고 괜한 짓을 할까봐 여쭤봅니다...!!!

  • javascript
  • react
  • node.js
김연진 댓글 1 좋아요 0 조회수 1460

useMemo관련 질문드립니다

해결됨

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

import React, { useCallback, useMemo } from "react"; import "../List.css"; import TodoItem from "./TodoItem"; import { useState } from "react"; const List = ({ todos, onUpdate, onDelete }) => { const [search, setSearch] = useState(""); console.log(todos); const onChangeSearch = (e) => { setSearch(e.target.value); }; const getFilteredData = () => { if (search === "") { return todos; } else { return todos.filter((todo) => todo.content.toLowerCase().includes(search.toLowerCase()) ); } }; const filteredTodos = getFilteredData(); const getAnalyedData = () => { console.log("getAnalyedData"); const totalCount = todos.length; const doneCount = todos.filter((todo) => todo.isDone).length; const notDoneCount = totalCount - doneCount; return { totalCount, doneCount, notDoneCount, }; }; const analyzedData = useMemo(() => { return getAnalyedData(); }, [todos]); return ( <div className="List"> <div className="GetAnalyedData"> <h1>total :::{analyzedData.totalCount}</h1> <h1>done :::{analyzedData.doneCount}</h1> <h1>notDone:::{analyzedData.notDoneCount}</h1> </div> <h4>검색어</h4> <input placeholder="검색어 입력" onChange={onChangeSearch} value={search} /> <div className="todos_wrapper"> {filteredTodos.map((todo) => { return ( <TodoItem key={todo.id} {...todo} onUpdate={onUpdate} onDelete={onDelete} /> ); })} </div> </div> ); }; export default List; const getAnalyedData = () => { console.log("getAnalyedData"); const totalCount = todos.length; const doneCount = todos.filter((todo) => todo.isDone).length; const notDoneCount = totalCount - doneCount; return { totalCount, doneCount, notDoneCount, }; }; const analyzedData = useMemo(() => { return getAnalyedData(); }, [todos]); 이런식으로 넣어도 혹시 가능할까요 ??? Line 36:6: React Hook useMemo has a missing dependency: 'getAnalyedData'. Either include it or remove the dependency array react-hooks/exhaustive-deps 이런 에러가 떠서요 ..기능은 돌던데

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

console.log 출력이 되지않습니다

해결됨

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

chapter03.js 에 console.log("Hello"); 를 입력하고 index.html에 <html> <head> <sciprt src="./chapter03.js"></sciprt> </head> <body> Hello World </body> </html> 를 입력했는데 콘솔창에 Hello가 뜨지않습니다 뭐가 문제일까요 ㅠㅠ? html에서 live server 실행시켰습니다

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

포스트맨에서 send를 하였을 때 오류가 납니다.

해결됨

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

D:\다운로드\chatbot-app-56b70f8517a33ac618d6b1b5684bf304f84358b4\chatbot-app-56b70f8517a33ac618d6b1b5684bf304f84358b4\node_modules\google-auth-library\build\src\auth\googleauth.js:427 return Error(s); ^ Error: The file at "D:\다운로드\test-chat-bot-app-432113-2e08177eda4a.json" does not exist, or it is not a file. Error: ENOENT: no such file or directory, lstat 'D:\다운로드\chatbot-app-56b70f8517a33ac618d6b1b5684bf304f84358b4\chatbot-app-56b70f8517a33ac618d6b1b5684bf304f84358b4\"D:' at GoogleAuth.createError (D:\다운로드\chatbot-app-56b70f8517a33ac618d6b1b5684bf304f84358b4\chatbot-app-56b70f8517a33ac618d6b1b5684bf304f84358b4\node_modules\google-auth-library\build\src\auth\googleauth.js:427:16) at GoogleAuth.<anonymous> (D:\다운로드\chatbot-app-56b70f8517a33ac618d6b1b5684bf304f84358b4\chatbot-app-56b70f8517a33ac618d6b1b5684bf304f84358b4\node_modules\google-auth-library\build\src\auth\googleauth.js:273:28) at Generator.next (<anonymous>) at D:\다운로드\chatbot-app-56b70f8517a33ac618d6b1b5684bf304f84358b4\chatbot-app-56b70f8517a33ac618d6b1b5684bf304f84358b4\node_modules\google-auth-library\build\src\auth\googleauth.js:22:71 at new Promise (<anonymous>) at __awaiter (D:\다운로드\chatbot-app-56b70f8517a33ac618d6b1b5684bf304f84358b4\chatbot-app-56b70f8517a33ac618d6b1b5684bf304f84358b4\node_modules\google-auth-library\build\src\auth\googleauth.js:18:12) at GoogleAuth._getApplicationCredentialsFromFilePath (D:\다운로드\chatbot-app-56b70f8517a33ac618d6b1b5684bf304f84358b4\chatbot-app-56b70f8517a33ac618d6b1b5684bf304f84358b4\node_modules\google-auth-library\build\src\auth\googleauth.js:257:16) at GoogleAuth.<anonymous> (D:\다운로드\chatbot-app-56b70f8517a33ac618d6b1b5684bf304f84358b4\chatbot-app-56b70f8517a33ac618d6b1b5684bf304f84358b4\node_modules\google-auth-library\build\src\auth\googleauth.js:202:29) at Generator.next (<anonymous>) at D:\다운로드\chatbot-app-56b70f8517a33ac618d6b1b5684bf304f84358b4\chatbot-app-56b70f8517a33ac618d6b1b5684bf304f84358b4\node_modules\google-auth-library\build\src\auth\googleauth.js:22:71 npm start run 이후 포스트맨에서 send를 누르면 이런식으로 나오네요 문제가 뭔지 잘 모르겠습니다....

  • react
  • node.js
mellsh0813 댓글 1 좋아요 0 조회수 194

예제문제 추가 쿼리 질문

미해결

[리뉴얼] 처음하는 SQL과 데이터베이스(MySQL) 부트캠프 [입문부터 활용까지]

안녕하세요 공부하다가 쿼리에 추가해보고 싶은게 생겨서 질문드립니다! 예2: 서브카테코리가 '여성신발'인 상품중 할인가격이 가장 높은 상품의 할인가격 가져오기 이 문제에 정석 답변이라면 MAX(dis_price) 컬럼만 도출될텐데요! 앞에다가 해당 상품명 title을 추가해서 총 두 개의 컬럼이 나오게끔 만들어보려다가 막혀서 질문드립니다. 원래는 99000짜리 하나만 나와야하는데 밑에 쿼리로 하니까 여러개가 나와서요 ㅠㅠ 여러개가 나온 이유는 알거같아요 타이틀을 그룹바이해서 그 그룹별로 제일 높은 가격이 도출된 것 같은데 그건 제가 원하는 답은 아니어서요! 맥스 디스 프라이스를 가진 아이템코드의 타이틀을 어떻게 해야 효과적으로 도출할 수 있나요? SELECT title, MAX(dis_price) FROM items JOIN ranking on items.item_code = ranking.item_code WHERE sub_category = "여성신발" group by title;

  • python
  • sql
  • mysql
  • dbms/rdbms
  • 데이터-엔지니어링
dmsal0544 댓글 2 좋아요 0 조회수 224

putty 관련 질문

미해결

파이썬으로 장고(Django) 공략하기: 입문

안녕하세요. ppt에 나와있는대로 putty 접속을 시도하는데, Unable to use certificate file (PuTTY SSH-2 private key) 이런 메세지가 뜨면서 안됩니다. 해결방법이 있을까요?

  • python
  • django
Ji Hyeon Ko 댓글 1 좋아요 0 조회수 223

튜플 89번 문제 질문

미해결

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

튜플 89번 코드 전체에서 quot, rem = quot_and_rem(3, 10)만 떼서 다음 셀에서 따로 실행해주고 quot를 실행하면 0이 나오는데 rem은 실행하면 어떤 결과도 나오지 않는데요 혹시 89번 코드처럼 def quot_and_rem(x, y): quot = x // y rem = x % y return quot, rem quot, rem = quot_and_rem(3, 10)을 한 셀에 실행해야 되어야 하는지, 위에 def값을 선언했기 때문에 제가 실행한 대로 따로 셀에 quot, rem = quot_and_rem을 실행하면 안되는 이유가 있을까요? 감사합니다~

  • python
  • 웹-크롤링
lse8189 댓글 1 좋아요 0 조회수 121

[스프링부트 3.2] RefreshToken 발급시 파라미터 오류

해결됨

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

스프링부트 3.2 버전인데 APIRefreshController의 refresh의 파라미터중 String refreshToken만 적으면 -parameter 오류가 나네요. 인텔리제이에서 gradle로 빌드하거나 어노테이션에 이름을 붙여 적으니 잘 동작합니다. 식겁했습니다..

  • react
  • spring-boot
  • jpa
  • jwt
  • redux-toolkit
ghoonpark 댓글 1 좋아요 1 조회수 190

로딩에 대한 질문

미해결

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

현재 투두 페이지에서 새로고침을 하면 empty -> loading -> todolist 보여짐 이렇게 되는데, loading -> empty loading -> todolist 와 같이 로딩 후에 데이터가 없으면 empty가 보여지고, 데이터가 있으면 todolist가 보여지는 구조로 가야하지 않나요?

  • react
  • 클론코딩
  • next.js
  • supabase
Malik KIM 댓글 1 좋아요 1 조회수 214

분류 성능이 잘 안 나오는 이유

미해결

[파이토치] 실전 인공지능으로 이어지는 딥러닝 - 기초부터 논문 구현까지

안녕하세요 강사님.. 제가 일주일이 넘는 기간 동안 계속 이것저것 시도를 해봤음에도 왜 분류 성능이 10%인지를 모르겠어서 실례를 무릅쓰고 질문을 올리게 되었습니다.. cifar10 이미지가 32 크기여서 128 정도로만 rescale을 했고, normalize도 진행했음에도 계속 성능이 10%대이고, loss는 줄어들었다가 갑자기 튀기도 하면서.. 제대로 학습이 되고 있지 않은 것 같습니다ㅠㅠ 바쁘시겠지만 문제의 원인이 무엇인지 여쭤보고 싶습니다ㅠㅠ 감사합니다.. https://drive.google.com/file/d/1FEsv1dex9y9I4AFqX42gBIhVeeOcgQXQ/view?usp=sharing

  • python
  • 머신러닝
  • 딥러닝
  • 인공신경망
  • pytorch
댓글 1 좋아요 0 조회수 242

질문있어요. React 사용자 처리 수업에서

미해결

React + GPT API로 AI회고록 서비스 개발 (원데이 클래스)

이게 계속로딩중이라고 뜹니다 import { Input, Button} from 'antd'; const { TextArea } = Input; import { useState } from "react";// 저장하는 곳임포트 const DiaryInput = (isLoading, onSubmit) => { const [userInput, setUserInput] = useState(""); // isLoading 로딩상태에서 사용하는 변수 // inSubmit 다입력 작성하면 사용 const handleUserInput = (e) => { setUserInput(e.target.value); }; const handleClick = () => { onSubmit(userInput); }; return ( <div> <TextArea value={userInput} onChange={handleUserInput} placeholder="오늘 일어난 일들을 간단히 적어주세요." /> <Button loading={isLoading} onClick={handleClick}> GPT 회고록을 작성해줘! </Button> </div> ); } export default DiaryInput; import { useState } from 'react'; import { CallGPT } from './api/gpt'; import DiaryInput from './components/DiaryInput'; const dummyData = { "title": "고립된 개발자의 고민", "thumbnail": "https://source.unsplash.com/1600x900/?programming", "summary": "혼자 코딩과제를 진행하면서 걱정이다.", "emotional_content": "최근 혼자 코딩과제를 진행하면서, 협업이 없이 모든 것을 혼자 결정하고 해결해야 한다는 부담감에 많이 무겁습니다. 강의를 듣고 최선을 다해 프로젝트를 진행했지만, 예상치 못한 버그들로 인해 스트레스가 많이 쌓였습니다. 스택오버플로와 GPT를 통해 문제를 해결하긴 했지만, 이러한 문제해결 방식이 정말로 제 개발 실력을 향상시키는지에 대해 의문이 듭니다. 왠지 스스로의 능력을 시험할 기회를 잃은 것 같아 아쉽고, 불안감도 커지고 있습니다.", "emotional_result": "이 일기에서 감지되는 감정은 불안, 부담감, 그리고 자신감의 결여입니다. 고립된 상황에서의 성공에 대한 압박감과 문제 해결 방법에 대한 의심은 정서적으로 큰 부담을 주고 있습니다. 자기 효능감이 낮아짐을 느끼는 상황입니다.", "analysis": "고립되어 문제를 해결하는 과정은 큰 스트레스와 불안을 유발할 수 있습니다. '혼자서 하는 일은 좋은 일이든 나쁜 일이든 더욱 크게 느껴진다'는 에릭 에릭슨의 말처럼, 혼자서 모든 것을 해결하려는 시도는 때로는 개인의 성장에 도움이 될 수 있지만, 지속적인 고립은 자기 효능감을 저하시킬 수 있습니다. 이러한 상황에서는 자신의 노력을 인정하고, 필요한 경우 도움을 요청하는 것이 중요합니다.", "action_list": [ "프로젝트 중 발생하는 문제를 혼자 해결하려 하지 말고, 멘토나 동료 개발자와 상의를 통해 해결 방안을 모색하라.", "정기적으로 자신의 학습 방법과 진행 상황을 평가하여, 필요한 경우 학습 방식을 조정하라.", "개발 과정에서의 스트레스 관리를 위해 적절한 휴식과 여가 활동을 통해 정서적 안정을 찾으라." ] }; function App() { const [data, setData] = useState(dummyData); // 우선 빈문자열로 해놓고 const [isLoading, setIsLoading] = useState(false); const handleClickAPICall = async (userInput) => { try { setIsLoading(true);// 처음에는 로딩을 트루 const message = await CallGPT({ prompt: `${userInput}`, }); // Assuming callGPT is a function that fetches data from GPT API setData(JSON.parse(message)); } catch (error) { // Handle error (you might want to set some error state here) } finally { setIsLoading(false);//다음에는 펄스로 } }; const handleSubmit = (userInput) => { handleClickAPICall(userInput); }; console.log(">>data", data); return ( <> <DiaryInput isLoading={isLoading} onSubmit ={handleSubmit} /> <button onClick={handleClickAPICall}>GPT API call</button> <div>title : {data?.title}</div> <div>analysis : {data?.analysis}</div> <div>emotional_content : {data?.emotional_content}</div> <div>emotional_result : {data?.emotional_result}</div> </> ); }; export default App;

  • HTML/CSS
  • javascript
  • react
  • node.js
  • chatgpt
코딩의외로 댓글 1 좋아요 0 조회수 153

인기 태그

인프런 TOP Writers

주간 인기글