묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결웹 애니메이션의 새로운 표준, Web Animations API
key.svg 이미지
안녕하세요 !강의를 열심히 따라가고있는 학생입니다:)key.svg 가 데이터 폴더에 있긴한데 강사님이 직접 자르신 키 사진(쇠 모양이없음) 과는 다르던데,저는 어도비 일러스트 유료버전이없어서 그런데 어떻게 해야할까요 ?
-
해결됨기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
shadcn 라이브러리
shadcn는 next.js에서만 사용가능한 라이브러리 인가요?
-
미해결인터랙티브 웹 개발 제대로 시작하기
[정보-23강] ES6 class 문법으로 공부하시는 분들!! 화살표 함수로도 시도해보셔요!
강의에서 나오는 prototype 말고 class 문법으로 바꿔서 공부하시는 분들 참고하셔요! 🫶❤ 화살표함수란 ?함수를 간결하게 정의할 수 있는 문법으로, 함수가 호출될 때의 this 컨텍스트가 정적으로 결정됨. 주로 콜백 함수나 메서드 정의 시 this 바인딩 문제를 해결하기 위해 사용됨.정리Arrow Function 내부에서 this를 사용하면, 함수가 정의된 시점의 외부 컨텍스트를 유지하게 됨화살표 함수 ver.run = () => { if (this.direction === 'left') { this.xPos += this.speed; } else if (this.direction === 'right') { this.xPos -= this.speed; } this.mainElm.style.left = `${this.xPos}%`; requestAnimationFrame(this.run); };Bind 메소드 ver.run() { if (this.direction === 'left') { this.xPos += this.speed; } else if (this.direction === 'right') { this.xPos -= this.speed; } this.mainElm.style.left = `${this.xPos}%`; requestAnimationFrame(this.run.bind(this)); }
-
미해결인터랙티브 웹 개발 제대로 시작하기
동적으로 html 생성 후 이벤트 위임 질문 있습니다.
안녕하세요. 이벤트 위임 연습하다가 변칙적으로 연습하고 있는데요. 동적으로 html 생성 된 후에 버튼에 ''-active"클래스 추가 하면 실제로 클래스가 추가가 안되네요. 그런데 elem을 consol 창에 찍어보면 "-avtive"클래스가 추가된 요소로 나오는데 이건 무슨 문제일까요?<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>스크립트 연습</title> <style> *, *::before, *::after {margin:0; padding:0; box-sizing:border-box;} h1 {padding:20px 0;} h2 {padding-bottom:20px;} li {list-style:none;} .container {max-width:1000px; margin:0 auto; padding:0 20px; background-color:#f1f1f1;} .wrap {padding:40px; border:1px solid #888;} .wrap + .wrap {margin-top:50px;} .btn-list {display:flex; justify-content:space-between; gap:20px; width:100%; padding:20px; background-color:dodgerblue;} .btn-list li {width:calc(100% / 3);} .btn-list__item {width:100%; padding:10px;} .btn-list__item.-active {background-color:darkkhaki;} </style> </head> <body> <div class="container"> <h1>스크립트 연습</h1> <section class="wrap btn-wrap"> <h2>버튼 연습</h2> <ul class="btn-list"> <!-- <li class="asdf"><button class="btn-list__item"><span>버튼</span> 1버튼</button></li> <li class="asdf"><button class="btn-list__item"><span>버튼</span> 2버튼</button></li> <li class="asdf"><button class="btn-list__item"><span>버튼</span> 3버튼</button></li> --> </ul> </section> <script> window.addEventListener('DOMContentLoaded', initHandler) function initHandler() { buttonListHandler(); } function buttonListHandler() { const btnWrap = document.querySelector('.btn-wrap'); const btnList = document.querySelector('.btn-list'); let currentItem = null; function clickHandler(el) { let elem = el.target; while (!elem.classList.contains('btn-list__item')){ elem = elem.parentNode; // console.log(elem) if(elem.nodeName === 'BODY'){ elem = null; return; } } if(currentItem){ currentItem.classList.remove('-active'); } if(elem.classList.contains('btn-list__item')){ elem.classList.add('-active'); currentItem = elem; } console.log(elem); } btnWrap.addEventListener('click', ()=> { const htmlStr = ` <li><button class="btn-list__item"><span>버튼</span> 1버튼</button></li> <li><button class="btn-list__item"><span>버튼</span> 2버튼</button></li> <li><button class="btn-list__item"><span>버튼</span> 3버튼</button></li> `; btnList.innerHTML = htmlStr; }) btnWrap.addEventListener('click', clickHandler); } </script> </div> </body> </html>
-
미해결인터랙티브 웹 개발 제대로 시작하기
rotateY()에서 deg에 따른 차이
오른쪽 벽에서 transform을아래와 같이 설정하면 브라우저를 통해 보여지는 길이가 다릅니다. 이유가 뭘까요?transform: rotateY(-90deg) translateZ(400vw);
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
모니터 해상도에 따라 mesh의 크기가 변할 수 있나요?
imac에서 mesh의 크기를 원하는 크기로 맞춰놓았습니다.그런데 일반 노트북이나 다른 모니터를 이용해서 작업할려고 보니까 imac에서 맞춰놓은 mesh의 크기값이 다르게 보이는 이유가 뭔가요?
-
미해결애플 웹사이트 인터랙션 클론!
스크롤할 때 캔버스로 하신 이유가 있으신가요? 그냥 성능 떄문에 캔버스로 하신건가요?
스크롤할 때 캔버스로 하신 이유가 있으신가요? 그냥 성능 떄문에 캔버스로 하신건가요?
-
해결됨웹 애니메이션을 위한 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에 대해 공부하다보니 지양한다는 글들이 많은데, 어떻게 생각하시는지 궁금합니다. 감사합니다.
