inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

map undefined 오류 질문드립니다

미해결

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

코드를 혼자 짜보려고 하는 중에 type error:cannot read property 'map' of undefined가 뜹니다. 서버쪽은 postman연동했을때 잘 뜨는데 논리 하자가 있는 것 같습니다..ㅠㅠ뭐가 문제일까요 main/index.js import " ./index.css "; import axios from " axios "; import React from " react "; import { API_URL } from " ../config/config.js "; function MainPage () { const [ products , setProducts ] = React . useState ([]) ; React . useEffect ( function () { axios . get ( `${ API_URL } /products ` ) . then ( function ( result ) { console . log ( " RESULT값: " , result ) ; const products = result . data . products ; setProducts ( products ) ; } ) . catch ( function ( error ) { console . log ( " error발생 " ) ; } ) ; }, []) ; return ( < div > < div id = " banner " > < img src = " images/banners/banner1.png " /> </ div > < h1 > 판매되는 상품들 </ h1 > < div id = " product-list " > { products . map ( function ( product , index ) { return ( < div className = " product-card " > < div > < div className = " product-contents " > < span className = " product-name " >{ product . name }</ span > < span className = " product-price " >{ product . price } 원 </ span > < div classNmae = " product-footer " > < div className = " product-seller " > < img className = " product-avatar " src = " images/icons/avatar.png " /> < span >{ product . seller }</ span > </ div > </ div > </ div > </ div > </ div > ) ; } ) } </ div > </ div > ) ; } ####App.js export default MainPage ; import " ./App.css "; import MainPageComponent from " ./main "; function App () { return < MainPageComponent /> ; } export default App ; ##server const express = require ( " express " ) ; const cors = require ( " cors " ) ; const app = express () ; const port = 7070 ; const models = require ( " ./models " ) ; app . use ( express . json ()) ; app . use ( cors ()) ; app . get ( " /products " , ( req , res ) => { models . Product . findAll ( { attributes : [ " id " , " name " , " price " , " imageUrl " , " seller " , " createdAt " ] , } ) . then ( ( result ) => { console . log ( " RESULT값 : " , result ) ; res . send ( { product : result , } ) ; } ) . catch ( ( error ) => { console . error ( " ERROR가 발생하였습니다: " , error ) ; } ) ; } ) ; app . listen (port , () => { console . log ( " 그랩 마켓의 서버가 돌아가고 있습니다. " ) ; models . sequelize . sync () . then ( () => { console . log ( " ✓ DB 연결 성공 " ) ; } ) . catch ( function ( err ) { console . error ( err ) ; console . log ( " ✗ DB 연결 에러 " ) ; process . exit () ; } ) ; } ) ;

  • 머신러닝 배워볼래요?
  • react-native
  • javascript
  • react
  • HTML/CSS
  • express
  • nodejs
  • tensorflow
댓글 2 좋아요 1 조회수 544

[MAC] create-react-app에서 permission 에러 해결책

미해결

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

질문은 아니구요. 같은 문제로 고생하시는 분들이 많아 제 방법을 공유합니다 1) root 비밀번호 설정 2) 관리자 권한으로 설치 아래는 제가 찾은 링크이니 참고하세요 root 비밀번호 설정 https://heeestorys.tistory.com/877 관리자 권한으로 설치 https://online.codingapple.com/unit/react1-install-create-react-app-npx/

  • nodejs
  • javascript
  • 머신러닝 배워볼래요?
  • react
  • HTML/CSS
  • react-native
  • tensorflow
  • express
김준영 댓글 2 좋아요 2 조회수 421

노드 모듈스 파일 질문입니다.

미해결

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

저번 강의까진 노드 모듈스 파일이 없었고 갑자기 생겨서 저도 다운받으려고 create-react-app .을 했는데 사진처럼 뜹니다. web이란 폴더 안에 market_web, marker_server 두개의 폴더가 있고 market_web에 깔려있다고 다른 파일인 marker_server에 깔 수 없는건가요?

  • javascript
  • react-native
  • react
  • HTML/CSS
  • express
  • nodejs
  • 머신러닝 배워볼래요?
  • tensorflow
gakaotalk 댓글 4 좋아요 1 조회수 489

404 오류

미해결

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

product array에 설정한 값이 다 있는 걸 보면 서버가 정상적으로 돌아가는 것 같은데 위에 404에러가 뜨는 이유가 뭘까요.?

  • 머신러닝 배워볼래요?
  • HTML/CSS
  • nodejs
  • react
  • react-native
  • express
  • tensorflow
  • javascript
댓글 1 좋아요 1 조회수 379

리액트 네이티브는 프리티어 적용 하는법이 다른가요??

미해결

처음 배우는 리액트 네이티브

리액트에서 적용이 되던게 리액트 네이티브에서는 프리티어 적용이 안되서 혹시 리액트 네이티브는 리액트와 프리티어 적용방법이 다른가요? 이틀동안 검색해보고 적용이 안되서 여쭤봅니다 ㅠ,ㅠ 아래는 해당 코드입니다. // vscode/settings.json { " editor.defaultFormatter " : " esbenp.prettier-vscode " , " editor.tabSize " : 2 , " editor.formatOnSave " : true, " editor.codeActionsOnSave " : { " source.fixAll.eslint " : true }, " javascript.format.enable " : false, " eslint.alwaysShowStatus " : true, " files.autoSave " : " onFocusChange " } //.eslintrc { " extends " : [ " react " , " plugin:prettier/recommended " ] } //.prettierrc { " tabWidth " : 2 , " endOfLine " : " lf " , " arrowParens " : " avoid " , " singleQuote " : true } // package.json " devDependencies " : { " eslint-config-prettier " : " ^8.3.0 " , " eslint-plugin-prettier " : " ^3.4.0 " , " prettier " : " ^2.3.2 " } 이 문구 때문에 그런가요?

  • 프리티어
  • 리액트네이티브
  • javascript
  • react-native
댓글 1 좋아요 0 조회수 402

그대로 따라한것 같은데 에러가 뜨는데 확인 부탁드립니다.

미해결

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

Windows PowerShell Copyright (C) Microsoft Corporation. All rights reserved. PS D:\learn-all-with-javascript\grab-market-web> npm install -g create-react-app C:\Users\motiongrapher\AppData\Roaming\npm\create-react-app -> C:\Users\motiongrapher\AppData\Roaming\npm\node_modules\create-react-app\index.js + create-react-app@4.0.3 added 67 packages from 25 contributors in 5.659s PS D:\learn-all-with-javascript\grab-market-web> create -react-app . 경로가 포함된 경우 경로가 올바른지 검증한 다음 다시 시도하십시오. 위치 줄:1 문자:1 + create -react-app . + ~~~~~~ + CategoryInfo : ObjectNotFound: (create:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException create-react-app : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\motiongrapher\AppData\Roaming\npm\create-react-app.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID=135170)를 참조하십시오. 위치 줄:1 문자:1 + create-react-app + ~~~~~~~~~~~~~~~~ + CategoryInfo : 보안 오류: (:) [], PSSecurityException + FullyQualifiedErrorId : UnauthorizedAccess PS D:\learn-all-with-javascript\grab-market-web> create-react-app . 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID=135170)를 참조하십시오. 위치 줄:1 문자:1 + create-react-app . + ~~~~~~~~~~~~~~~~ + CategoryInfo : 보안 오류: (:) [], PSSecurityException + FullyQualifiedErrorId : UnauthorizedAccess PS D:\learn-all-with-javascript\grab-market-web> create-react-app. 름이 정확한지 확인하고 경로가 포함된 경우 경로가 올바른지 검증한 다음 다시 시도하십시오. 위치 줄:1 문자:1 + create-react-app. + ~~~~~~~~~~~~~~~~~ + CategoryInfo : ObjectNotFound: (create-react-app.:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException PS D:\learn-all-with-javascript\grab-market-web> create-react-app . create-react-app : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\motiongrapher\AppData\Roaming\npm\create-react-app.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID=135170)를 참조하십시오. 위치 줄:1 문자:1 + create-react-app . + ~~~~~~~~~~~~~~~~ + CategoryInfo : 보안 오류: (:) [], PSSecurityException + FullyQualifiedErrorId : UnauthorizedAccess PS D:\learn-all-with-javascript\grab-market-web> npm create-react-app. Usage: npm <command> where <command> is one of: access, adduser, audit, bin, bugs, c, cache, ci, cit, clean-install, clean-install-test, completion, config, create, ddp, dedupe, deprecate, dist-tag, docs, doctor, edit, explore, fund, get, help, help-search, hook, i, init, install, install-ci-test, install-test, it, link, list, ln, login, logout, ls, org, outdated, owner, pack, ping, prefix, profile, prune, publish, rb, rebuild, repo, restart, root, run, run-script, s, se, search, set, shrinkwrap, star, uninstall, unpublish, unstar, up, update, v, version, view, whoami npm <command> -h quick help on <command> npm -l display full usage info npm help <term> search for help on <term> npm help npm involved overview Specify configs in the ini-formatted file: C:\Users\motiongrapher\.npmrc or on the command line via: npm <command> --key value Config info can be viewed via: npm help config npm@6.14.13 C:\Program Files\nodejs\node_modules\npm PS D:\learn-all-with-javascript\grab-market-web> create-react-app. create-react-app. : 'create-react-app.' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. 이 름이 정확한지 확인하고 경로가 포함된 경우 경로가 올바른지 검증한 다음 다시 시도하십시오. 위치 줄:1 문자:1 + create-react-app. + ~~~~~~~~~~~~~~~~~ + CategoryInfo : ObjectNotFound: (create-react-app.:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException PS D:\learn-all-with-javascript\grab-market-web>

  • nodejs
  • express
  • react-native
  • react
  • HTML/CSS
  • javascript
  • tensorflow
  • 머신러닝 배워볼래요?
hackingbiz 댓글 1 좋아요 2 조회수 5423

상품 세부설명페이지에서 데이터 값 통신이 안되네요

미해결

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

main 컴포먼트에서는 잘나오는데 상품 세부 페이지 가명 아무것도 안뜨네요 포스트맨으로 http://localhost:8080/products/id 으로 값으로 똑같은 주소를 넣으면 response값은 잘 나오는데 react에서 만 이러네요

  • javascript
  • nodejs
  • react-native
  • tensorflow
  • HTML/CSS
  • 머신러닝 배워볼래요?
  • express
  • react
조은택 댓글 10 좋아요 2 조회수 622

cmd로 한거같은데 오류가 납니다.

미해결

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

다른 질문 글에 달린 유투브 링크타고 가서 설정하라는데로 했는데 안돼서 이것저것 만지다가 cmd로 변경된거 같은데 계속 오류가 나는데 어떻게 해야하나요???

  • 머신러닝 배워볼래요?
  • tensorflow
  • nodejs
  • react-native
  • javascript
  • react
  • HTML/CSS
  • express
yami654 댓글 1 좋아요 1 조회수 267

자료에 오류가 있는 것 같습니다.

미해결

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

링크 타고 들어가면 justify-contents라고 적혀있는데 실제로는 justify-content로 s를 빼야 하는 것 같습니다.

  • justify-content
  • HTML/CSS
  • javascript
  • react
  • nodejs
  • react-native
  • 머신러닝 배워볼래요?
  • express
  • tensorflow
김민수 댓글 2 좋아요 1 조회수 226

id 태그 질문입니다.

미해결

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

안녕하세요 그랩님. 강좌 잘 듣고 있습니다. 제가 id값을 동일하게 지정해도 한 id값만 적용된다고 배웠는데, 실제로 해 보니 동일한 id값을 갖는 모든 텍스트가 색이 변했습니다. 이렇게 된다면 id와 class에 차이가 없는 것 아닌가요?? --------코드---------- <html> <head> <style type="text/css"> p { color: orange; } #id-test { color: skyblue; } .love { color: #BA68C8; font-size: 100; font-weight: 900; } .love2 { color: #00AAFF; font-size: 100; font-weight: 900; } </style> </head> <body> <p>Hello</p> <p>Hello!</p> <div id="id-test">id</div> <div id="id-test">id</div> <div class="love">class</div> <div class="love2">class</div> </body> </html>

  • id
  • express
  • 머신러닝 배워볼래요?
  • tensorflow
  • react-native
  • react
  • HTML/CSS
  • nodejs
  • javascript
김민수 댓글 1 좋아요 2 조회수 311

안녕하세요 깃허브 업로드 관련 질문드립니다.

미해결

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

안녕하세요! 이번에 강의 수강시작한 학생입니다. 다름이 아니라 혹시 강의중 공부했던 코드들 깃허브에 올려도 괜찮을까요? 깃허브에 올려서 틈틈히 복기하고싶은 목적입니다!

  • express
  • react-native
  • react
  • nodejs
  • javascript
  • 머신러닝 배워볼래요?
  • HTML/CSS
  • tensorflow
댓글 1 좋아요 1 조회수 268

application 에러가 발생하는 이유가 뭘까요...

해결됨

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

heroku에 서버 배포한 후 링크에 접속하면 application error라는 화면과 함께 heroku logs --tail라는 명령어를 사용해 에러내역을 확인할 수 있다는 설명이 나오는데요 명령어를 치면 아래와 같은 에러 로그가 나옵니다.. at= error code= H10 desc=" App crashed" method=GET path="/" 여기저기 찾아보면서 package.json scripts에 heroku-postbuild 추가하기 package.json engine에 node와 npm 버전을 입력하기 heroku 빌드팩 변경하기 heroku restart하기 procfile 생성하여 web:node index.js 입력하기 이외에도 여러 방법을 다 시도해봐도 해결이 안되네요...

  • react-native
  • nodejs
  • express
  • HTML/CSS
  • javascript
  • tensorflow
  • 머신러닝 배워볼래요?
  • react
댓글 1 좋아요 1 조회수 1065

코드 오류

해결됨

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

안녕하세요 선생님.. 밑에 사진을 보면 알 수 있겠지만 선생님이 이 전 강의에서 예시로 작성하신 코드에다가 <Script ~~ /> 이 태그를 복습 겸해서 다시 사용해볼려고 했는데 사진처럼 Script로 다른 Aleart("~");이 있는 JS파일을 불러와서 저장하고 브라우저에서 봤는데 아무것도 안뜨고 하얀 화면 밖에 없는데 코드에 무슨 오류가 있길래 실행이 안되는 거에요ㅜㅜ?

  • express
  • react
  • 머신러닝 배워볼래요?
  • nodejs
  • tensorflow
  • react-native
  • javascript
  • HTML/CSS
댓글 2 좋아요 1 조회수 350

TEST 폴더는 뭐죠?

미해결

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

grab-market-web 폴더에서 TEST로 바뀌었는데 TEST폴더로 시작하나요? npm install 다시 해야 하나요?

  • react-native
  • 머신러닝 배워볼래요?
  • express
  • react
  • HTML/CSS
  • nodejs
  • tensorflow
  • javascript
카드캐슬CardCastle 댓글 2 좋아요 2 조회수 334

자막...

미해결

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

질문은 아니고 이번 강의 안에 들어가는 자막에 유독 오타도 많고 크기가 커서 수정이 필요해보입니다.

  • react-native
  • javascript
  • 머신러닝 배워볼래요?
  • express
  • nodejs
  • tensorflow
  • HTML/CSS
  • react
toya zoomin 댓글 2 좋아요 1 조회수 306

영상에 갑자기 자막이 같이 나와요

미해결

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

소리랑 안 맞기도 하고 화면 밑부분을 보여주실 때 자막에 가려서 안 보입니다ㅜ

  • 머신러닝 배워볼래요?
  • tensorflow
  • react-native
  • react
  • nodejs
  • express
  • javascript
  • HTML/CSS
Terry 댓글 2 좋아요 1 조회수 288

세팅 제이슨

해결됨

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

세팅 제이슨을 검색하면 그랩님 화면과 다르게 엄청나게 많은 코드가 뜨는데 제가 잘못 검색한건지, 그냥 이 밑에 그대로 코드를 추가하면 되는지 궁금합니다. 그리고 프리티어가 꼭 필요한지도 궁금합니다. 프리티어 없이 써왔어서 있고 없고의 차이가 현저할까요?

  • express
  • tensorflow
  • react-native
  • 머신러닝 배워볼래요?
  • react
  • HTML/CSS
  • nodejs
  • javascript
Terry 댓글 6 좋아요 1 조회수 2077

No tests found, exiting with code 1 에러

해결됨

TDD 개발 방법론을 활용한 React Native 앱 개발

{ "name": "ReactNativeTDD", "version": "0.0.1", "private": true, "scripts": { "android": "react-native run-android", "ios": "react-native run-ios", "start": "react-native start", "test": "jest", "lint": "eslint ." }, "dependencies": { "react": "16.9.0", "react-native": "0.61.1" }, "devDependencies": { "@babel/core": "^7.6.2", "@babel/runtime": "^7.6.2", "@react-native-community/eslint-config": "^0.0.5", "babel-jest": "^24.9.0", "eslint": "^6.5.1", "jest": "^24.9.0", "metro-react-native-babel-preset": "^0.56.0", "react-test-renderer": "16.9.0" }, "jest": { "preset": "react-native" } } __tests__ 폴더명 변경 시 yarn run test 를 하게 되면 testMatch: **/__tests__/**/*.[jt]s?(x), **/?(*.)+(spec|test).[tj]s?(x) - 0 matches 이렇게 테스트가 작성된 폴더를 찾지 못하는 경우가 있습니다. 강의의 진행과 동일하게 했는데도 이렇게 에러가 나네요. 검색 결과 package.json 파일에서 "jest" : { "preset": "react-native", "testRegex": "(/tests/.*|(\\.|/)(test))\\.js$" } 이렇게 testRegex 에 대한 추가 설정을 해주고 나면 테스트 폴더가 잡힙니다. 무슨 문제인지 알고 싶습니다.

  • react-native
  • javascript
  • react
  • tdd
leh2030 댓글 2 좋아요 1 조회수 2197

인기 태그

인프런 TOP Writers

주간 인기글