<div className='todos_wrapper'> {filterTodos.map((todo) => { return <TodoItem key={todo.id} {...todo} />; })} </div>  위에서 검색어 검색 기능을 보여 주기 위해서 filterTodos로 map 해 주는 건 이해가 가는데 처음에 초기값 보여 주는 건 어디에서 하는 건지 궁금합니다 초기값도 저기서 기능을 해 주는 거 아닌가요? 초기값은 애초에 filter 하지 않았기 때문에 todo.id에 따른 모든 값들을 보여 주는 걸까요 ??? 초기에 모든 값을 보여 주는 건 어디서 하는 건지 이해가 안 됩니다 ㅠ

현재 [그랩마켓] React로 웹 개발하기 -2 듣고 있는데요,1.그랩 선생님 소스 코드와 동일하게 아래 작성한 index.js 소스 첨부하는데요,실행하면,1초 동안 잠깐 판매되는 상품들 이미지 없이 전체 페이지 뜨다 바로 아래 첨부한 그림과 같이에러가 발생 합니다.이 에러는 어떻게 해결 할 수 있을까요?--------2. index.js 소스 아래에 작성 첨부 합니다.import './index.css'; import axios from "axios"; import React from 'react'; function MainPage(){ const [products, setProducts]=React.useState([]); React.useEffect( function(){ axios.get("이곳에는 제 목 mock 서버 주소를 넣었습니다/products") .then(function(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> <span className="product-seller"> <img className="product-avatar" src="../images/icons/avatar.png" /> <span>{product.seller}</span> </span> </div> </div> ); }) } </div> </div> <div id="footer"></div> </div> ); } export default MainPage;그리고, 추가적으로 아래 그랩님 답변 본 뒤 다시 시도해 본 후 질문이 있어 추가적으로 글을 적습니다.현재 postman을 실행하고요, 제 해당 목 mock 서버 주소를 입력 후 끝에 /products까지하면요, 아래와 첨부한 사진과 같이 잘 데이터를 받아오는 것 같은데요, 위에 에러 화면이 그대로 표시되어 어떻게 해결해야 하는지 방법을 모르겠습니다. 조금 구체적으로 어떻게 해결해야 하는지 단계별로 친절한 설명 부탁드립니다.  

true && '안유진'을 썼으면 안유진이 나오는게 아니라 양쪽이 true 니까 true가 나와야 하는거 아닌가요?

C와 C++를 쓸때는 if(A==65)같은 느낌으로 사용 가능했는데 js는 그렇지 않나요? 예를들어 C에서는 1=='1'에서 1과 '1'의 아스키코드값이 다르기 때문에 false가 나오지만 js에서는 true가 나와 여쭤봅니다

네비게이션 바 만들 때, 데스크탑에서 모바일로 화면 전환하는 거 어떻게 해요?

홈페이지에서 tailwind 4.1버전을 다운 받으니 packge.json의 devDependencies가 아닌 dependencies에 tailwind가 생기는데요. 강의 내용 중엔 devDependencies에 생겨서 구글링을 해보니 배포용과 개발용의 차이라고 하는데, 그렇다면 그 둘을 따로 관리하는 이유가 뭔가요?제 생각엔 어차피 개발을 완료한 다음에 배포를 할 테니 별도로 관리할 필요가 있을까 싶어서요.또 한쪽에서 설치한 프레임워크를 다른 쪽으로 옮기려면 그냥 해당 부분을 복사 붙여넣기 하면 되는 건가요?

강의자료 pdf다운받아서 사용하려는데, 소유자 암호를 입력하지 않으면 이 문서를 저장할 권한이 없다는데 메모하면서 사용하고싶어서요. 비밀번호를 찾을수없는데 알수있을까요?

안녕하세요.docker-compose down시 계속 permission denined가 뜹니다.우선 저는 가상머신 os:ubuntu에서 프로젝트를 진행중이며, sudo 붙여서 종료 시도, sudo docker kill 로도 강제 종료를 시도했지만 permission denined이라 다 실패하였습니다.최후의 수단으로 docker설치 삭제 후, 재설치도 해보았지만 안타깝게도 실패하였습니다.하여 container를 종료하려고 할 때마다 가상머신 종료하고 다시 들어가야하는 매우 불편하고도 불운한 상황에 처해있습니다. groups를 통해 docker가 있는 것도 확인하였습니다. 도저히 왜 안되는지 모르겠습니다.도움이 절실합니다... 감사합니다.ㅠ

안녕하세요. 강사님mac os에서 react 실습을 위해 npm create vite@latest 명령으로 프로젝트 생성후npm install 명령어 사용시 아래와 같은 에러가 발생하였습니다. npm error code EEXISTnpm error syscall renamenpm error path /Users/iyyu/.npm/_cacache/tmp/9f07dca7npm error dest /Users/iyyu/.npm/_cacache/content-v2/sha512/49/2e/ac0ddadc45673e1875be27d9e800ecb71c6d19b3093d78eae941b57686d6db724a1416e97affe9b66f3897f6634e1238fad6515f2d530f293983e18230d3npm error errno EEXISTnpm error Invalid response body while trying to fetch https://registry.npmjs.org/json5: EACCES: permission denied, rename '/Users/iyyu/.npm/_cacache/tmp/9f07dca7' -> '/Users/iyyu/.npm/_cacache/content-v2/sha512/49/2e/ac0ddadc45673e1875be27d9e800ecb71c6d19b3093d78eae941b57686d6db724a1416e97affe9b66f3897f6634e1238fad6515f2d530f293983e18230d3'npm error File exists: /Users/iyyu/.npm/_cacache/content-v2/sha512/49/2e/ac0ddadc45673e1875be27d9e800ecb71c6d19b3093d78eae941b57686d6db724a1416e97affe9b66f3897f6634e1238fad6515f2d530f293983e18230d3npm error Remove the existing file and try again, or run npmnpm error with --force to overwrite files recklessly.npm error A complete log of this run can be found in: /Users/iyyu/.npm/_logs/2025-07-05T06_41_32_142Z-debug-0.logiyyu@yuilyongui-MacBookAir session05 % npm install --forcenpm warn using --force Recommended protections disabled.npm error code EEXIST이전에 설치한 npm pakage 버전과 충돌 문제가 발생하는 듯 합니다.해결 방법을 알 수 있을까요?

결제기능 관련은 혹시 추가하실 계획이 있으신지 궁급합니다.

현재 [그랩마켓] React로 웹 개발하기 -2 듣고 있는데요, 1.그랩 선생님 소스 코드와 동일하게 아래 작성한 index.js 소스 첨부하는데요, 실행하면,1초 동안 잠깐 판매되는 상품들 이미지 없이 전체 페이지 뜨다 바로 아래 첨부한 그림과 같이 에러가 발생 합니다.이 에러는 어떻게 해결 할 수 있을까요?--------2. index.js 소스 아래에 작성 첨부 합니다. import './index.css'; import axios from "axios"; import React from 'react'; function MainPage(){ const [products, setProducts]=React.useState([]); React.useEffect( function(){ axios.get("이곳에는 제 mock 목 서버 주소를 넣었습니다/products") .then(function(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> <span className="product-seller"> <img className="product-avatar" src="../images/icons/avatar.png" /> <span>{product.seller}</span> </span> </div> </div> ); }) } </div> </div> <div id="footer"></div> </div> ); } export default MainPage;질문 하기 전 , 인프런 질문 올라와서 답변 올라온 것 다 적용해 보아도 해결이 안되어 이렇게 여쭈어 보게되었습니다. 무엇이 문제인지, 그리고 해결 방법은 무엇인지 알려 주시면 고맙겠습니다. 

npm create vite@latest . --template react 실행시면 설치 옵션에 바닐라랑 리액트가 있는데 리액트를 설치하는 거죠?그 다음에 나오는 옵션에선 타입스크립트랑 자바스크립트가 있는데 그것도 그냥 하나씩만 있는 게 아니고 js+SWC 이런 것도 있는데 뭐 설치해요?  

JS 실행환경과 엔진의 차이 편에 '수업노트' 부분에 자료있습니다. 

안녕하세요 강의 잘 듣고 있습니다! 공식 문서 보면서 복습하는 중인데 공식문서 예제에는   motionPath:{ path: "#path", align: "#path", autoRotate: true, alignOrigin: [0.5, 0.5] } 처럼 path와 align이 같은 요소로 지정되어 있습니다.그래서 codepen을 이용해서 강의 내용처럼align에 움직이는 요소를 지정해봤는데 경로에서 붕 떠서 이동합니다. 마찬가지로 강의 샘플 코드도 align에 경로를 넣어서 한번 테스트 해봤는데 이번에는 호랑이가 너무 붕 떠서 이동합니다. 강의 내용에서는 align에 움직이는 타겟을 넣으면 된다고 하셨는데이건 svg 코드 구성에 따라서 다른건가요??? 공식 문서에 따르면 움직이는 요소를 경로에 맞춰 정렬 해주는게 align의 역할이라고 하는데추상적인 설명인 것 같아서 잘 이해가 안됩니다..! align에 대해 제가 정확히 이해하고 있는게 맞는지,그리고 align에 들어가는 요소는 정확히 어떻게 구별해 넣는게 좋은지 궁금합니다 

실습에 사용되는 이미지들 출력이 안되고 있습니다.(e.g. https://via.placeholder.com/400x400.png?text=City)

강의 코드function selectionSort(array) { const n = array.length - 1; for (let i = 0; i < n; i++) { let minIndex = i; for (let j = i + 1; j < n; j++) { if (array[j] < array[minIndex]) { minIndex = j; } } if (minIndex !== i) { const temp = array[i]; array[i] = array[minIndex]; array[minIndex] = temp; } } return array; } // console.log(selectionSort([77, 41, 6, 4, 3, 2, 5, 222])); console.log(selectionSort([3, 6, 5, 2, 8, 1]));[문제]위 방식처럼 하면 n이 array.length - 1 이기때문에 두번째 for문은 j가 마지막 인덱스 이전까지만 수행된다. 즉 마지막 인덱스 요소는 정렬 X[3,6,5,2,8,1]를 예시로 들자면,i가 0일때 j는 1번째 인덱스부터 시작하며 j가 n보다 작을때까지 최소값을 탐색한다. j가 5일때 j < n 조건에 맞지 않아 minIndex를 1로 바꾸는거 실행 X[해결]따라서 n을 array.length - 1로 할당하지 않고 array.length로 해야함그러면 두번째 for문에서 j의 조건에 맞아 마지막 인덱스 접근 가능추가로 i는 마지막 인덱스에 접근할 필요가 없으므로 첫 번째 for문의 조건을 n - 1로 바꾸기. function selectionSort(array) { const n = array.length; for (let i = 0; i < n - 1; i++) { let minIndex = i; for (let j = i + 1; j < n; j++) { if (array[j] < array[minIndex]) { minIndex = j; } } if (minIndex !== i) { const temp = array[i]; array[i] = array[minIndex]; array[minIndex] = temp; } } return array; } // console.log(selectionSort([77, 41, 6, 4, 3, 2, 5, 222])); console.log(selectionSort([3, 6, 5, 2, 8, 1]));

경로 에러가 나와서 혹시 제 파일구조 때문에 그런지 궁금하여 문의드립니다!일단 파일구조가 아래와 같은 방식으로 구성되어있습니다.(맨위에 lecture라고 따로있습니다 lecture/section06/src)  원래 강의코드koala.html<!DOCTYPE html> <head> <title>Animal Album</title> <meta charset="UTF-8" /> <link rel="stylesheet" href="./src/styles.css" /> </head> <body> <div id="app"> <div class="tab-bar"> <a href="/"><div>전체</div></a> <a href="/penguin.html"><div>펭귄</div></a> <a href="/koala.html"><div class="clicked">코알라</div></a> <a href="/panda.html"><div>판다</div></a> </div> <div class="content"></div> </div> <script src="./src/koala.js"></script> </body> 현제 제 코드<!DOCTYPE html> <head> <title>Animal Album</title> <meta charset="UTF-8" /> <link rel="stylesheet" href="./src/styles.css" /> </head> <body> <div id="app"> <div class="tab-bar"> <a href="index.html"><div>전체</div></a> <a href="penguin.html"><div>펭귄</div></a> <a href="koala.html"><div class="clicked">코알라</div></a> <a href="panda.html"><div>판다</div></a> </div> <div class="content"></div> </div> <script src="./src/koala.js"></script> </body>  이렇게 해야 화면에 동물사진이 나오는데 혹시 경로 상의 문제인지 아니면 파일구조상 때문에 이렇게 작성해야하는지 궁금하여 문의드립니다! 차후에 강의를 듣고 프로젝트를 할때 불편함을 느낄지.. 걱정되어 문의드립니다!  

현재 맥북에서 nvm으로 node 14버전 설치가 불가능합니다 18로 대신 설치했는데 문제가 없을지 궁금합니다.

 제 노트북이 램이 8G인데 Ubuntu 설치해서 이용가능할까요?

소스코드 보고 분석할려고 다운받았는대 실행이 아예 안되요 script 에 start 넣어도 모듈 에러 뜨고 실행방법 따로 있나요?