33,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
랜딩 페이지에 상품들을 정렬하는 방법
랜딩페이지에서 상품을 최근에 작성한 글 부터 위에 오도록 하고 싶은데 어떻게 하면 될까요? 그리고 좋아요 기능을 추가했을 때 좋아요 개수가 많은 것부터 출력하고 싶다면 방법이 있을까요?
- 따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
계속해서 Error occurred while trying to proxy request 가 뜹니다...
삭제된 글입니다
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
삭제 하니까 Product.find(...).populdate is not a function 라고 뜹니다 ㅠ
] events.js:292 [0] throw er; // Unhandled 'error' event [0] ^ [0] [0] TypeError: Product.find(...).populdate is not a function [0] at D:\공부\React\New_Boilerplate-master\server\routes\users.js:140:18 [0] at D:\공부\React\New_Boilerplate-master\node_modules\mongoose\lib\model.js:4824:16 [0] at D:\공부\React\New_Boilerplate-master\node_modules\mongoose\lib\model.js:4824:16 [0] at D:\공부\React\New_Boilerplate-master\node_modules\mongoose\lib\helpers\promiseOrCallback.js:24:16 [0] at D:\공부\React\New_Boilerplate-master\node_modules\mongoose\lib\model.js:4847:21 [0] at D:\공부\React\New_Boilerplate-master\node_modules\mongoose\lib\query.js:4390:11 [0] at D:\공부\React\New_Boilerplate-master\node_modules\kareem\index.js:135:16 [0] at processTicksAndRejections (internal/process/task_queues.js:75:11) [0] Emitted 'error' event on Function instance at: [0] at D:\공부\React\New_Boilerplate-master\node_modules\mongoose\lib\model.js:4826:13 [0] at D:\공부\React\New_Boilerplate-master\node_modules\mongoose\lib\helpers\promiseOrCallback.js:24:16 [0] [... lines matching original stack trace ...] [0] at processTicksAndRejections (internal/process/task_queues.js:75:11) [1] [HPM] Error occurred while trying to proxy request /api/users/removeFromCart?id=600bce9df829516a84314444 from localhost:3000 to http://localhost:5000 (ECONNRESET) (https://nodejs.org/api/errors.html#errors_common_system_errors) const express = require('express'); const router = express.Router(); const { User } = require("../models/User"); const { Product } = require("../models/Product"); const { auth } = require("../middleware/auth"); //================================= // User //================================= router.get("/auth", auth, (req, res) => { res.status(200).json({ _id: req.user._id, isAdmin: req.user.role === 0 ? false : true, isAuth: true, email: req.user.email, name: req.user.name, lastname: req.user.lastname, role: req.user.role, image: req.user.image, cart: req.user.cart, history: req.user.history, }); }); router.post("/register", (req, res) => { const user = new User(req.body); user.save((err, doc) => { if (err) return res.json({ success: false, err }); return res.status(200).json({ success: true }); }); }); router.post("/login", (req, res) => { User.findOne({ email: req.body.email }, (err, user) => { if (!user) return res.json({ loginSuccess: false, message: "Auth failed, email not found" }); user.comparePassword(req.body.password, (err, isMatch) => { if (!isMatch) return res.json({ loginSuccess: false, message: "Wrong password" }); user.generateToken((err, user) => { if (err) return res.status(400).send(err); res.cookie("w_authExp", user.tokenExp); res .cookie("w_auth", user.token) .status(200) .json({ loginSuccess: true, userId: user._id }); }); }); }); }); router.get("/logout", auth, (req, res) => { User.findOneAndUpdate({ _id: req.user._id }, { token: "", tokenExp: "" }, (err, doc) => { if (err) return res.json({ success: false, err }); return res.status(200).send({ success: true }); }); }); router.post("/addToCart", auth, (req, res) => { // 먼저 User Collection에 해당 유저의 정보를 가져오기 User.findOne({ _id: req.user._id}, (err, userInfo) => { // 가져온 정보에서 카트에다 넣으려 하는 상품이 이미 들어 있는지 확인 let duplicate = false; userInfo.cart.forEach((item) => { if(item.id === req.body.productId) { duplicate = true; } }) if(duplicate) { User.findOneAndUpdate( { _id: req.user._id, "cart.id": req.body.productId }, { $inc: {"cart.$.quantity": 1} }, { new: true }, (err, userInfo) => { if(err) return res.status(400).json({ success: false, err }) res.status(200).send(userInfo.cart) } ) } else { User.findOneAndUpdate( { _id: req.user._id }, { $push: { cart: { id: req.body.productId, quantity: 1, date: Date.now() } } }, { new: true }, (err, userInfo) => { if(err) return res.status(400).json({ success: false, err }) res.status(200).send(userInfo.cart) } ) } }) }); router.get('/removeFromCart', auth, (req, res) => { // 먼저 카트 안에 내가 지우려고 한 상품을 지워주기 User.findOneAndUpdate( {_id: req.user._id}, { "$pull": { "cart": {"id": req.query.id} } }, { new: true }, (err,userInfo) => { let cart = userInfo.cart; let array = cart.map(item => { return item.id }) // product collection에서 현재 남아 있는 상품들의 정보를 가져오기 Product.find({ _id: { $in: array } }) .populdate('writer') .exec((err, productInfo) => { return res.status(200).json({ productInfo, cart }) }) } ) }) module.exports = router; 에러 전문입니다 살려주세요
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
백엔드에서 데이터 가져오기 질문드립니다.
상세데이터를 가져오기 위해 백엔드를 아래와같이 작성하고 app.get('/api/product/products_by_id', (req, res) => { //let type = req.query.type let productId = req.query._id Product.find({ _id: productId }) .exec((err, product) => { if(err) return res.status(400).send(err) return res.status(200).send({success:true, product}) }) }) 디테일 페이지는 이렇게 썼는데요. import React, {useEffect, useState} from 'react'; import axios from 'axios'; function DetailProductPage(props) { const productId = props.match.params.productId const [Product, setProduct] = useState([]); useEffect(() => { axios.get(`/api/product/products_by_id?id=${productId}&type=single`) .then(response => { if(response.data.success){ console.log(response.data) //setProduct(response.data.proudct[0]) } else { alert('상세 정보 가져오기 실패했습니다.') } }) }, []) 콘솔을 확인해보니 productId도 잘 받아오고 response.data도 success:true는 뜹니다. 하지만 product는 Array(0)으로 나오면서 데이터를 불러오질 못하네요. 서버연결은 되는데 데이터를 못불러오는데 이럴 경우 어디를 수정해야할까요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
회원가입 폼 변경관련문의입니다.
로드맵 루트로 쭉 강의를 듣고 쇼핑몰강의 차례인데요. 회원가입 부분과 로그인부분은 이전 강의와 다르게 yup을 사용하셨더라구요. 유효성 검증때문에 yup 사용하신것같은데, 저는 이 회원가입 항목 중 휴대전화 항목을 추가하려 하는데요. 이때 1.핸드폰번호 입력 시 자동으로 하이픈이 생길 수 있도록 funtion 을 넣어주는 방법 2.핸드폰항목을 input 하나가 아닌 select (010) + input box 2개 ( 1234, 1234) 사용 이 두 가지 항목을 해볼까 했는데, 두 개 다 너무 헷갈리더라구요. 1번 방식으로 해볼 시 funtion 선언 위치와 불러오는 방식은 어떻게 처리해야하는지? 2번 방식으로 해볼 시 input box 사이즈 조절의 문제..( input 안에 size 나 style 적용이 안되는 문제 ) 가 있더라구요. 이 부분 어떻게 처리해야하는지 궁금합니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
이미지 파일을 서버로 보내기를 따라하고 있는도중 에러가 발생하여 질문드립니다.
multer를 설치하려고하나 계속해서 아래와 같은 에러가 발생하여 설치를 못하고 있는데 어떤 것을 더 설치해야되는건지 질문 드립니다. ====================================== npm WARN react-redux@5.1.2 requires a peer of react@^0.14.0 || ^15.0.0-0 || ^16.0.0-0 but none is installed. You must install peer dependencies yourself. npm WARN react-redux@5.1.2 requires a peer of redux@^2.0.0 || ^3.0.0 || ^4.0.0-0 but none is installed. You must install peer dependencies yourself. npm WARN react-boiler-plate@1.0.0 No repository field. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.12 (node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.12: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) + multer@1.4.2 updated 2 packages and audited 528 packages in 18.614s 4 packages are looking for funding run `npm fund` for details found 3 vulnerabilities (2 low, 1 moderate) run `npm audit fix` to fix them, or `npm audit` for details ==============================
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
모든 상품 정보를 데이터베이스에 저장하기 중 오류
d안녕하십니까 강사님 좋은강의 만들어주셔서 우선 감사드립니다.모든 상품 정보를 데이터베이스에 저장하기 부분을 하고 있는데요.입력값들을 입력하고 확인 버튼을 누르면 이렇게 props로 작성자의 아이디를 가져오는 부분에서 undefined 되었다고 나옵니다..그리고 한가지 질문이 더있는데 저는 로컬상에서 로그아웃이 되지 않는데 어떻게 된걸까요 ㅠ
- 해결됨따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
작성자 이름을 가져오고 싶을 때
ProductInfo.js 파일에서 props.detail.writer.name 이런 식으로 받아올 수 없는건가요? 이렇게 하면 오류가 발생하네요 ㅠㅠ json 데이터 안에 포함되어 있는 것은 확인했는데 어떤 식으로 불러와야 할 지 모르겠습니다.
- 해결됨따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
백엔드 부분 if (err) return res.status(400).send(err) 질문입니다.
다른 백엔드 부분에서는 if (err) return res.status(400).json({ success: false, err }) return res.status(200).json({ success: true }) 과 같이 json형식으로 보내주는데 여기만 send로 보내주는데 차이점이 있을까요? 이부분만 다르게 쓴 이유가 궁금합니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
안녕하세요 궁금한거 질문입니다
안녕하세요 궁금한거 질문입니다 혹시 쟤가 작업을 하면서 vs코드에 백엔드를 끄고 킬때마다 로그인한 상태가 계속 유지가 되는데 이게 실제 웹상에 배포를 할때 걱정이 되네여 ㅠㅜ로그아웃을 할경우 토큰하고 토큰 시간이 없이져서 다시 기존 로그인 창이 나오기는 하지만 웹상에서 그 창을 끄거나 저기 지금 작업중에 서버를 끌때에도 아이디가 로그아웃 되게 하는 방법에 대해 참고할 만한 것이 있으면 알려주시면 감사드려요 ㅠㅜ 혹시 쟤가 코드적인 실수를 해서 그런 걸까요??
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
option tag에 관해 질문드립니다.
<select onChange={continentChangeHandler} value={Continent}> {Continents.map(item => ( <option key={item.key} value={item.key}> {item.value} </option> ))} </select> 안녕하세요. select tag 하위의 option tag의 파라미터에 관해서 질문드립니다. 제가 알기로는 key는 안 써도 작동하는 걸로 아는데 어떤 역할을 하는지 잘 이해가 안 가는데요. 실제로 key를 지웠더니 컴파일 에러도 안 나고, 값도 잘 변경이 되는데 자세한 설명 부탁드려도 될까요? ㅠ
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
질문있습니다 답변부탁드려요!!
export const USER_SERVER = '/api/users'; front의 Config.js 부분인데요. api를 저렇게 변수로 처리해서 사용하는 이유가 무엇인지 궁금합니다! 혹시 포스트맨을 악용해서 저런 api를 이용해 Back을 통해 DB도 건들수 있나요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
서버에러
[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) 서버에서는 5000번으로 연결하라고 나오는데 . 저는 react 돌리면 3000 port 로 연결되어서 회원가입 부분에서 submit이 접속되지가 않네요 어떻게 해야 할까요..
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
onChange가 없어도 입력이 되네요?
지금까지 강사님 강의 매번 들어왔는데, onChange없이 값이 입력 항상 안되었는데...이번 쇼핑몰 예제 업로드부분 하다가 한번 키보드 input에 두고 눌러보니 value에 onChange가 없음에도 불구하고 입력이 잘 되네요..왜 되지?라고 생각하고있습니다.. 지금껏 항상 안되다가 여기서 갑자기 onChange 없이 되니까...원인이 뭘까요 ㅠ
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
.jsx로 저장해도 되나요?
안녕하세요, 선생님 youtube에서 기본강의 보고 찾아온 학생입니다. 코드를 보면 jsx문법을 사용하고 있는 것 같은데 .js를 .jsx로 저장해도 문제가 없을까요? 어느 날부터 .js 파일을 저장하면 사진처럼 < 다음에 자동 줄 바꿈이 되어버리는 오류가 있어서요. prettier 확장 파일도 지워보고 재설치 후 세팅도 바꾸면서 이유를 찾아보려고 했는데 원인을 모르겠네요.. .js가 아닌 .jsx로 저장하면 자동으로 정렬되는 현상이 없는데 왜 그럴까요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
Axios 대문자 표기와 axios 소문자표기가 있는데어느것이 맞는걸까요?
안녕하세요 선생님...저 코딩 중에 Axios 대문자 표기와 axios 소문자표기가 있는데 둘다 사용하는 것 같기도하고..아닌것같기도하고...뭐가 맞는걸까요? ㅠㅠ
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
선생님 질문있습니다.
다른분이 질문하신건데 9:30초에 const productId = props.match.params.productId; 여기서 props.match.params.productId 가 어디서 나온건지 잘 모르겠습니다 ㅠㅠ. App.js 에서 Auth로 감싸줘서 props가 있는건 알겠는데 match.params.productId가 어디서 나온건지 모르겠네요 ㅠㅠ App.js -> hoc/auth.js -> user_actions.js->index.js-> routes/users.js 까지 가봤는데 잘 모르겠네요 ㅠㅠ
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
이번 강의 users.js에서 map() 대신 forEach()를 사용한 이유
간단한 궁금증입니다.. map()과 forEach()의 세세한 차이점은 검색을 해봤는데 map메소드가 보통 성능 면에서도 더 빠르고 기존의 데이터를 변형시키지 않고 새로운 배열을 반환하기 때문에 기존 데이터가 필요한 경우에도 쓸 수 있을 것 같다는 생각이 들었습니다. 강사님은 각각 어떤 경우에 map()과 forEach()를 사용하시는지 여쭤보고 싶습니다!
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
선생님 정말 기초적인 질문 죄송합니다 ㅠ
CheckBox.js 에서 8번 라인에 renderCheckBoxLists = () => props.list&& ~~ 하셨는데 renderCheckBoxLists =() => {props.list&& ~~} 이렇게 블록으로 감싸니까 데이터가 안나오던데 이유좀 알수있을까요 ㅠㅠ
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
검색 기능시 url
검색시 해당 검색어나 필터 관련 인풋값을 url 의 쿼리 값로 전달하는 것도 필요할까요? 기존의 ssr 방식이 아니라 프론트단에서 라우터를 관리해주니 해당 필터 쿼리를 포함한 페이지 이동하여 검색어 처리가 맞을까요?