묻고 답해요
169만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
web APIs 랑 web API랑 혹시 다른 말일까요?
뒤에 s만 소문자로 붙은게 신기해서 구글링을 조금 해봤는데 전부 web API로만 나와서요. 혹시 미세한 차이 같은게 있는지 궁금해서 질문해 봅니다.
-
미해결애플 웹사이트 인터랙션 클론!
선생님 캔버스 width 크기는 이미지 크기에맞게 해줘야하나요?
선생님 캔버스 width 크기는 이미지 크기에맞게 해줘야하나요?선생님은 <div class="sticky-elem sticky-elem-canvas"> <canvas id="video-canvas-0" width="1920" height="1080"></canvas> </div> 이렇게 주셨는데만약 제가 따로 실습할때의 이미지 최대크기가 1280x720 이라면캔버스 width 크기를 1280으로 해줘야하는게 맞나요? 예제 코드 그대로 쓰고 캔버스 width값 1920하니까 이미지가 왼쪽으로 좀 치우쳐져 있어서어제오늘 계속 애쓰다가 캔버스 width값을 이미지 최대크기값만큼 1280으로 주니까 해결이됬어요.. 그러면 이제 궁금한게 모바일일때 화면에 꽉 채우게하고싶은데 어떻게 줘야할지 감이안잡힙니다 ㅠ-ㅠ
-
미해결만들면서 배우는 리액트 : 기초
강의노트
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.안 보이는데 어디서 찾을 . 수있나요?
-
미해결TS/JS 디자인 패턴 with Canvas: 제로초에게 제대로 배우기
[섹션1/사전에 알아두면 좋은 TS/JS 지식]영상 재생 관련 질문 드립니다.
현재 [섹션 1/사전에 알아두면 좋은 TS/JS 지식] 영상이 검은 화면에 음성만 재생되는데 확인 부탁드립니다.감사합니다!
-
미해결처음 만난 리액트(React)
npx create-react-app my-app
npx create-react-app 까지는 잘 되는데 그 밑으로는 이런 오류가 뜨면서 되지가 않습니다..
-
미해결처음 만난 리액트(React)
jsx 코드 작성해보기에서 index.js 수정 후 에러 뜹니다.
ERROR in ./src/chapter_03/Library.jsx 5:0-24Module not found: Error: Can't resolve 'Book' in '/../my-react1/src/chapter_03'Did you mean './Book'?Requests that should resolve in the current directory need to start with './'.Requests that start with a name are treated as module requests and resolve within module directories (node_modules, /../my-react1/node_modules).If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.어떻게 해야 할까요?
-
미해결풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
강의화면은 index.js인데 왜 샌드박스코드에서는 index.mjs인지 궁금해요
index.mjs를 index.js로 바꾸려면 어케해야하나요
-
미해결풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
강의화면은 index.js인데 왜 샌드박스코드에서는 index.mjs인지 궁금해요
index.mjs 를 index.js로 바꾸려면 어케해야하나요
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
하이라이트 변경이 없는데요?
메모를 적용 하기 전의 화면(대략 1분55초 정도) 에서의 하이라이트와 적용한 후(대략 4분45초 정도)의 하이라이트에 무슨 차이가 있나요? 저만 그런가요? 테스트 작성한 로컬에서도 하이라이트 변화는 없는데요?
-
미해결비전공자의 전공자 따라잡기 - 자료구조(with JavaScript)
LinkedList로 스택, 큐 구현하기 숙제
스택 부분class Stack { head=null; tail=null; length=0; push(value) { if (this.head) { this.tail.next = new Node(value); this.tail.next.prev = this.tail; this.tail = this.tail.next; } else { this.head = new Node(value); this.tail = this.head; } this.length++; return this.length; } pop() { let value = this.tail?.value; if (!this.tail) { // 값 존재 x return null; } if (this.tail === this.head) { // 값이 하나 this.head = null; this.tail = null; } else { // 값이 여러개 this.tail = this.tail.prev; this.tail.next = null; } this.length--; return value; } } class Node { next = null; prev = null; constructor(value) { this.value = value; } } const stack = new Stack(); stack.push(1); stack.push(3); stack.push(5); stack.push(2); console.log(stack.push(4)); // length 리턴 5 console.log(stack.pop()); // 4 console.log(stack.pop()); // 2 console.log(stack.pop()); 큐 부분class Queue { head = null; tail = null; length = 0; enqueue(value) { if (this.head) { this.tail.next = new Node(value); this.tail.next.prev = this.tail; this.tail = this.tail.next; } else { this.head = new Node(value); this.tail = this.head; } this.length++; return this.length; } dequeue() { let value; if (!this.head) { return null; } if (this.head === this.tail) { // 한 개 value = this.head.value; this.head = null; this.tail = null; } else { // 여러 개 삭제 value = this.head.value; this.head = this.head.next; this.head.next.prev = null; } this.length--; return value; } } class Node { prev = null; next = null; constructor(value) { this.value = value; } } const queue = new Queue(); queue.enqueue(1); // 1 queue.enqueue(3); // 3 queue.enqueue(5); // 5 queue.enqueue(2); // 2 queue.enqueue(4); // 4 console.log(queue.enqueue(7)); // 7 console.log(queue.dequeue()); // 1 console.log(queue.dequeue()); // 3 console.log(queue.dequeue()); // 5 console.log(queue.dequeue()); // 2 console.log(queue.dequeue()); // console.log(queue.dequeue()); // console.log(queue.dequeue()); // 큐 부분에서 콘솔 로그로 찍어 봤을 때 deque가 1,3,5,2 까지 진행 되고 그 이후에this.head.next.prev = null; ^TypeError: Cannot set properties of null (setting 'prev')이런 에러가 발생하는데 이유가 궁금합니다.
-
미해결생활코딩 - 자바스크립트(JavaScript) 기본
강의 교안은 따로 없을까요?
찾아봐도 안 보여서요
-
미해결처음 만난 리액트(React)
Chapter_05 터미널, 리액트 에러
안녕하세요, 챕터 05 강의를 듣고 실습 중에 있었는데요.local 3000에서는 이런 에러 메시지가 뜨고,터미널에서는 이런 메시지가 뜹니다.CommentList.jsxindex.js 헷갈리는 부분이 많은데 설명 부탁드립니다!
-
해결됨입문자를 위한, ES6+ 최신 자바스크립트 입문
공부를 하면서 질문이 있습니다.
현재 짐코딩님의 자바스크립트와 리액트를 구입해 열심히 듣고 있습니다. 궁금한점이 강의를 듣고 나중에 혼자서도 코드를 작성할줄 알아야 실력이 느는데 자바스크립트 강의를 다 보고 자바스크립트로 혼자 만들어 보는게 좋을까요? 나중에 혼자서도 생각하는 것을 코드로 작성을 할만큼 실력을 키우려면 어떻게 공부를 해야좋을지 조언부탁드리겠습니다.
-
미해결비전공자의 전공자 따라잡기 - 자료구조(with JavaScript)
linkedList prev와 tail 사용 후 o(1) 구현.
class LinkedList { length = 0; head = null; tail = null; add(value) { if (this.head) { this.tail.next = new Node(value); this.tail.next.prev = this.tail; this.tail = this.tail.next; } else { this.head = new Node(value); this.tail = this.head; } this.length++; return this.length; } search(index) { return this.#search(index)[1]?.value; } #search(index) { let count = 0; let prev; let current = this.head; while(count < index) { prev = current; current = current?.next; count++; } return [prev, current]; } remove(index) { const [prev, current] = this.#search(index); if (prev) { prev.next = current.next; this.length--; return this.length; } else if(current){ // index = 0 일 떄 current = current.next; this.length--; return this.length; } if (current.next === null) { // index = tail this.tail = current.prev; current.prev.next = null; this.length--; } // 삭제 대상 없을 때 아무것도 안함. } } class Node { next = null; prev = null; constructor(value) { this.value = value; } } const li = new LinkedList(); li.add(1); li.add(2); li.add(3); li.add(4); li.add(5); console.log(li.add(6)); console.log(li.remove(5)); console.log(li.remove(4)); console.log 찍었을때는 오류 없이 나온거 같은데 잘 구현 했나 궁금합니다!
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
create-react-app my app 실행 시 에러
create-react-app my app 실행 시 아래와 같은 에러가 뜹니다. Installing template dependencies using npm...npm error code ERESOLVEnpm error ERESOLVE unable to resolve dependency treenpm errornpm error While resolving: my-app@0.1.0npm error Found: react@19.0.0npm error node_modules/reactnpm error react@"^19.0.0" from the root projectnpm errornpm error Could not resolve dependency:npm error peer react@"^18.0.0" from @testing-library/react@13.4.0npm error node_modules/@testing-library/reactnpm error @testing-library/react@"^13.0.0" from the root projectnpm errornpm error Fix the upstream dependency conflict, or retrynpm error this command with --force or --legacy-peer-depsnpm error to accept an incorrect (and potentially broken) dependency resolution.npm errornpm errornpm error For a full report see:npm error C:\Users\phhyu\AppData\Local\npm-cache\_logs\2025-01-06T07_30_45_069Z-eresolve-report.txtnpm error A complete log of this run can be found in: C:\Users\phhyu\AppData\Local\npm-cache\_logs\2025-01-06T07_30_45_069Z-debug-0.lognpm install --no-audit --save @testing-library/jest-dom@^5.14.1 @testing-library/react@^13.0.0 @testing-library/user-event@^13.2.1 web-vitals@^2.1.0 failed
-
해결됨백엔드 개발자에 의한, 백엔드 개발자들을 위한 프론트엔드 강의 - 기본편
CSR, SSR에 대해
안녕하세요, Foo님!좋은 강의 감사드립니다. 타임리프와 같이 SSR의 경우 AJAX 통신도 어려울 뿐더러 브라우저와 모바일 환경에서 필요한 API(엄밀히 말하면 Controller)를 각각 환경에 맞게끔 개발해야하는 단점이 있다. 반면에 CSR으로 FE를 설계하면 JSON만으로 통신하게 되어 하나의 API만 작성하면된다. 라고 이해하면 될까요?스마트폰에서도 반응형 웹의 경우 기존 브라우저에서의 html과 동일하게 이뤄지니 같은 API로 처리할 수 있는게아닌가요? (모바일 앱과 모바일에서 보는 브라우저의 차이가 있는건가요?)
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
줄바꿈 단축기 질문 _4분 20초
4분 20초에 input 태그에 줄바꿈되는 단축키가 뭔가요? 🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
-
해결됨React Three fiber(R3F)로 배우는 인터렉티브 3D 웹 개발
onClick 이벤트함수로 raycaster 방향이 자동으로 set되나요?
const shoesClick = () => { const intersects = raycaster.intersectObjects( gltf.scene.children, true ); };강의에서는 위와 같이 raycaster.intersectObject 메서드 호출시에 scene에 children을 넘겨주시는데 클릭 이벤트의 eventObject 를 넘겨주지 않았는데도 raycaster에 마우스 방향을 set 가능한가요?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
감정다이어리 edit 컴포넌트 만들때
12.8강) edit 컴포넌트 작성할때 저는 diary 컴포넌트처럼edit 컴포넌트 안에useParams 훅 호출해서import { useParams } from "react-router-dom"; const Edit = () => { const params = useParams(); return <div>{params.id}Edit</div>; }; export default Edit; 이렇게 설정해줘야route 설정할때도 id에 따른 페이지가 잘 보이던데저만 그런가요 아니면 강의에선 스킵이 된건가여
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
수업 노트 링크 오류 제보
링크는 chapter16으로 되어있는데 클릭하면 chapter14 입니다.