33,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
다른폴더인가요?!?
안녕하세요. 이제 막 강의를 시작하였습니다 ㅎㅎ. 다름이아니라 이전영상에 boiler-plate에서 npm설치는 다하고 다음강의로 넘어왔는데요 선생님의 에디터 상단에 보면 이전강의는 boiler-plate인데 이번강의는 react-shop-ko네요.. 저희는 어떤걸 틀어야하는것이죠!? 혹시 boiler-plate 다운받은 거기서 npm run dev를 실행하면 다음과 같이 안되는데.. 이유가궁긍합니다 ㅠㅠ mongoDB는 클러스터도 만들고 사용자도 다 추가한 상태입니다. 저 상태에서 더 진행이안되고 멈춰있어서요 ㅠ
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
안녕하세요 선생님 multer를 이용한 이미지 저장에 대해서 질문이 있습니다.
안녕하세요 선생님 Youtube에서 이미 해당 강의를 영어로 듣고 한글로 이번에 발표하셔서 구매를 해서 다시 듣고 있습니다. 이 부분에서 src의 주소를 적어주는 이유가 무엇인지 궁금합니다. src={`http://localhost:5000/${image}`}
- 해결됨따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
리덕스 사가는 사용 안하시나요?
작성하신 보일러플레이트에 리덕스를 넣어주려면 어떤 폴더에 넣어주는게 나을까요? client> _actions 폴더에? _reducer폴더에? 궁금합니닷
- 해결됨따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
페이팔 로그인이 안되네요 ㅜ.ㅜ
오늘 안에 완강하고싶은데 여기서 막히네요 밑에 질문하신 분과 같은 상황인것 같은데 몇시간째 고민하다.. 질문을 남깁니다 ㅠ.ㅠ 깃헙아이디입니다. https://github.com/ryun3433/shopingmall.git
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
질문입니다 :)
안녕하세요 강사님 강의를 복습하면서 SSR과 CSR에 대해서도 같이 공부를 하는 와중에 궁금증이 생겨서 질문을 올리게 되었습니다. 궁금한 것과 질문이 많아서 최대한 대답하기 쉽게 번호를 먹여서 적었습니다. 대답을 잘 들어보고싶어 꽤 오랜시간 고민하며 작성했네요 ㅠ 바쁘시겠지만 답변부탁드립니다.. 2. 본 프로젝트에서 CSR과 SRR의 의미에 대해서 생각을 해보았는데 혹시 이 것이 맞는지요? 2-1. 우리 프로젝트의 경우 CSR 에서는 프론트 서버(CRA), 벡 엔드서버(익스프레스)로 구성된다고 할때, 브라우저가 요청을 보내면 프론트 서버는 브라우저의 요청을 처리한 후 브라우저에게 필요한 HTML, JS, CSS, 기타 정적파일(이미지, 비디오..)를 보내준다. 그리고 브라우저는 이를 해석해서 렌더링한다 2-2. 만일 우리 프로젝트가 SSR이라면 SSR 에서는 프론트 서버(NEXT), 벡 엔드서버(익스프레스)로 구성된다고 할 때, 브라우저가 요청을 보내면 프론트 서버가 온갖 처리를 다 한후에 최종적으로는 HTML과 기타 정적파일(이미지, 비디오..)만을 보내게 된다. HTML을 받은 브라우저는 이를 화면에 띄운다. 본인이 렌더링하진 않는다. 3. 저는 SSR이 HTML만을 결국엔 보내게 된다는 것을 이해했는데 사실 리액트를 통한 프로젝트를 할 때 구글 개발자 도구 network tab을 보면 그렇지가 않은 것 같습니다. index.js(next의 경우) 또는 0.chunk.js(cra의 경우)라는 파일과 잡다한 것들도 같이 보게 됩니다. 즉 html과 js와 css는 어디갔느냐 이 말입니다.. 위에 있는 index.js, 0.chunck.js과 같은 파일이 html과 js와 css를 하나로 통합한 파일인 겁니까? 이 과정에서 리액트가 하는 역할을 무엇이죠? 5. 마지막으로 제가 그린 그림이 있는데요 ( 아래첨부) 여기에서 노란색 박스에 대한 질문이 해결이 안됩니다.. ㅠ 요청에 대한 응답으로 SSR과 CSR에서 보내는 것이 리액트를 사용했을 때와 사용하지 않았을 때의 차이와 그것을 브라우저에서 해석하는 방법에 대한 답을 얻어 볼 수 있을까요? 양질의 강의 항상 감사드립니다. 긴 글 읽어주셔서 감사합니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
user_action.js / forEach error
Unhandled Rejection (TypeError): response.data.forEach is not a function (anonymous function) D:/boilerplate-mern-stack-master/client/src/_actions/user_actions.js:71 68 | // CartItem 들에 해당하는 정보들을 Product Collection에서 가져온후에 69 | // Quantity 정보를 넣어 준다. 70 | userCart.forEach(cartItem => {> 71 | response.data.forEach((productDetail, index) => { | ^ 72 | if (cartItem.id === productDetail._id) { 73 | response.data[index].quantity = cartItem.quantity 74 | } (anonymous function) D:/boilerplate-mern-stack-master/client/src/_actions/user_actions.js:70 67 | .then(response => { 68 | // CartItem 들에 해당하는 정보들을 Product Collection에서 가져온후에 69 | // Quantity 정보를 넣어 준다.> 70 | userCart.forEach(cartItem => { | ^ 71 | response.data.forEach((productDetail, index) => { 72 | if (cartItem.id === productDetail._id) { 73 | response.data[index].quantity = cartItem.quantityforEach 에서 에러가 발생 되는데요.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
const renderItems = () => ( 관련
const renderCartImage = (images) => { .. } 와 const renderItems = () => ( .. ) 차이점이 무었인가요? 너무 기초적인 거 같아서요.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
상용화 보안 관련
john님의 강의를 토대로 사이트를 만들었는데, 상용화를 하기에도 보안적으로 문제가 없는지 궁금합니다. 혹시라도 개인정보 유출 등등이 있을까봐요.. 아니라면 어떤 것에 대해서 더 공부를 해야 할까요??
- 해결됨따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
이미지 업로드 질문
const dispatch = useDispatch(); const [Image, setImage] = useState(""); const fileupload = (files) => { let formData = new FormData(); const config = { header: { "content-type": "multipart/form-data" }, }; formData.append("file", files[0]); dispatch(imageupload(formData, config)).then((response) => { if (response.payload.success) { console.log(response); setImage(response.payload.filePath); } else { alert("파일을 저장하는데 실패했습니다."); } }); }; return ( <Dropzone onDrop={fileupload}> {({ getRootProps, getInputProps }) => ( <div style={{ width: "300px", height: "300px", borderRadius: "50%", border: "1px solid", display: "flex", alignItems: "center", justifyContent: "center", }} {...getRootProps()} > <input {...getInputProps()} /> {Image && ( <img style={{ minWidth: "300px", width: "300px", height: "240px" }} src={`http://localhost:5000/${Image}`} /> )} </div> )} </Dropzone> GET http://localhost:5000/uploads/1588870136518_d.gif 404 (Not Found) 이렇게 에러 메세지가 나오네요.... 경로 지정 되는 기준이 어떻게 되나요?? 배포 까지해서 제작중인데 이 방법으로 해도 되는건가요?
- 해결됨따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
섹션2 체크박스 필터 만들기#2 질문
저는 강의랑 다르게 checkbox에 evntlistener을 달지않고 row에 이벤트 위임으로 달았습니다. 각각의 checkbox에 id로 Continent.value를 넣었습니다. 문제는 7번째 줄 else 부분에서 제 의도랑 다르게 동작하내요. 뭐가 잘못된걸까요??ㅠ function CheckBox() { const [checked, setChecked] = useState([]); const funcCheck = (e) => { if (e.target.checked) { setChecked(checked.concat(e.target.id)); } else { setChecked(checked.splice(checked.indexOf(e.target.id, 1))); } }; console.log(checked); const renderCheckbox = () => Continents.map((v, i) => ( <Col span={8} key={i}> <Checkbox id={v.value} key={i}> {v.value} </Checkbox> </Col> )); return ( <div> <Collapse> <Panel header="Continent"> <Row onClick={funcCheck}>{renderCheckbox()}</Row> </Panel> </Collapse> </div> ); }
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
몽고디비 스키마 설계에 대해 궁금합니다.
안녕하세요? 리액트 기본 강의부터 현재 강의까지 너무 만족스럽게 사용하고 있습니다. 지금까지 rdb 사용하다가 몽고디비를 이번 기회에 접하게 되었는데, 쇼핑몰 스키마 설계에 관해 궁금한 점이 생겼습니다. 예를들어, rdb에서는 쇼핑몰 히스토리를 'tb_history' 라고 테이블을 생성하여 따로 데이터를 관리하게 되는 경우가 있는데 몽고디비는 user 스키마에 히스토리를 전부 가지고 다니는 경우가 많은 건가요? 아니면 rdb처럼 히스토리 스키마를 사용하나요? 이에 대해 궁금하여 인터넷을 검색했는데 누적되는 데이터와 스키마 관계 등... 여러가지 요소를 따지고 보았을 때 정확한 답을 얻기가 힘들어서 질문을 남기게 되었네요..
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
질문입니다.
로그인을 하려는 데 계속 이 화면만 뜨네요. 아이디와 비밀번호가 일치하는 것은 확인헀습니다. 코드야 copy and paste니 문제가 없다고 생각합니다만 ㅠ 무엇이 문제 일까요?? props으로 price까지 잘 받는데 결제만 딱 안되네요. 감사합니다. 참고로, 강의 완성된 소스코드를 클론해서 했는데도 동일한 화면이 떴습니다
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
소스파일 코드 미스
<select onChange={continentChangeHandler}> {Continents.map(item => ( <option key={item.key} value={Continent}> {item.value}</option> ))} </select> 풀소스에 이렇게 되어 있어 비디오를 다시보고 <select onChange={continentChangeHandler} value={Continent} > {Continents.map(item => ( <option key={item.key} value={item.key}> {item.value}</option> ))} </select> 로 수정하니 동작 되었습니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
select 값 이상
앞에서 질문한 것인데요. 아래와 같이 프린트 해 봤습니다. 그결과는 화면에서 호주로 선택되었지만 Selected Continents 1 로 디폴트 값이 나오네요. const continentChangeHandler = (event) => { setContinent(event.currentTarget.value) console.log(" Selected Continents") console.log(event.currentTarget.value); }
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
테스트에서 인지된 문제
체크필터를 테스트하는 과정에 continent 값이 계속 1만 들어가 있어 2시간 정도이것 저것 뒤져보고 업로드파일과 products 파일, 라우트 파일 속에 콘솔을 넣어 찍어 보았습니다. 그런데 업로드의 대륙 자료가 계속 1로 찍히고, 그에 따라 서버에 그렇게 저장 되고 있습니다. 그래서 소스를 강사님이 주신 것을 복사해 넣어도 동일하게 작동 되네요. 어느 부분인지 감이 않오네요. syntax를 의심해서 보았는 데 안보이더라구요.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
질문입니다.
강의를 따라 쳐보면서 느낀 점인데, 카트 페이지를 누르면 초기에는 0으로 잡히다가 리스트 업이 된 후에 total amount가 바뀌는 모습이 보입니다. 일반적인 좋은 상용 서비스들을 이용할 때는 이런 딜레이를 느껴본 적이 없어서요. 찾아보니 서버 사이드 렌더링이란 방식을 이용하는 것 같던데, 실제 상용 서비스에서는 이러한 클라이언트 사이드 렌더링은 무조건적으로 지양하는 편 인가요?? 감사합니다 !!
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
질문입니다.
강의를 하시면서 가끔 너무 빠르게 잡아줄 때는 이렇게 문제를 해결한다는 이야기를 하시는데 자주 등장하는 것 같네요. 위 코드(위의 이미지, 아래에는 풀 코드를 첨부함) 에서는 props.user.cartDetail이 잡히지도 않았는데 렌더링이 되었다는 것으로 이해를 했는데 그러면 안 잡힌 상태에서 렌더링이 되면 페이지에서는 그 부분이 안보여야 되는 것 아닌가요?? 그려지지 않은 부분에서 리액트에서 탐지를 해서 렌더링 못한 컴포넌트에 대해서 리액트가 리렌더링을 해주는 것인가요?? 자세히 알고싶은데 어렵네요 ㅠ 이것에 대해서 자세히 공부해보고 싶은데 어떤 주제로 검색해야 이런 문제를 공부해볼 수 있을까요? 감사합니다. import React,{useEffect} from 'react' import {useDispatch} from 'react-redux' import {getCartItems} from "../../../_actions/user_actions" import UserCardBlock from "./sections/UserCardBlock" function CartPage(props) { const dispatch = useDispatch(); useEffect(() => { let cartItem = []; if(props.user.userData && props.user.userData.cart){ if(props.user.userData.cart.length>0){ props.user.userData.cart.forEach(item=>{ cartItem.push(item.id); }) // 원래는 axios를 해야겠지만 리덕스를 활용해서 해봅시다 . // 첫번째 인지는 카트 아이디에 대한 것, 두번쨰는 퀀터티 dispatch(getCartItems(cartItem,props.user.userData.cart )) } } // 이것을 넣어줌으로써 렌더링과 관련된 문제를 해결할 수 있다 다시한번 초기화시켜줌 }, [props.user.userData]) return ( <div style={{width:'85%' ,margin :'3rem auto'}}> <UserCardBlock product={props.user.cartDetail && props.user.cartDetail.product}/> </div> ) } export default CartPage
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
boiler plate 화면을 실행 했는데 재접속 해도 로그인 창이 뜨지를 않습니다...주소에 login 찍고 들어가면 잘 들어가지는데요
으떠카죠
- 해결됨따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
제품 등록에 관하여 질문드립니다.
안녕하십니까, 제품 등록시 관리자만 제품을 등록을 할 수 있게 하려면 유저관련한 로직을 변경해야 하는 것인지 문의 드립니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
Compiled with warnings.
<Card cover={ <img src={ `http://localhost:5000/${product.images[0]}` } /> } > Line 33:25: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text Line 37:36: Unexpected template string expression no-template-curly-in-string 동작은 되지만 이유를 알고 싶습니다. ' ' 표시와 ` ` 표시를 사용할때 차이점도요.