묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨인터랙티브 웹 개발 제대로 시작하기
전진! 3D 스크롤 21 강의 질문
전진! 3D 스크롤 21 강의에서,스크롤을 내리거나 올릴 때 css를 적용하는 과정에서 css 코드가 잘 이해가 가지 않아서 질문 드립니다..character[data-direction='forward'] { transform: rotateY(180deg); } .character[data-direction='backward'] { transform: rotateY(0deg); } .character[data-direction='left'] { transform: rotateY(-90deg); } .character[data-direction='right'] { transform: rotateY(90deg); }css 선택자에서 [ ]는 속성을 의미하는 걸로 알고있는데,그렇다면 위의 코드는 클래스 이름이 character인 클래스이고, chracter 클래스 중에서 data-direction = 'forword'라는 속성을 가지는 것을 가리킨다고 해석하면 될까요?클래스 자체도 하나의 속성인데 그 안의 또 다른 속성?이 들어간걸로 이해가 되서 질문드립니다ㅠㅠ
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.02
섹션 0, 버그와 리팩토링에서 아이콘 클릭시 진행률을 알아올 수 있나요??
안녕하세요 !강의를 듣다가 궁금한점이 생겨 글을 남깁니다. switch (id) { case 'home': console.log('home'); progress = 0; break; case 'mountain': console.log('mountain'); progress = 0.21; break; case 'river': console.log('river'); progress = 0.47; break; case 'company': console.log('company'); progress = 1; break; } gsap.to(route_animmation, { progress: progress, duration: 1 });위의 코드에서, progress: progress 변수로 사용중에다가, progress를 switch 문에서 직접 치수를 넣어주고 있는데, 클릭시 해당 svg path의 진행률을 직접 가져올 수는 없는걸까요 ? 반응형 코드에서 문제를 어떤식으로 해결하시는지 궁금합니다.
-
해결됨기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
소스 수정 후 자동 컴파일 문의드립니다.
1.3 NextJS 설치 편에서다크모드 설정하는 부분에서 문의드립니다.<ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange > {children} </ThemeProvider>설정 후, 영상에서는 dark, light로 수정하면 반영되는것을 확인할 수 있는데 제 코드에서는Warning: Extra attributes from the server: class,style그리고Warning: Prop className did not match. Server: "__className_aaf875 vsc-initialized" Client: "__className_aaf875"라는 워닝이 발생하여 자동적으로 반영되지 않는 것을 확인했습니다.해당 이슈를 수정할 수 있는 방법이 있을까요 ?
-
미해결인터랙티브 웹 개발 제대로 시작하기
eventlistener 질문
이벤트 강의를 듣고 나서 addEventListener를 이용하여 여러 장의 사진이 있으면 슬라이더처럼 하나씩 넘겨서 볼 수 있는 이벤트를 만들 수 있을 것 같아 혼자 코드를 직접 짜봤는데요,body 부분은 아래처럼 작성하고, <body> <div class="container"> <div class="slider" id="slider-01"></div> <div class="slider" id="slider-02"></div> <div class="slider" id="slider-03"></div> </div> </body>css는 아래처럼 작성했고,.container { position: relative; width: 660px; height: 440px; overflow: hidden; } .slider { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: contain; background-repeat: no-repeat; transform: translateX(100%); } #slider-01 { background-image: url(./images/cat/cat-01.png); z-index: 3; } #slider-02 { background-image: url(./images/cat/cat-02.webp); z-index: 2; } #slider-03 { background-image: url(./images/cat/cat-03.webp); z-index: 1; } .sliderMove { transform: translateX(0%); transition: 1s; }js코드를 아래와 같이 작성했습니다.<script> window.addEventListener("load", function sliderHandler() { const sliderGroup = document.querySelectorAll(".slider"); let currentSlider; function activate(elem) { elem.classList.add("sliderMove"); currentSlider = elem; } function inactivate(elem) { elem.classList.remove("sliderMove"); } for (i = 0; i < sliderGroup.length; i++) { if (currentSlider) { inactivate(currentSlider); } activate(sliderGroup[i]); } }); </script>후에 실행을 해보니 사진이 슬라이더처럼 작동이 안돼서요.. 작동이 안되는 이유와 어느 부분을 수정해야 하는지 알려주시면 감사하겠습니다!혹 수업 내용과는 조금 벗어난 질문을 한 거라면 정말 죄송합니다ㅜㅜ..
-
해결됨기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
정적배포
안녕하세요 ! 강의를 따라하고있다가문득 생각이 들었는데요.channel / [id] 이렇게 동적 페이지가 나오게 되면 정적 배포를 하게 될땐 어떤 방식으로 하시게 되나요 ?
-
해결됨기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
zustand 상태관리
안녕하세요 ! 강의따라서 zustand 라는 상태관리 지금 사용해보고있는데요 강사님은 현업에서 백엔드와 같이 작업하시면서 zustand 사용하고 계시나요 ?? 만약 사용하고 계신다면 제한사항이나 불편한것들이 있었나요 ??
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
fin 버전도 그냥 실행이 안돼요
자꾸 하다가 오류메세지도 안뜨는데 혹시나 싶어서 fin버전도 실행해봤는데 아무것도 안뜨고 그냥 흰색 배경만 뜨네요. 라이브러리가 설치되지 않았다고 하기엔 다른 강의로 실행한 three.js는 실행이 됐었는데....그리고 canvas크기가 브라우저 창이 아니라 300^150으로만 설정되고 제가 변경해도 변경되지 않습니다.....
-
해결됨기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
state에서 buffer랑 time이 안 나옵니다
예시 코드 따라하는데 재생버튼이 계속 안 나오고 로딩바만 돌아가서 state를 찍어보니까 buffer랑 time 값이 저렇게 빈 값으로 나옵니다. 그런데 isLoading으로 로딩스피너 구현하는 걸 제거하고 바로 play, pause버튼 나오게 하면 노래 자체는 재생이 됩니다만 여전히 buffered와 time 부분 값은 빈 값으로 찍힙니다ㅜㅜ 무엇이 문제일까 모르겠습니다... 코드는 몇번이고 똑같은 걸 검토했는데...
-
해결됨기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
components 들은 jsx 로 만드신 이유
제목과 같이 componets 들에 Sidebar , Header 등은 tsx 로 하지않고 jsx 로 하신 이유가 있나요 ?? ㅎ
-
미해결애플 웹사이트 인터랙션 클론!
[섹션7-3: 버그수정 2] tempYOffset 오류
tempYOffset을 통해서 스크롤 위치를 저장하고 있다가 총 100px을 이동하는 것으로 이해하였는데요.tempYOffset의 초기값, 즉 yOffset이 0으로 출력됩니다.이게 바로 밑에 있는 window.addEventListener('scroll', () => { }가 아직 실행되지 않아서 yOffset이 초기화 되지 않아 0으로 나오나? 라고 생각하였는데 막상 강의 코드는 딱히 그런 것을 고려하지 않고도 잘 나오는 것 같더라구요.혹시 어떤 문제일지 알 수 있을까요?일단 당장에는 window.scrollY를 사용해서 임시조치로 해결했습니다. // 새로고침 등으로 스크롤을 처음부터 하지 않는 경우 시작하는 경우 해결을 위해 window.addEventListener('load', () => { setLayout(); sceneInfo[0].objs.context.drawImage(sceneInfo[0].objs.videoImages[0], 0, 0); document.body.classList.remove('before-load'); // 특정 위치에서 새로 고침 하면 화면이 나오지 않는 문제를 해결 let tempYOffset = yOffset; let tempScrollCount = 0; // 스크롤 몇 번 했는지 저장 console.log(tempYOffset); console.log(yOffset); let siId = setInterval(() => { window.scrollTo(0, tempYOffset); tempYOffset += 5; tempScrollCount++; if (tempScrollCount > 20) { clearInterval(siId); } }, 20); // ..............
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
자바스크립트 실행이 안되는 것 같아요
개발자 도구 열어보면 저런 메세지가 뜨는데요, 강의를 듣다가 제가 코드를 잘못짠줄 알고 강의자료 완성된 코드도 열어보니 실행이 안됩니다. eval을 쓰면 안된다는데 뭔가 보안 상의 문제가 있는건지.vsc에서 npm start하고 나서 webpack 5.92.1 compiled successfully in 1447 ms이렇게 떴는데도 웹 상에서는 아무것도 안뜨고 그러네용 뭐가 문제인지 모르겠어요
-
미해결인터랙티브 웹 개발 제대로 시작하기
zMove 를 1000으로 설정하는 이유에 대하여.
안녕하세요 1분 코딩님.영상에 6:10에 zMove 변수의 값을 설정할 때 0 - 1 의 비율이 너무 작은 수 이기 때문에 * 1000 을 해주신다고 하셨는데요.houseElem 요소가 0 - 1000vw 만큼 이동해야 하기 때문에 * 1000을 해주신것이 아닌지 여쭙습니다.만약 0 - 1 로 가능하다면 배수로 사용해야 한다고 생각이들고 0- 100 으로 가능하다면 %로 사용할 수 있지 않을까 하는 생각에 질문합니다.실제로 값을 작게 사용했을 때 조금밖에 움직여지지 않는 현상을 테스트 해봤습니다.
-
해결됨기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
use client
안녕하세요 ㅎㅎ강의 너무 잘 듣고있습니다.use client 사용하는 이유에 대해서 잘 모르겠어서 질문을 드립니다 .ㅎㅎ설명을 들었을때 server slide rendering 이지만 server side 기능을 하는것이 아니라 client side 로 넘어온다? 로 이해를 했는데 ,그렇다면 굳이 저 위의 지시어 use client 를 사용해야할때가 있을까 ?? 생각을 했습니다 ㅎㅎ
-
해결됨기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
tailwind.config.ts
tailwind.config.ts 를 변경하려고 하는데 변경이 되지 않습니다.다른 파일들도 수정하려고 보니까 수정이 안되네요ㅠㅠㅠ이렇게해서 생성을 진행했구요.잘은 모르겠지만 npx create-next-app . 로 설치를 진행했는데 권한 에러가 발생하더라구요npm error code EACCES그래서 sudo 를 앞에 붙여서 진행을 했습니다. 혹시 이 문제일까요 ?
-
미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
다음강의 언제나오나요 다음강의는 인터렉티브한 전체적인 웹사이트였으면 좋겠네요
(사진)
-
해결됨기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
6.8 강의 drawer닫기
안녕하세요 . drawer.tsx에 있는 DrawerClose를 사용하면 useState를 통해 상태관리를 안해줘도 되지않나 싶어서 여쭤봅니다.Header쪽에 <DrawerClose><Logo/></DrawerClose>이렇게 감싸주면 drawer가 열렸을때 x버튼을 누르면 똑같이 동작하더라고요.혹시 useState를 사용하신 이유가 있을까요?
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.02
GSAP 가이드 Part.02 강의 > 01 > practice html 맨처음 시작시 강의랑 동일하지 않을 경우
웹 애니메이션을 위한 GSAP 가이드 Part.02에advence-start > 01.animation-control > pratice의 html을 실행하면 강의랑 다르게파란색 길이 안나와서 당황했는데 강의를 들으면서 확인해보니까해당 밑에꺼 3개 주석처리 하니까 시작 할 때랑 똑같이 나옵니다.혹시 연습으로 먼저 해보실분들은 이거 3개 주석처리 하시고 시작하시면 될것같습니다. #emart .path { stroke-dasharray: 496; stroke-dashoffset: 496; } #medi .path { stroke-dasharray: 604; stroke-dashoffset: 604; } .pick { opacity: 0; }
-
미해결웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT
캐릭터 기본 모션 만들기에서 포토샵에 열라고하는데 포토샵없으면 어떻게하죠? 공짜버전있나요?
캐릭터 기본 모션 만들기에서 포토샵에 열라고하는데 포토샵없으면 어떻게하죠? 공짜버전있나요?
-
미해결쉽고 빠르게 만드는 다양한 이미지 이펙트!
swiper-slide 적용관련 친절한 설명 감사드립니다. 근대 첫장만 되고 다음장부터
ggang_effect.jsfunction ggangImgEffect() { var obj = $(".ggang_effect"); var makeHtml = ""; var row = 4; var columns = 8; var rowHeight = 100 / row + "%"; var columnsWidth = 100 / columns + "%"; var imgWidth = 100 * columns + "%"; var imgHeight = 100 * row + "%"; for (var i = 0; i < row; i++) { // console.log('-행-:'+i); for (var j = 0; j < columns; j++) { var delaySpeed = (columns - j - i * 0.5) * 0.25; var left = -j * 100 + "%"; var top = -i * 100 + "%"; makeHtml += '<div class="img_box" style="width:' + columnsWidth + "; height:" + rowHeight + "; transition-delay:" + delaySpeed + 's; ">'; makeHtml += '<div class="img_position" style="width:' + imgWidth + "; height:" + imgHeight + "; left:" + left + "; top:" + top + ';"></div>'; makeHtml += "</div>"; // console.log('열:'+j); } } $(obj).append(makeHtml); setTimeout(function () { $(obj).find(".img_box").addClass("active"); }, 200); } $(function () { ggangImgEffect(); }); const mySwiper = new Swiper(".swiper-container", { effect: "fade", loop: true, speed: 1500, autoplay: { delay: 5000, disableOnInteraction: false, }, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, on: { slideChange: function () { var thisSlide = $(".swiper-container").find(".swiper-slide").eq(this.activeIndex); ggangImgEffect(thisSlide, this.activeIndex); }, }, });
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.02
advanced 수업자료 문의
Deep Dive섹션 공부할 차례인데, 쌤이 설명해주시는 강의에서의 수업폴더와 제가 다운받은 폴더(파일)이 다릅니다. 제가 다운받은 자료입니다. 전체 다운받아 압축푼 상태인데, deep dive 폴더안에는 이게 전부입니다. 확인 부탁드립니다.
