33,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
useSelector를 사용하여 store 값 가져오기
안녕하세요 선생님 강의는 현재 props에서 store값을 가져오는 데, useSelector를 통해서 가져오는 방법도 있더라구요 구글링을 해서 const temp = useSelector(state => state.user.userDate); 이렇게 작성을 해봤는데 에러가 발생해서요... 혹시 useSelector를 사용하여 store 값을 가져오는 방법을 가르쳐주실수 있을까요??
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
TypeError: Cannot read property 'prototype' of undefined
안녕하세요 TypeError가 일어났는데 원인을 못 찾겠습니다.. 도와주세요ㅠㅠ console 에러는 다음과 같습니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
진행하던 도중 express에서 오류가 난다고 합니다
검색을 해보니 webpack-node-externals를 설치하라고 하는데 맞는걸까요..?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
Attempted import error: 'Icon' is not exported from 'antd'. 에러가 뜹니다.
Failed to compile. [1] ./src/components/views/Footer/Footer.js [1] Attempted import error: 'Icon' is not exported from 'antd'. npm run dev 입력한 뒤 페이지 열리면서 이런 에러가 뜹니다 대처 해본 것은 1. npm install를 root디렉토리랑 clinet 디렉토리 들어가서 해주었고 2. npm install antd도 해보았습니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
제대로 되는거 맞나요?
영상 순서대로 npm install 두번하고 dev.js 만들고 몽고디비 연결해주고 visual 터미널에서 npm run dev하니깐 localhost://3000으로 뜨더니! 로그인도 안했는데 오른쪽 navbar에 logout 만 있어더라구요?? 그리고 터미널 창 보니깐 밑에 처럼 떠서... 그리고 logout 버튼도 안눌리고.. 음 로그인 회원가입도 안되는거 같던데.. 도와주세요 ㅠㅠ PS C:\Users\shin1\OneDrive\바탕 화면\boilerplate-mern-stack-master> npm run dev > react-boiler-plate@1.0.0 dev C:\Users\shin1\OneDrive\바탕 화면\boilerplate-mern-stack-master > concurrently "npm run backend" "npm run start --prefix client" [0] [0] > react-boiler-plate@1.0.0 backend C:\Users\shin1\OneDrive\바탕 화면\boilerplate-mern-stack-master [0] > nodemon server/index.js [0] [1] [1] > client@0.1.0 start C:\Users\shin1\OneDrive\바탕 화면\boilerplate-mern-stack-master\client [1] > react-scripts start [1] [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] (node:18440) 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] Server Listening on 5000 [0] (node:18440) Warning: Accessing non-existent property 'findOne' of module exports inside circular dependency [0] (node:18440) Warning: Accessing non-existent property 'remove' of module exports inside circular dependency [0] (node:18440) Warning: Accessing non-existent property 'updateOne' of module exports inside circular dependency [1] [HPM] Proxy created: / -> http://localhost:5000 [1] i 「wds」: Project is running at http://172.30.1.13/ [1] i 「wds」: webpack output is served from [1] i 「wds」: Content not from webpack is served from C:\Users\shin1\OneDrive\바탕 화면\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/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] [0] MongooseError [MongooseServerSelectionError]: connection <monitor> to 34.202.38.84:27017 closed [0] at new MongooseServerSelectionError (C:\Users\shin1\OneDrive\바탕 화면\boilerplate-mern-stack-master\node_modules\mongoose\lib\error\serverSelection.js:22:11) [0] at NativeConnection.Connection.openUri (C:\Users\shin1\OneDrive\바탕 화면\boilerplate-mern-stack-master\node_modules\mongoose\lib\connection.js:823:32) [0] at Mongoose.connect (C:\Users\shin1\OneDrive\바탕 화면\boilerplate-mern-stack-master\node_modules\mongoose\lib\index.js:333:15) [0] at Object.<anonymous> (C:\Users\shin1\OneDrive\바탕 화면\boilerplate-mern-stack-master\server\index.js:18: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] 'youtubeclone-shard-00-01.nvpjz.mongodb.net:27017' => [ServerDescription], [0] 'youtubeclone-shard-00-02.nvpjz.mongodb.net:27017' => [ServerDescription], [0] 'youtubeclone-shard-00-00.nvpjz.mongodb.net:27017' => [ServerDescription] [0] }, [0] stale: false, [0] compatible: true, [0] compatibilityError: null, [0] logicalSessionTimeoutMinutes: null, [0] heartbeatFrequencyMS: 10000, [0] localThresholdMS: 15, [0] commonWireVersion: null [0] }, [0] [Symbol(mongoErrorContextSymbol)]: {} [0] }
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
리덕스 axios
boiler-plate강의에서 회원가입부분은 리덕스 구현하셨고 해당강의에서 상품정보저장은 axios로 하셨는데 왜 리덕스를 이용하지 않으셨는지 자세한 이유가 궁금합니다 회원가입 정보는 다양한 컴포넌트에서 접근해야하기 때문에 store에 저장한것이고 상품정보는 그렇지 않기 때문에 리덕스를 사용하지 않고 axios만을 이용해서 저장하는것인가요? 아시는분 있으시다면 답글달아주시면 감사하겠습니다
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
이미지 업로드 에러
뒤늦게 시작했는데 오류가 많아서 질문도 많아지네요.. 계속 구글링해보고 비슷한 사례 찾아서 최대한 코드를 추가하고 수정해봐도 고쳐지지 않습니다 ㅠ 504랑 404가 같이 뜨기도 하고 업로드할 사진을 선택하면 화면에 나타나지 않고 오류가 콘솔에 저러한 오류가 생겨요... 확인해보면 uploads 폴더에 이미지는 들어와있는데 아마 백엔드에서 프론트로 전달하는 과정에서 오류가 있는거 같은데 도저히 혼자서 해결이 안되네요 ㅠ
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
에러
안녕하세요 강의 잘 듣고 있습니다 ! 다름이 아니라 uploadproduct.js 파일에서 import { Typography, Button, Form, Input } from 'antd'; 와 함께 const { Title } = Typography; const { Textarea } = Input;입력하고 나머지도 강사님처럼 똑같이 바꿔줬는데 호스팅에 에러가 생겼습니다. 이렇게 뜨고 호스팅 페이지에도 이렇게 떠서 구글링으로 해결방법을 찾아보고는 있는데 도저히 해결을 못하고 있습니다 ㅠ 어떻게 해결할 수 있을까요..
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
Remove 후 렌더링
안녕하세요. 카트 페이지에서 아이템 하나 Remove하고 페이지가 리렌더링될 때 궁금한점이 있습니다. 확인해보니 props.user.userData가 변경되어서 useEffect가 한번 더 실행이 되던데 props.user.userData가 어디에서 어떻게 변경된건가요? 혹시 hoc의 auth.js의 useSelector에서 유져정보 새로 가져와서 카트페이지의 props로 내려간건가요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
몽고디비 연결 성공했지만 실행화면은 뜨지 않습니다
여러가지 오류때문에 계속 창을 닫았다 실행하면서 포트가 겹치는 문제를 해결하고 겨우 npm run backend(이제는 npm run dev라고 치면 이렇게 치라고 나왔어요)로 몽고디비에 연결 성공했는데 강사님처럼 바로 실행화면이 뜨지 않습니다. [nodemon] 2.0.4 [nodemon] to restart at any time, enter `rs` [nodemon] watching path(s): *.* [nodemon] watching extensions: js,mjs,json [nodemon] starting `node server/index.js` Server Listening on 5000 Successfully connected to mongodb! 그래서 직접 포트를 주소창에 입력해서 들어갔는ㅔ도 역시 안되구요.. 좀 기다려도 프론트화면이 실행되어 뜨지 않는데 이건 어떻게 해야하나요 ㅠ
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
😍 onChange에 연결되는 함수 + 그외(2)
안녕하세요. 강사님! 수업 너무 너무 너무 👍 잘 듣고 있습니다. 동영상 보다가 궁금한 점 다음과 같이 남겨봅니다. 1. onChange에 연결되는 함수 onChange={()=>handleToggle(value._id)} 이부분에서 onChange={handleToggle(value.id)}로 바로 함수를 호출하지 않고 화살표 함수를 거쳐서 호출하나요? 2. map 함수에서 소괄호 , 중괄호 사용 list.map((v,i) => (---이부분----) ) 위에 ----이부분----에 들어가는 부분을 소괄호 또는 중괄호로감싸야 되는 규칙이 있나요? 3. props와 state vs 리덕스 store 강사님께서 로그인, 회원가입 부분에서는 리덕스 스토어를 사용하시고 그 이후 작업에서는 props와 state로 작업을 하시는데, 각 저장기능을 어떤 상황으로 구별해서 적용해야 하나요? 리덕스 스토어로 다 가능한데, 강사님께서 선별해서 props를 사용하시는건지, 명확하게 구별이 잘 서지 않습니다. 🥲
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
let formData = new FormData();
FileUpload.js 에서 formData는 이미지를 의미하는 거 같은데 new FormData()를 왜 해주는 건가요..? formData는 변수로 지정이 되서 함수가 아닌거 같은데 FormData()가 무엇을 의미하는지 궁금합니다 ㅠㅠ
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
파일이 폴더에 저장은되는데 브라우저에서는 안보입니다...
계속 강의를 돌려보면서 찾고있기는 한데 이 오류들을 해결할 방법이 보이지 않습니다... 어디를 봐야할까요..?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
이미지 업로드시 플러스 아이콘 없애기
안녕하세요, 혹시 이미지 업로드 시 플러스 아이콘을 없애려면 어떤 기능을 이용하면 될까요? 해당 영역에 미리보기 까지는 id와 preview를 이용해서 만들었는데, 플러스 아이콘을 없애는 방법을 잘 모르겠어요. 이미지 업로드시 style을 display:'none'으로 하는 방향으로 해보고 있는데 구현이 잘 되질 않아 질문드립니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
회원가입이 안됩니다.
회원가입 창 가면 auth 에러, 회원가입 submit 하면 register 오류가 떠요.. 또한 터미널에서는 [nodemon] app crashed - waiting for file changes before starting... 오류가 계속해서 뜹니다 ㅠㅠ 몽고 DB가 연결이 안된건가요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
newImages와 images
선생님 안녕하세요 영상 잘 보고 있습니다. const currentIndex = Images.indexOf(image) let newImages = [...Images] newImages.splice(currentIndex, 1) setImages(newImages) props.refreshFunction(newImages) 여기서 newImages말고 그냥 Images를 사용하면 const currentIndex = Images.indexOf(image) /* let newImages = [...images] */ Images.splice(currentIndex, 1) setImages(Images) props.refreshFunction(Images) 이미지 클릭해서 지울 때 첫번째만 지워지고 두 번째 부터 안 지워지는걸 알았습니다. Images도 이미지 올려서 저장된 이미지들 배열로 알고있는데 Images와 newImages 차이를 잘 모르겠습니다..
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
paypal 버튼 누를 때마다
누를 때마다 A boolean is being passed as a fourch parameter to window.open. this is not used and may cause an exception in a future release 라고 뜨는데 찾아봐도 안되서 도와주세요 결제 로그는 잘 떠요
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
카드 개별 속성 변경
클릭된 카드의 색상을 변경하고 싶은데, 제가 한 거는 모든 카드의 색상이 변경되더라구요. 클릭된 하나의 개별 카드의 속성만 변경하려면 어떻게 해야할까요? getElementById로 해보려니까 맨 첫번 째 카드만 변경되구요.. const [Color, setColor]=useState({ color:'#FFFFF' }); var msg const getbadgepathhandler = (event) => { event.preventDefault(); msg = event.target.getAttribute('data-msg') console.log("event target data : ",event.target); console.log("msg: "+ msg ) document.getElementById('clicked').style.backgroundColor='#DAF7A6' // document.backgroundColor='#DAF7A6' // document.getElementsByName('clicked').style.backgroundColor='#DAF7A6' const style=event.target.getAttribute('style') console.log(style) setColor((Color)=>({ ...Color, color: '#DAF7A6', })) } . . . const renderCards = Badges.map((badge, index) => { return <Col lg={6} md={8} xs={12} key={index}> <Card hoverable={true} // cover={<a href={`/badge/${badge.CLS_badgePath}`} ></a>} cover={<img style={{width:'100%', maxHeight:'150px', backgroundColor: Color.color }} id='clicked' src={`http://114.70.21.121:3000${badge.CLS_badgePath}`} onClick={getbadgepathhandler} data-msg={badge.SEQ} />} // > <Meta title={badge.CLS_title} description={`${badge.CLS_subjectName}`} /> <br/> <p className="level">Level: {`${badge.CLS_level}`}</p> <p>Authenticator: {`${(JSON.parse(badge.CLS_authenticator)).authName}`}</p> </Card> </Col> })
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
루트 디렉토리를 모르겠습니다.
깃허브에서 다운받아서 npm 인스톨하려고 하는데 ㅜㅜ 다 에러가 뜹니다.선생님이 루트디렉토리에 있다고 하셨는데ㅜㅜ전 다운로드 받아서 비쥬어 스튜디오코드로 바로 열었거든요.어떻게 해야 하나요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
setImage 를 사용했을 때, state에 바로 적용이 안되는 이유는 무엇인가요?
안녕하세요. 쉽고 유익한 강의 감사합니다. 강의를 듣다가 궁금한 점이 있어서 질문드립니다. <br /> FileUpload.js에서 setImage 를 사용하여 이미지 state에 이미지를 추가 하였을 때, state에 바로 적용이 안되는 이유가 궁금합니다. <br /> 이 질문을 드리는 이유는 FileUpload.js에서 이미지를 업로드 했을 때, 이미지 state에 새로운 이미지를 추가하였는데, 부모 컴포넌트(UploadProductPage.js)에게 그냥 이미지 state만 보내지 않고, 추가된 이미지도 같이 보내는 이유가 궁금했습니다. <br /> 즉, FileUpload.js의 submitHandler에서 ''' setImages([...Images, response.data.filePath]) ''' 이렇게 해서 이미지 state에 새로 업로드한 이미지를 추가하였으니 부모 컴포넌트에게 state 정보를 보낼 때는 ''' props.refreshFunction([...Images]) ''' 이렇게 보내면 될 것 같은데, 이렇게 하지 않고 ''' props.refreshFunction([...Images, response.data.filePath]) ''' 이렇게 방금 추가한 이미지도 같이 보내야 되는 이유가 궁금합니다.