33,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
AWS 배포관련 문의 드립니다.
수고하십니다. 강의 열심히 듣고 있습니다.항상 친절한 답변 감사하게 생각하고 있습니다.아울러 너무 많은 질문을 드려서 죄송하게 생각하고 있습니다. 이 챕터와는 무관한 내용의 질문을 드립니다. 배포관련 유투브에서 강사님의 영상을 보고 AWS에 배포를 해 보았습니다. 결론은 실패?^^했습니다.몽고디비에 접속은 된다고 콘솔 메세지는 나오는데 405에러로 실제 로그인 및 회원가입도 안되네요 AWS 배포 관련 질문 드립니다.1. 소스내에 있는 localhost를 AWS의 퍼블릭 도메인으로 변경해야 하죠? 예를 들어 FileUpload.js의 아래와 같은 localhost구문을 54.249.xx.xxx 처럼 변경하는거죠? 변경전 : src={`http://localhost:5000/${image}`}/> 변경후 : src={`http://54.249.xx.xxx/${image}`}/> ※localhost를 수정한 파일 setupProxy.js FileUpload.js ImageSlider.js ProductImage.js 2. 몽고디비 접속정보는 AWS에 올리면 prod.js를 볼것같은데 헤로쿠에서 MONGO_URI를 설정했던것 처럼 AWS에서도 별도의 설정이 필요하지 않나요? prod.js :mongoURI:process.env.MONGO_URI3. 시스템 폴더 구조가 개발때와 틀려져서 서버의 index.js를 아래와 같이 수정했습니다. 그리고 강사님은 server안에 server 폴더를 복사하셨는데 전 개발과 동일하게 server 폴더는 하나만 두었습니다. 수정한 내용이 맞는지 확인 부탁 드립니다. app.use(express.static("client/build") → client/deploy ~path.resolve(__dirname, "../client", "build"~ → ..client", "deploy"~ 4. 마지막으로 커멘트 보니깐 어떤분이 default.config에 proxy by pass를 지정해야 한다고 해서 동일하게 했지만 해결되지 않았습니다. 도움 부탁 드립니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
npm run dev 오류
1. npm run dev 하면 >react-boiler-plate@1.1.0dev >concurrently "npm run backend" "npm run start --prefix client" 2. 순서대로 명령어 입력시
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
로그인error
안녕하세요 client - netlify.com server - heroku 배포후 CORS 오류, 로그인 시 page not found 오류 가 납니다. 어느 부분을 확인 하여야 하는 지 알려 주시면 감사하겠습니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
상품의 상세정보를 데이터베이스에서 가져오기에서...서버로 요청보는거..
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. DetailProductPage.js에서 import React, { useEffect } from 'react' import axios from 'axios' function DetailProductPage(props) { const productId = props.match.params.productId console.log(productId) useEffect(() => { axios.get(`/api/product/products_by_id?id=${productId}&type=single`) .then(response => { if(response.data.success){ console.log('response.data', response.data) }else{ alert('상세 정보 가져오기를 실패했습니다.') } }) },[]) return ( <div style={{fontSize: "100px"}}> DetailProductPage </div> ) } export default DetailProductPage 서버에서는 router.get('/products_by_id', (req, res) => { let type = req.query.type let productId = req.query.id //productId를 이용해서 DB에서 productId와 같은 상품의 정보를 가져온다. Product.find({ _id: productId }) .populate('wirter') .exec((err, product) => { if(err) return res.status(400).send(err) return res.status(200).send({ success: true, product }) }) }) 이렇게 했는데 콘솔 창에 자꾸 xhr.js:178 GET http://localhost:3000/api/product/products_by_id?id=61a724c07a509357ff088d79&type=single 400 (Bad Request) dispatchXhrRequest @ xhr.js:178 xhrAdapter @ xhr.js:12 dispatchRequest @ dispatchRequest.js:52 Promise.then(비동기) request @ Axios.js:61 Axios.<computed> @ Axios.js:76 wrap @ bind.js:9 (익명) @ DetailProductPage.js:12 commitHookEffectList @ react-dom.development.js:22030 commitPassiveHookEffects @ react-dom.development.js:22064 callCallback @ react-dom.development.js:336 invokeGuardedCallbackDev @ react-dom.development.js:385 invokeGuardedCallback @ react-dom.development.js:440 flushPassiveEffectsImpl @ react-dom.development.js:25392 unstable_runWithPriority @ scheduler.development.js:697 runWithPriority$2 @ react-dom.development.js:12149 flushPassiveEffects @ react-dom.development.js:25361 performSyncWorkOnRoot @ react-dom.development.js:24251 (익명) @ react-dom.development.js:12199 unstable_runWithPriority @ scheduler.development.js:697 runWithPriority$2 @ react-dom.development.js:12149 flushSyncCallbackQueueImpl @ react-dom.development.js:12194 flushSyncCallbackQueue @ react-dom.development.js:12182 unbatchedUpdates @ react-dom.development.js:24439 legacyRenderSubtreeIntoContainer @ react-dom.development.js:27527 render @ react-dom.development.js:27608 ./src/index.js @ index.js:50 __webpack_require__ @ bootstrap:785 fn @ bootstrap:150 1 @ serviceWorker.js:137 __webpack_require__ @ bootstrap:785 checkDeferredModules @ bootstrap:45 webpackJsonpCallback @ bootstrap:32 (익명) @ main.chunk.js:1 createError.js:16 Uncaught (in promise) Error: Request failed with status code 400 at createError (createError.js:16) at settle (settle.js:17) at XMLHttpRequest.handleLoad (xhr.js:61) 이렇게 오류가 뜨면서 서버로 보낸 요청 자체가 잘못되었다고 하는데....아무리 구글링해도 안나오고..미치겠네요ㅠㅠㅠ
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
build 방법에 관해 질문 드립니다.
좋은 강의 감사한 맘으로 열심히 듣고 있습니다.빌드에 관한 질문을 드립니다. 강의를 빌드해서 깃헙의 웹 서비스에서 뛰어보려고 하는데현재 프로젝트 구조가 client / server로 되어 있고build script는 client의 package.json에만 정의 되어 있습니다. 이런 경우는 어떻게 빌드를 해야 하는지 알려주시면 감사하겠습니다.. 바쁘시겠지만 답변 부탁 드리겠습니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
빌드해서 AWS나 깃헙에 올리는 방법 질문 드립니다.
강의 죽어라 듣고 있습니다.뭐 잘 모르면 죽어라 다시듣고 들을수 밖에 없겠죠지금 소스를 실제 AWS나 깃헙에 올려서 돌려보고 싶습니다.예전 도커 강의에서 하시는 방법을 보긴 봤는데 AWS나 깃헙에 올리려면 어떻게 해야 하는지 알려주시면 감사하겠습니다. 부탁 드리겠습니다.
- 해결됨따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
업로드 페이지 구현한 뒤 대륙을 선택하면 선택한 대륙과 다르게 state에 값이 들어가네요 ㅠㅠ
강사님 안녕하세요~ 강의 잘 보고 있습니다:) 제가 업로드 페이지를 구현한뒤 asia 대륙을 선택하여서 업로드 했는데 다른 대륙으로 업로드 되어서 콘솔로 확인해본 결과 대륙을 선택하는 폼에서 대륙을 선택하면 제가 실제 선택한 대륙과는 다른 값이 state에 저장되는데 어떤것이 문제 인지 잘 모르겠습니다ㅠㅠ (아래 스크린샷과 같이 콘솔로 찍어보면 제가 선택한 대륙 이벤트 값과 state에 저장 되는 값이 다르네요) 이렇게 선택할때마다 실제 선택한 값과 state에 저장되는 값이 서로 다릅니다 ㅠㅠ 작성한 코드는 이렇습니다~ 감사합니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
배열을 쿼리로 넘기면 문자열로 넘겨지나요?
user_actions 클라이언트부분에서 export function getCartItem(cartId,userCart){ console.log('cartProductId' , cartId) const response = axios.get(`/api/product/products_id?id=${cartId}&type=array`) //cartProductId배열정보지만 query로 넘기면 문자열로 넘어감 .then(response => //cartProductId와 똑같은 product collection에서 동일한 제품을 가져온후 quantity 정보를 넣어줌 response.data); return { type: GET_CART_ITEMS, payload: response } } cartId 는 배열형태였는데 서버 라우트부분에서 console.log('req.query.id' , req.query.id) 찍으니까 문자열이 나오더라구요
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
업로드한 이미지가 다르게 나옵니다
사진처럼 폼이 아래에 있는데 아래는 제가 작성한 코드입니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
'number' 형식에 'map' 속성이 없습니다.
'number' 형식에 'map' 속성이 없습니다. {Continents.map((item) => ( <option key={item.key} value={item.key}> {item.value} </option> ))} 여기서 continents가 number 타입이라 map 이 지원이 안된다는데... 어떻게 하나요??
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
업로드페이지 마지막강의에서
7분 45초쯤에 state정보 확인하는 프로그램은 무엇을 다운받아야 되죠?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
loadMore 및 기타 질문입니다.
수고하십니다. 강의에 관한 질문 드립니다. LandingPages에서 1. 더보기 버튼을 눌렀을때 loadMore를 true로 설정한 후, 이 값을 변경하는 곳이 있는지요?{PostSize >= Limit &&...}2. && 우측에 나오는 게 조건이 아닌 html인데 무엇과 무엇이 참일때 버튼을 보이게 하라는 건지 잘 모르겠습니다.3.ImageSlider.js의 image주소가 localhost인데 실제 서버에 올렸을때는 https://xxx.xxx./${images}로 접근이 가능한지요? 바쁘시겠지만 확인하시면 답변 부탁 드리겠습니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
이러한 에러가 뜨는 이유는 먼가요 그리고 이미지를 올리면 계속 alert 문구가 뜹니다.
Server Listening on 5000 [0] { MongooseServerSelectionError: connection <monitor> to 54.144.208.74:27017 closed [0] at new MongooseServerSelectionError (C:\Users\Admin\boilerplate-mern-stack\node_modules\mongoose\lib\error\serverSelection.js:22:11) [0] at NativeConnection.Connection.openUri (C:\Users\Admin\boilerplate-mern-stack\node_modules\mongoose\lib\connection.js:823:32) [0] at Mongoose.connect (C:\Users\Admin\boilerplate-mern-stack\node_modules\mongoose\lib\index.js:333:15) [0] at Object.<anonymous> (C:\Users\Admin\boilerplate-mern-stack\server\index.js:19:4) [0] at Module._compile (internal/modules/cjs/loader.js:776:30) [0] at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10) [0] at Module.load (internal/modules/cjs/loader.js:653:32) [0] at tryModuleLoad (internal/modules/cjs/loader.js:593:12) [0] at Function.Module._load (internal/modules/cjs/loader.js:585:3) [0] at Function.Module.runMain (internal/modules/cjs/loader.js:829:12) [0] at startup (internal/bootstrap/node.js:283:19) [0] at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3) [0] message: 'connection <monitor> to 54.144.208.74:27017 closed', [0] name: 'MongooseServerSelectionError', [0] reason: [0] TopologyDescription { [0] type: 'ReplicaSetNoPrimary', [0] setName: null, [0] maxSetVersion: null, [0] maxElectionId: null, [0] servers: [0] Map { [0] 'project-shard-00-00.hlpbc.mongodb.net:27017' => [ServerDescription], [0] 'project-shard-00-02.hlpbc.mongodb.net:27017' => [ServerDescription], [0] 'project-shard-00-01.hlpbc.mongodb.net:27017' => [ServerDescription] }, [0] stale: false, [0] compatible: true, [0] compatibilityError: null, [0] logicalSessionTimeoutMinutes: null, [0] heartbeatFrequencyMS: 10000, [0] localThresholdMS: 15, [0] commonWireVersion: null }, [0] [Symbol(mongoErrorContextSymbol)]: {} }
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
이러한 에러가 뜹니다..
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지Server Listening on 5000 [0] { MongooseServerSelectionError: connection <monitor> to 54.144.208.74:27017 closed [0] at new MongooseServerSelectionError (C:\Users\Admin\boilerplate-mern-stack\node_modules\mongoose\lib\error\serverSelection.js:22:11) [0] at NativeConnection.Connection.openUri (C:\Users\Admin\boilerplate-mern-stack\node_modules\mongoose\lib\connection.js:823:32) [0] at Mongoose.connect (C:\Users\Admin\boilerplate-mern-stack\node_modules\mongoose\lib\index.js:333:15) [0] at Object.<anonymous> (C:\Users\Admin\boilerplate-mern-stack\server\index.js:19:4) [0] at Module._compile (internal/modules/cjs/loader.js:776:30) [0] at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10) [0] at Module.load (internal/modules/cjs/loader.js:653:32) [0] at tryModuleLoad (internal/modules/cjs/loader.js:593:12) [0] at Function.Module._load (internal/modules/cjs/loader.js:585:3) [0] at Function.Module.runMain (internal/modules/cjs/loader.js:829:12) [0] at startup (internal/bootstrap/node.js:283:19) [0] at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3) [0] message: 'connection <monitor> to 54.144.208.74:27017 closed', [0] name: 'MongooseServerSelectionError', [0] reason: [0] TopologyDescription { [0] type: 'ReplicaSetNoPrimary', [0] setName: null, [0] maxSetVersion: null, [0] maxElectionId: null, [0] servers: [0] Map { [0] 'project-shard-00-00.hlpbc.mongodb.net:27017' => [ServerDescription], [0] 'project-shard-00-02.hlpbc.mongodb.net:27017' => [ServerDescription], [0] 'project-shard-00-01.hlpbc.mongodb.net:27017' => [ServerDescription] }, [0] stale: false, [0] compatible: true, [0] compatibilityError: null, [0] logicalSessionTimeoutMinutes: null, [0] heartbeatFrequencyMS: 10000, [0] localThresholdMS: 15, [0] commonWireVersion: null }, [0] [Symbol(mongoErrorContextSymbol)]: {} } 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
mongodb 관련 질문입니다
안녕하세요. 좋은 강의 항상 잘 듣고 있습니다. 현재 구조를 보면 몽고디비 연결은 서버가 올라갈때 한번 연결해 놓고 쓰고 있는 구조인데 이전에 rdb 쓸때 구조를 생각해보면 http로 라우터에 요청이 올때 연결을 하고 정보주고 끊어주는 구조를 많이 사용했었습니다. 실제 현업에서는 라우터에서 연결하고 끊어주는지 아니면 샘플예제처럼 서버에 오픈할때 연결하고 쓰는지가 궁금합니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
onClick및 onChange에 관한 질문
수고하십니다. 질문 드립니다. 강의중 onClick={() => xxxHandler(image)}에 관한 부분은 타 질문을 통해서 알았습니다 1. 그렇다면 UploadProductPage.js의 onChange={xxxhandler}과 위의 onClick에 정의한 것과는 무엇이 틀린가요?혹 동작은 같은데 인수를 넘기기 위해서는 화살표 함수를 써야 하는건지요? 2. 삭제 처리가 화면의 이미지만 삭제 하는거인거 같은데 서버에 올라가 파일을 삭제하는데 도움이 될만한 정보가 있으면 알려주시면 감사하겠습니다. 두서없는 질문 죄송합니다만 메세지 확인하시면 답변 부탁 드리겠습니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
image upload에 관해서
강의 열심히 듣고 잇습니다.파일을 업로드 할때 몇가지 문의 드립니다.product.js에서 upload할때 res.req.file.path 와 같은 구문이 있는데 1. response안의 request가 있다는 의미인가요?2. 그렇다면 이렇게 res안에 req를 어디에서 넣어 주는가요?3. 그리고 req에 파일패스, 파일이름이 있는데 이거는 또 어디에서 넣어주는건지요 FileUpload에서 image를 서버에 보내서 저장을 하고 성공했을때 처리하는 로직에 관한 질문 드립니다. 4. 첫번째 이미지 파일을 backend에 저장하고 Images를 콘솔에 출력해 보면 setImages로 파일경로를 추가 했는데 아무것도 안찍힙니다. 그런데 두번째 이미지를 저장하고 출력해보면 첫번째 이미지의 파일경로가 Images에 들어 있는걸로 콘솔에 출력이 됩니다. 첫번째 이미지의 정보가 두번째 이미지의 정보를 backend에 저장 후에 state에 저장 되는게 잘 이해가 안되네요 5. image를 화면에 보여줄때 src에 파일경로를 넣었는데서버에서 public으로 오픈 하지않은 폴더의 파일에 직접 접근할수 있는가요? 답변 부탁 드리겠습니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
useEffect를 왜 사용하시는 건가요??
렌더링 이후에 처리할 작업들을 사용하는 용도로 알고 있습니다! (api를 통해 값을 불러올 때 사용하셨는데) 특별한 이유가 있으신가요??
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
회원가입시 undefined이 나옵니다
안녕하세요 회원가입 submit 버튼을 누르면 undefined 하고 나오는데 콘솔이랑 터미널에 아무런 반응이 없어서 어떻게 해야할지 모르겠습니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
.exec()에 관한 질문이 있습니다.
안녕하세요. 좋은 강의 감사드립니다. 동영상 5분 52초에서 .populate를 사용하여 writer의 모든 정보를 가져온 뒤 .exec()를 사용하여 쿼리를 돌린다고 표현해주셨는데, "쿼리를 돌린다" 라는 말이 어떤 의미인지 잘 모르겠습니다. 그리고 .exec()에 대해서 인터넷에서 다 찾아보았지만 정확하게 어떤 메소드인지 나오지가 않는데, 혹시 참고할 만한 내용이 있는지 알려주시면 감사하겠습니다. 감사합니다!