inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

12.11 오류 관련

해결됨

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

강의 19:07까지 따라하다가 오류가 갑자기 많이 뜨는데 어디에서 잘못된 것인지 모르겠습니다.. . DiaryList.jsx import "./DiaryList.css"; import Button from "./Button"; import DiaryItem from "./DiaryItem"; const DiaryList=({data})=>{ return <div className="DiaryList"> <div className="menu_bar"> <select> <option value={"latest"}>Newest</option> <option value={"oldest"}>Oldest</option> </select> <Button text={"write new diary"} type={"POSITIVE"} /> </div> <div className="list_wrapper"> {data.map((item)=><DiaryItem key={item.id} {...item}/>)} </div> </div>; }; export default DiaryList; DiaryItem.jsx import {getEmotionImage} from "../util/get-emotion-image"; import Button from "./Button"; import "./DiaryItem.css"; const DiaryItem=({id,emotionId,createdDate,content})=>{ return (<div className="DiaryItem"> <div className={`img_section img_section_${emotionId}`}> <img src={getEmotionImage(emotionId)}/> </div> <div className="info_section"> <div className="created_date"> {new Date(createdDate).toLocaleDateString()}; </div> <div className="content">{content}</div> </div> <div className="button_section"> <Button text={"수정하기"} /> </div> </div> ); }; export default DiaryItem; App.jsx import './App.css' import{useReducer,useRef,createContext} from "react"; import {Routes,Route} from "react-router-dom"; import Home from "./pages/Home"; import Diary from "./pages/Diary"; import New from "./pages/New"; import Edit from "./pages/Edit"; import Notfound from "./pages/Notfound"; const mockData=[ { id:1, createdDate:new Date("2025-02-18").getTime(), emotionId:1, content:"1번 일기 내용", }, { id:2, createdDate:new Date("2025-02-17").getTime(), emotionId:2, content:"2번 일기 내용", }, { id:3, createdDate:new Date("2025-01-15").getTime(), emotionId:3, content:"3번 일기 내용", }, ]; function reducer(state,action){ switch(action.type){ case "CREATE": return [action.data,...state]; case "UPDATE": return state.map((item)=> String(item.id)===String(action.data.id) ?action.data : item ); case "DELETE": return state.filter( (item)=>String(item.id)!==String(action.id) ); default: return state; } } export const DiaryStateContext=createContext(); export const DiaryDispatchContext=createContext(); function App() { const [data,dispatch]=useReducer(reducer,mockData); const idRef=useRef(3); //새로운 일기 추가 const onCreate=(createdDate,emotionId,content)=>{ dispatch({ type:"CREATE", data:{ id: idRef.current++, createdDate, emotionId, content, }, }); }; //기존 일기 수정 const onUpdate =(id,createdDate,emotionId,content)=>{ dispatch({ type:"UPDATE", data: { id, createdDate, emotionId, content, }, }); }; //기존 일기 삭제 const onDelete=(id)=>{ dispatch({ type:"DELETE", id, }); }; return ( <> <DiaryStateContext.Provider value={data}> <DiaryDispatchContext.Provider value={{ onCreate, onUpdate, onDelete, }} > <Routes> <Route path="/" element={<Home />} /> <Route path="/new" element={<New />} /> <Route path="/diary/:id" element={<Diary />} /> <Route path="/edit/:id" element={<Edit />} /> <Route path="*" element={<Notfound />} /> </Routes> </DiaryDispatchContext.Provider> </DiaryStateContext.Provider> </> ); } export default App

  • javascript
  • react
  • node.js
진성원 댓글 2 좋아요 0 조회수 184

매번 새로운 프로젝트를 실행할 때 cmd 설정문의

해결됨

React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드

저희가 수업진행하면서 프론트엔드,백엔드에 많은 npm으로 설치하잖아요. 이런 라이브러리들을 매번 새로운 프로젝트마다설정해야할까요?? 비슷한 작업을 뽑아낸다고할때 기존 지금 폴더를 다시 연 다음에 이미지 및 텍스트 수정할때말고 다시 비슷한 프로젝트 폴더를 만들어서 한다고 하면 반드시 다시 전부 깔아야하는거죠? ㅠㅠ

  • HTML/CSS
  • javascript
  • react
  • node.js
  • mongodb
신상 댓글 3 좋아요 0 조회수 177

Azure function 트러블 슈팅 건

해결됨

Azure Native로 나만의 GPT 만들기

안녕하세요 , 수강 잘 들었습니다 ㅎㅎ 강의 커리큘럼을 다 수강 완료 해서 Azure function을 활용한 SaaS 방식의 서비스를 쫌더 깊게 이해하는 시간을 가졌구요 제가 지금 기존 강의 내용에 살을 더 붙여 langChain 기반으로 Rag를 적용 시켜서 개발을 완료한 상태 입니다. 근데 여기서 문제가 되는 부분이 로컬에서는 기능을 잘 수행을 하는데 agent 함수를 배포를 하게 되면 에러가 뜨는지 , 기능을 수행하지 못합니다. 서비스 버스에 메시징은 잘 쌓이는데 agent function 에서 그 메시징 리퀘스트도 받질 못하는거 보니 , 런 타임에서 에러가 난거 같은데 해당 함수 Application Insights 대쉬 보드에서 확인하려니 뭐가 뭔지 알수가 없더라구요 ... 서버 로그를 확인 하고 싶은데 혹시 어떤 방법으로 이런 트러블을 해결할수 있을까요 ...

  • javascript
  • python
  • mongodb
  • azure
  • FastAPI
zerocastle 댓글 2 좋아요 0 조회수 194

[해결완료] TodoItem을 import했지만, 코드에서 사용하지 않아서 발생하는 ESLint 경고

해결됨

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

한 입 크기로 잘라먹는 리액트 책 잘 보고 있습니다. 카운터앱 프로젝트는 완료 후, 두 번째 할 일 관리 앱 실행 중에 문제가 발생해서 문의드려요. 1. 문제 : 326쪽까지 문제없이 잘 실행이 되었는데, 327쪽 <div>{it.content}</div> 이 코드를 넣었을때부터 327쪽 책과 동일하게 코드 넣었는데, 에러 문구가 아래처럼 나왔어요. WARNING in [eslint] src\component\TodoList.js Line 1:8: 'TodoItem' is defined but never used no-unused-vars webpack compiled with 1 warning TodoItem 을 import했지만, 코드에서 사용하지 않아서 발생하는 ESLint 경고인 것 같은데, { todo.map ((it) => ( <TodoItem key={ it.id } content={it.content} /> ))} 여기서 TodoItem 이 개별 할 일을 나타내는 컴포넌트라고 가정하고 content 를 props로 전달했습니다. (이때, key 값으로 it.id 를 사용하여 React에서 리스트 렌더링 최적화를 도와야 합니다.) 파란색 부분과 같은 조언을 받아 코드를 수정했더니 npm run start 실행하면 서버에서 지금까지 한 모든 화면이 안 보이고 백지화 되었어요. ㅠㅠ 기존에 html5로 이펍3 만들기 조금 배웠고, css개념 어느 정도 이해하는 수준의 초보인데, 책 보고 프로젝트1 마치고, 프로젝트2도 거의 다 와가서 재미있게 하는 중에 날벼락이 ㅠㅠ; 혼자서는 도저히 해결이 안 될 거 같아서 강의등록 후 문의드려요.. 초보라 문의도 이렇게 하는게 맞는지 모르겠네요. 답변 부탁드릴게요~ 참고 todoeditor.js return 이하 App.js import "./App.css"; import Header from "./component/Header"; import TodoEditor from "./component/TodoEditor"; import TodoList from "./component/TodoList"; import { useState, useRef } from "react"; const mockTodo = [ { id: 0, isDone: false, content: "React 공부하기", createDate: new Date().getTime(), }, {id: 1, isDone: false, content: "빨래 널기", createDate: new Date().getTime(), }, {id: 2, isDone: false, content: "노래 연습하기", createDate: new Date().getTime(), }, ]; function App() { const idRef = useRef(3); const [todos, setTodos] = useState(mockTodo); const onCreate = (content) => { const newItem = { id: idRef.current, content, isDone: false, createDate: new Date().getTime(), }; setTodos([newItem,...todos]); idRef.current += 1; }; return ( <div className="App"> <Header /> <TodoEditor onCreate={onCreate} /> <TodoList todos={todos}/> </div> ); } export default App;

  • javascript
  • react
  • node.js
ㄱ.북베어 김지은(자유의 길) 댓글 4 좋아요 1 조회수 212

교육 예시 파일들이 다운로드 안됩니다.

미해결

코딩 몰라도 OK! CursorAI로 시작하는 개발 생활 (웹/초급)

info 작성 예시 다운로드 info 탬플릿 다운로드 두개의 파일들이 권한이 없네요???

  • react
  • 웹-디자인
  • firebase
  • no-code
  • cursor
  • vercel
Jae Yeong Lee 댓글 1 좋아요 0 조회수 189

새 강의쿠폰 질문있습니다

해결됨

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

저번에 사놓고(2시간들음) 다시 공부를 시작하려는데 혹시 새로운 강의로 들을수있을까요! 이번에는 꼭 완강 하겠습니다

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

섹션3 브루트포스 알고리즘 1342 풀이1 질문

해결됨

세계 대회 진출자가 알려주는 코딩테스트 A to Z (with Python)

섹션3 브루트포스 알고리즘 1342 문제 풀이 강의에서 풀이1 질문이 있습니다. for i in range(ord('a'), ord('z') + 1) : ans //= fact(S.count(chr(i))) 이렇게 fact로 나눠주라고 하셨는데, 왜 나눠주는 지 이해가 잘 안됩니다. 같은 문자가 있을 때 나눠주는 건 알고있습니다. 근데 그건 경우의 수를 구할 때고, 이건 인접한 문자가 같은 지 아닌 지를 구하는 건데 왜 나눠줘야 하나요?

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

product image

미해결

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

안녕하세요 강의를 기반으로 작업을 하다 궁금한점이 생겨서 product - modify에서 사진을 모두 삭제하고 저장을 해두거나 product - register에서 사진이 없는상태로 저장을 해두면 @Query("select p, pi from Product p left join p.imageList pi where pi.ord = 0 and p.delFlag = false ") Page<Object[]> selectList(Pageable pageable); ProductRepository에서 selectList 쿼리부분의 ord = 0인 설정만 만 호출하게 되버리는데 이때 이미지리스트 테이블에서 이미 ord가 없는 게시물은 조회가 되지 않습니다.. ord가 이미 없는 게시물은 delFlag가 false임에도 조회가 되지않습니다... 강의 목표는 아마도 default.jpeg 가 나와야 정상인거같은데 어떻게 해야 좋을까요 ? 처음엔 서비스에서 imageStr이 없으니 imageStr을 강제로 default.jpeg로 설정해봤지만 어차피 조회되지 않아서 의미가 없었습니다. 쿼리를 수정해봐야 할까요 ..??

  • react
  • spring-boot
  • jpa
  • jwt
  • redux-toolkit
이동준 이 댓글 2 좋아요 0 조회수 78

Supabase CRUD 하기 또는 REST API화 하기 중 질문이 있습니다.

해결됨

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

안녕하세요! 좋은 강의 잘 들었습니다! 강의 중 내용에 관한 질문이 있어 여쭙니다. 현업에서 작은 사이드 프로젝트를 운영중인데 기존에는 Firebase를 사용하다가 SQL DB가 필요해 Supabase로 이전을 고려하다 강의를 듣게 되었습니다. 다름이 아니라 Supabase에서도 REST API 형태를 지원하는 것으로 알고 있는데 강의 내용을 보면, REST API 형태를 사용하는 것이 아닌, 직접 Supabase의 Database에 CRUD 하는 것으로 여겨집니다. 보안이나 코드의 유지 / 보수, 또는 프론트 개발자와 백엔드 개발자의 역할 분리 등 여러 측면을 고려하였을 때 REST API 형태가 아닌 프론트 코드 내에 직접 CRUD 코드가 구현된 이유가 무엇인지 궁금합니다.

  • react
  • 클론코딩
  • next.js
  • supabase
유재석 댓글 2 좋아요 1 조회수 295

jotai로 변경했을 때 코드

미해결

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

Recoil과 비슷해 보이는 Jotai로 혼자 바꿔보고 있는 중입니다 ㅠㅠ 근데 이번 강의 코드는 어떻게 바꿔야 하는지 감이 안 와요....

  • react
  • redux
  • node.js
  • sass
  • swr
김가을 댓글 3 좋아요 0 조회수 455

desktop이 없어서..

미해결

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

OneDrive 의 바탕화면에 python class 를 추가하니 바탕화면에 폴더를 설치하기 까지 성공했는데요 ㅜㅜㅜ 화면에 보이는 것처럼 문제가 생겨서요 ,, 어떻게 해야하나요?

  • python
하연우 댓글 1 좋아요 0 조회수 158

백엔드 서버 세팅하기에서 error TS2339에러 입니다.

미해결

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

npm run start:dev 명령어를 실행을 할 시 아래처럼 타입 에러가 나오고 있는데, 어떻게 해결을 해야 할까요? ㅠㅠ error TS2339: Property 'where' does not exist on type 'string | number | bigint | boolean | [] | { [K in keyof A]: Exact<A[K], any>; }'. Property 'where' does not exist on type 'string'. 13 where: args.where, ~~~~~ src/prisma.extension.ts:25:23 - error TS2339: Property 'where' does not exist on type 'string | number | bigint | boolean | [] | { [K in keyof A]: Exact<A[K], any>; }'. Property 'where' does not exist on type 'string'. 25 where: args.where, ~~~~~

  • react
  • next.js
  • react-query
  • next-auth
  • msw
JS계의 김영한 목표 댓글 1 좋아요 0 조회수 106

RTK에서 draft, state 차이가 있나요?

미해결

[리뉴얼] React로 NodeBird SNS 만들기

강의 들으면서 제로초님 RTK GitHub 코드도 보고 있는데요. RTK는 immer가 내부적으로 사용되어 state를 써도 불변성을 자동으로 처리하는 걸로 알고 있습니다. 그런데 https://github.com/ZeroCho/react-nodebird/blob/master/toolkit/front/reducers/user.js 에선 리듀서 마다 state를 쓰는 곳이 있고 draft를 쓰는 곳이 있어서 질문합니다! 역할은 같지만 단지 코드를 명시적이고 의도를 나타내기 위해 구분해서 쓰는 것이라고 생각되는데 구분해서 쓰는 다른 이유가 있는지 궁금합니다.

  • react
  • redux
  • node.js
  • express
  • next.js
  • immer
  • rtk
힝구 댓글 2 좋아요 0 조회수 180

선생님 잘듣고있습니다.

해결됨

React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드

여기 이 강의를 다듣고 회사 및 기업 홈페이지리를만들고, 1. FIREBASE 강의도 들어서 로그인 기능 더 추가하면 되는거죠? 2. 결제기능도 넣고 싶은데 강의 만들 계획이 있으신가요? 있다면 언제쯤일까요? 3. 카카오지도 API 끌고와서 호갱노노나 부동산지인 같은 홈페이지도 만들어 보고싶습니다. 한국부동산원 API 이런 API를 들고와서 설정하는 방법도 알고싶어요! 아마 1,2,3이 합친다면 웬만한건 다 만들 수 있지않을까요?? 감사합니다

  • HTML/CSS
  • javascript
  • react
  • node.js
  • mongodb
신상 댓글 1 좋아요 0 조회수 122

6.1 미국 주식 데이터 크롤링을 막아둔 거 같아요.

미해결

내 업무를 대신 할 파이썬(Python) 웹크롤링 & 자동화 (feat. 주식, 부동산 데이터 / 인스타그램)

import requests res = requests.get(" https://www.marketwatch.com/investing/stock/aapl/financials/cash-flow/quarter ") res.text 위 코드를 실행하니 <html lang="en"><head><title> marketwatch.com </title><style>#cmsg{animation: A 1.5s;}@keyframes A{0%{opacity:0;}99%{opacity:0;}100%{opacity:1;}}</style></head><body style="margin:0"><p id="cmsg">Please enable JS and disable any ad blocker</p><script data-cfasync="false">var dd={\'rt\':\'c\',\'cid\':\'AHrlqAAAAAMAh8Qu9qw4o5AAeZGKYw==\',\'hsh\':\'D428D51E28968797BC27FB9153435D\',\'t\':\'bv\',\'qp\':\'\',\'s\':47891,\'e\':\'c294f466cf1fc364ded3ee7825542c1f3981642dddce927e5f11a3c23d8562c7\',\'host\':\' geo.captcha-delivery.com \',\'cookie\':\'cKcsNHb~i3N0ubHsvh1SU41idmHgtXrG3MIr84AsSXM8dmhMHFBZ_SDJgc_fPcFDnPl66WhkZTCTtkxK4IxLoKIgEyZat25gsG5q7IDMkMwFhpZEai47m4N4I1c0WP9G\'}</script><script data-cfasync="false" src=" ">https://ct.captcha-delivery.com/c.js"></script></body></html> 이렇게 출력이 나왔습니다. 구글링을 해보니 해당 marketwatch 사이트에서 크롤링을 막고있는 거 같더라구요. 이런 상황에서는 requests를 통해서는 해당 강의를 진행하지 못한다는 거 맞나요??

  • python
  • 웹-크롤링
권태혁 댓글 2 좋아요 0 조회수 301

Pyside6 배경색 변경

미해결

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

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. Pyside6 배경색이 디폴트가 다크모드로 나오는것 같은데 너무 어두워서 밝게 하고 싶으나 방법을 잘 모르겠어요 색상을 변경하고 싶은데 어떻게 해야 하나요?

  • python
  • 웹-크롤링
민소리 댓글 2 좋아요 0 조회수 490

개발 모드에서 캐시 로깅 사용방법

미해결

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

"4.2) 데이터 캐시" 강의 진행시 npm run dev 로 진행시 { cache: "force-cache" } 설정하여도 캐싱이 안되는거 같은데요 npm run build npm run start 로 진행시에는 캐싱이 동작하고있는걸로 보이나 로깅이 안되는것 같습니다. 강의 영상처럼 캐싱 동작 상태를 로깅을 하려면 어떤 옵션값을 설정 해야하나요 ? 제가 놓친거 같아서 돌려보거나 검색을 해봤는데 못찾아서 질문드립니다. 감사합니다.

  • react
  • typescript
  • next.js
  • 캐싱
  • 로깅
댓글 2 좋아요 0 조회수 181

인기 태그

인프런 TOP Writers

주간 인기글