33,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
도와주세요!!
https://github.com/truth809/ReactAndNode 안녕하세요 막히는 부분이 있는데 전체소스코드도 보고 질문에 잇는내용들도 보고 검색도 해서 적용해 봤는데 도저히 못찾겟습니다 ㅜㅜ 확인 버튼 누르면 아무 동작이 안일어나요 제발 도와주세요!! 수명이 줄어들고 잇습니다 흑흑.. 그리고 혹시 번거로우시겠지만 동영상 수정을 해주시면 안될까요 동영상 내용에 빠진 부분이나 수정안된 부분때문에 너무 헷갈리고 힘들어요 ㅜㅜ 그랫으면 하는 작은 바램입니다.. 강의 덕분에 도움은 많이 되는것 같아요 감사합니다!!
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
파일업로드 시 404에러 여러방식을 해도 안됩니다,,ㅠㅠ
localhost:5000/${image.filePath}도 해보고 app.use("/uploads", express.static('uploads')); 이것도 넣어보고 했는데 계속 똑같네요...ㅜㅜ 도데체 뭐가 문제일까요
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
감사합니다 선생님
결국 성공했습니다. s3이용해서 이미지 저장하고 배포 완료 했어요 ㅎㅎ 휴~ 몇일동안 배포 때문에 맘고생했는데 다행입니다 ㅎㅎㅎㅎ
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
안녕하세요 선생님.
aws s3에 사진을 업로드 하는 것 까지는 완료 했는데 버킷에서 사진을 어떻게 불러와야 할 지 모르겠습니다. 아래 처럼 해서 s3에 업로드는 되는데 console을 찍어 본 결과 res.req.file이 undefined 결과로 나옵니다 ㅠ const storage = multerS3({ s3: s3, bucket: 'my-app', acl: 'public-read-write', metadata: function (req, file, cb) { cb(null, { fieldName: file.fieldname }); }, key: function (req, file, cb) { cb(null, Date.now().toString()) }, }) var upload = multer({ storage: storage }).single("file") router.post('/image', (req, res) => { //가져온 이미지를 저장을 해주면 된다. upload(req, res, err => {//가져온 이미지를 저장하기. if (err) {//프론트엔드로 정보 전달 return req.json({ success: false, err }) } console.log(res.req.file) return res.json({ success: true, filePath: res.req.file.path, fileName: res.req.file.filename }) }) })
- 해결됨따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
안녕하세요 선생님 ㅎㅎ!
heroku 관련해서 질문 올렸던 학생입니다. 아마도 아마존s3에서 이미지 저장하고 거기서 받아오는게 해결책인 듯 한데 제가 미숙한지 잘 안돼서요 ㅜㅠ 이미지만 s3에 저장하고 거기서 받아오는 것만 하고 싶은데 아직 관련 영상이 없을까요? ㅠㅠ
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
heroku 배포하면 사진이 사라지는 이유 알아냈습니다!
https://help.heroku.com/K1PPS2WM/why-are-my-file-uploads-missing-deleted 이 사유인 것 같은데 잠자기 모드에 들어가면서 올린 파일들을 모두 삭제하는 것 같습니다. heroku에서 배포하면 제가 올린 업로드 파일들을 다른 방법으로 저장하는 방식은 없는건가요? ㅠㅠ 배포하는 영상이 https://www.youtube.com/watch?v=qdoiwouykAg&list=LLpCpoDhCPBAC76g4OYEiVzw 이 영상에 있는 heroku 말고는 없으시죠? ㅠㅠ
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
필터박스 만든후
체크박스나 라디오 박스 클릭을 할때 상품이 가져오는 기능들은 다 잘됩니다 그런데 체크박스나 라디오박스 클릭시 더보기를 누르지 않았는데도 그 상품들이 나오는데 이건 몽고DB에서 데이터를 기반으로 조건에 맞기만 하면 다 찾아와서 그런걸까요??
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
Heroku 배포하기 제발 도와주세요 ㅠㅡㅠ
"히로쿠에 배포하기" 선생님이 찍어두신 영상 보고 따라해서 잘 되었습니다. 다른 분 답글 달아주신 것도 보고 그대로 했습니다 ㅠㅜㅠ 그러나 {제 히로쿠 앱 주소}/~~ 이런식으로 localhost:5000을 모두 바꿔주었는데 처음에는 업로드도 잘 되고 화면에도 출력이 잘 되는데 시간이 30분? 1시간 정도 지나면 올렸던 사진들이 안보입니다 ㅠ 처음에는 몇개를 업로드 하든 잘 되는데 시간이 지나면 공통적으로 사진이 안보이는 현상이 일어납니다. 개발자 도구에서 경로를 보면 {제 히로쿠앱주소}/image이런식으로 잘 설정 되어있고 처음에도 잘 되는데 나중가면 사진이 안보이는 현상 왜그럴까요? 처음에는 잘 되는거 보면 주소에 오류가 있는건 아닌것 같습니다 ㅠ 처음에는 다른 질문처럼 제가 빈 uploads폴더를 push해서 그런가 했는데 push도 안하고 로컬에서도 아무것도 안건드린 상태여도 반복적으로 일어나는 현상입니다 ㅠㅠㅠ 그리고 시간이 지나는 것과 별개로 push하면 사진이 바로 사라지는데 이것은 uploads폴더는 그대로 두고 수정하여 재배포 하는 방법이 있을까요? uploads폴더가 비어있어서 그런가 바로 삭제되는 느낌도 있습니다. gitignore에서는 이미 push 한 것이라 그런지 계속해서 추적하네요 ㅠㅠ 처음부터 배포를 안하면 오류가 발생하구요 ㅠ... 1. 새롭게 push하면 사진이 없어짐. 2. 시간이 지나면 사진이 없어짐 두가지 현상이 있습니다. ㅇ개발자 도구에서 본 사진의 주소입니다. 처음에는 이렇게 잘 업로드 됩니다. 아무 것도 안했는데시간이 지나면 이런식으로 빈 화면만 뜹니다. 이것은 vscode에서 설정한 제 이미지 경로 소스 입니다. heroku에서 uploads 폴더를 확인 할 수 있는 방법이 있나요? heroku의 uploads 폴더의 사진이 자동적으로 삭제가 되는 걸까요? + 아마도 uploads폴더 안에 제대로 저장이 안되는 것이거나 uploads폴더가 주기적으로 삭제되는 것 같습니다 ㅠㅠ push는 heroku를 해당 프로젝트에 로그인 한다음 git push heroku master를 이용해 했었습니다. uploads 폴더도 .gitkeep을 이용하여 업로드 되어있고 처음에 안올렸었다가 오류가 나서 다시 포함하여 올린 것입니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
npm i 설치 몇개 하면 되나요?
npm i 할때요 server랑 client두개만하면 되나요 가장최상위에 npm i 하면 총 세개가 나와서요??
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
const {Title} = Typography 를 해주는 이유가 뭔가요??
기본 html태그에 antd 프레임워크를 적용시키는 부분에서 다음과 같은 코드가 있는데요, const {Title} = Typography const {TextArea} = Input 위와 같은 변수 대입을 해주는 이유가 뭔가요?? 그냥 Typography와 Input을 그대로 사용해도 될거같은데 가독성의 이유일까요?? 그리구 한가지 더 질문드리자면, 제가 javascript 문법을 잘 몰라서그런데 const 변수에 값을 대입할때 첫번째가 아닌 두번째 코드처럼 중괄호를 붙여주는 이유가 있나요?? const Title = Typography const {Title} = Typography 답변해주시면 감사하겠습니다
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
upload page에서 사진 올리면 사진 등록이 안 됩니다
안녕하세요 선생님 유익한 강의 정말 감사드립니다. upload page에서 그림을 등록하려고 하는데 이러한 오류가 발생하네요 혹시 제가 image 폴더에서 사진을 가져 온 것이 아니라 다른 폴더에서 사진을 가져오면 이러한 오류가 생기나요?? boilerplate-mern-stack-master 폴더안에 image 폴더를 생성해서 그림을 여기다가 가져다 놓아야 하나요?? GET http://localhost:5000/$%7Bimage%7D 404 (Not Found) Image(비동기) setValueForProperty @ react-dom.development.js:1350 setInitialDOMProperties @ react-dom.development.js:5831 setInitialProperties @ react-dom.development.js:6026 finalizeInitialChildren @ react-dom.development.js:7499 completeWork @ react-dom.development.js:18978 completeUnitOfWork @ react-dom.development.js:22189 performUnitOfWork @ react-dom.development.js:22165 workLoopSync @ react-dom.development.js:22130 performSyncWorkOnRoot @ react-dom.development.js:21756 (익명) @ 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 scheduleUpdateOnFiber @ react-dom.development.js:21199 dispatchAction @ react-dom.development.js:15660 (익명) @ FileUpload.js:22 Promise.then(비동기) dropHandler @ FileUpload.js:19 (익명) @ index.js:666 Promise.then(비동기) (익명) @ index.js:617 (익명) @ index.js:157 (익명) @ index.js:155 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
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
local에서 terminal이나 aws에서 서버를 백그라운드로 돌리는 방법 문의
서버를 백그라운드로 어떻게 돌리나요? aws에서 npm run start 로 하면 서버가 백그라운드에서 돌지 않아서 cli 창을 끄면 서버가 종료됩니다. pm2 start server/index.js 로 하면 서버가 계속 돌아가긴 하지만 이미지를 못 찾아서 not found 에러가 발생합니다. 해결 방법 말씀해주시면 감사하겠습니다.
- 해결됨따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
react 쇼핑몰 강의중 여행사진 요청드립니다.
안녕하세요 JohnAhn님 강사님의 리액트 쇼핑몰을 너무 재미있게 수강중입니다. 수강중에 강의를 따라하며 강사님이 사용하신 여행사진이 필요한데 강의에서 사용한 사진을 제공해 주실수 있나요? 강사님의 github에 가도 이미지는 존재하지 않아서 도움을 받고 싶어 이렇게 글 남깁니다. 곤란하다면 혹시 여행사진을 어디서 가져다 사용하면 되는지 알려주시면 감사하겠습니다. 도와주시면 감사하겠습니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
MongoDB Error
로그인 부터 제대로 만들어보고 싶어서 유튜브 강의를 보면서 따라하고있었는데 몽고디비 연결하는 부분에서 에러가 납니다. 혹시 무료여서 그런가 싶어서 직접 결제하고 진행하였는데, 같은 오류가 나옵니다. 제대로 작동하기 위해서는 에서 해당 쿼리를 삭제하고 아무것도 남겨놓지 않은 상태인경우에만 제대로 작동합니다. 해결방법은 없을까요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
선생님 CartPage 에서 Empty 에서 윗쪽 간격 벌릴때
<> <br /> <Empty description={false} /> </> 이렇게 하셨는데 <> </> 는 무슨 문법인가요??
- 해결됨따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
[nodemon] app crashed - waiting for file changes before starting... 오류
좋은 강의 정말 잘 듣고 있습니다. 감사합니다. 그런데 제가 [nodemon] app crashed - waiting for file changes before starting... 오류를 종종 겪습니다. 그래서 예전에는 선생님 git hub에서 받았던 파일을 다 지우고 다시 다운받아서 실행하여 오류를 해결했습니다. 그런데 이제는 강의 중간이라 파일을 지우면 여태까지 작성했던 코드들이 다 날라가기 때문에 그렇게 하기가 두렵습니다. 혹시 이렇게 [nodemon] app crashed - waiting for file changes before starting... 오류가 나올 때 어떻게 해야 오류를 잡을 수 있을까요? > react-boiler-plate@1.0.0 dev C:\Users\ADMIN\Desktop\boilerplate-mern-stack-master\boilerplate-mern-stack-master > concurrently "npm run backend" "npm run start --prefix client" [0] [0] ┌────────────────────────────────────────────────────────────┐ [0] │ npm update check failed │ [0] │ Try running with sudo or get access │ [0] │ to the local update config store via │ [0] │ sudo chown -R $USER:$(id -gn $USER) C:\Users\ADMIN\.config │ [0] └────────────────────────────────────────────────────────────┘ [1] [1] > client@0.1.0 start C:\Users\ADMIN\Desktop\boilerplate-mern-stack-master\boilerplate-mern-stack-master\client [1] > react-scripts start [1] [0] [0] > react-boiler-plate@1.0.0 backend C:\Users\ADMIN\Desktop\boilerplate-mern-stack-master\boilerplate-mern-stack-master [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] C:\Users\ADMIN\Desktop\boilerplate-mern-stack-master\boilerplate-mern-stack-master\server\index.js:41 [0] app.post('/api/product/image', ko); [0] ^ [0] [0] ReferenceError: ko is not defined [0] at Object.<anonymous> (C:\Users\ADMIN\Desktop\boilerplate-mern-stack-master\boilerplate-mern-stack-master\server\index.js:41:32) [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] [nodemon] app crashed - waiting for file changes before starting... [1] [HPM] Proxy created: / -> http://localhost:5000 [1] i 「wds」: Project is running at http://192.168.0.4/ [1] i 「wds」: webpack output is served from [1] i 「wds」: Content not from webpack is served from C:\Users\ADMIN\Desktop\boilerplate-mern-stack-master\boilerplate-mern-stack-master\client\public [1] i 「wds」: 404s will fallback to / [1] Starting the development server... [1] [1] Browserslist: caniuse-lite is outdated. Please run: [1] npx browserslist@latest --update-db [1] Compiled with warnings. [1] [1] ./src/components/views/UploadProductPage/UploadProductPage.js [1] Line 2:9: 'Typography' is defined but never used no-unused-vars [1] Line 24:12: 'Images' is assigned a value but never used no-unused-vars [1] Line 24:20: 'setImages' is assigned a value but never used no-unused-vars [1] [1] ./src/components/utils/FileUpload.js [1] Line 52:21: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text [1] Line 53:30: Unexpected template string expression no-template-curly-in-string [1] [1] ./src/components/views/LoginPage/LoginPage.js [1] Line 74:11: 'dirty' is assigned a value but never used no-unused-vars [1] Line 79:11: 'handleReset' is assigned a value but never used no-unused-vars [1] [1] ./src/components/views/RegisterPage/RegisterPage.js [1] Line 92:11: 'dirty' is assigned a value but never used no-unused-vars [1] Line 97:11: 'handleReset' is assigned a value but never used no-unused-vars [1] [1] Search for the keywords to learn more about each warning. [1] To ignore, add // eslint-disable-next-line to the line before. [1] [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) npm run dev 입력 후 나오는 설명들 복사 붙여넣기 했습니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
TypeError: Cannot read property 'userData' of undefined 오류
import React, {useEffect} from 'react' import { useDispatch } from 'react-redux'; import { getCartItems } from '../../../_actions/user_action'; function CartPage(props) { const dispatch = useDispatch(); useEffect(() => { let cartItems = [] if(props.user.userData && props.user.userData.cart){ if(props.user.userData.cart.length > 0){ props.user.userData.cart.forEach(item => { cartItems.push(item.id) }) dispatch(getCartItems(cartItems, props.user.userData.cart)) } } }, [props.user.userData]) return ( <div> CartPage </div> ) } export default CartPage cartPage.js에서 props.user.userData의 userData를 읽지 못할 경우 어디를 수정해야 할까요..??ㅠㅠ
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
heroku 배포 이후
heroku 배포 이후 서버에서 모두 처리는 완벽하게 됐는데 git push heroku master 작업을 하면 로컬에 uploads 폴더가 push 되어서 그런지 수정하고 나면 이미 업로드 되었던 사진들이 삭제가 됩니다. 이걸 해결해보려고 gitignore에서 uploads 폴더 빼고 push했더니 그건 그거대로 오류가 납니다 ㅠㅠ 이미 올려놓은 uploads는 그대로 두고 수정하여 push하려면 어떻게 해야할까요? + push 때문만이 아닌 것으로 확인 되었습니다. 그냥 시간이 지나면 사진이 안보여집니다 ㅠㅠ 다른 질문에 더 자세히 올려 놓았습니다!! 이것 때문에 잠을 못자겠습니다. 살려주세요 +시간이 지나는 것과 별개로 push하면 사진이 바로 사라지는데 이것 또한 위 질문대로 uploads는 그대로 두고 수정하여 재배포 하는 방법이 있을까요? gitignore에서는 이미 push 한 것이라 그런지 계속해서 추적하네요 ㅠㅠ
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
안녕하세요 선생님
다름이 아니라 완성 단계에서 몇가지 다듬고 있는데 글을 입력한 포멧대로 출력하게 하려면 어떻게 해야하는지 궁금합니다. 현재 웹에서는 엔터를 여러번 눌러도 스페이스 하나로 인식되고 태그를 추가해도 안되더라구요 ㅠㅠ 어디를 어떻게 수정하면 출력 할때 입력한 포멧대로 출력이 될까요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
TypeError: props.refreshFunction is not a function 오류
function SearchMenu(props) { const [SearchTerm, setSearchTerm] = useState("") const searchHandler = (event) => { setSearchTerm(event.currentTarget.value) props.refreshFunction(event.currentTarget.value) } return ( <ul class="icon-container"> <li class="icon-item"><SearchOutlined style={{fontSize:'20px'}}/></li> <li class="icon-item"><input class='searchBar' type='text' onChange={searchHandler} value={SearchTerm} style={{width:'80px', height:'20px'}}></input></li> </ul> ) } 위와 같이 코드를 작성하였는데 아래처럼 오류가 뜹니다.. 어떻게 해결해야 될까요?