<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까지 하면요, 아래와 첨부한 사진과 같이 잘 데이터를 받아오는 것 같은데요, 위에 에러 화면이 그대로 표시되어 어떻게 해결해야 하는지 방법을 모르겠습니다. 조금 구체적으로 어떻게 해결해야 하는지 단계별로 친절한 설명 부탁 드립니다.
홈페이지에서 tailwind 4.1버전을 다운 받으니 packge.json의 devDependencies가 아닌 dependencies에 tailwind가 생기는데요. 강의 내용 중엔 devDependencies에 생겨서 구글링을 해보니 배포용과 개발용의 차이라고 하는데, 그렇다면 그 둘을 따로 관리하는 이유가 뭔가요? 제 생각엔 어차피 개발을 완료한 다음에 배포를 할 테니 별도로 관리할 필요가 있을까 싶어서요. 또 한쪽에서 설치한 프레임워크를 다른 쪽으로 옮기려면 그냥 해당 부분을 복사 붙여넣기 하면 되는 건가요?
안녕하세요. 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 EEXIST npm error syscall rename npm error path /Users/iyyu/.npm/_cacache/tmp/9f07dca7 npm error dest /Users/iyyu/.npm/_cacache/content-v2/sha512/49/2e/ac0ddadc45673e1875be27d9e800ecb71c6d19b3093d78eae941b57686d6db724a1416e97affe9b66f3897f6634e1238fad6515f2d530f293983e18230d3 npm error errno EEXIST npm 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/ac0ddadc45673e1875be27d9e800ecb71c6d19b3093d78eae941b57686d6db724a1416e97affe9b66f3897f6634e1238fad6515f2d530f293983e18230d3 npm error Remove the existing file and try again, or run npm npm 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.log iyyu@yuilyongui-MacBookAir session05 % npm install --force npm 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 이런 것도 있는데 뭐 설치해요?
안녕하세요 강의 잘 듣고 있습니다! 공식 문서 보면서 복습하는 중인데 공식문서 예제에는 motionPath:{ path: "#path", align: "#path", autoRotate: true, alignOrigin: [0.5, 0.5] } 처럼 path와 align이 같은 요소로 지정되어 있습니다. 그래서 codepen을 이용해서 강의 내용처럼 align에 움직이는 요소를 지정해봤는데 경로에서 붕 떠서 이동합니다. 마찬가지로 강의 샘플 코드도 align에 경로를 넣어서 한번 테스트 해봤는데 이번에는 호랑이가 너무 붕 떠서 이동합니다. 강의 내용에서는 align에 움직이는 타겟을 넣으면 된다고 하셨는데 이건 svg 코드 구성에 따라서 다른건가요??? 공식 문서에 따르면 움직이는 요소를 경로에 맞춰 정렬 해주는게 align의 역할이라고 하는데 추상적인 설명인 것 같아서 잘 이해가 안됩니다..! align에 대해 제가 정확히 이해하고 있는게 맞는지, 그리고 align에 들어가는 요소는 정확히 어떻게 구별해 넣는게 좋은지 궁금합니다
강의 코드 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]));
