묻고 답해요
131만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결인터랙티브 웹 개발 제대로 시작하기
섹션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'}와 같습니다.
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
회전시 mesh의 중심점 변경하는 방법 문의
transform rotation 강의를 보고 궁금한 점 문의합니다.mesh의 중심으로 회전이 되고 있는데,회전의 기준점을 바꿀 수 있는지 질문 드립니다.
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.02
노션 링크는 어디에 있는지 문의 드립니다~
노션 링크는 어디에 있는지 문의 드립니다~
-
해결됨Three.js로 시작하는 3D 인터랙티브 웹
npm start 시 error가 발생합니다.
웹팩(Webpack) 살펴보기 강좌를 진행 중에 있습니다. node.js는 20.11.1 LTS를 다운로드받아서 설치했습니다. 여기서 서버를 구동하기 위해, 터미널에서 npm start를 입력하면 아래와 같은 에러가 발생하고 더 이상 진행되지 않습니다.어떻게 문제를 해결해야 할까요?
-
미해결React Three fiber(R3F)로 배우는 인터렉티브 3D 웹 개발
물질을 클릭했을 때 이벤트
물질에게 클릭이벤트를 주어 보이는 시점이 바뀌거나 물체가 이동할수있게 하고싶습니다.
-
미해결몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
go live 실시간 크롬
vs code 에서 go live 를 실행하며 코드를 수정할 때 실시간으로 chrome 에서 상태가 변하지 않습니다.f5 를 누르면 새로운 chrome 창이 뜨면서 수정된 코드 상태를 보여주는데 강의 영상처럼 보고 있는 chrome 창을 유지하면서 실시간으로 확인하려면 어떻게 해야하나요?
-
미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
반응형에 대해 질문이 있습니다 !
안녕하세요 깡코딩님, 다름이 아니라 모바일 뿐만아니라 pc도 반응형이 필요할텐데 맥북프로같은 경우는 해상도가 크더라구요 ..이럴경우 처음부터 크게 작업하고 미디어 쿼리로 점점 작게 진행해야하는걸까요???1920까지만 신경쓰고 최소로 280까지만 신경썼는데 이렇게 큰게 나오니 또 조정을 해야하나 싶습니다.
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
npm start 오류
계속 이렇게 오류가 떠서 캐시 지워서 해보고 다시 설치도 해보고 명령어도 입력해봐도 해결이 안되네요 ㅜㅜ뭐가 문제일까요..
-
미해결웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT
renderGame 함수에 로그를 찍으면 무한루프가 돕니다
window.requestAnimationFrame 에서 계속 호출을 하고 있어서 그런 것 같은데스위치를 만들어야 할까요?
-
미해결웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT
수리검이 날아가지 않습니다
const renderGame에서 keyMotion()까지는 작동을 하는데그 이후 forEach부분부터는 작동하지 않는것같습니다, 왜이럴까요?오타도 없고 아무이상없습니다!혹시 window.requestAnimationFrame이 너무 빨라서 bulletComProp foreach가 씹히는걸까요? ㅠㅠ... 코드 보내드립니다<game.js> const renderGame = () => { hero.keyMotion(); bulletComProp.arr.forEach((arr,i)=>{ arr.moveBullet(); }) window.requestAnimationFrame(renderGame); } <class.js> if(key.keyDown['attack']){ this.el.classList.add('attack'); bulletComProp.arr.push(new Bullet()); } class Bullet { constructor(){ this.parentNode = document.querySelector(".game"); this.el = document.createElement("div"); this.el.className = "hero_bullet"; this.x = 0; this.y = 0; this.speed = 30; this.distance = 0; this.init(); } init(){ this.x = hero.position().left + hero.size().width/2; this.y = hero.position().bottom - hero.size().height/2; this.el.style.transform = `translate(${this.x}px, ${this.y}px)`; this.parentNode.appendChild(this.el); } moveBullet(){ this.distance += this.speed; this.el.style.transform = `translate(${this.distance}px, 100)`; this.el.style.backgroundColor = 'red'; } }
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
scene에 camera add는 꼭 필요한 건가요?
renderer에서 camera를 render 해주는데, scene에 add가 꼭 필요한건지 궁금해요!scene.add(camera) 를 지웠을 때도 에러메세지 없이 잘 작동이 되는 것 같은데 필요한 코드인가요?만약 필요한 코드라면, scene에 add 된 light와 mesh는 왜 따로 render을 해주지 않는건가요?
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
css가 연결이 안되요 ㅜㅜ
사용방법 3 듣는중인데요 main.css를 연결하려고 하는데 저렇게 뜨는데 무슨 문제일까요?
-
미해결웹 애니메이션의 새로운 표준, Web Animations API
강사님 vscode 폰트와 색상이 뭔가요
폰트와 폰트 색상이 예뻐서 그러는데어떤거 사용 하나요?그리고 vscode 다크모드에서도 폰트 색상이 동일하게 적용 되나요?키보드 정보도 알고 싶습니다
-
미해결웹 애니메이션의 새로운 표준, Web Animations API
2:20분 이해가 가지 않습니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .box { width: 100px; height: 100px; background: coral; transition: 1s; } body { margin: 0; } .box-action { transform: translateX(300px); background: blue; } </style> </head> <body> <div class="box"></div> <script> const box = document.querySelector(".box"); box.addEventListener("click", () => { box.classList.toggle("box-action"); }); </script> </body> </html> 안녕하세요 강사님.toggle 해서 클릭 하면 상자가 300px 인 곳으로 이동하는 건 이해 하였는데, 다시 클릭 하면 왜 기존의 위치로 가는건가요? css에서는 가로 세로 100px 이라고만 했는데....이해가 가지 않습니다.
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.03
ScrollTrigger의 end와 toggleClass
안녕하세요, 선생님.섹션2 Advanced Trigger - practice 예제에서fixedHeader() 함수를 통해 헤더가 pin되어 start 지점부터 fixed 처리가 되잖아요~이와 동시에 fixed 될 때 특정 클래스(toggleClass : "active")를 넣어서 스타일을 다르게 주려고 했거든요.그런데 end 마지막 지점에 스크롤이 닿으면 fixed는 되어있지만 class는 사라지더라고요.혹시 다른 방법이 있을까요? function fixedHeader(){ ScrollTrigger.create({ trigger: '.nav_container', start: 'top top', // endTrigger:'.footer', end: 'max', pin: true, pinSpacing: false, toggleClass : "active" }) }