inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

Uncaught TypeError: Cannot read properties of undefined (reading 'map') 에러

미해결

따라하며 배우는 리액트 A-Z[19버전 반영]

import React, {useState} from "react"; import "./App.css"; export default function App () { const [todoData, setTodoData] = useState([ { id:"1", title:"공부하기", completed: false, }, { id:"2", title:"청소하기", completed: false, } ]); const [Value,setValue] = useState(""); // 첫번째 인수는 변수 두번재 인수는 state를 정하는 변수 const btnStyle ={ color: "#fff", border: "none", padding: "5px 9px", borderRadius: "50%", cursor: "pointer", float:"right", }; const getStyle = (completed) => { return{ padding:"10px", borderBottom:"1px #ccc dotted", textDecoration: completed ? 'line-through' : "none", }; }; const handleClick = (id) =>{ let newTodoData = todoData.filter(data => data.id !== id) console.log("newTodoData",newTodoData) setTodoData(newTodoData); }; const handleChange = (event) => { console.log("event",event.target.Value) setTodoData(event.target.Value); }; const handleSubmit = (event) =>{ console.log("event",event) event.preventDefault(); // reload를 막아줌 // 새로운 할일 데이터 let newTodo ={ id: Date.now(), title : Value, completed: false, }; // 원래 있던 할 일에 새로운 할일을 더해주기 setTodoData(prev => [...prev,newTodo]); setValue(""); }; const handleCompleteChange = (id) => { console.log("todoData",todoData) let newTodoData = todoData.map((data) =>{ if(data.id === id){ data.completed = !data.completed; } return data; }); setTodoData(newTodoData) }; return ( <div className="container"> <div className="todoBlock"> <div className="title"> <h1>할일 목록</h1> </div> {todoData.map((data) => ( <div style={getStyle(data.completed)} key={data.id}> <input type="checkbox" defaultChecked={false} onChange={() => handleCompleteChange(data.id)}/> {data.title} <button style={btnStyle} onClick={() => handleClick(data.id)}>x</button> </div> ))} <form style={{display:'flex'}} onSubmit={handleSubmit}> <input type="text" name="value" style={{flex:'10', pedding:'50'}} placeholder="해야 할 일을 입력하세요." value={Value} onChange={handleChange}/> <input type="submit" value="입력" className="btn" style={{flex:'1'}} /> </form> </div> </div> ); } 아래 코드에서 form에 어떠한 글자를 입력하면 Console 창에 왜 Uncaught TypeError: Cannot read properties of undefined (reading 'map') 에러가 발생하는지 도저히 모르겠습니다. 혹시 아시는분 답변 부탁드립니다. 감사합니다.

  • Next.js
  • redux
  • tdd
  • react
  • typescript
박정훈 댓글 1 좋아요 2 조회수 5449

axios.get 2번 불러오는데

미해결

프로젝트로 배우는 React.js

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. const getPost = () => { axios.get('http://localhost:3001/posts').then((res) => { console.log(res); }) } axios.get 하면 개발자도구에서 네트워크-> posts 2번 불러오는데 이유를 알고싶습니다.

  • es6
  • react
  • redux
cki6090 댓글 1 좋아요 1 조회수 2918

npm run dev 관련 오류

미해결

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

npm run dev를 하니 다음과 같은 오류가 납니다. PS C:\Users\82105\Downloads\boilerplate-mern-stack-master> npm run dev > react-boiler-plate@1.0.0 dev > concurrently "npm run backend" "npm run start --prefix client" [1] [1] > client@0.1.0 start [1] > react-scripts start [1] [0] [0] > react-boiler-plate@1.0.0 backend [0] > nodemon server/index.js [0] [0] [nodemon] 1.19.4 [0] [nodemon] to restart at any time, enter rs [0] [nodemon] watching dir(s): . [0] [nodemon] watching extensions: js,mjs,json [0] [nodemon] starting node server/index.js [0] (node:9916) Warning: Accessing non-existent property 'count' of module exports inside circular dependency [0] (Use node --trace-warnings ... to show where the warning was created) [0] Server Listening on 5000 [0] (node:9916) Warning: Accessing non-existent property 'findOne' of module exports inside circular dependency [0] (node:9916) Warning: Accessing non-existent property 'remove' of module exports inside circular dependency [0] (node:9916) Warning: Accessing non-existent property 'updateOne' of module exports inside circular dependency [0] MongoDB Connected... [1] [HPM] Proxy created: / -> http://localhost:5000 [1] i 「wds」: Project is running at http://192.168.123.163/ [1] i 「wds」: webpack output is served from [1] i 「wds」: Content not from webpack is served from C:\Users\82105\Downloads\boilerplate-mern-stack-master\client\public [1] i 「wds」: 404s will fallback to / [1] Starting the development server... [1] [1] Error: error:0308010C:digital envelope routines::unsupported [1] at new Hash (node:internal/crypto/hash:71:19) [1] at Object.createHash (node:crypto:133:10) [1] at module.exports (C:\Users\82105\Downloads\boilerplate-mern-stack-master\client\node_modules\webpack\lib\util\createHash.js:135:53) [1] at NormalModule._initBuildHash (C:\Users\82105\Downloads\boilerplate-mern-stack-master\client\node_modules\webpack\lib\NormalModule.js:417:16) [1] at handleParseError (C:\Users\82105\Downloads\boilerplate-mern-stack-master\client\node_modules\webpack\lib\NormalModule.js:471:10) [1] at C:\Users\82105\Downloads\boilerplate-mern-stack-master\client\node_modules\webpack\lib\NormalModule.js:503:5 [1] at C:\Users\82105\Downloads\boilerplate-mern-stack-master\client\node_modules\webpack\lib\NormalModule.js:358:12 [1] at C:\Users\82105\Downloads\boilerplate-mern-stack-master\client\node_modules\loader-runner\lib\LoaderRunner.js:373:3 [1] at iterateNormalLoaders (C:\Users\82105\Downloads\boilerplate-mern-stack-master\client\node_modules\loader-runner\lib\LoaderRunner.js:214:10) [1] at iterateNormalLoaders (C:\Users\82105\Downloads\boilerplate-mern-stack-master\client\node_modules\loader-runner\lib\LoaderRunner.js:221:10) [1] C:\Users\82105\Downloads\boilerplate-mern-stack-master\client\node_modules\react-scripts\scripts\start.js:19 [1] throw err; [1] ^ [1] [1] Error: error:0308010C:digital envelope routines::unsupported [1] at new Hash (node:internal/crypto/hash:71:19) [1] at Object.createHash (node:crypto:133:10) [1] at module.exports (C:\Users\82105\Downloads\boilerplate-mern-stack-master\client\node_modules\webpack\lib\util\createHash.js:135:53) [1] at NormalModule._initBuildHash (C:\Users\82105\Downloads\boilerplate-mern-stack-master\client\node_modules\webpack\lib\NormalModule.js:417:16) [1] at C:\Users\82105\Downloads\boilerplate-mern-stack-master\client\node_modules\webpack\lib\NormalModule.js:452:10 [1] at C:\Users\82105\Downloads\boilerplate-mern-stack-master\client\node_modules\webpack\lib\NormalModule.js:323:13 [1] at C:\Users\82105\Downloads\boilerplate-mern-stack-master\client\node_modules\loader-runner\lib\LoaderRunner.js:367:11 [1] at C:\Users\82105\Downloads\boilerplate-mern-stack-master\client\node_modules\loader-runner\lib\LoaderRunner.js:233:18 [1] at context.callback (C:\Users\82105\Downloads\boilerplate-mern-stack-master\client\node_modules\loader-runner\lib\LoaderRunner.js:111:13) [1] at C:\Users\82105\Downloads\boilerplate-mern-stack-master\client\node_modules\babel-loader\lib\index.js:59:103 { [1] opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ], [1] library: 'digital envelope routines', [1] reason: 'unsupported', [1] code: 'ERR_OSSL_EVP_UNSUPPORTED' [1] }

  • react
  • mongodb
  • nodejs
  • redux
0724ksm 댓글 1 좋아요 0 조회수 605

회원가입 안되시는분들

미해결

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

https://yamea-guide.tistory.com/entry/atlas-MongoError-user-is-not-allowed-to-do-action-find-on 이거땜에 2시간을 욕하고 힘들었네요 후... 어떤글도 해결이 안됐습니다 이거 따라하세요....

  • redux
  • nodejs
  • 웹앱
  • react
  • mongodb
mafia917 댓글 0 좋아요 4 조회수 306

drop table 후 질문드리겠습니다.

미해결

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

안녕하세요 제로초님 강의 잘듣고있습니다. 배포는 처음이라 해당강의를 들으면서 무작정 따라하면서 실습을 하고 있습니다. 근데 제가 모르고 drop table까지 따라해서 database가 삭제됬습니다. 그래서 우분투 back으로 간 뒤 다시 db를 생성했습니다. 근데 db는 정상적으로 생성이 됬는데 테이블을 검색해보면 다음과 같이 Empty set이 출력이 되더라고요 이러한 경우에는 다시 인스턴스를 생성해야될까요? ㅜㅜ mysql> show databases; +--------------------+ | Database | +--------------------+ | information_schema | | mysql | | performance_schema | | recipe.io | | sys | +--------------------+ 5 rows in set (0.00 sec) mysql> use recipe.io; Database changed mysql> show tables; Empty set (0.00 sec) mysql>

  • express
  • react
  • redux
  • nodejs
  • Next.js
hib4888 댓글 1 좋아요 0 조회수 377

s3 배포시 Re-run all jobs 버튼 부재

미해결

따라하며 배우는 리액트 A-Z[19버전 반영]

Re-run all jobs 버튼이 없어서 node.js에서 오류가 발생하는데 혹시 어떻게 해야할까요?

  • react
  • redux
  • typescript
  • tdd
  • Next.js
The Rolling Stones 댓글 1 좋아요 0 조회수 371

tailwindcss 적용이 안 됩니다

미해결

따라하며 배우는 리액트 A-Z[19버전 반영]

따라 치면서 실습하는데 적용이 안 되길래 삽질 하다가 혹시나 싶어서 강의 자료를 다운 받아 npm run start 해 보았는데요 그것도 이렇게 적용이 안 되게 보이네요... 뭐가 문제일까요? ㅜ.ㅜ

  • typescript
  • tdd
  • react
  • redux
  • Next.js
김가희 댓글 5 좋아요 0 조회수 1977

카드 만드는거 질문있습니다

미해결

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

렌딩페이지만들기 - 카드만들기 강의 3분40분에 컴포넌트 return 안에 Products.map을 돌리는게 아니고 따로 함수를 빼서 renderCards를 처리하셨는데 따로 빼는 이유가 있나요? 실무에선 return에서 map으로 거의 돌렸어서 궁금해졌습니다

  • react
  • 웹앱
  • redux
  • nodejs
  • mongodb
댓글 1 좋아요 0 조회수 234

reducer는 함수라고 해서 function을 넣으셨는데...

미해결

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

1. reducer는 함수라고 해서 function을 넣으셨는데... 화살표 함수는 안쓰는 이유가 따로있는건가요?? 아니면 써도 상관없나요?? 2.dispath에 type은 늘 대문자로 쓰시던데...그것도 또한 어느정도 약속이 되어있는 문법인가요??

  • redux
  • react
  • web-api
O_O Kero 댓글 1 좋아요 0 조회수 329

useMemo hook 질문

미해결

따라하며 배우는 리액트 A-Z[19버전 반영]

강의 내용 중 useMemo 부분의 실습이 없어서 질문드립니다. Component.js로 컴포넌트를 작성하고 App.js에서 컴포넌트를 호출해봤는데요. App.js .. <div>{<Component a={1} b={5} />}</div> ... Component.js ... useMemo(() => compute(a,b),[a,b]); ... 이렇게 작성했을 때 useMemo가 제대로 작동하고 있는지 확인하고 싶은데요. useEffect는 console.log로 확인이 됐는데 useMemo는 어떻게 확인을 할 수 있을까요? (useEffect랑 useMemo는 방식이 달라서 useEffect에 로그를 찍어봤자 useMemo를 확인할 수 없었어요...)

  • Next.js
  • tdd
  • redux
  • react
  • typescript
jh0416 댓글 0 좋아요 1 조회수 232

안녕하세요 제로초님 redux-persist 질문 드립니다.

미해결

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

안녕하세요 제로초님 redux-toolkit에 next-redux-wrapper와 redux-persist 연결하는데 질문드립니다. import userReducer from "@slice/userSlice"; import commonSlice from "@slice/commonSlice"; import localSlice from "@slice/locals"; export const persistConfig = { key: "root", version: 0, whitelist: ["locals"], storage, }; export const rootReducer = (state, action) => { if (action.type === HYDRATE) { return { ...state, ...action.payload, }; } return combineReducers({ user: userReducer, common: commonSlice, locals: localSlice, })(state, action); }; export const reducer = persistReducer(persistConfig, rootReducer); 이렇게 초기 셋팅을 해주었고, export const store = configureStore({ reducer, middleware: (getDefaultMiddleware) => getDefaultMiddleware({ serializableCheck: { ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER], }, }).concat(logger), devTools: process.env.NEXT_PUBLIC_NODE_ENV !== "production", }); export const persistor = persistStore(store); const setupStore = (context: any): EnhancedStore => store; const makeStore: MakeStore<any> = (context: any) => setupStore(context); export const wrapper = createWrapper<Store>(makeStore); export default wrapper; 이렇게 스토어를 만들었습니다. 그런데 문제가.. persist에서 rehydrate에서는 저장된 값이 유지 되어있으나. next-redux-wrapper의 hydrate에서 초기 스테이트값을 다시 저장해버리는 문제가 있습니다. 둘중 하나를 버려야 할까요? 아니면 셋팅이 잘못된걸까요?

  • redux-persist
  • express
  • react
  • nodejs
  • redux
  • Next.js
정문채 댓글 2 좋아요 0 조회수 1139

모달창 밖에 스크롤 이벤트는 어떻게 끌 수 있을까요?

미해결

따라하며 배우는 리액트 A-Z[19버전 반영]

안녕하세요. 모달창 을 띄우고 스크롤을 하면 모달창 밖에 화면이 스크롤이 되는데 이부분도 useRef를 이용해서 막을 수 있을까요??

  • typescript
  • react
  • tdd
  • redux
  • Next.js
조찬호 댓글 1 좋아요 1 조회수 3108

API_URL

미해결

따라하며 배우는 리액트 A-Z[19버전 반영]

이러한 API_URL은 어떻게 알 수 있을까요 ? https://www.themoviedb.org 사이트에 정보가 나와있는 걸까요 ?

  • tdd
  • react
  • redux
  • typescript
  • Next.js
댓글 1 좋아요 0 조회수 297

스타일관련문의드립니다

미해결

따라하며 배우는 리액트 A-Z[19버전 반영]

선생님 강좌 하다보니까 스타일 관련이 좀어려운 부분이 있는데요 혹시 스타일 쉽게 구현하는 법이 있나요? 미디어쿼리 z인덱스니 포지션 이런거 한번에 해결해주는 툴은 없는지요?

  • Next.js
  • redux
  • react
  • typescript
  • tdd
David Ko 댓글 2 좋아요 0 조회수 304

특정 영화의 더 상세한 정보가져오기

미해결

따라하며 배우는 리액트 A-Z[19버전 반영]

const {data:moviedetail} = await axios.get(`movie/${movieId}`,{params:{append_to_reponse:'videos'}}) setmovie(moviedetail) `movie/${movieId}`,{<---------- 이부분이요 params:{append_to_reponse:'videos'}}); 선생님 저 윗 부분은 1. 중괄호로 params를 묶으신건 어떤걸 의미하는건가요? 2.append_to_response:'videos' 이부분은 문법인가요? 감사합니다

  • tdd
  • redux
  • typescript
  • react
  • Next.js
David Ko 댓글 2 좋아요 0 조회수 341

동영상이 없을 경우 오류

미해결

따라하며 배우는 리액트 A-Z[19버전 반영]

선생님 안녕하세요? 강의 잘 듣고 있습니다. Styled Component를 이용한 비디오 배너 만들기에서 iframe에서 src에 movie.videos.results가 없을 경우 오류가 생깁니다. 저는 여기에 옵셔널 체이닝(?.)을 걸어 만약에 movie.videos.results이 없을 경우 undefined를 반환하게 하는 방식으로 해결했습니다. 이렇게 한 경우 오류 페이지가 보이는 대신 동영상을 재생할 수 없다고 뜹니다. 이렇게 하는 방법도 괜찮은지, 혹시 더 좋은 방법이 있다면 가르쳐 주세요. 감사합니다. src={`https://www.youtube.com/embed/${movie.videos.results[0]?.key}?controls=0&autoplay=1&loop=1&playlist=${movie.videos.results[0]?.key}`}

  • Next.js
  • typescript
  • react
  • redux
  • tdd
hh1234 댓글 1 좋아요 2 조회수 584

디비 api 사이트 회원가입 문제

미해결

따라하며 배우는 리액트 A-Z[19버전 반영]

디비 api 사이트 회원가입이 안됩니다

  • react
  • typescript
  • redux
  • tdd
  • Next.js
강민성 댓글 2 좋아요 0 조회수 356

어떤 오류인지 모르겠습니다.

미해결

따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]

현재 회원가입 페이지 UI만들기 강의 영상을 시청하고 있습니다. 실습을 진행하는데 아래와 같은 오류가 발생했는데 어떻게 해결해야할 지 모르겠습니다. redux 모듈 설치 문제 같아서 다시 npm install redux를 하면 ㅇ이와 같은 문구가 뜹니다. 혹시 몰라 npm audit fix --force도 하고 다시 설치해 봤지만 계속 반복됩니다 ㅠㅠㅠ 해결 방법을 찾아보려고 해도 찾을 수 없어 질문합니다... 깃허브 저장소 첨부해서 올립니다! 감사합니다! https://github.com/tejava7177/React-ChattingProgram/tree/main/src

  • redux
  • react
  • 모듈
  • 웹앱
  • firebase
으랏차차심주흔 댓글 2 좋아요 0 조회수 365

프론트앤드 .env 파일

미해결

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

그 어디에선가 프론트앤드에서 .env 파일이 build 시 노출된다는 얘기를 들었던 것 같은데 사실인가용 프론트앤드에서 .env 파일을 사용하면 더 효율적으로 처리 할 수 있는 작업이 생겼는데 백앤드로 처리해도 되지만 보안상 괜찮은지 궁금해서 여쭤봅니다

  • Next.js
  • redux
  • nodejs
  • react
  • express
123413 댓글 1 좋아요 0 조회수 490

params : { append_to_response : "videos"},

미해결

따라하며 배우는 리액트 A-Z[19버전 반영]

강의 잘 보고 많이 배우고 있습니다 ! "append_to_response"는 사용자가 다르게 바꿀 수 있는 부분인가요 ? 아니면 axios 속성인가요 ?

  • axios
  • Next.js
  • typescript
  • redux
  • react
  • tdd
댓글 1 좋아요 0 조회수 359

인기 태그

인프런 TOP Writers

주간 인기글