강의 동영상화면이 안떠요,, 이전 이후 강의는 뜨는데..왜그런걸까요?

via.placeholder.com가 더이상 없어서 인터넷 찾아보니https://placehold.co/여기가 되더라구요 그래서 <div class="grid grid-cols-3 gap-4"> <img src="https://placehold.co/400x400.png?text=City" alt="City Image" class="w-full h-full rounded-lg shadow-md" /> <img src="https://placehold.co/400x400.png?text=Landscape" alt="Landscape Image" class="w-full h-full rounded-lg shadow-md" /> <img src="https://placehold.co/400x400.png?text=Mountain" alt="Mountain Image" class="w-full h-full rounded-lg shadow-md" /> <img src="https://placehold.co/400x400.png?text=River" alt="River Image" class="w-full h-full rounded-lg shadow-md" /> <img src="https://placehold.co/400x400.png?text=Forest" alt="Forest Image" class="w-full h-full rounded-lg shadow-md" /> <img src="https://placehold.co/400x400.png?text=Ocean" alt="Ocean Image" class="w-full h-full rounded-lg shadow-md" /> <img src="https://placehold.co/400x400.png?text=Desert" alt="Desert Image" class="w-full h-full rounded-lg shadow-md" /> <img src="https://placehold.co/400x400.png?text=Waterfall" alt="Waterfall Image" class="w-full h-full rounded-lg shadow-md" /> <img src="https://placehold.co/400x400.png?text=Beach" alt="Beach Image" class="w-full h-full rounded-lg shadow-md" /> </div>이렇게 주소 설정하니 잘 됩니다.

 console 및 미리보기 hello world가 안보입니다.

 안녕하세요 ~배경색은 어떻게 설정하면 될까요 ?? shift + r 누르고 도형을 만드니까 배경색이 똑같이 흰색이라서 구분이 안되네요 ㅠ

질문 주실 때 항상 2가지를 지켜주세요.오류가 나는 부분이나 궁금한 부분의 브라우저 화면 캡쳐해서 올리기HTML+SCSS+JS 코드 캡쳐 말고 텍스트로 붙여넣기 하기만약 코드를 캡쳐해서 올리시면 제가 코드의 오류를 찾는게 너무 어렵습니다. 반드시 텍스트로 붙여넣기 해주세요.   위의 사진에서 폴더는 어디서 다운로드 하면 될까용 ?

안녕하세요 😀 강의 중 프로젝트 1 에서는 npm install 이 정상적으로 진행되었으나, 이번 useEffect 실습을 위해 강의내용처럼 새폴더 생성 후 npm i를 하니 아래와 같은 오류가 발생합니다.구글링해서 여러 방법을 시도했으나 해결되지 않아 어떻게 해야할 지 질문드립니다 😥

안녕하십니까! 해당 강의를 열심히 들으며 리엑트를 공부하고 있는 대학생입니다. 듣다가 막히는 부분이 생겨 질문을 하게 되었습니다.List.jsx 에서 검색 기능을 구현하는 부분에서 궁금한 것이 생겼습니다. 강의에서는 아래 코드처럼 getFilteredData 함수를 작성하셨습니다.const getFilteredData = () => { if(search === ""){ return todos; } return todos.filter((todo) => { todo.content.toLowerCase().includes(search.toLowerCase()) }); };하지만 저는 아무리 오타를 점검하고 수정해도 기능이 구현이 되지 않아서 답답한 마음에 GPT를 통해 질문을 했는데 위 함수에서 return이 빠져있다고 수정해주었습니다. 아래는 GPT가 수정해준 코드입니다.const getFilteredData = () => { if(search === ""){ return todos; } return todos.filter((todo) => { return todo.content.toLowerCase().includes(search.toLowerCase()) }); };위 코드를 보시면 filter() 안에 화살표 함수 내부에 return이 추가된 것을 볼 수 있습니다. 그리고 실제로 이렇게 수정을 하고서야 제 기능이 정상적으로 작동이 되었습니다. 왜 이런 결과가 생겼는지 궁금합니다. 제가 뭘 잘못했길래 강의와는 다르게 return을 추가해야만 기능이 제대로 구현이 되는지 여쭤보고 싶습니다. 혹시나 제가 찾지 못하는 오타가 있을까 해서 강의와 똑같이 따라한 전체 List.jsx 코드도 함께 첨부하겠습니다. 감사합니다!import './List.css'; import TodoItem from "./TodoItem"; import {useState} from "react"; const List = ({todos}) => { const [search, setSearch] = useState(""); const onChangeSearch = (e) => { setSearch(e.target.value); }; const getFilteredData = () => { if(search === ""){ return todos; } return todos.filter((todo) => { todo.content.toLowerCase().includes(search.toLowerCase()) }); }; const filteredTodos = getFilteredData(); return <div className="List"> <h4>Todo List 🌱</h4> <input value={search} onChange={onChangeSearch} placeholder="검색어를 입력하세요" /> <div className = "todos_wrapper"> {filteredTodos.map((todo) => { return <TodoItem key={todo.id} {...todo}/>; })} </div> </div> } export default List;

이건 어떻게 해야할까요..? ㅠㅠ

안녕하세요 강사님한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 강좌 잘듣고 있습니다. 감사합니다.저는 자막을 켜고 보는데,아래 강좌의 자목이 잘못된 것을 발견했습니다.5-3) JSX로 UI 표현하기그리고, 동영상을 보다가, 일시정지하면서, 자막을 다시 확인하면서 보고 있습니다만, 혹시, 학습 편의를 위해서, 동영상 강좌 자막 대본 내용도 같이 올려주실수 없을까요?타입스크립트, Next.js에도 자막 대본 내용도 같이 올려주시면 좋겠습니다. ㅠ

- 강의 영상에 대한 질문이 있으시면, 상세히 문의를 작성해주시면, 주말/휴일 제외, 2~3일 내에 답변드립니다 (이외의 문의는 평생 강의이므로 양해를 부탁드립니다.)- 강의 답변이 도움이 안되셨다면, dream@fun-coding.org 로 메일 주시면 재검토하겠습니다. - 괜찮으시면 질문전에 챗GPT 와 구글 검색을 꼭 활용해보세요~- 잠깐! 인프런 서비스 운영(다운로드 방법포함) 관련 문의는 1:1 문의하기를 이용해주세요. <meta http-equiv="X-UA-Compatible" content="ie-edge">인터넷 익스플로러가 사라진 지금도 쓰이나요?

오늘 카운터앱 강의를 들으면서 새로운 파일 (section06)을 만들었는데요. 가장 기본 세팅을 하고 화면에 카운터앱 이라는 단어를 렌더링 하려고 npm run dev를 한 후 ctrl shift p 를 눌러 페이지에 들어갔는데 글자가 렌더링 되지 않길래 개발자 도구를 켜 보았더니 Failed to load module script : Expected a JavaScript module script but the server responed with a MIME type of "text/jsx". Strict MIME type checking is enforced for module scripts per HTMl spec. 라는 오류가 뜨네요. 오류 해결을 위해 업데이트도 해보고, 파일을 지웠다 새로 만들어도 보고, 지피티에 물어보거나 인터넷에 검색도 해봤는데 도저히 오류가 고쳐지지 않습니다. 혹시나 해서 이번에 새로 만든 파일 말고 section05 파일을 실행시켜 보았더니 어제는 잘 되던 파일이 오늘은 똑같은 오류가 뜨며 실행이 되지 않더라구요. 무슨 오류일까요 ㅠㅠ 제발 도와주세요 엉엉엉엉엉엉엉엉

let currentItem; function activate(elem){ // 활성화 : 문열기 elem.classList.add('door-open'); currentItem = elem; } function inactivate(elem){ // 비활성화 : 문닫기 elem.classList.remove('door-open'); }이 부분에서요, let, const 변수는 범위가 {} 기준이라고알고있습니다.그런데, activate()에서 currentItem에 elem값을 넣어주면서 {} 범위가 끝났는데, inactivate()에서 currentItem의 값을 확인하고 실행한다는게 이해가 잘 안됩니다.

섹션 4. DOM API-1 강의 6:30초 쯤 변수명을 다음과 같이 작성해주셨는데, 이는 미리 소개하신 2가지 방법의 예시를 모두 보여주기 위함인가요?let $animalInfo = document.querySelector('div.animal-info'); let ageElement = document.querySelector('div#age'); 실제 프로젝트에서는 2가지 방법 중 하나를 사용해 통일성을 주는게 좋을 것 같은데 혹시 다른 이유가 있으신지 궁금합니다!

#heapify(index) { // 특정 값 수정, 삭제 const leftIndex = index * 2 + 1; const rightIndex = index * 2 + 2; const bigger = (this.arr[leftIndex] || 0 )> (this.arr[rightIndex] || 0) ? leftIndex : rightIndex; if (this.arr[index] < this.arr[bigger]) { const temp = this.arr[bigger]; this.arr[index] = this.arr[bigger]; this.arr[bigger] = temp; this.#heapify(bigger); } } bigger 삼항연산자에서 this.arr[leftIndex]의 값이 0 이고 this.arr[rightIndex]의 값이 undefined이면 조건이 false가 되면서 bigger에 rightIndex값이 들어가면서 오류가 생기는거 같습니다!

3-2에서 css코드 작성 완료후, 3-3에서 js코드 작성하시는데 js 앞부분이 잘린거 같아요.

안녕하세요강사님 목소리가 귀에 쏙쏙박혀 잘듣고있습니다.강의 내용이 2024년 초 기준이라 1년이 지난 현재시점 node LTS 버전이 20.xx.x 버전에서 지금은 22.xx.x 버전으로 올랐습니다.버전에 따른 이슈가 있을수도있을것같은데 강의 버전에 맞춰서 진행해야하나요? 아니면 최신버전으로 진행해도 문제없을까요?

안녕하세요 강사님해당 7.3 섹션의 깃헙은 업데이트가 안되이어있는 것 같습니다.소소한 제보 드립니다... https://github.com/winterlood/onebite-react-v2/tree/main/section07/chapter03

안녕하세요.npm create vite@lastest 명령어 입력시 아래와 같이 오류가 발생하고 있습니다. 어떻게 해결해야 하는지 알수있을까요? => 노드 버전 (v22. 12. 0)=> 사용자 계정명 영어오류 발생했을 때 확인 부분1. npm 버전이 낮아 현재 11버전으로 업데이트 진행2. npm chche clean --force 진행 후 명령어 재실행 발생한 에러 메세지C:\Users\dwkim\Desktop\study\React\oneBite-React>npm create vite@lastestnpm error code ETARGETnpm error notarget No matching version found for create-vite@lastest.npm error notarget In most cases you or one of your dependencies are requestingnpm error notarget a package version that doesn't exist.npm error A complete log of this run can be found in: C:\Users\dwkim\AppData\Local\npm-cache\_logs\2025-01-11T02_29_00_002Z-debug-0.log

안녕하세요 강사님조건문, 반복문에서 또는커스텀 훅을 사용하기 전에 Hook을 사용하였을 때는함수 컴포넌트 외부에서 호출했을 때 오류가 발생하는 것 처럼 별다른 오류가 발생하지 않는데 말씀하신 내용으로는 권장사항인걸까요?조건문, 반복만에서 Hook 호출 시import { useState } from "react"; const HookExam = () => { //const state = useState(); if (true) { const state = useState(); console.log(state); } for (let i=0; i<1; i++) { const state = useState(); console.log(state); } return <div>HookExam</div> }; export default HookExam; 커스텀 훅 만들기 전에 Hook 호출 시import { useState } from "react"; function getInput() { const [input, setInput] = useState(""); const onChange = (e) => { setInput(e.target.value); console.log(e.target.value); }; return [input, onChange]; } const HookExam = () => { const [input, onChange] = getInput(); return ( <div> <input value={input} onChange={onChange}/> </div> ); }; export default HookExam;함수 컴포넌트 외부에서 Hook 호출 시 

// 중복 문자제거 function solution(my_string) { return [... new Set(my_string)].join("") } // 중복단어 제거 function solution(str) { return [...new Set(str)] } let str = ['good', 'time', 'good', 'time', 'student'] console.log(solution(str))