172만명의 커뮤니티!! 함께 토론해봐요.
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요 책과 강의를 병행하고 있습니다! 4장 리액트 앱 만들기, 5장 실습부분을 진행하고 있는데요 책에서는 create-react-app 으로 리액트 앱을 만들고, 강의는 vite로 앱을 만들고 있습니다. 또한 책에서는 main.jsx대신 index.js와 bundle.js가 생성된다고 하는데 강의를 따라가면 되는걸까요 ?? 분명 책과 강의의 차이점에 대해 어딘가에 정리되어있을 것 같은데.. 찾을 수가 없어서 질문드립니다!
미해결
Vue.js 시작하기 - Age of Vue.js
크롬 확장 프로그램 vue devtools 이 안되서 강의 듣는데 좀 답답하네요 ㅠㅠ <app-content v-bind:propsnum="message"></app-content> 이렇게 적으면 hi가 나오고 <app-content v-bind:propsnum="num"></app-content> 이렇게 적으면 10이 나오고 근데 '<h1> {{propsnum}} {{propsdata}}</h1>', 이렇게 두개는 안나오고... 어렵습니당.. 직접 데이터 확인해보면 좋은데 왜 확장프로그램이 안될까요....ㅠㅠㅠ 레거시로 깔았는데도 개발자도구에서 vue탭이 안보여요,.. <app-content v-bind:propsnum="message"></app-content> </div> let appContent={ template : '<h1> {{propsnum}} {{propsdata}}</h1>', props:['propsnum','propsdata'] } new Vue({ el: '#app', components:{ 'app-header' : appHeader, 'app-content' : appContent }, data:{ message : 'hi', num:10 } })
해결됨
진짜! 자바스크립트(Javascript) - 기초부터 고급까지
아래와 같이 에러가 납니다.
해결됨
자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)
push를 안쓰고 그냥 +=을 사용해서 answer에 arr[i]값을 넣었더니 79612 이렇게 나와요. push를 사용하는게 올바른 풀이일까요?
미해결
Vue.js 시작하기 - Age of Vue.js
component.html:11 Uncaught ReferenceError: Vue is not defined at component.html:11:20 (anonymous)@ component.html:11"" 콘솔 에러가 뜹니다..
미해결
실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트
안녕하세요. 제공해주신 인강으로 프론트엔드 테스트를 공부하고 있는 수강생입니다. 최근 일이 많아져 인강 듣는 시간을 할애하지 못하였지만 이번 설 연휴를 맞이하여 1편 다보고 2편까지 보려고 하는데 제가 실수로 할인 쿠폰을 발급 받았다가 사용하지 못하고 유효기간이 지나 버렸는데 재발급을 할수 있는 방법이 있는지 문의드립니다!
미해결
Vue.js 시작하기 - Age of Vue.js
강의 동영상화면이 안떠요,, 이전 이후 강의는 뜨는데.. 왜그런걸까요?
미해결
TailwindCSS 완벽 마스터: 포트폴리오부터 어드민까지!
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> 이렇게 주소 설정하니 잘 됩니다.
해결됨
진짜! 자바스크립트(Javascript) - 기초부터 고급까지
console 및 미리보기 hello world가 안보입니다.
미해결
SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
안녕하세요 ~ 배경색은 어떻게 설정하면 될까요 ?? shift + r 누르고 도형을 만드니까 배경색이 똑같이 흰색이라서 구분이 안되네요 ㅠ
미해결
SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
질문 주실 때 항상 2가지를 지켜주세요. 오류가 나는 부분이나 궁금한 부분의 브라우저 화면 캡쳐해서 올리기 HTML+SCSS+JS 코드 캡쳐 말고 텍스트로 붙여넣기 하기 만약 코드를 캡쳐해서 올리시면 제가 코드의 오류를 찾는게 너무 어렵습니다. 반드시 텍스트로 붙여넣기 해주세요. 위의 사진에서 폴더는 어디서 다운로드 하면 될까용 ?
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요 😀 강의 중 프로젝트 1 에서는 npm install 이 정상적으로 진행되었으나, 이번 useEffect 실습을 위해 강의내용처럼 새폴더 생성 후 npm i를 하니 아래와 같은 오류가 발생합니다. 구글링해서 여러 방법을 시도했으나 해결되지 않아 어떻게 해야할 지 질문드립니다 😥
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하십니까! 해당 강의를 열심히 들으며 리엑트를 공부하고 있는 대학생입니다. 듣다가 막히는 부분이 생겨 질문을 하게 되었습니다. 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;
미해결
[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
이건 어떻게 해야할까요..? ㅠㅠ
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요 강사님 한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 강좌 잘듣고 있습니다. 감사합니다. 저는 자막을 켜고 보는데,아래 강좌의 자목이 잘못된 것을 발견했습니다. 5-3) JSX로 UI 표현하기 그리고, 동영상을 보다가, 일시정지하면서, 자막을 다시 확인하면서 보고 있습니다만, 혹시, 학습 편의를 위해서, 동영상 강좌 자막 대본 내용도 같이 올려주실수 없을까요? 타입스크립트, Next.js에도 자막 대본 내용도 같이 올려주시면 좋겠습니다. ㅠ
미해결
풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
- 강의 영상에 대한 질문이 있으시면, 상세히 문의를 작성해주시면, 주말/휴일 제외, 2~3일 내에 답변드립니다 (이외의 문의는 평생 강의이므로 양해를 부탁드립니다.) - 강의 답변이 도움이 안되셨다면, dream@fun-coding.org 로 메일 주시면 재검토하겠습니다. - 괜찮으시면 질문전에 챗GPT 와 구글 검색을 꼭 활용해보세요~ - 잠깐! 인프런 서비스 운영(다운로드 방법포함) 관련 문의는 1:1 문의하기를 이용해주세요. <meta http-equiv="X-UA-Compatible" content="ie-edge"> 인터넷 익스플로러가 사라진 지금도 쓰이나요?
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
오늘 카운터앱 강의를 들으면서 새로운 파일 (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의 값을 확인하고 실행한다는게 이해가 잘 안됩니다.
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
섹션 4. DOM API-1 강의 6:30초 쯤 변수명을 다음과 같이 작성해주셨는데, 이는 미리 소개하신 2가지 방법의 예시를 모두 보여주기 위함인가요? let $animalInfo = document.querySelector('div.animal-info'); let ageElement = document.querySelector('div#age'); 실제 프로젝트에서는 2가지 방법 중 하나를 사용해 통일성을 주는게 좋을 것 같은데 혹시 다른 이유가 있으신지 궁금합니다!
미해결
비전공자의 전공자 따라잡기 - 자료구조(with JavaScript)
#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값이 들어가면서 오류가 생기는거 같습니다!
