묻고 답해요
129만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
모바일 조이스틱은 어떻게 만들 수 있을까요?
studiomeal.com 을 모바일로 들어가면 조이스틱이 있는데 혹시 이런 조이스틱을 찾을 수 있는 키워드 없을까요?
-
해결됨인터랙티브 웹 개발 제대로 시작하기
이미지가 없는데 첨부파일을 다운 받는 방법이 있나요??
해당 강의를 진행하기 위해서스프라이트 이미지를 다운받으려고 하는데 제공되는 이미지가 없는 것 같아서요! 따로 다운 받을 수 있는 링크가 있나요??
-
미해결기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
컴포넌트 만들때에는 jsx를 사용하는 이유?
안녕하세요. 강의를 수강중인 수강생입니다.혹시 컴포넌트들을 만들때엔 타입스크립트 tsx가 아닌 jsx를 사용하시는데, 이러한 이유가 있을까요? 추가적으로 React.FC에 대해 공부하다보니 지양한다는 글들이 많은데, 어떻게 생각하시는지 궁금합니다. 감사합니다.
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.02
이미지 관련 사이트 문의드립니다.
안녕하세요~! gsap part2 수강생입니다.토이스토리 처럼 타임라인 방식으로 다른 이미지를 활용해서 새로 만들어보고싶은데요.무료 다운가능한 이미지 사이트가 있을까요? 있다면 공유 부탁드릴게요.ㅠ
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
징검다리 예제에서 SpotLight가 동작 오류
징검다리 예제에서 SpotLight가 동작하지 않는 것 같습니다.강의 내용대로 예제를 하고 있는데 동작하지 않아서 BRIDGE_FIN 폴더(완성된 예제)를 그대로 다운받아서 실행을 해도 동일하게 SpotLight가 동작하지 않는 것 같습니다. 아래와 같이 빛이 없습니다. node 버전 : 18.17.0확인 부탁드립니다.
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.03
노션 링크 보는 곳
강의 수강중인데 노션 링크는 어디에서 볼 수 있나요?
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.03
반응형 관련해서 질문드립니다.
안녕하세요. 강사님강의 완강하고 반응형 작업을 테스트 해보던 중에 잘 풀리지 않는 점이 있어 문의 드립니다.아래 코드에서 반응형 matchMedia 로 해상도 별로 나눠서 작업하려던 중에 pin이 끝나고 bottom 영역이 반쯤 올라왔을때 개발자모드에서 기기 툴바를 사용해 모바일 사이즈로 전환해 버리면 pin된 영역이 틀어지는 현상이 발생합니다. 이전 가로와 높이값을 그대로 유지하고... 원인과 이유를 알 수 있을까요?<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>TEST</title> <style> * {margin: 0; padding: 0;} .wrap { overflow: hidden; } .top { height: 400px; } .center { position: relative; overflow: hidden; width: 100vw; height: 100vh; background: purple; } .bg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; height: 80%; border-radius: 40px; background: yellow; } .bottom { height: 2000px; background: gray; } .box { width: 200px; height: 200px; background: orange; } </style> </head> <body> <div class="wrap"> <div class="top"></div> <div class="center"> <div class="bg"></div> </div> <div class="bottom"> <div class="box"></div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js"></script> <script> ScrollTrigger.create({ trigger: '.wrap .center', start: 'top top', end: "+=2000", animation: gsap.to('.wrap .bg', {width: '100%', height: '100%', borderRadius: 0}), pin: true, scrub: true, invalidateOnRefresh: true, markers: true, }) const wrapper = document.querySelector('.wrap'); const box = document.querySelector('.box'); const mm = gsap.matchMedia(wrapper); mm.add('(max-width: 1024px)',()=>{ gsap.to(box,{ backgroundColor: '#000', }) console.log('m'); }) mm.add('(min-width:1025px)',()=>{ gsap.to(box,{ rotation: 360, duration: 2, repeat: -1, ease:'none' }) console.log('pc'); }) window.addEventListener('resize', ScrollTrigger.update) // window.addEventListener('resize', ScrollTrigger.refresh) </script> </body> </html>
-
미해결기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
Hot reload 오류 문의 드립니다.
안녕하세요강사님은 코드 수정 후 브라우저에서 바로바로 확인이 되는 것 같은데 저는 코드를 수정할 때 마다 아래의 오류가 발생해서 매번 다시 yarn dev를 해줘야 수정한 내역이 확인이 되다 보니 강의를 따라 진행 하는대 집중이 되질 않네요. 혹시 아래의 에러가 발생 되지 않게 하는 방법이 있는 것인지 문의 드립니다.감사합니다.수고하세요.===================================================================⨯ [Error: UNKNOWN: unknown error, open 'D:\study\react\workspace\yt-music-clone-next\.next\static\chunks\app\layout.js'] {errno: -4094,code: 'UNKNOWN',syscall: 'open',path: 'D:\\study\\react\\workspace\\yt-music-clone-next\\.next\\static\\chunks\\app\\layout.js'===================================================================
-
미해결기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
멀티 선택 단축키
2분 50초쯤에서 멀티선택 하는 방법 알려주시면 감사하겠습니다!!
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
3D 공간에서 움직이는 캐릭터 3 에서 y좌표가 이상해요
3D 공간에서 움직이는 캐릭터 3 강의에서 function checkIntersects() { console.log(item.point)} 위 코드에서 마우스를 화면상 위로 down & move 하면, y 좌표가 계속 증가하고, 아래쪽으로 하면 y좌표가 계속 감소하는데,실제로는 y좌표는 0으로 고정되어야 하는것 아닌가요?x좌표와 z좌표는 당연히 변경되는게 맞는데, y좌표가 왜 그런건지 궁금합니다. 그리고 이상하게도 일률적으로 y좌표 같이 증가하거나 감소하는것도 아니고, 한번씩 튀는경우도 생기구요.
-
미해결기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
웹사이트에서 바로 한글로 번역되는거 어떤 프로그램쓰시는건가요?
안녕하세요. 처음 15초쯤에 nextjs소개하면서 나오는 번역프로그램은 어떤걸 쓰시는건가요? 편리해보여서요~
-
해결됨기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
themeprovider
만들어놓은 themeprovider파일 어떻게 자동으로 import 추가하나요? 저는 컴포넌트 눌러도 뜨는게 없어서요ㅠ
-
미해결애플 웹사이트 인터랙션 클론!
게속 오류떠서 글 작성해봐요....
Uncaught TypeError: Cannot read properties of undefined (reading 'scrollHeight') at scrollLoop (main.js:367:65) at main.js:388:9 이런 오류 떠서 제 자바 스크립트 코드도 여기 올려볼께요....
-
미해결인터랙티브 웹 개발 제대로 시작하기
'이벤트 위임 보강 영상'에 있는 예제 html이 안 보입니다
섹션5에서 제공 중인 파일을 모두 받아 봤습니다.그런데 이벤트 위임 보강 영상에서 보이는 delegation.html이 안 보입니다..혹시 제가 못 찾은걸까요??
-
미해결인터랙티브 웹 개발 제대로 시작하기
섹션5 자바스크립트 이벤트 다루기 질문
안녕하세요 유준모 강사님.'움직이는 캐릭터 예제로 클릭 이벤트 익혀보기'에서 10분 30초쯤 "전역변수 회피를 위해서"라고 말하셨는데, 이 말이 어떤 건지 자세히 알 수 있을까요??
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
애니메이션 export 안 될때
gltf 파일로 export 할때강의에서는 mesh만 선택하고 export 하던데, 그랬더니 애니메이션 객체가 전혀 없었습니다.mesh뿐만 아니라 amature(뼈대)도 함께 선택하니(그냥 a로 전부 선택)하니애니메이션 객체도 생겼고, 애니메이션 잘 되네요. 블렌더 버전이 올라가면서 그렇게 동작이 바뀐것이 아닐까요?제가 쓰는 블렌더 4.0.2three.js 0.162.0
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
예제와 보여지는게 다릅니다.
위 사진은 제가 07\07\material_fin\src\ex02.js 를 실행시킨 것이고이 사진은 강의도중 보이는 화면인데 빛의 밝기가 왜 다른걸까요?
-
해결됨순수하게 html/css/js만을 활용한 반응형 웹 제작 [실전편]
수업 소스 다운로드 어디서 받을수 있나요?
영상 수업 소스 다운로드는 어디서 받을수 있나요?영상 수업 동일하게 코딩해도 오류가 나거나 정상적으로 출력되지 않아..
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
npm start warning 문제
이전 강의들과 동일하게 readme.txt 파일의 패키지 설치까지는 문제 없이 설치 됩니다만, npm start에서 계속 해당 내용의 오류가 발생합니다. node.js 재설치도 해보고 검색도 해봤지만 해결되는 부분이 없어서 질문 드립니다 ㅠㅠ오늘 다른 강의에서도 같은 내용의 질문이 올라온 것 같던데 어떻게 하면 해결이 될까요?
-
해결됨Three.js로 시작하는 3D 인터랙티브 웹
npm start 시, WARNING in ./node_modules/html-entities/lib/index.js 가 발생합니다.
섹션 3. Transform(변환) 에서 소스코드를 다운로드 받고,VS Code에서 Transform 폴더를 추가한 후,readme.txt의 순서대로,패키지 설치하고,서버 구동을 진행했습니다. npm start 명령 후,아래의 내용과 같이 WARNING과 Failed가 발생합니다. WARNING in ./node_modules/html-entities/lib/index.jsModule Warning (from ./node_modules/source-map-loader/dist/cjs.js):Failed to parse source map from 'Z:\STUDY\04\transform\node_modules\html-entities\src\index.ts' file: Error: ENOENT: no such file or directory, open 'Z:\STUDY\04\transform\node_modules\html-entities\src\index.ts' @ ./node_modules/webpack-dev-server/client/overlay.js 10:0-39 212:28-34 @ ./node_modules/webpack-dev-server/client/index.js?protocol=ws%3A&hostname=0.0.0.0&port=8080&pathname=%2Fws&logging=info&overlay=true&reconnect=10&hot=true&live-reload=true 12:0-60 135:46-59 242:27-40 273:28-41 추가로 npm version 명령의 결과는,{ 'threejs-study': '1.0.0', npm: '10.2.4', node: '20.11.1', acorn: '8.11.2', ada: '2.7.4', ares: '1.20.1', base64: '0.5.1', brotli: '1.0.9', cjs_module_lexer: '1.2.2', cldr: '43.1', icu: '73.2', llhttp: '8.1.1', modules: '115', napi: '9', nghttp2: '1.58.0', nghttp3: '0.7.0', ngtcp2: '0.8.1', openssl: '3.0.13+quic', simdutf: '4.0.4', tz: '2023c', undici: '5.28.3', unicode: '15.0', uv: '1.46.0', uvwasi: '0.0.19', v8: '11.3.244.8-node.17', zlib: '1.2.13.1-motley-5daffc7'}와 같습니다.