묻고 답해요
160만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.01
다중요소 제어시 질문드립니다.
vs코드에서 코드를 입력하고 확인을 해보면 강사님 영상처럼 자연스럽지가 않고 ....gsap.to('.box',{y:-200, stagger:0.5});예를 들어 위에처럼 소스 입력하면 5개의 컬러박스가 있으면 강사님 영상에서는 첫번째것부터 차례대로 stagger가 되는데요, 근데 제가 확인을 할땐 첫번째 박스는 이미 위에 올라가있는 상태고 2번째거 올라가는걸로 확인이 됩니다. 아래 비슷한 질문이 있어서 함수로도 해보고 duration 을 해봐도 동일해서....
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.03
OneScroll Layout 모바일 터치
강의 내용에선 fullpage.js 대신 직접 gsap을 활용해서 원페이지 형식을 만드는 방법을 알려주셨는데 물론 fullpage보다 직접 gsap으로 구현시 원하는 기능을 커스텀하기는 좋지만 모바일 환경에서(터치관련해서) 대응하기 쉽게 fullpage를 사용해는 경우가 많아서 혹시 강의에서는 원페이지 관련해서 터치 이벤트에 대한 내용이 없어서 따로 사용하시는 방법이 있으신가요?모바일에서 터치 드래그시 일정부분 섹션이 따라서 스크롤 되다가 터치를 놓은 시점에서 얼만큼 비율을 넘기는지에 따라 원래섹션으로 아니면 다음섹션으로 가는 기능을 추가해야하는데 gsap기능을 혼합해서 사용시 onLeave시 충돌이 생길것 같아서.. 물론 직접 만들면 되지만 혹시 참고할만한 예시코드가 있으신가요?
-
미해결웹 애니메이션의 새로운 표준, Web Animations API
Vue.js 적용 방법
안녕하세요. 강의 정말 재밌게 보았습니다 :)강의를 듣고 Vue2에 적용하려 하니 해당 에러가 발생합니다.js를 import해서 사용하는 것 만으로는 제약이 있는 것인가요..?😥😥
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
live server와 localhost:8080
언제는 live server로 실행하고 언제는 http://localhost:8080 으로 실행하는데 차이가 뭘까요??
-
미해결인터랙티브 웹 개발 제대로 시작하기
코드 작성 순서
안녕하세요 선생님~ 수업 잘 듣구있습니다 ㅎㅎㅎ door-opened 클래스를 add하고 remove하는 순서로 생각했는데 코드 작성 흐름이 거꾸로 역순으로 가는 이유가 있을까요...?^^;;;
-
미해결Three.js로 1인칭 3D 웹사이트 만들기
반발력을 0으로 해도 계속 튕겨져나갑니다..ㅜ
안녕하세요 늘 좋은강의 감사합니다.playerContactMaterial 에서 restitution을 0으로 뒀는데도 캐릭터가 엄청 튕겨지네요 ㅜplayer의 cannonMaterial도 playerCannonMaterial로 변경했는데 똑같이 엄청 통통 튕겨다닙니다...그래서 궁금해서 그냥 defaultContactMaterial의 반발력을 0으로 두고 전부 defaultMaterial을 적용해봐도 똑같이 전부 통통 튕겨 다니네요...영상에서도 보면 부딪힐 때 캐릭터가 뒤로 튕겨져 나가는거 보니 어쩔수 없는 현상인걸까요??...
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.02
duration과 stagger
안녕하세요 선생님! 수업 즐겁게 잘 듣고 있습니다!문득 duration과 stagger 사이의 궁금증이 생겨 문의드립니다. 제가 이해한 바로는duration = 애니메이션 진행시간의 총량stagger = 애니메이션 진행시 아이템간의 간격이렇게 이해하고 있습니다.그런데 만약 duration 1초,stagger 0.5초,item * 8(item) 0.5 (item) 0.5 (item) 0.5 (item) 0.5 ...duration이 설정한 1초를 아득히 넘어가게 되는데GSDevTools로 확인해보니 stagger로 인해 초과되는 시간만큼 늘어나는 것으로 확인이 됩니다.그렇다면 duration보다 stagger의 총합 길이가 더 우선이 되니 stagger의 총합 길이가 초과할 시 duration은 필요 없겠다라고 생각이 들었습니다.그런데 GSDevTools로 확인해본 결과 duration 1초 적용시 4.5초 / 미적용시 4초 라는 결과값을 확인했습니다. 어떤 상관이 있는지 궁금하여 질문 남깁니다..!
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
material에 canvas 를 texture 로 넣는방법이 궁금해요
안녕하세요!수강한지는 좀 됐는데ㅠㅠ 이제 좀 사용해볼까 하고혼자 작업해보면서 이것저것 해보고있는데요.. 궁금한것이 2가지 있습니다.material에 canvas를 new THREE.CanvasTexture로 변환해서 한쪽(앞)면에만 map을 넣어서 테스트해보고 있는데요,, map에 넣게되면 화면이 까만색으로 나오게 되어서.. 콘솔 창에 오류는 나오지 않아요 (needsUpdate = true도 해주었습니다)canvas에 이미지 여러개 또는 텍스트를 context를 통해서 추가할 때 위치,넓이,높이는 직접 지정해줘야 하는건가요?(블렌더를 사용 X)
-
해결됨기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
8.2에서 보이는 site안에 page파일과 7.6에서 보이는 page파일의 코드가 다른거 같습니다.
8.2에서 보이는 site안에 page파일과 7.6에서 보이는 page파일의 코드가 다른거 같습니다.깃허브에는 7.7 챕터가 따로 있던데... 혹시 그 브랜치에 site안의 page파일을 그대로 사용하면 될까요??
-
해결됨기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
changer라는 컴포넌트를 사용하는 이유
HeaderBgChanger라는 컴포넌트는 단순히 서버 컴포넌트에서 react hook을 사용할 수 없기 때문에 만드는 컴포넌트인지 궁금합니다.또 이렇게 컴포넌트를 만들 경우에 렌더링 될 때 영향을 주는 부분은 없는지 궁금합니다.
-
미해결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좌표 같이 증가하거나 감소하는것도 아니고, 한번씩 튀는경우도 생기구요.
