33,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
선생님 질문있습니다 ㅜㅠ
props.list가 있으면 map을 한다고 하셨는데..list는 데이터로 만들어놨기 때문에 무조건 있을 수 밖에 없지않나요...??? 그리고 renderCheckboxLists를 변수로 안하고 함수로 한 이유가 궁금합니다!! 그리고 그안에 <React.Fragment>를 사용하는 이유는 뭘까요,,,,? 안써도 되지않나요....? 답변해주시면 감사하겠습니다!!!
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
폴더 속 js 이름
폴더 이름과 js 이름이 똑같은데 꼭 이렇게 해야되나요? component-view 폴더에서 예) Footer 폴더 - Footer.js
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
질문이 있어서 올립니다
강사님의 코드를 보면서 짜는데 네트워크 부분에서 계속 요청이 일어나 Product state가 계속 바뀝니다 혹시 어느 부분이 문제일까요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
다음과 같은 에러 발생하시는 분들은
users.js에서 const { default: ProductInfo } = require('../../client/src/components/views/DetailProductPage/Sections/ProductInfo'); 위의 부분이 자동으로 추가되지 않았는지 확인해보세요~
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
if(data[key]._id === value) 가 아니라 value._id로 해야합니다
if(data[key]._id === value) 가 아니라 value._id로 해야합니다
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
질문입니다.
로그인, 회원가입 등 화면은 잘 뜨는데 회원가입이 안됩니다ㅠㅠ 회원가입 칸을 채우고 submit을 누르면 [1] [HPM] Error occurred while trying to proxy request /api/users/auth from localhost:3000 to http://localhost:5000 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors) 와 같은 에러가 뜨는데 어떻게 해결할 수 있을까요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
확인에서 넘어가지 않을 때.. 어떡하면 좋을까요? (해결)
해당 강의 질문 글들에서 제시됐던 솔루션 방식들을 모두 사용해봤지만, 여전히 '확인'을 누르면 반응이 없습니다. 마지막으로 모든 아이피 허용 변경 후 아이디를 새로 만들어도 똑같네요... 1. '확인'을 누를 때 반응은 없지만 'uploads' 폴더 안에 사진이 저장되긴 합니다. 2. 공란이 있는 상태에서 '확인'을 누르면 반응은 없지만 1번처럼 사진은 저장이 됩니다. 뭐가 문제일까요... 모든 경우의 수와 코드 하나하나 비교도 해봤습니다ㅠ
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
TypeError: Cannot read property 'prototype' of undefined 인분들 참고 사항 및 궁금한 사항 질문 드립니다
위 같은 에러가 떴을 때, FileUpload.js 파일 상단 import { response } from 'express'; 부분을 삭제하면 정상적으로 작동하게 됩니다. Q. 본문에서는 사용되지 않았지만, 임포트 하는 것만으로도 에러가 나는 이유는 무엇일까요? 비슷한 예로 사용되지 않는 axios를 임포트한 경우에도 비슷한 에러가 나더라고요
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
깃허브 커밋
안녕하세요 강사님.. 강의들으면서 클론코딩하고 혼자 응용하면서 실습해보려고 다른 프로젝트를 작업하고 있었는데요, 방금 커밋하고 커밋로그를 보는데 지금까지 강사님 레포지토리에 커밋을 하고 있었습니다.. 너무 깜짝놀라고 부끄러워서 해당하는 저의 레포지토리를 바로 삭제해버렸는데, 이렇게 되면 원본(강사님 레포지토리)에 아무 문제가 없으며 아무도 제 커밋내용을 볼 수 없는건가요? 전자는 문제가 없다는 걸 알겠는데 후자는 어떻게 검색을 해야할지 모르겠어서 여쭤봅니다..!
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
선생님 ㅠㅠ 배포 관련 질문있습니다..! 답변부탁드려요 ㅠㅠ
질문이 있습니다. heroku 배포 관련입니다. 꼼꼼히 공부하다보니 이런저런 궁금증이 많이 생기고 추리고 추려 질문해봅니다 ㅠㅠ.. 첫번째로 아래 첫번째 사진과 같이 배포 상태일때 static을 해주는 이유가 궁금합니다. 1. 자바스크립트와 css파일을 꼭 static으로 명시해줘야 heroku가 접근가능한건가요? static은 단순히 URL을 통해 접근할 수 있는 것들을 선언하는 걸로 알고있는데 경우가 다른거같아서요.. 2. 그리고 경로가 현재 서버폴더인데 ../client/bulid 인줄알고있는데 저렇게 해도 되는 이유가 궁금합니다..! 3. 그리고 두번째 사진에서 질문드리면 궁금한게 heroku는 heroku-postbuild 라는 저 script를 보고 저기가 서버폴더라고 인식하는건가요? client와 server 2개의 폴더가 있는데 server 폴더를 인식한게 궁금합니다.. 4. 마지막으로 heroku-postbuild에서 저렇게 선언을 해놓으면 build를 안한 상태로 github에 올려놔도 heroku가 저 스크립트를 실행함으로써 빌드를 하고 그에 맞는 접근을 한다고 이해했는데 맞나요? 그리고 client는 npm install 작업을 해주는데 서버는 왜 선언이 없는지 궁금합니다..
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
선생님 장바구니 관련 질문있습니다.
User 모델 안에 장바구니가 있잖아요? 상황이, Post 하나를 유저가 장바구니에 담았습니다. 이때, 그 Post가 삭제가되면 유저의 장바구니안에는 해당 Post가 그대로 남아있는데 실제 서비스에서는 문제가 될것같아요., 이런 경우 어떻게 해야할까요? Post가 삭제될시 다른 유저의 장바구니 안에 들어있는 그 Post도 삭제시켜주고싶습니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
저 역시도 다른 분들처럼 확인 버튼 누르면 진행이 안됩니다.
UploadProductPage.js:59 Uncaught TypeError: Cannot read property '_id' of undefined at submitHandler (UploadProductPage.js:59) at HTMLUnknownElement.callCallback (react-dom.development.js:188) at Object.invokeGuardedCallbackDev (react-dom.development.js:237) at invokeGuardedCallback (react-dom.development.js:292) at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:306) at executeDispatch (react-dom.development.js:389) at executeDispatchesInOrder (react-dom.development.js:414) at executeDispatchesAndRelease (react-dom.development.js:3278) at executeDispatchesAndReleaseTopLevel (react-dom.development.js:3287) at forEachAccumulated (react-dom.development.js:3259) at runEventsInBatch (react-dom.development.js:3304) at runExtractedPluginEventsInBatch (react-dom.development.js:3514) at handleTopLevel (react-dom.development.js:3558) at batchedEventUpdates$1 (react-dom.development.js:21871) at batchedEventUpdates (react-dom.development.js:795) at dispatchEventForLegacyPluginEventSystem (react-dom.development.js:3568) at attemptToDispatchEvent (react-dom.development.js:4267) at dispatchEvent (react-dom.development.js:4189) at unstable_runWithPriority (scheduler.development.js:653) at runWithPriority$1 (react-dom.development.js:11039) at discreteUpdates$1 (react-dom.development.js:21887) at discreteUpdates (react-dom.development.js:806) at dispatchDiscreteEvent (react-dom.development.js:4168) submitHandler @ UploadProductPage.js:59 callCallback @ react-dom.development.js:188 invokeGuardedCallbackDev @ react-dom.development.js:237 invokeGuardedCallback @ react-dom.development.js:292 invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:306 executeDispatch @ react-dom.development.js:389 executeDispatchesInOrder @ react-dom.development.js:414 executeDispatchesAndRelease @ react-dom.development.js:3278 executeDispatchesAndReleaseTopLevel @ react-dom.development.js:3287 forEachAccumulated @ react-dom.development.js:3259 runEventsInBatch @ react-dom.development.js:3304 runExtractedPluginEventsInBatch @ react-dom.development.js:3514 handleTopLevel @ react-dom.development.js:3558 batchedEventUpdates$1 @ react-dom.development.js:21871 batchedEventUpdates @ react-dom.development.js:795 dispatchEventForLegacyPluginEventSystem @ react-dom.development.js:3568 attemptToDispatchEvent @ react-dom.development.js:4267 dispatchEvent @ react-dom.development.js:4189 unstable_runWithPriority @ scheduler.development.js:653 runWithPriority$1 @ react-dom.development.js:11039 discreteUpdates$1 @ react-dom.development.js:21887 discreteUpdates @ react-dom.development.js:806 dispatchDiscreteEvent @ react-dom.development.js:4168 react-dom.development.js:327 Uncaught TypeError: Cannot read property '_id' of undefined at submitHandler (UploadProductPage.js:59) at HTMLUnknownElement.callCallback (react-dom.development.js:188) at Object.invokeGuardedCallbackDev (react-dom.development.js:237) at invokeGuardedCallback (react-dom.development.js:292) at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:306) at executeDispatch (react-dom.development.js:389) at executeDispatchesInOrder (react-dom.development.js:414) at executeDispatchesAndRelease (react-dom.development.js:3278) at executeDispatchesAndReleaseTopLevel (react-dom.development.js:3287) at forEachAccumulated (react-dom.development.js:3259) at runEventsInBatch (react-dom.development.js:3304) at runExtractedPluginEventsInBatch (react-dom.development.js:3514) at handleTopLevel (react-dom.development.js:3558) at batchedEventUpdates$1 (react-dom.development.js:21871) at batchedEventUpdates (react-dom.development.js:795) at dispatchEventForLegacyPluginEventSystem (react-dom.development.js:3568) at attemptToDispatchEvent (react-dom.development.js:4267) at dispatchEvent (react-dom.development.js:4189) at unstable_runWithPriority (scheduler.development.js:653) at runWithPriority$1 (react-dom.development.js:11039) at discreteUpdates$1 (react-dom.development.js:21887) at discreteUpdates (react-dom.development.js:806) at dispatchDiscreteEvent (react-dom.development.js:4168) submitHandler @ UploadProductPage.js:59 callCallback @ react-dom.development.js:188 invokeGuardedCallbackDev @ react-dom.development.js:237 invokeGuardedCallback @ react-dom.development.js:292 invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:306 executeDispatch @ react-dom.development.js:389 executeDispatchesInOrder @ react-dom.development.js:414 executeDispatchesAndRelease @ react-dom.development.js:3278 executeDispatchesAndReleaseTopLevel @ react-dom.development.js:3287 forEachAccumulated @ react-dom.development.js:3259 runEventsInBatch @ react-dom.development.js:3304 runExtractedPluginEventsInBatch @ react-dom.development.js:3514 handleTopLevel @ react-dom.development.js:3558 batchedEventUpdates$1 @ react-dom.development.js:21871 batchedEventUpdates @ react-dom.development.js:795 dispatchEventForLegacyPluginEventSystem @ react-dom.development.js:3568 attemptToDispatchEvent @ react-dom.development.js:4267 dispatchEvent @ react-dom.development.js:4189 unstable_runWithPriority @ scheduler.development.js:653 runWithPriority$1 @ react-dom.development.js:11039 discreteUpdates$1 @ react-dom.development.js:21887 discreteUpdates @ react-dom.development.js:806 dispatchDiscreteEvent @ react-dom.development.js:4168 xhr.js:178 GET http://localhost:3000/api/users/auth 504 (Gateway Timeout) dispatchXhrRequest @ xhr.js:178 xhrAdapter @ xhr.js:12 dispatchRequest @ dispatchRequest.js:52 Promise.then (async) request @ Axios.js:61 Axios.<computed> @ Axios.js:76 wrap @ bind.js:9 auth @ user_actions.js:31 (anonymous) @ auth.js:14 commitHookEffectListMount @ react-dom.development.js:19731 commitPassiveHookEffects @ react-dom.development.js:19769 callCallback @ react-dom.development.js:188 invokeGuardedCallbackDev @ react-dom.development.js:237 invokeGuardedCallback @ react-dom.development.js:292 flushPassiveEffectsImpl @ react-dom.development.js:22853 unstable_runWithPriority @ scheduler.development.js:653 runWithPriority$1 @ react-dom.development.js:11039 flushPassiveEffects @ react-dom.development.js:22820 performSyncWorkOnRoot @ react-dom.development.js:21737 (anonymous) @ react-dom.development.js:11089 unstable_runWithPriority @ scheduler.development.js:653 runWithPriority$1 @ react-dom.development.js:11039 flushSyncCallbackQueueImpl @ react-dom.development.js:11084 flushSyncCallbackQueue @ react-dom.development.js:11072 unbatchedUpdates @ react-dom.development.js:21909 legacyRenderSubtreeIntoContainer @ react-dom.development.js:24757 render @ react-dom.development.js:24840 ./src/index.js @ index.js:20 __webpack_require__ @ bootstrap:784 fn @ bootstrap:150 1 @ serviceWorker.js:135 __webpack_require__ @ bootstrap:784 checkDeferredModules @ bootstrap:45 webpackJsonpCallback @ bootstrap:32 (anonymous) @ main.chunk.js:1 createError.js:16 Uncaught (in promise) Error: Request failed with status code 504 at createError (createError.js:16) at settle (settle.js:17) at XMLHttpRequest.handleLoad (xhr.js:61) createError @ createError.js:16 settle @ settle.js:17 handleLoad @ xhr.js:61 Promise.then (async) (anonymous) @ auth.js:14 commitHookEffectListMount @ react-dom.development.js:19731 commitPassiveHookEffects @ react-dom.development.js:19769 callCallback @ react-dom.development.js:188 invokeGuardedCallbackDev @ react-dom.development.js:237 invokeGuardedCallback @ react-dom.development.js:292 flushPassiveEffectsImpl @ react-dom.development.js:22853 unstable_runWithPriority @ scheduler.development.js:653 runWithPriority$1 @ react-dom.development.js:11039 flushPassiveEffects @ react-dom.development.js:22820 performSyncWorkOnRoot @ react-dom.development.js:21737 (anonymous) @ react-dom.development.js:11089 unstable_runWithPriority @ scheduler.development.js:653 runWithPriority$1 @ react-dom.development.js:11039 flushSyncCallbackQueueImpl @ react-dom.development.js:11084 flushSyncCallbackQueue @ react-dom.development.js:11072 unbatchedUpdates @ react-dom.development.js:21909 legacyRenderSubtreeIntoContainer @ react-dom.development.js:24757 render @ react-dom.development.js:24840 ./src/index.js @ index.js:20 __webpack_require__ @ bootstrap:784 fn @ bootstrap:150 1 @ serviceWorker.js:135 __webpack_require__ @ bootstrap:784 checkDeferredModules @ bootstrap:45 webpackJsonpCallback @ bootstrap:32 (anonymous) @ main.chunk.js:1 우선 다른분들도 나왔던 _id undefined가 계속해서 나오는데 해결법을 1) Button -> button으로도 바꿔봤는데 실패 2) type -> htmlType으로도 해봤는데 실패 3) mongodb에서 네트워크 접속도 0.0.0.0으로 모든 아이피 접속으로 바꿔보고 데이터베이스 접속도 바꿨는데 실패 어떻게 해야 이 문제를 해결할 수 있을까요? https://github.com/jiwoongKo/temporaryReact 해당 코드에 대해 올립니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
Suspense 컴포넌트만 App.js에 있는데..
안녕하세요, App.js 을 보면 Provider로 store를 연결시켜주는 코드가 없는데 리덕스 스토어를 리액트 내에서 사용 가능한지 여쭤보고싶습니다. function App() { return ( <Suspense fallback={<div>Loading...</div>}> <NavBar /> <div style={{ paddingTop: '69px', minHeight: 'calc(100vh - 80px)' }}> <Switch> <Route exact path='/' component={Auth(LandingPage, null)} /> <Route exact path='/login' component={Auth(LoginPage, false)} /> <Route exact path='/register' component={Auth(RegisterPage, false)} /> <Route exact path='/product/upload' component={Auth(UploadProductPage, true)} /> <Route exact path='/product/:productId' component={Auth(DetailProductPage, null)} /> <Route exact path='/user/cart' component={Auth(CartPage, true)} /> </Switch> </div> <Footer /> </Suspense> ); } Supense 컴포넌트가 비동기작업을 해주며, 로딩시 로딩화면을 보여주는 컴포넌트역할로 알고있는데, Provider와 같이 사용해도 되는걸까요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
백앤드 이미지 업로드와 관련한 몽구스 DB에러에 대하여 질문합니다.
따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기 12강 'multer를 이용하여 이미지 저장' 5:50초경 이미지가 몽구스 저장되었는지를 확인하기 위해 콘솔창을 켰는데, 504에러만 뜹니다. 몽구스 db가서 아이피 추가 등 인터넷에 나와있는 대부분의 해결책으로 시험해봤는데 되지 않습니다. 몽구스 디비와의 연결은 된거 같은데, 왜 이런지 모르겠습니다. 이거때문에 진도가 나가지 않습니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
props로 devtools에서 정보가져오기
cartPage에서 react-devtools에 있는 정보를 가져올때 props.user.userData이렇게 가져오잖아요 그리고 CartPage에서 UserCardBlock에 정보를 넘겨줄때products={props.user.cartDetail} 이렇게 넘겨주고 UserCardBlock에서 props.products 이렇게 정보를 받는데, 제가 그래서 UserCardBlock 에서 props.user.userData이렇게 콘솔에 찍어 봤는데 정의되지 않았다고 뜨는데.. 왜이런걸까요>??
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
5:40 404 에러 도와주세요 ㅠㅠ
좋은 강의 항상 감사드립니다. 오타때문인가 싶어 강의도 돌려보고 올라와있는 질문들 다 읽어보았는데도 끝내 해결하지 못해 이렇게 질문드립니다. 일단 위 사진은 콘솔 창에서의 에러이구요... 소스코드 첨부하겠습니다. FileUpload.js import React from "react"; import Dropzone from "react-dropzone"; import { Icon } from "antd"; import axios from "axios"; function FileUpload() { const dropHanler = (files) => { let formData = new FormData(); const config = { header: { "content-type": "multipart/form-data" }, }; formData.append("file", files[0]); axios.post("/api/product/image", formData, config).then((response) => { if (response.data.success) { console.log(response.data); } else { alert("파일을 저장하는데 실패했습니다."); } }); }; return ( <div style={{ display: "flex", justifyContent: "space-between" }}> <Dropzone onDrop={dropHanler}> {({ getRootProps, getInputProps }) => ( <div style={{ width: 300, height: 240, border: "1px solid lightgray", display: "flex", alignItems: "center", justifyContent: "center", }} {...getRootProps()} > <input {...getInputProps()} /> <Icon type="plus" style={{ fontSize: "3rem " }} /> </div> )} </Dropzone> </div> ); } export default FileUpload; product.js const express = require("express"); const router = express.Router(); const multer = require("multer"); //================================= // Product //================================= var storage = multer.diskStorage({ // destination: 파일이 어디에 저장되는지 알려줌 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 res.json({ success: false, err }); } return res.json({ success: true, filePath: res.req.file.path, fileName: res.req.file.filename, }); }); }); module.exports = router; index.js(강의에서 손댄 부분만) app.use("/api/users", require("./routes/users")); app.post("/api/product", require("./routes/product")); //use this to show the image you have in node js server to client (react js) //https://stackoverflow.com/questions/48914987/send-image-path-from-node-js-express-server-to-react-client app.use("/uploads", express.static("uploads")); 몽고db연결도 잘 되었고, 별 다른 에러가 뜨지 않아 터미널 로그는 따로 첨부하지 않았습니다. 혼자 해결해보려고 3시간 붙잡다 이렇게 질문드립니다... ㅠㅠ 꼭 답변 부탁드리겠습니다.. ㅠㅠ
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
더보기 버튼 질문있습니다.
삭제된 글입니다
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
1:10 익스텐션 궁금합니다
저는 prettier 쓰는데 저장시 자동정렬시키거든요.. 강사님처럼 띄어쓰기(?) 한번으로 자동정렬 어떻게 하나요..?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
질문입니다.
제가 유튜브에서 들었던 boiler-plate와 boilerplate-mern-stack과 코드가 차이가 나는데 혹시 이부분에 대한 강의는 원래 없는건가요??
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
MongoDB의 USD설정을 KRW로 바꿀 수 있나요??
안녕하세요 선생님, 열심히 잘 보고 따라하고 있습니다! 나름의 수정작업을 곁들이며 하는 중인데요. 혹시 MongoDB에서 지원하는 달러단위를 원화로 바꿀 수 있는 방법이 있을까요?? MongoDB Docs에도 monetary usage 관련 사용법만 나오고, 전환법이나 다른 방법에 대해 나오지는 않아서요! 늘 감사합니다! :)