33,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
파일 src 경로 질문
안녕하세요. 강사님. 아래 코드에 의해 웹 상에 이미지가 띄어지는데, 어떻게 localhost:5000/ 뒤에 바로 이미지 이름을 넣음으로써 접근이 가능한지요? index.js나 routes 파일에서도 따로 설정해 준 부분이 없는 것 같은데, 어떻게 가능한지 궁금합니다. <img style = {{ mindWidth: '300px', width: '300px', height: '240px'}} src={`http://localhost:5000/${image}`}
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
useState 가지고 올 때 왜 {}로 감싸나요?
import React, {useState} from 'react'; 이처럼 useState를 import할 때 왜 {}로 감싸주는지 궁금합니다. React는 {}로 감싸지 않고 그냥 이용하는데요.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
PostSize에 관한 질문이 있습니다.
항상 좋은 강의 감사드립니다. 만약 card가 16개이고 limit=8로 설정해둔다면 처음 불러올때 서버쪽에서 productInfo는 8개이고 더보기 버튼을 눌렀을 때, productInfo는 나머지 card가 8개이니까 역시 8개인가요?? productInfo는 skip과 limit을 거쳐 설정된 갯수인 것 같은데 헷갈려서요!
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
문의사항입니다.
좋은 강의 항상 감사드립니다. 선생님처럼 따라하고 있긴 한데, 다음과 같은 방법으로 해도 똑같이 작동하더라구요. 이렇게 이어나가도 되긴 할까요??
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
사진 업로드 시 에러
영상 5분 40초 정도의 있는 부분에서 에러가 발생합니다. vs code의 콘솔에러는 아래와 같습니다 C:\boilerplate-mern-stack-master\server\routes\product.j [0] return req.json({ success: false, err}) [0] ^ [0] [0] TypeError: req.json is not a function [0] at C:\boilerplate-mern-stack-master\server\routes\pr n-stack-master\node_modules\multer\lib\make-middleware.js:53:37) [0] at listener (C:\boilerplate-mern-stack-master\node_modules\on-finished\index.js:169:15) [0] at onFinish (C:\boilerplate-mern-stack-master\node_modules\on-finished\index.js:100:5) [0] at callback (C:\boilerplate-mern-stack-master\node_modules\ee-first\index.js:55:10) [0] at IncomingMessage.onevent (C:\boilerplate-mern-stack-master\node_modules\ee-first\index.js:93:5) [0] at IncomingMessage.emit (events.js:327:22) [0] at endReadableNT (_stream_readable.js:1327:12) [0] at processTicksAndRejections (internal/process/task_queues.js:80:21) 웹 콘솔에서는 아래와 같은 에러가 발생합니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
배열에 담김 값도 search를 하고싶은데 어떻게 해야하나요?
_id : 5fb52288802e5a696803b338 price : 0 images : Array 0 : "uploads\1605706350013_pnkisq_beaj-0_logo.gif" sold : 0 views : 0 positions : 7 keywords : Array 0 : "aaa" 1 : "fdfdsf" 2 : "asdas" 3 : "asd" writer : 5fad28cb2b442d67dcd773db title : "aaa" description : "aaa" deadline : 2020-11-17T15:00:00.000+00:00 createdAt : 2020-11-18T13:32:56.573+00:00 updatedAt : 2020-11-18T13:32:56.573+00:00 __v : 0 keywords 안에 담겨있는 값들도 같이 검색하고 싶습니다
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
배포와 관련해 궁금한 점이 있습니다.
안녕하세요!이렇게나 유익하고 설명도 간단한 좋은 강의 만들어주셔서 감사합니다! 올해 안에 저만의 쇼핑몰을 직접 만들어보고 싶다는 목표가 있습니다. 상품페이지, 게시판, 댓글 기능 등이 있는 프론트 위주의 쇼핑몰을 만들어보고 싶은데, 강사님의 강의만 듣고도 실제 서비스 배포가 가능할까요? 또한, CSRF나 XSS에 대해 보안에 걱정이 되는데 괜찮을까요? ㅜㅜ 다시 한 번 감사드립니다~! 다른 강의들도 열심히 듣겠습니다! 좋은 하루 보내세요~!
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
npm run dev 시에 warning 발생
안녕하세요. 선생님. npm run dev 시에 아래와 같은 warning이 발생합니다. 무엇이 문제일까요?? node 버전이 선생님과 달라서 그러는것일지요? [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:12588) 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:12588) Warning: Accessing non-existent property 'findOne' of module exports inside circular dependency [0] (node:12588) Warning: Accessing non-existent property 'remove' of module exports inside circular dependency [0] (node:12588) Warning: Accessing non-existent property 'updateOne' of module exports inside circular dependency [0] MongoDB Connected... [1] [HPM] Proxy created: / -> http://localhost:5000 [1] i 「wds」: Project is running at http://192.168.0.100/ [1] i 「wds」: webpack output is served from [1] i 「wds」: Content not from webpack is served from C:\boilerplate-mern-stack-master\client\public [1] i 「wds」: 404s will fallback to / [1] Starting the development server...
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
선생님 Meta라는 키워드는 어디서 가져오는건가요??
제곧내 입니다. .Meta라는 키워드가 없다며 오류가 나서 일단 지우고 수업을 듣고 있는데 어디서 제가 놓친것인지 잘 모르겠네요.. 원래 어딘가 내장되어 있는 키워드인건가요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
확인 버튼을 눌러도 반응이 없습니다...
npm run dev도 다시 한 다음에 해봐도 업로드 페이지에서 '확인' 버튼을 눌렀을 때 똑같이 반응이 없습니다.. ㅠㅜ강의 여러번 보면서 코드 비교도 해봤는데 이러니까 이상하네요 ㅠㅜㅠ
- 따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
redux hoc에 대해서 질문입니다!
삭제된 글입니다
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
상품 삭제 진행중 app crash
안녕하세요 상품 삭제를 진행하는 도중에 app crash가 일어나 처음부터 천천히 찾아보는데 잘 못찾겠네요ㅠㅠ 왜 이렇게 되었는지 알려주시면 감사하겠습니다 git : https://github.com/nam2350/shopingmall
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
안녕하세요 선생님 props.history.push 관련 질문드립니다
안녕하세요 선생님 add to cart 버튼에 onClick method로 메인화면으로 이동하게끔 하려는데 props.history.push("/")로 했는데 안되면 어떻게 처리해야 하나요??ㅠㅠ const clickHandler = () => { dispatch(addToCart(props.detail._id)) props.history.push('/') }
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
signup 과정에서 오류가 발생..
선생님 6분 10초쯤까지 잘 따라가다가 이런 signup 과정에서 submit을 누르면 이런 오류가 계속 발생합니다..
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
안녕하세요 선생님 checkbox질문입니다ㅠㅠㅠ
안녕하세요 선생님 수업 정말 감사하게 잘듣고있는 한 학생입니다. 저는 toggleHandler를 선언할때 newChecked 배열을 쓰지않고 바로바로 Checked에 접근했는데 checked함수까지 선생님과 똑같이 설정하고 테스트해봣는데 정상적으로 작동하지 않아서요ㅠㅠ 혹시 newChecked로 접근하는 것과 저처럼 바로 setChecked로 접근하는 차이가 있을까요??ㅠㅠ const toggleHandler = (id) => { let currentIndex = Checked.indexOf(id) //let newChecked = [...Checked] if (currentIndex === -1) { setChecked([...Checked, id]) //newChecked.push(id) } else { Checked.splice(currentIndex, 1) //newChecked.splice(currentIndex, 1) } //setChecked(newChecked) }
- 해결됨따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
질문있습니다!
선생님 강의에 늘 포함되어있는 서비스워커 코드부분을 웹 배포 이후 속도개선을 위해 register로 바꿔보려하는데요. 몇가지 질문이 있습니다. 제가 구글링 한 바론 로드 속도 증가 , 오프라인에서도 뭔가가 이점이 있는걸로 알고있는데요. 결론적으론 제 웹의 로드속도를 증가시키고 싶은데요. 서비스워커 unregister로 되있는부분을 register로 바꾸면 작동되나요? js파일을 보니깐 process.env.PUBLIC_URL 이런 값들은 따로 수정안해주고 그냥 register로만 바꾸면 작동하는지요? 혹시 이걸 사용함으로써 안고가야하는 마이너스 부분도 있을까요?!
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
선생님 몽고디비 연결관련해서 질문있습니다 ㅠㅠㅠㅠ
상품을 한꺼번에 업로드하고 싶어서 찾다가 mongofiles 라는걸 이용하게 됐는데요.. 이게 local server에서는 저장이 잘되는데 atlas에 연결만 하면 하단과 같은 에러가 뜨는데 왜 이런지 알 수 있을까요 ?? ㅠㅠㅠㅠ 연결은 이런식으로 했습니다.. 이것저것 다 해봤는데 도저히 이유를 못찾겠어서요 ㅜㅜ mongofiles "mongodb+srv://<username>:<pwd>@test.xgkqo.mongodb.net/test?retryWrites=true&w=majority" --username <username> [에러 내용] error connecting to host: could not connect to server: connection() : auth error: sasl conversation error: unable to authenticate using mechanism "SCRAM-SHA-1": (AuthenticationFailed) Authentication failed
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
안녕하세요 개발자님
안녕하세요 질문이 있는데요! 제가 개발자님의 코드를 적용하여 다른걸 만들어봤는데 오류가 나서 질문드립니다. import React, { useEffect, useState } from 'react'; import axios from "axios"; import { Icon, Col, Card, Row, Carousel } from 'antd'; import Meta from 'antd/lib/card/Meta'; import ImageSlider from '../../utils/ImageSlider'; import SearchFeature from './Sections/SearchFeature'; const LandingPage = () => { const [Products, setProducts] = useState([]); const [Skip, setSkip] = useState(0); const [Limit, setLimit] = useState(8); const [SearchTerm, setSearchTerm] = useState(""); const [score, setScore] = useState(0); const getProducts = (body) => { axios.post('/api/product/products', body) .then(response => { if (response.data.success) { setProducts(response.data.productInfo) } else { alert(" 상품들을 가져오는데 실패 했습니다.") } }) } const renderCards = Products.map((product, index) => { console.log('*** : ', product) const title = product.title ?? ''; const splitTitle = title.split(','); var _score = 0; const temp = splitTitle.map((str, i) => { const _str = str; if(_str === '철' || _str === '금' || _str === '불'){ _score += 1; } }); console.log('_score : ',_score) setScore(_score) <<< 이부분 return <> <Col lg={6} md={8} xs={24} key={index }> <Card cover={<a href={`/product/${product._id}`} ><ImageSlider images={product.images} /></a>} > <Meta title={product.description} // description={`$${product.description}`} /> </Card> </Col> </> }) const updateSearchTerm = (finalSearch) => { console.log("finalSearch",finalSearch); let body = { skip: 0, limit: Limit, searchTerm: finalSearch } setSkip(0) setSearchTerm(finalSearch) getProducts(body) } return ( <div style={{ width: '75%', margin: '3rem auto' }}> <div style={{ textAlign: 'center' }}> <h2>Let's Travel Anywhere <Icon type="rocket" /> </h2> </div> <div style={{ display: 'flex', justifyContent: 'flex-end', margin: '1rem auto' }}> {/* <SearchFeature refreshFunction={ updateSearchTerm} /> </div> */} <SearchFeature updateSearchTerm={filters => updateSearchTerm(filters)} /> </div> <Row gutter={[16, 16]} > {renderCards} </Row> <br /> </div> ) } export default LandingPage import React, { useEffect, useState } from "react"; import { Input } from "antd"; const { Search } = Input; function SearchFeature(props) { const [searchTerm, setSearchTerm] = useState({ s1: "", s2: "", s3: "", }); console.log("searchTerm :::", searchTerm); const searchHandler = (key, data) => { setSearchTerm({ ...searchTerm, [key]: data, }); }; const onSubmitHandler = (event) => { event.preventDefault(); const postData = searchTerm; //if(예외처리) props.updateSearchTerm(postData); }; return ( <div> <form onSubmit={onSubmitHandler}> <div> <Search placeholder="ingredients1" onChange={(e) => searchHandler("s1", e.target.value)} style={{ width: 200 }} value={searchTerm.s1} /> </div> <div> <Search placeholder="ingredients2" onChange={(e) => searchHandler("s2", e.target.value)} style={{ width: 200 }} value={searchTerm.s2} /> </div> <div> <Search placeholder="ingredients3" onChange={(e) => searchHandler("s3", e.target.value)} style={{ width: 200 }} value={searchTerm.s3} /> </div> <button>변신!</button> </form> </div> ); } export default SearchFeature; 제가 이것을 응용해봤는데요 제가 하려는 것은 제가 입력한 세개의 값이 만약 철 금 불 이라고 가정했을 시 디비에 철 금 불 이라는 글자가 있을때 제가 입력한 글과 디비에 있는 글이 맞은 수 대로 score에 setScore를 통해서 저장해주려고 하거든요.. 값은 잘 들어오고 console에도 값이 맞은 글자 수 대로 잘 들어옵니다 이것 말고는 다른페이지의 코드도 거의 같습니다. 그런데 setScore(_score)를 하여 state값에 스코어를 저장하려하면 이상하게 콘솔에 수많은 score값이 찍히며 Error: Too many re-renders. React limits the number of renders to prevent an infinite loop. 이러한 에러가 뜹니다... 이것을 해결하려면 어떻게 해야할까요...
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
실습 코드를 node 12에서 돌리려면 dependencies를 어떻게 해야 하나요?
package.json 에서 node와 npm 버전을 12로 변경해 주었는데, npm install로 dependencies에 있는 패키지를 인스톨 하려고 하면 에러가 발생합니다. package들의 버전이 npm 12에 맞지 않아서 발생하는 문제인지요? 그럼 실습 코드는 npm 10에서만 동작하는건지, 아니면 패키지 버전들을 일일이 변경하면 npm12에서 동작이 가능한지 궁금합니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
const에 관한 질문입니다.
안녕하세요. 너무 기초적인 질문이지만,ㅠㅠ body 를 정의해줄 때 const를 쓰는 이유가 무엇인가요? const는 제가 알기로는 상수라서 재할당이 안되는데, 그럼 처음 upload를 했을 때 빼고는 두번째, 세번째 상품을 업로드할 땐 다시 body의 값을 수정하는 것이 불가능한 것 아닌가요? 또, let을 쓰지 않는 이유도 궁금합니다. 감사합니다!