33,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
코드 에디터
안녕하세요~ 강의 코드에디터 color theme가 어떻게 되나요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
console.log찍어보니 화살표함수로 된 renderCheckbox이 4번 발생하는데 그 이유를 못찾겠습니다.
import React, { Fragment } from "react"; import { Collapse, Checkbox } from "antd"; const { Panel } = Collapse; function CheckBox(props) { const renderCheckbox = () => { console.log(props.list); props.list.map((prop, index) => { console.log(prop.name); <Checkbox.Group key={index} onChange> {prop.name} </Checkbox.Group>; }); }; return ( <div> <Collapse defaultActiveKey={["1"]}> <Panel header="Continents" key="1"> {renderCheckbox()} </Panel> </Collapse> </div> ); } export default CheckBox; CheckBox.js는 이렇게 작성되었습니다. 그런데 이렇게 하고 함수를 돌려보니 4번 발생하더라고요. 왜 이렇게 발생하는지 궁금해서 질문남겨봅니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
like 한글도 검색하게 하려면
like 한글도 검색하게 하려면 어떻게 해야 하나요 ? 영어는 되는데 한글이 안되네요 ; .find({ "title": { '$regex': term }, "description": { '$regex': term }, })
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
잘되던 사이트가 코드 부분을 수정하자 마자 에러가 뜹니다.
(사진)
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
local에서 terminal이나 aws에서 서버를 백그라운드로 돌리는 방법 문의
서버를 백그라운드로 어떻게 돌리나요? aws에서 npm run start 로 하면 서버가 백그라운드에서 돌지 않아서 cli 창을 끄면 서버가 종료됩니다. pm2 start server/index.js 로 하면 서버가 계속 돌아가긴 하지만 이미지를 못 찾아서 not found 에러가 발생합니다. 해결 방법 말씀해주시면 감사하겠습니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
npm install에서 ERR문구가 많이 떠서 질문드립니다.
node-pre-gyp WARN Using needle for node-pre-gyp https download node-pre-gyp WARN Tried to download(404): https://github.com/kelektiv/node.bcrypt.js/releases/download/v3.0.8/bcrypt_lib-v3.0.8-node-v83-win32-x64-unknown.tar.gz node-pre-gyp WARN Pre-built binaries not found for bcrypt@3.0.8 and node@14.15.5 (node-v83 ABI, unknown) (falling back to source compile with node-gyp) gyp ERR! find Python gyp ERR! find Python Python is not set from command line or npm configuration gyp ERR! find Python Python is not set from environment variable PYTHON gyp ERR! find Python checking if "python" can be used gyp ERR! find Python - "python" is not in PATH or produced an error gyp ERR! find Python checking if "python2" can be used gyp ERR! find Python - "python2" is not in PATH or produced an error gyp ERR! find Python checking if "python3" can be used gyp ERR! find Python - "python3" is not in PATH or produced an error gyp ERR! find Python checking if the py launcher can be used to find Python 2 gyp ERR! find Python - "py.exe" is not in PATH or produced an error gyp ERR! find Python checking if Python is C:\Python27\python.exe gyp ERR! find Python - "C:\Python27\python.exe" could not be run gyp ERR! find Python checking if Python is C:\Python37\python.exe gyp ERR! find Python - "C:\Python37\python.exe" could not be run gyp ERR! find Python gyp ERR! find Python ********************************************************** gyp ERR! find Python You need to install the latest version of Python. gyp ERR! find Python Node-gyp should be able to find and use Python. If not, gyp ERR! find Python you can try one of the following options: gyp ERR! find Python - Use the switch --python="C:\Path\To\python.exe" gyp ERR! find Python (accepted by both node-gyp and npm) gyp ERR! find Python - Set the environment variable PYTHON gyp ERR! find Python - Set the npm configuration variable python: gyp ERR! find Python npm config set python "C:\Path\To\python.exe" gyp ERR! find Python For more information consult the documentation at: gyp ERR! find Python https://github.com/nodejs/node-gyp#installation gyp ERR! find Python ********************************************************** gyp ERR! find Python gyp ERR! configure error gyp ERR! stack Error: Could not find any Python installation to use gyp ERR! stack at PythonFinder.fail (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-python.js:307:47) gyp ERR! stack at PythonFinder.runChecks (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-python.js:136:21) gyp ERR! stack at PythonFinder.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-python.js:225:16) gyp ERR! stack at PythonFinder.execFileCallback (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-python.js:271:16) gyp ERR! stack at exithandler (child_process.js:315:5) gyp ERR! stack at ChildProcess.errorhandler (child_process.js:327:5) gyp ERR! stack at ChildProcess.emit (events.js:315:20) gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12) gyp ERR! stack at onErrorNT (internal/child_process.js:465:16) gyp ERR! stack at processTicksAndRejections (internal/process/task_queues.js:80:21) gyp ERR! System Windows_NT 10.0.19041 gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "configure" "--fallback-to-build" "--module=C:\\Users\\mario\\OneDrive\\문서\\GitHub\\magarin\\react\\boilerplate-mern-stack-master\\node_modules\\bcrypt\\lib\\binding\\bcrypt_lib.node" "--module_name=bcrypt_lib" "--module_path=C:\\Users\\mario\\OneDrive\\문서\\GitHub\\magarin\\react\\boilerplate-mern-stack-master\\node_modules\\bcrypt\\lib\\binding" "--napi_version=7" "--node_abi_napi=napi" "--napi_build_version=0" "--node_napi_label=node-v83" gyp ERR! cwd C:\Users\mario\OneDrive\문서\GitHub\magarin\react\boilerplate-mern-stack-master\node_modules\bcrypt gyp ERR! node -v v14.15.5 gyp ERR! node-gyp -v v5.1.0 gyp ERR! not ok node-pre-gyp ERR! build error node-pre-gyp ERR! stack Error: Failed to execute 'C:\Program Files\nodejs\node.exe C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js configure --fallback-to-build --module=C:\Users\mario\OneDrive\문서\GitHub\magarin\react\boilerplate-mern-stack-master\node_modules\bcrypt\lib\binding\bcrypt_lib.node --module_name=bcrypt_lib --module_path=C:\Users\mario\OneDrive\문서\GitHub\magarin\react\boilerplate-mern-stack-master\node_modules\bcrypt\lib\binding --napi_version=7 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v83' (1) node-pre-gyp ERR! stack at ChildProcess.<anonymous> (C:\Users\mario\OneDrive\문서\GitHub\magarin\react\boilerplate-mern-stack-master\node_modules\node-pre-gyp\lib\util\compile.js:83:29) node-pre-gyp ERR! stack at ChildProcess.emit (events.js:315:20) node-pre-gyp ERR! stack at maybeClose (internal/child_process.js:1048:16) node-pre-gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:288:5) node-pre-gyp ERR! System Windows_NT 10.0.19041 node-pre-gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\mario\\OneDrive\\문서\\GitHub\\magarin\\react\\boilerplate-mern-stack-master\\node_modules\\node-pre-gyp\\bin\\node-pre-gyp" "install" "--fallback-to-build" node-pre-gyp ERR! cwd C:\Users\mario\OneDrive\문서\GitHub\magarin\react\boilerplate-mern-stack-master\node_modules\bcrypt node-pre-gyp ERR! node -v v14.15.5 node-pre-gyp ERR! node-pre-gyp -v v0.14.0 node-pre-gyp ERR! not ok Failed to execute 'C:\Program Files\nodejs\node.exe C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js configure --fallback-to-build --module=C:\Users\mario\OneDrive\문서\GitHub\magarin\react\boilerplate-mern-stack-master\node_modules\bcrypt\lib\binding\bcrypt_lib.node --module_name=bcrypt_lib --module_path=C:\Users\mario\OneDrive\문서\GitHub\magarin\react\boilerplate-mern-stack-master\node_modules\bcrypt\lib\binding --napi_version=7 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v83' (1) npm WARN react-redux@5.1.2 requires a peer of react@^0.14.0 || ^15.0.0-0 || ^16.0.0-0 but none is installed. You must install peer dependencies yourself. npm WARN react-redux@5.1.2 requires a peer of redux@^2.0.0 || ^3.0.0 || ^4.0.0-0 but none is installed. You must install peer dependencies yourself. npm WARN react-boiler-plate@1.0.0 No repository field. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.12 (node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.12: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! bcrypt@3.0.8 install: `node-pre-gyp install --fallback-to-build` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the bcrypt@3.0.8 install script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\mario\AppData\Roaming\npm-cache\_logs\2021-02-20T17_12_16_618Z-debug.log 뭔가 잘못된거같은데 해결방법을 알고 싶어서 질문드립니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
삭제 질문드립니다
<button onClick={props.removeItem(product._id)}> Remove </button> 안녕하세요 카트페이지 들어가면 상품리스트가 자동으로 자꾸 삭제되서 보니까 onClick={props.removeItem(product._Id)}로 잘못되어있더라구요 그래서 제대로 () => props...이렇게 강의처럼 고치니 잘 되는데요 왜 화살표함수를 안쓰면 자동으로 리스트가 삭제되는건가요? 항상 감사합니다~
- 해결됨따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
redux action 부분 질문 있습니다!
카트 페이지를 구현하기 위해 카트 아이템의 Quantity 정보를 합쳐주기 위해서 따로 서버에서 가져온 response 데이터를 user action 에서 처리하는 건가요? 그냥 cartpage 컴포넌트에서 처리해도 가능한가요? 다른 redux들은 서버에서 받아온 response 데이터를 각자 컴포넌트에서 처리하는 것 같아서요.
- 해결됨따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
redux와 hoc에 관계에 대하여 질문이 있습니다.
Client 부분의 hoc 부분인데요. 만약 제가 user 부분 말고도 다른 곳에도 redux을 구현하려면 마찬가지로 user을 useSeletor으로 redux의 state에서 가져와 적용한 것처럼 redux을 다른 곳에서 적용하여 user말고도 새로 생긴 state에 들어간 다른 것들 또한 위의 이미지 처럼 적용 한 것 처럼 useSeletor을 통해 가져와 넣어주야 한다는 것인가요? 그리고 {..props}는 어디서 받아왔다고 할수있을까용? 만약 user 말고도 redux을 적용하려면 저 위의 설정말고도 다른 수정할게 또 있을까요? 제가 이해한게 맞는지 확실치 않아 이렇게 많은 질문을 올려 버렸네요 ㅎㅎ
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
더보기 버튼이 안 보입니다
안녕하세요 선생님 좋은 강의 잘 듣고 있습니다 이미지를 8개 이상 업로드 한 후 제가 더보기 버튼 만들기 #1과 #2를 들었는데 코드를 다 작성하고 보니까 나중에 더보기 버튼이 사라졌습니다 제가 작성한 코드는 아래와 같습니다 웹에서 더보기 버튼을 누르지도 않았는데 왜 더보기 버튼이 사라졌는지 파악이 안 되네요ㅜㅜ ============================================================================================ ============================================================================================= routes 에 있는 product.js 코드 const express = require('express'); const router = express.Router(); const multer = require('multer'); const { Product } = require('../models/Product'); // Product var storage = multer.diskStorage({ destination: function (req, file, cb) { cb(null, 'uploads/') }, filename: function (req, file, cb) { cb(null, `${Date.now()}_${file.originalname}`) } }) var upload = multer({ storage: storage }).single("file") router.post('/image', (req, res)=> { // 가져온 이미지를 저장 해주면 된다. upload(req, res, err => { if(err) { return req.json({success: false, err}) } return res.json({success: true, filePath:res.req.file.path, fileName: res.req.file.filename }) }) }) router.post('/', (req, res)=> { // 받아온 정보들을 DB에 넣어 준다. const product = new Product(req.body); product.save((err) => { if(err) return res.status(400).json({ success: false, err}) return res.status(200).json({ success: true}) }) }) router.post('/products', (req, res)=> { // product collection에 들어 있는 모든 상품 정보들을 가져오기 let limit = req.body.limit ? parseInt(req.body.limit) : 20; let skip = req.body.skip ? parseInt(req.body.skip) : 0; Product.find() .populate("writer") .skip(skip) .limit(limit) .exec((err, productInfo)=> { if(err) return res.status(400).json({ success: false, err}) return res.status(200).json({ success: true, productInfo, postSize: productInfo.length}) }) }) module.exports = router; ============================================================================================= LandingPage.js 에 있는 코드 import React, {useEffect, useState} from 'react' import { FaCode } from "react-icons/fa"; import axios from "axios"; import {Icon, Col, Card, Row, Carousel} from 'antd'; import Meta from 'antd/lib/card/Meta'; import ImageSlider from '../../utils/ImageSlider'; function LandingPage() { const [Products, setProducts] = useState ([]) const [Skip, setSkip] = useState(0) const [Limit, setLimit] = useState(8) const [PostSize, setPostSize] = useState(0) useEffect(() => { let body = { skip: Skip, limit: Limit } getProducts(body) }, []) const getProducts = (body) => { axios.post('/api/product/products', body) .then(response => { if(response.data.success) { if(body.loadMore) { setProducts([...Products, ...response.data.productInfo]) } else { setProducts(response.data.productInfo) } setPostSize(response.data.PostSize) } else { alert("상품들을 가져오는데 실패 했습니다.") } }) } const loadMoreHandler = () => { let skip = Skip + Limit let body = { skip: skip, limit: Limit, loadMore: true } getProducts(body) setSkip(skip) } const renderCards = Products.map((product, index)=> { return <Col lg={6} md={8} xs={24} key={index} > <Card cover={<ImageSlider images={product.images}/>} > <Meta title={product.title} description={`$${product.price}`} /> </Card> </Col> }) return ( <div style={{ width: '75%', margin: '3rem auto'}}> <div style={{ textAlign: 'center'}}> <h2>Let's Travel Anywhere <Icon type="rocket" /></h2> </div> {/* Filter */} {/* Search */} {/* Cards */} <Row gutter={[16, 16]} > {renderCards} </Row> <br /> {PostSize >= Limit && <div style={{ display: 'flex', justifyContent: 'center'}}> <button onClick={loadMoreHandler}> 더보기 </button> </div> } </div> ) } export default LandingPage ============================================================================================= ImageSlider.js에 있는 코드 import React from 'react' import {Icon, Col, Card, Row, Carousel} from 'antd'; function ImageSlider(props) { return ( <div> <Carousel autoplay> {props.images.map((image, index) => ( <div key={index}> <img style={{width: '100', maxHeight:'150px'}} src={`http://localhost:5000/${image}`} /> </div> ))} </Carousel> </div> ) } export default ImageSlider
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
윈도우 10인데 npm i 문제 있습니다
윈도우 10인데 npm i 하면 자꾸 이런 문제가 생깁니다. npm run dev도 안됩니다.. ㅜ Windows PowerShell Copyright (C) Microsoft Corporation. All rights reserved. Try the new cross-platform PowerShell https://aka.ms/pscore6 PS C:\Users\juno8\Desktop\New_Boilerplate-master\New_Boilerplate-master\server> npm i 2 vulnerabilities (1 low, 1 high) To address all issues, run: npm audit fix Run `npm audit` for details. PS C:\Users\juno8\Desktop\New_Boilerplate-master\New_Boilerplate-master\server> cd.. PS C:\Users\juno8\Desktop\New_Boilerplate-master\New_Boilerplate-master> npm i npm WARN deprecated node-pre-gyp@0.15.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 future npm ERR! code 1 npm ERR! path C:\Users\juno8\Desktop\New_Boilerplate-master\New_Boilerplate-master\node_modules\bcrypt npm ERR! command failed npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node-pre-gyp install --fallback-to-build npm ERR! Failed to execute 'C:\Program Files\nodejs\node.exe C:\Users\juno8\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js configure --fallback-to-build --module=C:\Users\juno8\Desktop\New_Boilerplate-master\New_Boilerplate-master\node_modules\bcrypt\lib\binding\napi-v3\bcrypt_lib.node --module_name=bcrypt_lib --module_path=C:\Users\juno8\Desktop\New_Boilerplate-master\New_Boilerplate-master\node_modules\bcrypt\lib\binding\napi-v3 --napi_version=7 --node_abi_napi=napi --napi_build_version=3 --node_napi_label=napi-v3' (1) npm ERR! node-pre-gyp info it worked if it ends with ok npm ERR! node-pre-gyp info using node-pre-gyp@0.15.0 npm ERR! node-pre-gyp info using node@15.8.0 | win32 | x64 npm ERR! node-pre-gyp WARN Using needle for node-pre-gyp https download npm ERR! node-pre-gyp info check checked for "C:\Users\juno8\Desktop\New_Boilerplate-master\New_Boilerplate-master\node_modules\bcrypt\lib\binding\napi-v3\bcrypt_lib.node" (not found) npm ERR! node-pre-gyp http GET https://github.com/kelektiv/node.bcrypt.js/releases/download/v5.0.0/bcrypt_lib-v5.0.0-napi-v3-win32-x64-unknown.tar.gz npm ERR! node-pre-gyp http 302 https://github.com/kelektiv/node.bcrypt.js/releases/download/v5.0.0/bcrypt_lib-v5.0.0-napi-v3-win32-x64-unknown.tar.gz npm ERR! node-pre-gyp http 200 https://github.com/kelektiv/node.bcrypt.js/releases/download/v5.0.0/bcrypt_lib-v5.0.0-napi-v3-win32-x64-unknown.tar.gz npm ERR! node-pre-gyp info install unpacking napi-v3/bcrypt_lib.node npm ERR! node-pre-gyp WARN Pre-built binaries not installable for bcrypt@5.0.0 and node@15.8.0 (node-v88 ABI, unknown) (falling back to source compile with node-gyp) npm ERR! node-pre-gyp WARN Hit error bad download npm ERR! gyp info it worked if it ends with ok npm ERR! gyp info using node-gyp@7.1.2 npm ERR! gyp info using node@15.8.0 | win32 | x64 npm ERR! gyp info ok npm ERR! gyp info it worked if it ends with ok npm ERR! gyp info using node-gyp@7.1.2 npm ERR! gyp info using node@15.8.0 | win32 | x64 npm ERR! gyp ERR! find Python npm ERR! gyp ERR! find Python Python is not set from command line or npm configuration npm ERR! gyp ERR! find Python Python is not set from environment variable PYTHON npm ERR! gyp ERR! find Python checking if "python3" can be used npm ERR! gyp ERR! find Python - "python3" is not in PATH or produced an error npm ERR! gyp ERR! find Python checking if "python" can be used npm ERR! gyp ERR! find Python - "python" is not in PATH or produced an error npm ERR! gyp ERR! find Python checking if "python2" can be used npm ERR! gyp ERR! find Python - "python2" is not in PATH or produced an error npm ERR! gyp ERR! find Python checking if Python is C:\Python37\python.exe npm ERR! gyp ERR! find Python - "C:\Python37\python.exe" could not be run npm ERR! gyp ERR! find Python checking if Python is C:\Python27\python.exe npm ERR! gyp ERR! find Python - "C:\Python27\python.exe" could not be run npm ERR! gyp ERR! find Python checking if the py launcher can be used to find Python npm ERR! gyp ERR! find Python - "py.exe" is not in PATH or produced an error npm ERR! gyp ERR! find Python npm ERR! gyp ERR! find Python ********************************************************** npm ERR! gyp ERR! find Python You need to install the latest version of Python. npm ERR! gyp ERR! find Python Node-gyp should be able to find and use Python. If not, npm ERR! gyp ERR! find Python you can try one of the following options: npm ERR! gyp ERR! find Python - Use the switch --python="C:\Path\To\python.exe" npm ERR! gyp ERR! find Python (accepted by both node-gyp and npm) npm ERR! gyp ERR! find Python - Set the environment variable PYTHON npm ERR! gyp ERR! find Python - Set the npm configuration variable python: npm ERR! gyp ERR! find Python npm config set python "C:\Path\To\python.exe" npm ERR! gyp ERR! find Python For more information consult the documentation at: npm ERR! gyp ERR! find Python https://github.com/nodejs/node-gyp#installation npm ERR! gyp ERR! find Python ********************************************************** npm ERR! gyp ERR! find Python npm ERR! gyp ERR! configure error npm ERR! gyp ERR! stack Error: Could not find any Python installation to use npm ERR! gyp ERR! stack at PythonFinder.fail (C:\Users\juno8\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\find-python.js:302:47) npm ERR! gyp ERR! stack at PythonFinder.runChecks (C:\Users\juno8\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\find-python.js:136:21) npm ERR! gyp ERR! stack at PythonFinder.<anonymous> (C:\Users\juno8\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\find-python.js:200:18) npm ERR! gyp ERR! stack at PythonFinder.execFileCallback (C:\Users\juno8\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\find-python.js:266:16) npm ERR! gyp ERR! stack at exithandler (node:child_process:334:5) npm ERR! gyp ERR! stack at ChildProcess.errorhandler (node:child_process:346:5) npm ERR! gyp ERR! stack at ChildProcess.emit (node:events:378:20) npm ERR! gyp ERR! stack at Process.ChildProcess._handle.onexit (node:internal/child_process:288:12) npm ERR! gyp ERR! stack at onErrorNT (node:internal/child_process:480:16) npm ERR! gyp ERR! stack at processTicksAndRejections (node:internal/process/task_queues:81:21) npm ERR! gyp ERR! System Windows_NT 10.0.19041 npm ERR! gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\juno8\\AppData\\Roaming\\npm\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "configure" "--fallback-to-build" "--module=C:\\Users\\juno8\\Desktop\\New_Boilerplate-master\\New_Boilerplate-master\\node_modules\\bcrypt\\lib\\binding\\napi-v3\\bcrypt_lib.node" "--module_name=bcrypt_lib" "--module_path=C:\\Users\\juno8\\Desktop\\New_Boilerplate-master\\New_Boilerplate-master\\node_modules\\bcrypt\\lib\\binding\\napi-v3" "--napi_version=7" "--node_abi_napi=napi" "--napi_build_version=3" "--node_napi_label=napi-v3" npm ERR! gyp ERR! cwd C:\Users\juno8\Desktop\New_Boilerplate-master\New_Boilerplate-master\node_modules\bcrypt npm ERR! gyp ERR! node -v v15.8.0 npm ERR! gyp ERR! node-gyp -v v7.1.2 npm ERR! gyp ERR! not ok npm ERR! node-pre-gyp ERR! build error npm ERR! node-pre-gyp ERR! stack Error: Failed to execute 'C:\Program Files\nodejs\node.exe C:\Users\juno8\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js configure --fallback-to-build --module=C:\Users\juno8\Desktop\New_Boilerplate-master\New_Boilerplate-master\node_modules\bcrypt\lib\binding\napi-v3\bcrypt_lib.node --module_name=bcrypt_lib --module_path=C:\Users\juno8\Desktop\New_Boilerplate-master\New_Boilerplate-master\node_modules\bcrypt\lib\binding\napi-v3 --napi_version=7 --node_abi_napi=napi --napi_build_version=3 --node_napi_label=napi-v3' (1) npm ERR! node-pre-gyp ERR! stack at ChildProcess.<anonymous> (C:\Users\juno8\Desktop\New_Boilerplate-master\New_Boilerplate-master\node_modules\node-pre-gyp\lib\util\compile.js:83:29) npm ERR! node-pre-gyp ERR! stack at ChildProcess.emit (node:events:378:20) npm ERR! node-pre-gyp ERR! stack at maybeClose (node:internal/child_process:1067:16) npm ERR! node-pre-gyp ERR! stack at Process.ChildProcess._handle.onexit (node:internal/child_process:301:5) npm ERR! node-pre-gyp ERR! System Windows_NT 10.0.19041 npm ERR! node-pre-gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\juno8\\Desktop\\New_Boilerplate-master\\New_Boilerplate-master\\node_modules\\node-pre-gyp\\bin\\node-pre-gyp" "install" "--fallback-to-build" npm ERR! node-pre-gyp ERR! cwd C:\Users\juno8\Desktop\New_Boilerplate-master\New_Boilerplate-master\node_modules\bcrypt npm ERR! node-pre-gyp ERR! node -v v15.8.0 npm ERR! node-pre-gyp ERR! node-pre-gyp -v v0.15.0 npm ERR! node-pre-gyp ERR! not ok npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\juno8\AppData\Local\npm-cache\_logs\2021-02-16T14_26_35_560Z-debug.log PS C:\Users\juno8\Desktop\New_Boilerplate-master\New_Boilerplate-master>
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
use effect 부분에서 에러가나는 건지요...
import React ,{useEffect, useState} from 'react' import axios from 'axios'; import ProductImage from './Sections/ProductImage'; import ProductInfo from './Sections/ProductInfo'; import {Row, Col} from 'antd'; function DetailProductPage(props) { const productId = props.match.params.productId const [Product, setProduct] = useState({}) useEffect(() => { axios.get(`/api/product/products_by_id?id=${productId}&type=single`) .then(response =>{ if(response.data.success){ setProduct(response.data.product[0]) }else { alert('상세 정보 가져오기를 실패했습니다.') } }) }, []) return ( <div style={{widht: '100%', padding : '3rem 4rem'}}> <div style = {{display : 'flex', justifyContent:'center'}}> <h1>{Product.title}</h1> </div> <br /> <Row gutter={[16,16]}> <Col lg={12} sm= {24}> {/* Product image */} <ProductImage detail={Product} /> </Col> <Col lg={12} sm= {24}> {/* Product Info */} <ProductInfo detail={Product} /> </Col> </Row> </div> ) } export default DetailProductPage 우선 상세페이지 버튼 눌렀을때 나는 에러입니다,,, 뭔가 터미널에 찍히는것도 그렇고 hook에 관한 내용이 나오는 것 같은데 ..
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
질문있습니다,,
일단 이 강의와는 관련없는 질문이라 죄송합니다. 이 강의는 다 듣고 배운거와 선생님의 예전강의 챗봇앱의 dialogflow를 결합하여 저만의 프로젝트를 배포하려고 하는데요. dialogflow를 사용하기 위해서 로컬에선 환경변수를 설정해서 해결했는데 배포했을때 또 같은 에러가 나오는데 뭘 해야하는지 감을 못잡겠습니다 ㅠ.ㅠ 배포했을때엔 어디에 환경변수를 놔야 작동하나요.. 2일째 안되는데 간절합니당,, 참고로 그 강의는 socket i.o 가 있는 챗봇이 아닌 간단한 챗봇 구현하신 프로젝트였습니다 도움을 ㅠㅠ
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
update
Product모델에서 그럼 findoneandupdate가 아니라 update를 쓴이유도 async 덕분이라고 보면 될까요? async.eachSeries(products,(item, callback) =>{ Product.update( {_id: item.id}, { $inc: { "sold" : item.quantity } }, {new: false}, callback ) }
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
검색 내용 전체를 Like 검색하고 싶을때는 어떻게 해야하나요?
단일 항목을 대상으로 할때는 $regex 를 사용하면 되는 것 같은데, 공식 설명 문서를 봤을때 $text에서는 그냥 like 검색을 지원하는것 처럼 되어있더라구요. 제가 할때는 안되지만... 혹시 영상이 업로드 되고난 뒤 지금까지 API의 변동이 있었을까요?ㅠㅠ
- 따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
몽고db연결과 배포 오류 난다고 했던 수강생입니다 제발 도와주세요
삭제된 글입니다
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
Product undefined 오류 왜 나는지 모르겠습니다
안녕하세요 선생님 강의 너무 잘 듣고 있습니다. LandingPage에서 카드 UI만드는 과정 듣고 있는데 Product is not defined 라는 오류가 뜨는데 왜 나오는지 모르겠습니다. 아래에는 오류 메세지와 LandingPage 작성 코드 입니다. [nodemon] restarting due to changes... [1] Compiling... [0] [nodemon] starting `node server/index.js` [1] Failed to compile. [1] [1] ./src/components/views/LandingPage/LandingPage.js [1] Line 26:25: 'Products' is not defined no-undef [1] [1] Search for the keywords to learn more about each error. [0] (node:7828) 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] (node:7828) Warning: Accessing non-existent property 'findOne' of module exports inside circular dependency [0] (node:7828) Warning: Accessing non-existent property 'remove' of module exports inside circular dependency [0] Server Listening on 5000 [0] (node:7828) Warning: Accessing non-existent property 'updateOne' of module exports inside circular dependency [0] MongooseError [MongooseServerSelectionError]: connection <monitor> to 52.220.203.202:27017 closed [0] at new MongooseServerSelectionError (C:\Users\ADMIN\Desktop\boilerplate-mern-stack-master\boilerplate-mern-stack-master\node_modules\mongoose\lib\error\serverSelection.js:22:11) [0] at NativeConnection.Connection.openUri (C:\Users\ADMIN\Desktop\boilerplate-mern-stack-master\boilerplate-mern-stack-master\node_modules\mongoose\lib\connection.js:823:32) [0] at Mongoose.connect (C:\Users\ADMIN\Desktop\boilerplate-mern-stack-master\boilerplate-mern-stack-master\node_modules\mongoose\lib\index.js:333:15) [0] at Object.<anonymous> (C:\Users\ADMIN\Desktop\boilerplate-mern-stack-master\boilerplate-mern-stack-master\server\index.js:19:26) [0] at Module._compile (internal/modules/cjs/loader.js:1063:30) [0] at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10) [0] at Module.load (internal/modules/cjs/loader.js:928:32) [0] at Function.Module._load (internal/modules/cjs/loader.js:769:14) [0] at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12) [0] at internal/main/run_main_module.js:17:47 { [0] reason: TopologyDescription { [0] type: 'ReplicaSetNoPrimary', [0] setName: null, [0] maxSetVersion: null, [0] maxElectionId: null, [0] servers: Map(3) { [0] 'shop-shard-00-02.0vwa9.mongodb.net:27017' => [ServerDescription], [0] 'shop-shard-00-01.0vwa9.mongodb.net:27017' => [ServerDescription], [0] 'shop-shard-00-00.0vwa9.mongodb.net:27017' => [ServerDescription] [0] }, [0] stale: false, [0] compatible: true, ============================================================================================ import React, {useEffect, useState} from 'react' import { FaCode } from "react-icons/fa"; import axios from "axios"; import {Icon, Col, Card, Row} from 'antd'; import { Product } from '../../../../../server/models/Product'; import Meta from 'antd/lib/card/Meta'; function LandingPage() { const [Proucts, setProducts] = useState ([]) useEffect(() => { axios.post('/api/product/products') .then(response => { if(response.data.success) { setProducts(response.data.productInfo) } else { alert("상품들을 가져오는데 실패 했습니다.") } }) }, []) const renderCards = Products.map((product, index)=> { return <Col lg={6} md={8} xs={24} key={index}> <Card cover={<img src={`http://localhost:5000/${product.image[0]}`} />} > <Meta title={product.title} description={`$${product.price}`} /> </Card> </Col> }) return ( <div style={{ width: '75%', margin: '3rem auto'}}> <div style={{ textAlign: 'center'}}> <h2>Let's Travel Anywhere <Icon type="rocket" /></h2> </div> {/* Filter */} {/* Search */} {/* Cards */} <Row gutter> {renderCards} </Row> <div style={{ justifyContent: 'center'}}> <button>더보기</button> </div> </div> ) } export default LandingPage [0] compatibilityError: null, [0] logicalSessionTimeoutMinutes: null, [0] heartbeatFrequencyMS: 10000, [0] localThresholdMS: 15, [0] commonWireVersion: null [0] }, [0] [Symbol(mongoErrorContextSymbol)]: {} [0] }
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
새롭게변경되 이미지를 부여 할때 질문이 있습니다.
FileUpload.js 에서 가지고 있는 ImageState에 변경된 정보들을 setImage 하는데 이 State를 refreshFunction에 태우니깐 값이 안들어가더라구요. 이론상 set 하고나면 state가 바뀌고 rerendering이 되고 그러면 refreshFunction에는 바뀐값이 들어갈거라 생각했는데 혹시 그러면 setState를 하는게 실행되고 있는 함수가 전부 끝나야 값이 적용이 되어서 그런걸까요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
DetailProductPage의 useEffect 관련 질문입니다.
1.여기서 setProduct를 해준 다음에 바로 console.log("프로덕트",Product)를 찍으니 빈 오브젝트({ })가 나오더라구요.useEffect가 끝나야 const Product에 셋팅이 되어 그런건지...이유를 모르겠습니다.setProduct로 셋팅이 된 후, Product를 콘솔로 찍은건데 왜 안나올까요 2.useEffect 두번째인자에 Product를 넣으니 처음엔 빈 오브젝트 나오다가 두번째부터 제대로 콘솔에 나오는데 계속 무한반복으로 콘솔에 찍히는 이유는 무엇인가요?? 좋은강의 감사합니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
보안에 관한 질문
안녕하세요 선생님 강의 너무 잘 듣고 있습니다 제가 쇼핑몰을 구축하려고 이 강의를 듣고 있습니다 제가 비전공자라 잘 몰라서 드리는 질문입니다 이 강의 완강 후에 UI만 제 나름대로 꾸며서 쇼핑몰을 구축해도 보안이나 서버다운 이런 것들에에대한 걱정은 안 해도 괜찮은 건가요? 아니면 제가 따로 더 공부를 해서 좀 더 보완을 해야 하는건가요? 실례가 될 수도 있는 질문이라고 생각합니다만 제가 정말 잘 몰라서요...