안녕하세요 선생님! 예전에 선생님 강의 청첩장강의랑 flex,grid, 기타 강의들 구매하고 들었던 학생입니다. 선생님은 메인개발분야가 뭔지 궁금합니당. 또 리액트 사용하시는지도 궁금합니다! 질문과는 무관한 여담이지만,, 최근 리액트로 프로젝트하면서 애니메이션 편하게 구현하기위해서 여러 라이브러리를 사용하고 또 gsap관련해서도 찾아보고 했었는데.. gsap로 이렇게 손쉽게 인터랙티브 애니메이션을 구현할 수있다고? 하면서 혁신이다! 라고 생각했었는데 보니깐 자체 서비스에서 결제 같은 기능이있을경우 (넷플릭스같은) gsap 프리미엄을 결제해서 사용해야하더라구요.. 그것도 연간 구독 시스템이고, 코딩하는 개발자 수에따라서 개별로 구매..ㅎㄷㄷ 그래서 돌고돌아 다시 선생님 곁으로왔습니다. 이 강의 듣다가 개인적인 일들이 겹쳐서 중간하차했었는데 다시 처음부터 차근차근 수강하고 복습해서 마스터해보려고합니닷.. 질문 요약 1: 선생님 메인분야가 뭐에요? 2: gsap에 관해서 의견이궁금합니다.
기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
next zustand 세팅 시, provider 를 사용해야한다는 글이 있어서요. 현재 강의처럼 이후에 서비스 개발 시 사용해도 이슈가 없는 부분일까요? https://zustand.docs.pmnd.rs/guides/nextjs#providing-the-store https://leonkong.cc/nextjs-zustand-
tl.set('#emart .pick', { opacity: 0 }) .to(map, { scale: 1, x: 0, y: 0 }) .set('#emart .pick', { opacity: 1 }) .fromTo('#emart .path', { strokeDashoffset: 496 }, { strokeDashoffset: 0 }) .to( '#emart .pick', { motionPath: { path: '#emart .path', align: '#emart .path', alignOrigin: [0.5, 0.5], }, }, '<' ); 위 코드에서 맨 처음 set 으로 opacity: 0 을 줘서 pick을 안 보이게 한 다음에 후에 다시 set으로 opacity: 1을 주게 되는데요 궁금한 것이 아직 순서상 motionPath 가 실행될 차례가 아니어서 마트 위치에서 pick 이 보여질 것인데 어째서 강남역 위치에서 부터 보여 지게 되는지 궁금합니다. 아래에 있는 set을 위로 올려서 tl.set('#emart .pick', { opacity: 0 }) .set('#emart .pick', { opacity: 1 }) .to(map, { scale: 1, x: 0, y: 0 }) 이렇게 위치를 바꾸면 그때서야 제가 이해한 형태로 움직이게 되네요. 왜 그런지 궁금합니다.
본 강의에서는 resize 핸들러를 사용해서 구성이 되었는데, (function () { const houseElem = document.querySelector(".house"); window.addEventListener("scroll", function () { const maxScrollValue = document.body.offsetHeight - window.innerHeight; const zIndex = (pageYOffset / maxScrollValue) * 880 - 900; houseElem.style.transform = `translateZ(${zIndex}vw)`; }); })(); 이런식으로 scroll 이벤트 내부에 maxScrollValue를 사용하면 화면이 height이 변경되더라도 문제가 없는게 아닐까 생각이 되서요! 여러가지 방법이 있을 수 있겠지만 scroll 이벤트 안에 넣은게 아닌 resize 이벤트에 넣은 이유가 maxScrollValue이 재사용성될 가능성이 있기 때문일까요??
범샘님! 빠른 답변 및 업데이트 감사합니다, 답변해주신것처럼 section1, section4에서 스크롤문제가 발생합니다. 이 부분은 질문드리기 전에 확인한 부분이라 해결하였으나, 다만 답변해주신 두번째 경우는 제가 드린 질문의 방향과 조금 달라 재질문 드립니다. section4까지 스크롤을 내린후, 다시 section3까지 스크롤을 end-section3 지점까지 올리고, 다시 section4로 스크롤 할 경우 스크롤이 작동되지 않습니다. 이 부분은 첫번째 질문 드린 경우와 비슷한 상황인거 같은데, 이번에는 반대로 스크롤하는 경우라 direction을 down으로 하는 조건문을 추가하면 되는건지, 조금 더 명확한 답변과 코드를 확인하고 싶어 다시 질문드립니다. 여러모로 바쁘실텐데, 감사합니다!
안녕하세요, 쉬운 강의 덕분에 gsap 을 쉽게 접하고 사용할 수 있어서 감사합니다. 근데 해당 부분 구현중에 범샘께서 작성하신 코드(ScrollTrigger-finished)에서 확인해보면 1) section3 도달 후, section2로 스크롤을 올리는 경우 2) section4 도달 후, section3에서 다시 section4 로 스크롤을 내리는 경우 해당 2가지 경우에서 section03을 기준으로 스크롤이 위아래로 작동을 잘 하지 않습니다. if(currentPageIndex === 3) return; 때문인 것 같은데, 스크롤을 자유롭게 올렸다 내렸다 하면서 페이지를 확인할 수 있도록 하려고 하는데 잘 안되네요. 코드를 어떤 방식으로 수정해야할지 질문 남깁니다. 감사합니다.
기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
안녕하세요. 우선 소개부터 드리자면 저는 FE 개발자나 그쪽을 지망하는 것은 아니고 백엔드를 업으로 하고 있고 집에서 홈서버에 제 개인 서비스를 배포할 목적으로 해당 강의를 수강하게 되었습니다. 사실 제가 프론트의 세계는 잘 몰라서 질문 드립니다. 혹시 페이지 로드 속도 & 검색 엔진 노출도가 배포 플랫폼에 영향을 받을까요? 다른 말로는, versel 을 통해 프론트를 배포하는 것이 배포가 쉬운 것 이외에 서비스의 퀄리티에도 도움을 주는 장점이 있을까요 ?
안녕하세요? 강의 잘 보고 있습니다. F, B 카드가 있고 뒤집는 거잖아요? F에 z-index를 1을 주었기 때문에 B보다 앞에 있어서 F->B 순서로 보이구요. 여기서 궁금한 것은 실물 카드로 생각을 해보았을 때, F카드 밑에 B 카드가 있는거죠. [1번] backface-visibility: hidden을 주지 않았을 때 가드를 뒤집게 되면 B카드 밑에 F 카드가 있는게 아닌가요? [2번] 아니면 뒤집혀진 상태에서도 F의 z-index 1로 인해서 다시 F->B 상태로 되어 있는 건가요? 제 생각은 실물 카드로 보면 뒷면이 보이더라도 B의 뒷면이 보여야 할거 같은데 F의 뒷면이 보여서 질문 드립니다. [1]번인 경우 F의 뒷면이 보이는게 이해가 안되고, 만약 [2]번인 경우 F 카드가 B 카드보다 위에 있다는 건데 뒷면을 안보여준다고 해도 그래도 F 카드가 보여야 할 것 같아서요. -------------------------------------------------- 제가 다시 생각해봤는데요. z-index 1이니깐 F 가 B 보다 무조건 위에 있는 건 맞으나, 실물 카드처럼 딱 붙어있는게 아니니깐 F는 위에서 돌고, B는 밑에서 돌고 F 뒷면, B 뒷면으로 있는 상태가 맞을까요? 여기서 뒷면은 안보이도록 해줬으니 B만 보이는거구요.
기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
각 페이지마다 loading과 error.tsx를 각각 주고 있는데 그냥 root에 loading.tsx error.tsx를 하나만 둬서 공유하는 방식은 안되나요? 각 페이지마다 따로 둔 이유가 뭔가요? 현업에서도 layout은 보통 page마다 다르게 두나요? 이전에는 프로젝트에서 그냥 root에 위치한 하나의 layout만 써와서.. 강의 잘 보고있습니다. 선생님!
지금 카드를 3d로 뒤집는데 그냥 뒤집히는게아니라 카드의 뒷면이 무엇인지 왼쪽아래나 왼쪽면부터 조금씩 뒤집어지는 느낌으로 뒤집기 위해선 animation3에서 이미지를 나눠서 보여준것처럼 효과를 줘야할까요? 그냥 카드가 3d로 휙 뒤집히는게 아닌 책장넘길때처럼 구현하고싶은데 뒷면을 확인할때 긴장감을 주기위해서 혹시 어떤 방법이 있을까요?
