월 28,600원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
react native snap carousel 오류문의
App.js 1. 배너구현시 오류발생2. 위의 이미지와 같은 오류가 발생하면서 화면이 나오지 않습니다. https://dev.to/hmcodes/how-i-solved-the-viewproptypes-is-not-exported-from-react-native-web-dist-index-error-in-react-native-snap-carousel-16d8 해당 이슈관련 게시글인것 같은데 구체적으로 어디에 어떻게 적용해야 하는지를 모르겠습니다. 답변부탁드립니다. 감사합니다
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
상품의 상세정보가 출력이 안되는데, 이럴 경우 어떤 것이 문제인가요?
제목과 마찬가지로 상품의 상세정보가 출력되지 않습니다. 어떤 것이 문제일까요? 포스트맨의 url과 product/index.js의 urp 주소는 같습니다. 뿐만 아니라 축구공 페이지를 들어가도 오류가 뜨는데 index.js:14 Error: Network Error at createError (createError.js:16:1) at XMLHttpRequest.handleError (xhr.js:117:11)라는오류입니다. 어떤 문제인지 알 수 있을까요
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
농구공 imageUrl, seller, price 등 product의 속성들이 보이지 않습니다.
안녕하세요. 상세페이지에서 농구공의 img,price,seller 등 속성들이 보이지 않습니다. 혹시나 해서 console.log로 'product', 'product.imageUrl', 'product. seller'등 입력해 보았지만 콘솔창에서 product의 정보는 뜨지만, 이하 속성들은 모두 defined로 나옵니다. 어떤게 문제일까요..? 1. 상세페이지 에러 화면. 2. 상세페이지 에러화면의 콘솔창 3. product_index.js 코드 import { useParams } from "react-router-dom"; import axios from "axios"; import { useEffect, useState } from "react"; function ProductPage() { const { id } = useParams(); const [product, setProduct] = useState(null); useEffect(function () { axios .get( `https://f2de9abb-923d-447b-b8ca-2167db83d737.mock.pstmn.io/products/${id}` ) .then(function (result) { setProduct(result.data); }) .catch(function (error) { console.error(error); }); }, []); if (product === null) { return <h1>상품 정보를 받고 있습니다...</h1>; } console.log(product); console.log(product.imageUrl); console.log(product.seller); console.log(product.id); console.log(product.price); return ( <div> <div id="image-box"> <img src={"/" + product.imageUrl} /> </div> <div id="profile-box"> <img src="/images/icons/avatar.png" /> <span>{product.seller}</span> </div> <div id="contents-box"> <div id="name">{product.name}</div> <div id="price">{product.price}원</div> <div id="description">{product.description}</div> </div> </div> ); } export default ProductPage; 4. Postman Mock server
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
5:40초 for문 질문입니다.
콘솔창에서 products.length가 3인거 까지 확인 하였는데 이상하게 카드가 하나밖에 나오지 않습니다. for문이 작동을 안하는거 같은데 아무리 찾아도 이유를 몰라서 질문합니다. <html> <head> <title>그랩마켓</title> <link href="index.css" type="text/css" rel="stylesheet"/> </head> <body> <div id="header"> <div id="header-area"> <img src="./images/icons/logo.png"/> </div> </div> <div id="body"> <div id="banner"> <img src="./images/banners/banner1.png"/> </div> <h1>판매되는 상품들</h1> <div id="product-list"> </div> </div> <div id="footer"></div> </body> <script> let products =[{ name : '농구공', price: 100000, seller: '조던', imageUrl:'./images/products/basketball1.jpeg' },{ name : '축구공', price: 50000, seller: '메시', imageUrl:'./images/products/soccerball1.jpeg' }, { name :'키보드', price: 10000, seller:'그랩', imageUrl:'./images/products/keyboard1.jpeg' } ]; let productsHtml=""; for (let i=0; i < products.length; i++) { productsHtml = productsHtml + '<div class="product-card">'+ '<div>'+ '<img class="product-img" src="./images/products/basketball1.jpeg"/>'+ '</div>'+ '<div class="product-contents">'+ '<span class="product-name">농구공1호</span>'+ '<span class="product-price">50000원</span>'+ '<div class="product-seller">'+ '<img class="product-avatar" src="./images/icons/avatar.png"/>'+ ' <span>그랩</span>'+ "</div>"+ "</div>"+ "<div>"; } document.querySelector("#product-list").innerHTML = productsHtml; </script> </html>
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
이미지 크기
html/css로 img를 입력하면 그림처럼 너무 크게 나옵니다. 뭐가 문제인지 알려주세요
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
오류 문제입니다.
product가 정의되어 있지 않다는 오류가 뜹니다. 어떻게 해야할까요? import "./index.css"; import axios from "axios"; import React from "react"; function MainPage() { const [products, setProducts] = React.useState([]); React.useEffect(function () { axios .get( "https://1a135b44-e524-4168-8a97-42364bfed983.mock.pstmn.io/products" ) .then(function (result) { const products = result.data.products; setProducts(products); }) .catch(function (error) { console.log("에러발생 :", error); }); }, []); return ( <div> <div id="header"> <div id="header-area"> <img src="images/icons/logo.png" /> </div> </div> <div id="body"> <div id="banner"> <img src="images/banners/banner1.png" /> </div> <h1>판매되는 상품들</h1> <div id="product-list"> <div className="product-card"> <div> <img className="product-img" src={product.imageUrl} /> </div> <div className="product-contents"> <span className="product-name">{product.name}</span> <span className="product-price">{product.price}원</span> <div className="product-seller"> <img className="product-avatar" src="images/icons/avatar.png" /> <span>{product.seller}</span> </div> </div> </div> </div> </div> <div id="footer"></div> </div> ); } export default MainPage;
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
detectProduct.js 오류 질문 드립니다
다른 분들과 마찬가지로 tensorflow/tfjs-node가 깔리지 않아 난항을 겪다가 어떻게 답변하신 거 보고 따라하면서 tensorflow/tfjs-node는 깔았는데요ㅠㅠ (경로로 들어가지는 걸 보니 된 것 같습니다..) 1) 10:56초처럼 node helpers/detectProduct.js 입력했더니 C:\Users\wishd\Desktop\올인원자바\grab-market-server2>node helpers/detectProduct.jsC:\Users\wishd\Desktop\올인원자바\grab-market-server2\node_modules\@tensorflow\tfjs-node\dist\index.js:49 throw new Error("The Node.js native addon module (tfjs_binding.node) can not " + ^Error: The Node.js native addon module (tfjs_binding.node) can not be found at path: C:\Users\wishd\Desktop\올인원자 바\grab-market-server2\node_modules\@tensorflow\tfjs-node\lib\napi-v7\tfjs_binding.node.Please run command 'npm rebuild @tensorflow/tfjs-node build-addon-from-source' to rebuild the native addon module. If you have problem with building the addon module, please check https://github.com/tensorflow/tfjs/blob/master/tfjs-node/WINDOWS_TROUBLESHOOTING.md or file an issue. at Object.<anonymous> (C:\Users\wishd\Desktop\올인원자바\grab-market-server2\node_modules\@tensorflow\tfjs-node\dist\index.js:49:11) at Module._compile (node:internal/modules/cjs/loader:1101:14) at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10) at Module.load (node:internal/modules/cjs/loader:981:32) at Function.Module._load (node:internal/modules/cjs/loader:822:12) at Module.require (node:internal/modules/cjs/loader:1005:19) at require (node:internal/modules/cjs/helpers:102:18) at Object.<anonymous> (C:\Users\wishd\Desktop\올인원자바\grab-market-server2\helpers\detectProduct.js:1:12) at Module._compile (node:internal/modules/cjs/loader:1101:14) at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10) 이렇게 오류가 떴습니다 2) 위에서 시키는 것처럼 npm rebuild @tensorflow/tfjs-node build-addon-from-source를 실행한 후 다시 해봤지만 똑같은 결과가 나왔습니다 3) npm install -g node-gypnode-gyp configure --verbose를 해보았는데 C:\Users\wishd\Desktop\올인원자바\grab-market-server2>npm install -g node-gypchanged 90 packages, and audited 91 packages in 4s4 packages are looking for funding run `npm fund` for detailsfound 0 vulnerabilitiesC:\Users\wishd\Desktop\올인원자바\grab-market-server2>node-gyp configure --verbosegyp info it worked if it ends with okgyp verb cli [gyp verb cli 'C:\\Program Files\\nodejs\\node.exe',gyp verb cli 'C:\\Users\\wishd\\AppData\\Roaming\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js',gyp verb cli 'configure',gyp verb cli '--verbose'gyp verb cli ]gyp info using node-gyp@8.4.1gyp info using node@16.13.1 | win32 | x64gyp verb command configure []gyp verb find Python Python is not set from command line or npm configurationgyp verb find Python Python is not set from environment variable PYTHONgyp verb find Python checking if "python3" can be usedgyp verb find Python - executing "python3" to get executable pathgyp verb find Python - "python3" is not in PATH or produced an errorgyp verb find Python checking if "python" can be usedgyp verb find Python - executing "python" to get executable pathgyp verb find Python - "python" is not in PATH or produced an errorgyp verb find Python checking if Python is C:\Users\wishd\AppData\Local\Programs\Python\Python39\python.exegyp verb find Python - executing "C:\Users\wishd\AppData\Local\Programs\Python\Python39\python.exe" to get version gyp verb find Python - "C:\Users\wishd\AppData\Local\Programs\Python\Python39\python.exe" could not be rungyp verb find Python checking if Python is C:\Program Files\Python39\python.exegyp verb find Python - executing "C:\Program Files\Python39\python.exe" to get versiongyp verb find Python - "C:\Program Files\Python39\python.exe" could not be rungyp verb find Python checking if Python is C:\Users\wishd\AppData\Local\Programs\Python\Python39-32\python.exe gyp verb find Python - executing "C:\Users\wishd\AppData\Local\Programs\Python\Python39-32\python.exe" to get versiongyp verb find Python - "C:\Users\wishd\AppData\Local\Programs\Python\Python39-32\python.exe" could not be run gyp verb find Python checking if Python is C:\Program Files\Python39-32\python.exegyp verb find Python - executing "C:\Program Files\Python39-32\python.exe" to get versiongyp verb find Python - "C:\Program Files\Python39-32\python.exe" could not be rungyp verb find Python checking if Python is C:\Program Files (x86)\Python39-32\python.exegyp verb find Python - executing "C:\Program Files (x86)\Python39-32\python.exe" to get versiongyp verb find Python - "C:\Program Files (x86)\Python39-32\python.exe" could not be rungyp verb find Python checking if Python is C:\Users\wishd\AppData\Local\Programs\Python\Python38\python.exegyp verb find Python - executing "C:\Users\wishd\AppData\Local\Programs\Python\Python38\python.exe" to get version gyp verb find Python - "C:\Users\wishd\AppData\Local\Programs\Python\Python38\python.exe" could not be rungyp verb find Python checking if Python is C:\Program Files\Python38\python.exegyp verb find Python - executing "C:\Program Files\Python38\python.exe" to get versiongyp verb find Python - "C:\Program Files\Python38\python.exe" could not be rungyp verb find Python checking if Python is C:\Users\wishd\AppData\Local\Programs\Python\Python38-32\python.exe gyp verb find Python - executing "C:\Users\wishd\AppData\Local\Programs\Python\Python38-32\python.exe" to get versiongyp verb find Python - "C:\Users\wishd\AppData\Local\Programs\Python\Python38-32\python.exe" could not be rungyp verb find Python checking if Python is C:\Program Files\Python38-32\python.exegyp verb find Python - executing "C:\Program Files\Python38-32\python.exe" to get versiongyp verb find Python - "C:\Program Files\Python38-32\python.exe" could not be rungyp verb find Python checking if Python is C:\Program Files (x86)\Python38-32\python.exegyp verb find Python - executing "C:\Program Files (x86)\Python38-32\python.exe" to get versiongyp verb find Python - "C:\Program Files (x86)\Python38-32\python.exe" could not be rungyp verb find Python checking if Python is C:\Users\wishd\AppData\Local\Programs\Python\Python37\python.exegyp verb find Python - executing "C:\Users\wishd\AppData\Local\Programs\Python\Python37\python.exe" to get versiongyp verb find Python - "C:\Users\wishd\AppData\Local\Programs\Python\Python37\python.exe" could not be rungyp verb find Python checking if Python is C:\Program Files\Python37\python.exegyp verb find Python - executing "C:\Program Files\Python37\python.exe" to get versiongyp verb find Python - "C:\Program Files\Python37\python.exe" could not be rungyp verb find Python checking if Python is C:\Users\wishd\AppData\Local\Programs\Python\Python37-32\python.exe gyp verb find Python - executing "C:\Users\wishd\AppData\Local\Programs\Python\Python37-32\python.exe" to get versiongyp verb find Python - "C:\Users\wishd\AppData\Local\Programs\Python\Python37-32\python.exe" could not be run gyp verb find Python checking if Python is C:\Program Files\Python37-32\python.exegyp verb find Python - executing "C:\Program Files\Python37-32\python.exe" to get versiongyp verb find Python - "C:\Program Files\Python37-32\python.exe" could not be rungyp verb find Python checking if Python is C:\Program Files (x86)\Python37-32\python.exegyp verb find Python - executing "C:\Program Files (x86)\Python37-32\python.exe" to get versiongyp verb find Python - "C:\Program Files (x86)\Python37-32\python.exe" could not be rungyp verb find Python checking if Python is C:\Users\wishd\AppData\Local\Programs\Python\Python36\python.exegyp verb find Python - executing "C:\Users\wishd\AppData\Local\Programs\Python\Python36\python.exe" to get version gyp verb find Python - "C:\Users\wishd\AppData\Local\Programs\Python\Python36\python.exe" could not be rungyp verb find Python checking if Python is C:\Program Files\Python36\python.exegyp verb find Python - executing "C:\Program Files\Python36\python.exe" to get versiongyp verb find Python - "C:\Program Files\Python36\python.exe" could not be rungyp verb find Python checking if Python is C:\Users\wishd\AppData\Local\Programs\Python\Python36-32\python.exe gyp verb find Python - executing "C:\Users\wishd\AppData\Local\Programs\Python\Python36-32\python.exe" to get versiongyp verb find Python - "C:\Users\wishd\AppData\Local\Programs\Python\Python36-32\python.exe" could not be run gyp verb find Python checking if Python is C:\Program Files\Python36-32\python.exegyp verb find Python - executing "C:\Program Files\Python36-32\python.exe" to get versiongyp verb find Python - "C:\Program Files\Python36-32\python.exe" could not be rungyp verb find Python checking if Python is C:\Program Files (x86)\Python36-32\python.exegyp verb find Python - executing "C:\Program Files (x86)\Python36-32\python.exe" to get versiongyp verb find Python - "C:\Program Files (x86)\Python36-32\python.exe" could not be rungyp verb find Python checking if the py launcher can be used to find Python 3gyp verb find Python - executing "py.exe" to get Python 3 executable pathgyp verb find Python - executable path is "C:\Users\wishd\AppData\Local\Programs\Python\Python310\python.exe"gyp verb find Python - executing "C:\Users\wishd\AppData\Local\Programs\Python\Python310\python.exe" to get version gyp verb find Python - version is "3.10.2"gyp info find Python using Python version 3.10.2 found at "C:\Users\wishd\AppData\Local\Programs\Python\Python310\python.exe"gyp verb get node dir no --target version specified, falling back to host node version: 16.13.1gyp verb command install [ '16.13.1' ]gyp verb install input version string "16.13.1"gyp verb install installing version: 16.13.1gyp verb install --ensure was passed, so won't reinstall if already installedgyp verb install version is already installed, need to check "installVersion"gyp verb got "installVersion" 9gyp verb needs "installVersion" 9gyp verb install version is goodgyp verb get node dir target node version installed: 16.13.1gyp verb build dir attempting to create "build" dir: C:\Users\wishd\Desktop\올인원자바\grab-market-server2\build gyp verb build dir "build" dir needed to be created? Nogyp verb find VS msvs_version not set from command line or npm configgyp verb find VS VCINSTALLDIR not set, not running in VS Command Promptgyp verb find VS could not use PowerShell to find Visual Studio 2017 or newer, try re-running with '--loglevel silly' for more detailsgyp verb find VS looking for Visual Studio 2015gyp verb find VS - not foundgyp verb find VS not looking for VS2013 as it is only supported up to Node.js 8gyp ERR! find VSgyp ERR! find VS msvs_version not set from command line or npm configgyp ERR! find VS VCINSTALLDIR not set, not running in VS Command Promptgyp ERR! find VS could not use PowerShell to find Visual Studio 2017 or newer, try re-running with '--loglevel silly' for more detailsgyp ERR! find VS looking for Visual Studio 2015gyp ERR! find VS - not foundgyp ERR! find VS not looking for VS2013 as it is only supported up to Node.js 8gyp ERR! find VSgyp ERR! find VS **************************************************************gyp ERR! find VS You need to install the latest version of Visual Studiogyp ERR! find VS including the "Desktop development with C++" workload.gyp ERR! find VS For more information consult the documentation at:gyp ERR! find VS https://github.com/nodejs/node-gyp#on-windowsgyp ERR! find VS **************************************************************gyp ERR! find VSgyp ERR! configure errorgyp ERR! stack Error: Could not find any Visual Studio installation to usegyp ERR! stack at VisualStudioFinder.fail (C:\Users\wishd\AppData\Roaming\npm\node_modules\node-gyp\lib\find-visualstudio.js:122:47)gyp ERR! stack at C:\Users\wishd\AppData\Roaming\npm\node_modules\node-gyp\lib\find-visualstudio.js:75:16 gyp ERR! stack at VisualStudioFinder.findVisualStudio2013 (C:\Users\wishd\AppData\Roaming\npm\node_modules\node-gyp\lib\find-visualstudio.js:363:14)gyp ERR! stack at C:\Users\wishd\AppData\Roaming\npm\node_modules\node-gyp\lib\find-visualstudio.js:71:14 gyp ERR! stack at C:\Users\wishd\AppData\Roaming\npm\node_modules\node-gyp\lib\find-visualstudio.js:384:16 gyp ERR! stack at C:\Users\wishd\AppData\Roaming\npm\node_modules\node-gyp\lib\util.js:54:7gyp ERR! stack at C:\Users\wishd\AppData\Roaming\npm\node_modules\node-gyp\lib\util.js:33:16gyp ERR! stack at ChildProcess.exithandler (node:child_process:404:5)gyp ERR! stack at ChildProcess.emit (node:events:390:28)gyp ERR! stack at maybeClose (node:internal/child_process:1064:16)gyp ERR! System Windows_NT 10.0.22000gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\wishd\\AppData\\Roaming\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "configure" "--verbose"gyp ERR! cwd C:\Users\wishd\Desktop\올인원자바\grab-market-server2gyp ERR! node -v v16.13.1gyp ERR! node-gyp -v v8.4.1gyp ERR! not ok 이러한 오류가 떴고,이후의 node helpers/detectProduct.js 결과는 위와 똑같이 오류가 났습니다. 4) 이후에 검색해보다가 npm i -g node-pre-gyp를 실행한 뒤 npm rebuild @tensorflow/tfjs-node build-addon-from-source를 실행해 해결할 수 있다는 말을 보고 해보았는데, C:\Users\wishd\Desktop\올인원자바\grab-market-server2>npm i -g node-pre-gypnpm WARN deprecated node-pre-gyp@0.17.0: Please upgrade to @mapbox/node-pre-gyp: the non-scoped node-pre-gyp package is deprecated and only the @mapbox scoped package will recieve updates in the futureadded 67 packages, and audited 68 packages in 5s2 packages are looking for funding run `npm fund` for detailsfound 0 vulnerabilitiesC:\Users\wishd\Desktop\올인원자바\grab-market-server2>npm rebuild @tensorflow/tfjs-node build-addon-from-sourcerebuilt dependencies successfully 이처럼 잘 된 것 같았는데.. 5) 다시 node helpers/detectProduct.js 실행하니까 이번에는 C:\Users\wishd\Desktop\올인원자바\grab-market-server2>node helpers/detectProduct.js node:internal/modules/cjs/loader:1183 return process.dlopen(module, path.toNamespacedPath(filename)); ^ ì°ror: The specified module could not be found. \\?\C:\Users\wishd\Desktop\ì\grab-market-server2\node_modules\@tensorflow\tfjs-node\lib\napi-v7\tfjs_binding.node at Object.Module._extensions..node (node:internal/modules/cjs/loader:1183:18) at Module.load (node:internal/modules/cjs/loader:981:32) at Function.Module._load (node:internal/modules/cjs/loader:822:12) at Module.require (node:internal/modules/cjs/loader:1005:19) at require (node:internal/modules/cjs/helpers:102:18) at Object.<anonymous> (C:\Users\wishd\Desktop\올인원자바\grab-market-server2\node_modules\@tensorflow\tfjs-node\dist\index.js:58:16) at Module._compile (node:internal/modules/cjs/loader:1101:14) at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10) at Module.load (node:internal/modules/cjs/loader:981:32) at Function.Module._load (node:internal/modules/cjs/loader:822:12) { code: 'ERR_DLOPEN_FAILED' } 이렇게 또 다른 오류가 나네요 ㅠㅠ 혼자 더 찾아서 아무거나 넣어보다가 더 잘못되는 게 아닌가 싶어서 질문 남깁니다..ㅠ 운영체제는 윈도우고 detectProduct.js 내의 코드는 const tf = require("@tensorflow/tfjs-node"); const mobilenet = require("@tensorflow-models/mobilenet"); const fs = require("fs"); const path = require("path"); function detectProduct(url) { const image = fs.readFileSync(url); const input = tf.node.decodeImage(image, 3); console.log(input); } detectProduct(path.join(__dirname, "../uploads/notebook1.jpg")); 위와 같습니다. 도움 부탁드려요 참고로 파이썬 2.7은 같은 C:/안에 설치되어있어요..
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
index.html
화면과 같이 코딩을 해서, index.html 을 열였는데, 흰 화면만 보입니다.
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
import antd 질문입니다.
message.info 랑 message.error를 사용하셨었는데 antd를 import 하실때 Button 만 import 하시고 message는 import 하는 부분이 영상에는 없었던거 같은데 그러면 컴파일 할 때 에러가 나지 않나요? 저는 에러가 발생해서 소스 코드랑 비교해보니 message import 하는 부분이 없어서 message 추가하고 나서 정상적으로 됐었거든요
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
products가 출력되지 않습니다 !
안녕하세요 먼저 좋은 강의 항상 감사드립니다. 다름이 아니라 products 이미지가 출력되지 않아서요 ! 오류창 입니다. Failed to load resource: the server responded with a status of 404 () index.html:102 error 발생 : Error: Request failed with status code 404 at e.exports (isAxiosError.js:10:52) at e.exports (isAxiosError.js:10:52) at XMLHttpRequest.E (isAxiosError.js:10:52) index.html 코드입니다. <html> <head> <title>그랩마켓</title> <link href="index.css" type="text/css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> </head> <body> <div id="header"> <div id="header-area"> <img src="images/icons/logo.png" /> </div> </div> <div id="body"> <div id="banner"> <img src="images/banners/banner1.png" /> </div> <h1>판매되는 상품들</h1> <div id="product-list"></div> </div> <div id="footer"></div> </body> <script> axios .get("https://1a135b44-e524-4168-8a97-42364bfed983.mock.pstmn.io") .then(function (result) { console.log("통신결과 : ", result); const products = result.data.products; let productsHtml = ""; for (var i = 0; i < products.length; i++) { let product = products[i]; productsHtml = productsHtml + '<div class="product-card">' + "<div>" + '<img class="product-img" src="' + product.imageUrl + '" alt="" />' + "</div>" + '<div class="product-contents">' + '<span class="product-name">' + product.name + "</span>" + '<span class="product-price">' + product.price + "원" + "</span>" + '<div class="product-seller">' + '<img class="product-avatar" src="images/icons/avatar.png" alt="" />' + "<span>" + product.seller + "</span>" + "</div>" + "</div>" + "</div>"; } document.querySelector("#product-list").innerHTML = productsHtml; }) .catch(function (error) { console.error("error 발생 : ", error); }); </script> </html> 아래는 포스트맨 코드입니다. { "products" : [ { "name": "농구공", "price": 10000, "seller": "조던", "imageUrl": "images/products/basketball1.jpeg" }, { "name": "축구공", "price": 50000, "seller": "메시", "imageUrl": "images/products/soccerball1.jpg" }, { "name": "키보드", "price": 10000, "seller": "그랩", "imageUrl": "images/products/keyboard1.jpg" } ] } 어떤게 문제인지 알 수 있을까요?
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
defaultformatter이 오류가 떠요
editor.defaultformatter 부분에서 오류가 떠서 밑줄이 쳐지는 거 같은데 왜 이런 오류가 뜨는지 설명해주시면 좋겠습니다.
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
화면 구성 부분에서 어디가 잘못된걸까요?
수업을 따라서 동일하게 코드 작성을 했는데 영상을 보면 선생님 화면과 다르게 product-list 부분과 footer 영역 과의 간격이 좁게 느껴져요 ㅜ 아래 사진은 제가 작성한 CSS 일부분입니다 . (그랩마켓 구현 3차까지 모두 들은 후 작성된 코드입니다 .)
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
자바 버전
제가 학교에서 자바 수업을 듣느라 이미 자바 11버전이 깔려있는데, 꼭 8버전을 이용해야 하나요? 그리고 혹시 다른 버전이 이미 깔려있는데 이전 버전으로 다시 깔려면 어떻게 해야하는지, 재설치해도 기존 자바 프로젝트나 파일들엔 문제가 없는지 궁금합니다!
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
리액트 실시간 처리 질문 드립니다.
리액트 실시간 처리 질문 드립니다. 전에 리액트 공부가 잘 안되서 다시 시도하고 있습니다. 현재 pc 환경은 윈도우 이며, 기본 셋팅은 vsc 설치 및 확장 설치외에 없습니다. stage2 웹개발하기 부분 리액트 실행을 그대로 따라하고 있습니다만 npm start 한후에 app.js에 값을 변경 후 새로고침을 해도 아무런 변화가 없고 서버를 끄고 다시 켜야 적용이 됩니다. 이 경우가 리액트 초기 실험 말고도 다른 웹팩이나 gulp 혹은 node js를 시험해 볼때도 실시간 적용이 안되는 경우가 많았습니다. 이럴 시 어떻게 세팅 하거나 실시간으로 적용 되게 하는 방법이 있나요?
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
pre태그
줄바꿈 문제를 해결하기 위해 div태그를 pre태그로 마지막에 변경하셨는데, 저는 변경하고 나니까 굴림체가 되더라구요(ㅋㅋㅋ) 왜 혼자 굴림체인 건가요?ㅜㅜ 바꾸려면 css에서 글씨체 변경해주면 될 것 같은데 div태그와 같은 글씨체로 설정해주려면 어떻게 써야하는지 궁금합니다.
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
${id}
동영상에서 볼때 ${id} 이부분이 색이 변하면서 경로에 id값을 넣으면 잘 들어오는데 저는 사진과 같이 색이 안 변하고 localhost:8080/products/50 이런 식으로 id값을 넣어도 화면에는 id는 ${id}입니다 로 id값이 적용 안돼서 출력이 되는데 어떻게 해야하는지 알 수 있을까요? ${id}를 따옴표 밖에 써봤더니 밖에 있는건 사진처럼 색이 변하네요
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
강사님 궁금한 것이 있습니다!
저 문제가 좀 많더라고요 ㅠㅠ 1번 문제왜 제가 dayjs를 적용하면 아예 사라지더라고요! ㅠㅠ 2번 문제!src\product\index.js Line 42:6: React Hook useEffect has a missing dependency: 'id'. Either include it or remove the dependency array react-hooks/exhaustive-deps src\upload\index.js Line 3:10: 'ForkOutlined' is defined but never used no-unused-vars Search for the keywords to learn more about each warning. To ignore, add // eslint-disable-next-line to the line before. 라고 터미널에 써졌더라고요 ㅠ 그런데 막상 React App을 실행하면 메인도 잘 나오고, 상품을 클릭해도 잘 나오는데 뭐가 문제인지 모르겠습니다 //CSS를 적용하려면, import "./index.css" import {useParams} from 'react-router-dom'; import axios from 'axios'; import { useEffect, useState } from 'react'; function ProductPage(){ //const prams = useParams(); // console.log(prams); //이제 상품을 선택을 할 때 콘솔창에 id: 0, 1, 2.. 상품 숫자가 나온다. //const params = useParams(); //console.log(params); //id를 출력하는 것을 확인할 수 있다. >> 콘솔창에 {id : 2} 이런식으로! const {id} = useParams(); const [product, setProduct] = useState(null); //처음엔 null이 나타나고 렌더링이 되고 나서 서버에서 상품을 받아오고 호출됨. //useState는 데이터를 받아주는 역할인데 쉽게 말을 하면 네트워크를 받아 상품을 보여줄 때 쓰임 // 콜백 함수 useEffect(function(){ // useEffect를 통해 1번만 통신해 네트워크를 호출을 해준다. << 쉽게 말을 하면 1f의 형식이다. // axios.get('https://4326fdea-003a-4291-b8b3-b8e47b10723c.mock.pstmn.io/products'+ id) // axios.get(`https://4326fdea-003a-4291-b8b3-b8e47b10723c.mock.pstmn.io/products/${id}`) axios.get( `http://localhost:8080/products/${id}` ) // 프로미스(promise) .then(function(result){ // 익명함수에 result의 인자를 넣는다. // setProduct(result.data); postman을 통한 작업을 했을때는 이렇게 간편했지만 // 이제는 server.js > product에서 데이터를 받아야 하기 때문에 작성을 조금 더 추가해야 함. setProduct(result.data.products); // console.log(result); }) // 프로미스(promise) .catch(function(error){ console.log(error); }) },[]); // console.log(product); // return <h1>상품 상세 페이지{id} 상품</h1> //js문법 if(product == null){ return <h1>상품 정보를 받고 있습니다...</h1> } // {/* const [product, setProduct] = useState(null); 를 비동기 처리방식으로 작동이 되기 때문에 당연히 product.imageUrl은 null로 처리가 된다. 따라서 오류가 발생이 되는 것은 당연한 원리이다. */} return( <div> <div id="image-box"> <img src={"/"+product.imageUrl} alt=""/> </div> <div id="profile-box"> <img src="/images/icons/avatar.png" alt=""/> <span>{product.seller}</span> </div> <div id="contents-box"> <div id="name">{product.name}</div> <div id="price">{product.price}원</div> <div id="createdAt">2021년 06월 15일</div> <div id="description">{product.description}</div> </div> </div> ); } export default ProductPage; import { Form, Divider, Input, InputNumber, Button } from "antd"; import "./index.css"; import { ForkOutlined } from "@ant-design/icons"; function UploadPage() { // return <h1>업로드 화면</h1>; // const onSubmit = function(){//평상시 함수 표현식이다. // 이것을 람다함수 표현식으로 바꾸도록 하자 const onSubmit = (values) => { //이것이 람다 함수 표현식! console.log(values); }; return( <div id="upload-container"> <Form name="상품 업로드" onFinish={onSubmit}> {/* 익명함수를 넣은 것과 동일하다. onFinish={onSubmit} */} <Form.Item name="upload" label={<div className="upload-label">상품 사진</div>} > <div id="upload-img-placeholder"> <img src="/images/icons/camera.png" alt="" /> <span>이미지를 업로드해주세요.</span> </div> </Form.Item> <Divider /> {/* Divider는 콘텐츠의 영역을 나누는 컴포넌트이다. >> 선을 그어준다. <hr> 태그와 비슷하지만 다른 속성이다. */} <Form.Item label={<div className="upload-label">판매자 명</div>} name="seller" rules={[{ required: true, message: "판매자 이름을 입력해주세요" }]} // rules이라는 프롭이 있는데 여기에는 {}안에서 배열[{}]로 작업해야 한다. > <Input className="upload-name" size="large" placeholder="이름을 입력해주세요." /> </Form.Item> <Divider /> <Form.Item name="name" label={<div className="upload-label">상품 이름</div>} rules={[{ required: true, message: "상품 이름을 입력해주세요" }]} > <Input className="upload-name" size="large" placeholder="상품 이름을 입력해주세요" /> </Form.Item> <Divider /> <Form.Item name="price" label={<div className="upload-label">상품 가격</div>} rules={[{ required: true, message: "상품 가격을 입력해주세요" }]} > <InputNumber defaultValue={0} className="upload-price" size="large" /> {/* 숫자형 input */} </Form.Item> <Divider /> <Form.Item name="description" label={<div className="upload-label">상품 소개</div>} rules={[{ required: true, message: "상품 소개를 입력해주세요." }]} > <Input.TextArea size="large" id="product-description" //showCount={true} << react에서 기본형이다. 이것을 아래와 같이 생략할 수 있다. showCount maxLength={300} placeholder="상품 소개를 적어주세요." /> </Form.Item> <Form.Item> <Button id="submit-button" size="large" htmlType="submit"> 문제 등록하기 </Button> </Form.Item> </Form> </div> ); } export default UploadPage;
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
질문
선생님~ 강의 잘 듣고 있습니다 여쭤볼게 있는데 수강 후 만든 홈페이지를 변형해서 개발한걸 포트폴리오에 넣어도 되는지 여쭤보려해요!
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
npm install -g create-react-app 에러
npm install -g create-react-app npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap. npm ERR! code EEXIST npm ERR! path C:\Users\user\AppData\Roaming\npm\create-react-app.ps1 npm ERR! EEXIST: file already exists npm ERR! File exists: C:\Users\user\AppData\Roaming\npm\create-react-app.ps1 npm ERR! Remove the existing file and try again, or run npm npm ERR! with --force to overwrite files recklessly. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\user\AppData\Local\npm-cache\_logs\2022-01-15T08_35_49_232Z-debug.log 구글링 해서 Solution — Run “npm uninstall -g create-react-app” In various situations whereby the above does not work, run “which create-react-app” and uninstall it from there Then, run the command, “npx create-react-app project” Alternatives — Run “npm uninstall -g create-react-app”, then “npm cache clean --force” Afterwards, try “npm cache verify” and “npx create-react-app project” or “yarn create react-app project” 위에 처럼 해도 nodejs가 제대로 생성이 안됩니다.. 왜 그런건지 궁금해서 질문합니다.
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
터미널 입력 관련 질문
터미널 창 캡처인데요, 파일 경로가 뜨는 게 아니라 위처럼 커서가 멈춘 채로 아무것도 입력이 안 되는 상태가 반복됩니다. 터미널 종료하고 다시 키면 다시 입력할 수 있는 파일 경로가 떠서, 계속 종료했다가 실행했다 하면서 따라가고는 있는데, npm start 한번 실행할 때마다 다시 위처럼 돼서 번거롭네요 ㅠㅠ 원래 이렇게 되는 게 맞는 건가요..? 단축키라든가 제가 놓친 게 있을까요