33,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
userId를 가져와 product의 writer와 비교하는 방법
안녕하세요 선생님! 언제나 질문을 올리면 항상 정성스럽게 답변달아주셔서 감사합니다! 이번에 제가 마이페이지를 만들어 로그인한 유저의 id를 이용해 그 유저가 업로드한 상품들을 웹페이지에 출력을하도록 만들려 합니다. routes/product에 새로운/api/product/products_by_user를 그대로 복사하긴 했는데 이 함수의 원리는 잘 모르겠어서 헷갈립니다.. 새로 mypage.js를 만들어 주었는데 그 곳에서 axios.get을 활용해 user의 고유 id를 이용해 상품의 writer 필드와 일치하는 상품만 출력을 하도록 만들고 싶습니다. mypage.js에서 userId를 props.match.params.userId로 선언해주고 콘솔에 찍어보았더니 userId를 갖고 오지 못해 error 500 이 납니다. userId를 갖고오는 법과 /api/product/products_by_id의 작동법을 알려주실 수 있으신가요? 혹시나 해서 제 연습용 git을 올려봅니다!! 언제나 감사합니당!! https://github.com/16leehyunkyung/react-shop-hk.git
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
현재 이 강의 5분까지 진행했습니다.
5분40초 내용처럼 파일을 올리면 파일올리는데 실패햇다는 alert창이 나옵니다. ㅠㅠ 콘솔에는 아무것도 안찍혀있구요.. 도움부탁드립니다. 제 깃허브 주소입니다! https://github.com/jungsikjeong/shoppingmall_Example + 프론트 단에서 아래처럼 코드를짜서 해결하려고 노력해봤습니다. const dropHandle = async (files) => { let formData = new FormData(); const config = { header: { 'content-type': 'multipart/form-data' }, }; formData.append('file', files[0]); await Axios.post('/api/product/image', formData, config).then( (response) => { try { const result = response.data; console.log(result); // if (response.data.success) { // console.log(response.data); // } else { // alert('파일을 저장하는데 실패했습니다.'); // } } catch (err) { console.error(err); } } ); }; 결과는 콘솔에 이렇게찍혔는데요, 앞으로 어떻게 해야하는지 감이안잡힙니다 ㅠㅠ
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
선생님 req,res의 정의가 헷갈리는데 다시한번만 짚고넘어갈수있을까요?
req는 서버에서 프론트가 요청한 것을 뜻하는거고 res는 서버에서 프론트가 요청한것에 응답해줄때 사용하는건가요? 근데 upload(req, res, (err) => { if (err) { return req.json({ success: false, err }); } return res.json({success:true,filePath:res.req.file.path , fileName: res.}) }); 에러를 처리할땐 왜 req.json인지 궁금합니다.ㅠ
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
존경하는 선생님, 왜 루트 디렉토리에서 멀터를 다운받는지 궁금합니다.
멀터는 서버쪽에서 사용하는건데, 그럼 cd server에서 다운받아야하지않나욤?? 혹시 루트디렉토리의 패키지제이슨에서의 어떤 설정땜에 그런가요?? 서버와 프론트 둘다에서 사용되게끔 해주는 설정을 하신건가요? 너무너무 궁금해요!
- 따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
이미지가 나타나지 않습니다. 이미지 경로가 /가 아니라 \로 표시됩니다
삭제된 글입니다
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
선생님, 관리자가입은 어떤식으로 하나요?
포스트맨으로 직접 회원가입을 시켜줘야하나요??
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
이 부분 연결이 어떻게 되는지 잘 이해가 가질 않네요 ..ㅠ
두 사진이 어떻게 이해가 가질 않아서 질문드려요! 저렇게 자식 컴포넌트에 값을 넘겨줄 때에 list={price}처럼 사용한다고 알고 있는데 어떻게 자식 컴포넌트에서 props를 이용해서 부모컴포넌트로 값을 넘겨주는건가요??
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
continentChangeHandler 관해 질문드립니다.
예전 강의를 보고 만들었을 때 continentChangeHandler 에 값을 value로 지정해주었는데 그러면 대륙 이름이 들어가는거라 스트링값인데 지금 강의에선 넘버로 숫자를 넘겨주더라구요. 혹시 저 헨들링에서 값이 벨류가 아니라 키 값을 지정해주는게 맞는건가요??
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
저 역시 ECONNREFUSED 에러가 생깁니다.
[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) 이러한 에러 메세지 때문에 초반부터 더이상 진행을 못하고 있습니다. nodejs.org 에러 페이지에가서 "ECONNREFUSED " 를 조회해보니 ECONNREFUSED (Connection refused): No connection could be made because the target machine actively refused it. This usually results from trying to connect to a service that is inactive on the foreign host.이렇게 나옵니다.번역을 해보니"ECONNREFUSED (연결 거부): 대상 기계가 적극적으로 거부했기 때문에 연결이 이루어질 수 없습니다. 이는 일반적으로 외국 호스트에서 비활성 서비스에 연결하려고 하면 됩니다."이렇게 나오네요!!!결국에 mongodb 무료 연결에서 문제가 생겨서 그런 걸까요?dev.js 에서 module.exports = { mongoURI:'mongodb+srv://ksk:0613kskk^^@boilerplate.2dskb.mongodb.net/<dbname>?retryWrites=true&w=majority' } 이렇게 입력 했습니다. 지금 몇 주동안 이것만 붙잡고 있습니다.계속 진행 할 수 있도록 도와주세요.참고로 다른 인강들이나 파이썬 등을 쫓아하면서 localhost 사용을 했었는데 혹시 충돌문제 일 수도 있나요???위도우에서 nodejs 포트 변경은 어떻게 하는 건가요???아시는 분들 답변 좀 부탁드릴게요.진도를 못나가고 있습니다. ㅠㅠ
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
multer 사용한 이미지 업로드 관련 질문입니다
업로드 페이지의 이미지 업로드 하는 부분에서 테스트시 아래와 같은 오류가 발생합니다 [0] [Error: ENOENT: no such file or directory, open 'uploads/1595003650637_IMG_6340.jpg'] { [0] errno: -2, [0] code: 'ENOENT', [0] syscall: 'open', [0] path: 'uploads/1595003650637_IMG_6340.jpg', [0] storageErrors: [] [0] } 강의의 내용처럼 uploads라는 폴더도 만들어주고 테스트를 하는데 같은 오류만 계속 발생하네요 ㅜㅜ destination: (req, file, cb) => { // 파일이 어디에 저장이 되는지 cb(null, 'uploads/') }, 코드는 강의와 똑같이 작성했는데 어느부분이 문제인지 잘 모르겠습니다 ㅜ
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
추후 수업관련 질문
안녕하세요. 선생님 강의 열심히 듣고 있는 디자이너입니다! 개발로서 업무확장에 크나큰 도움이 되었습니다. 근데 추가적으로 GraphQL, Next.js 강의 제작을 하실 의향이 있는지 궁금합니다! 딴 강의 구매전에 선생님 강의로 듣고 싶어서 여쭤봅니다.
- 따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
git clone후 push할 때 commit메세지 관련
삭제된 글입니다
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
경로를 제대로 써준 것 같은데 계속 404가 발생합니다 ㅜㅜ
콘솔에서 에러가 뜨는 것을 보면 .. 이렇게 404에러가 발생합니다. 회원가입, 로그인은 다 잘 되는데 이것만 안되고 있습니다. 근데 제 생각엔 localhost:3000 으로 요청이 보내져서 그런 것 같기도 합니다 .. 왜 이것만 그렇게 보내지는 것일까요? 강제로 localhost:5000을 쓰면 CORS가 발생하고요. 서버의 index.js에는 app.use("/api/product", require("./routes/product")); 이렇게 코드를 넣어주었고 다른 부분은 건들지 않았습니다. app.use(cors); 이 부분도 있고요. product.js 코드는 const express = require("express"); const router = express.Router(); const multer = require("multer"); // PRODUCT var storage = multer.diskStorage({ 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 req.json({ success: false, err }); } return res.json({ success: true, filePath: res.req.file.path, fileName: res.req.file.filename, }); }); }); module.exports = router; 그리고 FileUpload.js에 있는 dropHandler 메서드의 코드입니다. const dropHandler = (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("파일을 저장하는데 실패했습니다."); } }); }; 무엇이 문제일까요 ..?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
안녕하세요 질문드립니다.
저 같은 경우는 id나 pw 뿐만 아니라 dbname 까지 입력하라고 하는데, db는 따로 만들어두고 있어야 하는건가요? 말씀하신 선행 유튜브를 반드시 다 보고 진행을 해야되는건가요?
- 해결됨따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
안녕하세요
안녕하세요 강의를 다 완강하고 프론트가 SSR인 템플릿 엔진으로 구성되어 있던 노드 서버를 리팩토링 중에 있습니다. 궁금한게 있어서 여쭈어 봅니다. 관리자 페이지를 따로 구성하려고 하는데, SPA 에서는 접근 권한을 어떻게 설정하는게 좋은가요? 유저의 role 을 다르게 설정하여 라우팅을 관리하는것 같은데, SPA의 특성상 모든 페이지를 다 받아 오는것이니 충분히 클라이언트에서 state에 있는 role 을조작이 가능할 것 같다는 생각이 드는데, 이 경우 백엔드에서 한번 더 필터링이 필요하다 생각됩니다. 선생님은 어떠한 식으로 실무에서 서버에서 거르시는지 궁급합니다. 연장선에 있는 이야기 같은데, 현재 passport를 이용하여 session을 캐싱하여 사용하고 있습니다. 이 경우 hoc를 이용하여 페이지 라우팅 마다 Axios를 통한 http response 값에서 리덕스 스토어에 dispatch 할 때, body 값인 payload: request 뿐만 아니라 cookie 값도 따로 리덕스 스토어에 저장해서 관리하면 되는 걸까요? 감사합니다!
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
이럴 경우는 어떻게 해야하나요?
const [loadPrdData, setLoadPrdData] = useState({ skip: 0, limit: 4, postSize: 0,}); const getProducts = config => { postApi(`${PRODUCT_SERVER}/products`, config).then(res => { if (loadPrdData.loadMore) setPrdList([...prdList, ...res.data.productsInfo]); else setPrdList(res.data.productsInfo); setLoadPrdData({ ...loadPrdData, postSize: res.data.postSize }); });};const loadMoreHandler = () => { let skipIdx = loadPrdData.skip + loadPrdData.limit; let config = { skip: skipIdx, limit: loadPrdData.limit, loadMore: true, }; getProducts(config); setLoadPrdData({ ...loadPrdData, skip: config.skip,loadMore:true });}; 안녕하세요 강사님만약에 저렇게 로드 관련된 값들을 오브젝트로 변경해서 할시 더보기 버튼(loadMoreHandelr) 실행 후 getProducts 함수에선 setLoadPrdData 가 변경된 상태로 읽히지 않는 경우가 발생하는데요 로직순서를바꾸어도 보고 state 값이 비동기 로직이여서 애를 먹고있습니다.getProducts 에서 state 값이 셋업이 된 값을 체크하는 방법이 있을까요?setLoadPrdData(value,cb) 으로 해보았지만 cb으로 실행한 함수에서도 셋업된 상태값이 완료되지 않는 상태서 실행되었습니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
eventHandler실행
<div className='dropZone_thumbnail'> {Images.map((image,index)=>( <img onClick={deleteHandler(image)} key={index} src={`http://localhost:5000/${image}`} /> ))} </div> 1.이벤트 핸들러에는 함수실행이 아니라 함수정의만 넣어줘도 되는 것으로 아는데 image라는 매개변수를 전달하기 위해 함수를 실행시키신 건가요?? 즉,onClick={deleteHander} vs onClick={()=>{deleteHandler(image)}} 가 어떤 차이인지 궁금합니다!
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
npm multer문서 참고방법
var storage = multer.diskStorage({ destination: function (req, file, cb) { cb(null, '/tmp/my-uploads') }, filename: function (req, file, cb) { cb(null, file.fieldname + '-' + Date.now()) } }) var upload = multer({ storage: storage }) 이 부분까지는 공식문서에 있길래 다시 읽고 강의 들으니 이해가 되는데요. 그 밑의 router.post('/image, callback ) callback함수에서 filePath: res.req.file.path,fileName:res.req.file해당하는 부분은 multer 공식문서에서도 못 찾겠더라구여 혹시 어느 페이지에서 어떤 식으로 검색해서 찾으셨는지 알 수 있을까요?개발하다 보면 이런 구체적인 검색을 잘하는 것도 중요할 것 같아서요.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
boiler plate질문
안녕하세요 선생님! 유튜브로 boiler-plate기본 강의를 듣고 쇼핑몰 강의로 넘어온 학생입니다. 처음에 강의를 들을 때 랜딩페이지가 유튜브강의에서 마무리했던 랜딩페이지가 아니던데 유튜브강의는 서버와 클라이언트의 소통을 이해하기 위해 한 기본강의이고 이번 쇼핑몰 강의에서 사용하는 boiler plate는 유튜브 강의 이후 선생님께서 따로 업데이트를 해서 만들어 두신 건가요? 그렇다면 저 git 을 그대로 클론해서 사용해도 유튜브에서 배웠던 것이 기본이 되는 것인지 여쭤봅니다. 감사합니다.
- 따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
삭제되지 않는 문제
삭제된 글입니다