React로 웹 개발하기 - 2 수강후 에러 메시지 문의입니다. npm start 하여 로컬호스트 화면에 아래의 메시지가 나오는데 해결이 안됩니다. 어디에 문제가 있는건지 문의드립니다. × TypeError: Cannot read properties of undefined (reading 'map') MainPage C:/Users/hanthene/Documents/github/grab-market-web/src/main/index.js:33 30 | <img src="images/banners/banner1.png" /> 31 | </div> 32 | <h1>판매되는 상품들</h1>> 33 | <div id="product-list"> | ^ 34 | {products.map(function(product, index) { 35 | return ( 36 | <div className="product-card">View compiled ▶ 18 stack frames were collapsed. (anonymous function) C:/Users/hanthene/Documents/github/grab-market-web/src/main/index.js:15 12 | .then(function(result){ 13 | console.log(result); 14 | const products = result.data.products;> 15 | setProducts(products); | ^ 16 | }) 17 | .catch(function(error){ 18 | console.error('에러 발생 : ',error);View compiled This screen is visible only in development. It will not appear if the app crashes in production.Open your browser’s developer console to further inspect this error. 에러가 나는 상태의 파일 그대로 GITHUB에 퍼블릭으로 올려놓았습니다. https://github.com/ucoder-git/grab-market-client 아래는 package.json 입니다. {   "name": "grab-market-web",   "version": "0.1.0",   "private": true,   "dependencies": {     "@testing-library/jest-dom": "^5.16.3",     "@testing-library/react": "^12.1.4",     "@testing-library/user-event": "^13.5.0",     "axios": "^0.26.1",     "react": "^17.0.2",     "react-dom": "^17.0.2",     "react-scripts": "^2.1.3",     "web-vitals": "^2.1.4" }, 아래는 src폴더의 index.js 파일입니다. import React from 'react'; import './index.css'; import axios from "axios"; function MainPage() {     const [products, setProducts]= React.useState([]);     React.useEffect(function() {             axios             .get(                 "https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"                 )             .then(function(result){                 console.log(result);                 const products = result.data.products;                 setProducts(products);             })             .catch(function(error){                 console.error('에러 발생 : ',error);             });         }, []);             return (         <div>         <div id="header">         <div id="header-area">             <img src="images/icons/logo.png" />         </div>     </div>     <div id="body">         <div id="banner">             <img src="images/banners/banner1.png" />         </div>         <h1>판매되는 상품들</h1>         <div id="product-list">         {products.map(function(product, index) {                 return (                     <div className="product-card">                 <div>                     <img className="product-img" src={product.imageUrl} />                 </div>                                 <div className="product-contents">               <span className="product-name">{product.name}</span>               <span className="product-price">{product.price}원</span>               <div className="product-seller">                 <img                 className="product-avatar"                 src="images/icons/avatar.png"                 />                 <span>{product.seller}</span>                 </div>             </div>             </div>                 );             })}         </div>     </div>     <div id="footer"></div>     </div>     ); } export default MainPage;  

강의를 듣다가.. 제 수준에 당황에서 글을 남깁니다.. 혹시 이번강의(routes의 정의)가 이해가 되지 않는다면 어느파트를 집중해서 공부해야하는지 여쭤보고 싶습니다. 처음에는 막연하게 리액트, 타입스크립트를 공부하고 서버쪽 기초를 배우고 싶어, 그래프 큐엘과 아폴로등을 공부하기 위해 강의를 신청햇는데 기본적인 개념조차 안잡혀있는 제자신을 확인 할 수 있는 기회가 되었습니다 ㅠㅠ.. 수업과 관련이 없는 내용이지만 노드js를 공부한 후 듣는 편이 좋을까요 .. 아니면 어디를 공부하여야 할까요.. 답변 기다리겠습니다.

강의 15분 대에 객체 프로퍼티 속성을 delete하면 결국 삭제가 된 상태이고, 브라우저에서는 더이상 콘솔 로그를 찍어도 알 수가 없습니다. 그러나 왜 여전히 메모리가 삭제 되지 않았는지 그 의미가 이해되지 않아 질문을 드립니다.

안녕하세요 강의 듣는 중 궁금한점이 생겨서 질문을 드리게 됩니다. 영상 24:32 부분에서 const copyList = JSON.parse(JSON.stringify(diaryList));으로 하셧는데 원본 배열을 정렬을 하게되어 불변성 문제 때문에 Json.stringify 로 문자열로 바꿧다가 다시 JSON.parse로 새로운 배열을 만들어 값을 받았는데 혹시 그럼 스프레드 연산자인 const copyList = [...diaryList] 이렇게 하게 된다면 위 코드와 다르게 동작이 될까요..?

안녕하세요! 선생님! params와 query에 대해서 질문이 있습니다. delete 해줄때 client단에서는 params안에 id를 담아서 보내주고 server단에서는 query로 id를 받아야한다고 말씀하셨는데  params로 보내고 params로 받는건 안되는건가요???

10:00분에서 useEffect(() => {    if (!(me && me.id) {            Router.push('/');    } }, [me &&.id]); if (!me) {   return null; }; 이 코드를 if (!me) {   Router.push('/');   return null; }; 이렇게 코드 바꿔도 오류는 없던데 밑에 껄로해도 별 차이 없는건가요?

안녕하세요. 웹 최적화 파트1,2 수강자입니다.   수강을 하면서 웹에 대해 최대한 성능 좋게 개발을 꾸준히 하려고 노력하고 있습니다. 이에 따라 여러 가지 고민이 되는 부분이 생겨서 해당 카테고리와는 크게 관련성은 없지만 여기에 글을 올려봅니다.   궁금증 1.   useMemo, useCallback 관련하여 질문드리고 싶습니다.   memoization을 통해 불필요한 렌더링을 줄일 수 있는 장점을 가지고 있어 위와 같은 훅을 잘 사용해보려합니다. 하지만 효율적으로 사용을 해야 메모리 적으로 봤을 때 문제가 되지 않을거같아 고민을 하는 찰라에 많은 개발자분들이 단순히 useState에서 set하는 부분만을 useCallback에 담아서 사용하는거 같더라구요.   예를 들어 const [ isOpen, setIsOpen = useState<boolean>(false); const callback = useCallback( () => {setIsOpen(true)}, []);   이런 식으로요.   하지만 제 생각에는 이렇게 작은 것도 다 넣으면 모든게 메모리에 올라가게 되어 메모리 낭비인가 라는 생각이들었습니다.이러한 작은 것들도 다 useMemo나 useCallback 을 적용하는 것이 메모리적인 관점에서 보는 것보다 렌더링에 이점을 주는 것이 더 큰가라는 생각이 듭니다.   혹시 이 부분에 대해 피드백 해주시면 감사하겠습니다.   궁금증 2.   많은 input에서의 onChange에 따른 렌더링   회원가입 폼과 같이 input 굉장히 많은 경우 여기에 onChange Event에 따라 회원정보가 set이 되고 타이핑할 때마다 리렌더링이 된다는 생각이 과하다는 생각이들어서 질문 드립니다.   그래서 제가 생각해본건 useRef로 모든 input에 접근하고 회원가입 버튼 눌렀을 때 한번에 input value 를 가져와서 한번만 set을 하는게 낫지않을까 라는 생각도 들었습니다.   위와 같은 생각이 잘못되었는지, 혹은 onChange에 따라 set을 다해도 가상돔으로 비교해서 전체 다 그려주는게 아니기 때문에 큰 이슈는 되지않아 그냥 사용해도 될지에 대해 궁금합니다.   답변해주시면 정말 감사하겠습니다.  

안녕하세요 선생님 유익한 강의 잘 수강하고있습니다. 현재 회원가입까지 구현이 다 되어서 몽고 db에 회원가입시 데이터가 잘 들어가는것도 확인하였고, 클라이언트(프론트) 상에서 이 db를 가져와서 쓰고싶은데 어떻게 해야 가져와서 쓸수있을까요? 프론트만 파서 이쪽은 잘 감이 안잡힙니다 감사합니다.

안녕하세요. JSX에서 문법규칙에서  반드시 부모 요소 하나가 감싸는 형태여야 한다라고 하는데 부모 요소가 무엇인지 알수 있을까요?

신규글을 등록할 때에도 제일 밑으로가지고, 기존 글을 수정해도 밑으로 가지길래 Components로 확인해보니 date값이 다르게 들어가져요..   더미데이터로 넣은 date는 1648092529386 ~ 90 인데 새로운글이나 수정글은 date가 1648080000000 로 나오네요ㅠㅠ   onCreate랑 OnEdit이 DiaryEditor.js에서 date를 가져가기에  console.log(new Date(date).getTime()); DiaryEditor.js 안에서 onCreate,onEdit 안에서 쓰는 getTime으로 찍어보면 1648080000000 나오는데 어디서 꼬인걸까요 ...? ㅠ   https://codesandbox.io/s/sharp-brown-p38cvp?file=/src/components/DiaryEditor.js

안녕하세요. 강의 잘 보고 있습니다 제가 토큰 생성까지 따라했는데 무한로딩이 발생했습니다. if(err) return cb(err);로 수정을 했는데도 계속 로딩이 발생하네요 save함수 안에서는 console.log도 안찍히는 거 봐선 save함수가 문제인거 같기도 한데 검색해도 아무 정보도 안나와서 정말 답답하네요.. 혹시 도와주실수 있을까 해서 git hub 주소 올려봅니다   https://github.com/ChyoPyoRo/CP1

안녕하세요!! 선생님!!! ㅎㅎㅎ 장고 다운로드 로딩에 대하여 질문드리려 합니다!!   (웹은 장고로만 개발하였습니다!!)   제가 구현한 내용은 단순히 모델을 불러와서 가공후 csv 파일로 response하는 view를 만들었습니다! 그래서 다운로드 버튼을 클릭하면 모델에 있는 데이터가 다운이 되는 그러한 로직입니다!      위와 같이 그냥 요청이 오면 모델을 불러와서 응답해주는?? 단순한 view입니다!ㅎ 다만 join이 많이 걸려있고 데이터가 좀 많다보니 시간이 상당히 많이 소요가 되는데요.. 문제가 다운로드버튼(위에 설명한 view와 연결한버튼)을 클릭 한 후 서버가 이를 처리를 하는데 서버자체가 이 작업을 끝날때 까지 먹통이되는? (제 3자가 웹에 접속했을때도 이 처리 때문에 위 처리가 끝날때 까지 아무런 요청을 할 수 없습니다) 문제가 발생합니다..     제가 사용한 서버는 AWS EC2를 활용해 도커 compose파일로 nginx, gunicorn, mariadb를 연결해서 하나의 서비스로 만들어 배포하였습니다. 또한 로드밸런서 세팅도 되있습니다.   로컬에서 개발서버로 테스트 할때는 그냥 다운로드 버튼을 클릭을 해도 바로 종료가 가능하고 다른 브라우저로 접근해도 독립적으로 작동했는데 배포를 하니깐 위와 같은 현상이 발생하네요!   서버 성능의 문제인가 해서 인스턴스 유형도 좀더 올려보고 했지만 역시 위문제는 해결되지 않았습니다..ㅠ 그래서 뭔가 비동기적으로 처리하기위해서 celery를 이용해 볼까 했는데 잘못된 접근인건지 잘모르겠지만 피라미터를 어떻게 설정해야할지 몰라서 구현에 실패를 했습니다 ㅠ   서버의 문제라면 어떻게 접근을 해야하는지,,,,, 아니면 장고로 위와 같은 문제가 해결이 가능하다면 어떻게 코드를 작성하면 좋을지 부족한게 많다보니 며칠째 해결이 안되네요 ㅠㅠ   부족한 설명이지만 잘 부탁드리겠습니다!!   너무 감사합니다 선생님!!                  

강의 잘 보고 있습니다!  혹시 @font-face {} 가 들어있는 css를 link ref="preload"하면  해당 css를 미리 불러오면서 폰트도 사전로드 되는걸까요 ?    아니면 폰트 사전로드는 무조건 link로 걸어줘야될까요 ?  

좋은 정보 정말 감사합니다! 돈이 아깝지 않네요ㅎㅎ

 지금까지 강의 보면서 톡방 비번을 못본거 같은데 혹시 어디에 있었는지 알 수 있을까요..

안녕하세요 인프런 강의를 듣기전 docker 공부를 하고있는 사람입니다.   pip freeze > requirments.txt 하고 난 뒤  버전정보가 숫자가아닌 경로로 나오는 경우는 어찌해야 할지 모르겠네요 aiohttp @ file:///C:/ci/aiohttp_1602530153430/work  

안녕하세요! react를 수강중인 학생입니다..!   멍청한 질문인것 같은데.. 혹시 create react app 하고 vscode환경에서 html파일을 생성해서 js파일에 링크 걸어논다음에 html파일을 열 수 있나요?? 그러니까 html파일, react js 파일 둘다 작성해서 링크로 연동이 가능한지 궁금합니다!   감사합니다.

안녕하세요.  학습을  최근에 시작한 초급자입니다.   현재 장고 프로젝트 생성하여 생성된 폴더와 파일들이 무슨 기능을 하는 지에 대해 듣고 있습니다.    첫 번째 질문입니다.   제가 학습해나가는 것을 TIL로 깃헙에 올리고 싶은데,  코드는 똑같이 안쓰고 참고하여 다른 예시로 작성하면 된다면 이런 개념적인 부분들은 출처와 함께 그대로 써도 되는지 아니면 표현을 달리 해서 올리면 되는 지 알고 싶습니다. 이에 대해 먼저 묻고 작성하는 것이 예의인 것 같아 여쭤봅니다.   앞으로의 내용이 참 기대됩니다.     두 번째 질문입니다.  강의 시작 전에 SQL에 대해서 알고 있어야 하나요???   

안녕하세요! 상태 강의 8:08초쯤 count에서 값을 1씩 올릴때 +1을 하면 오류가 안생기는데 제가 궁금해서 count ++를 써보니 const로 선언돼서 값을 재할당할 수 없다고 오류가 뜨더라구요!   +와 ++의 차의점을 알 수 있을까요?   감사합니다!   const [count, setCount] = useState(0); const onIncrease = () => { setCount(count + 1); };    

안녕하세요. create react app 강의 19:30초 부분에서 node_modules 파일이 지워졌을 경우 npm i로 다운 받으면 된다고 하셨는데, 뒤에 다른 명령어 추가되는 것 없이 그냥 root 파일위치에서 npm i 만 입력하면 node_modules 파일이 알아서 생성이 되는건가요? 감사합니다! :D 강의 너무 재밌게 잘 듣고있습니다!