BBC 인터랙티브 페이지 "코로나19가 바꿀 사무실의 미래" 클론대시보드

질문은 제목 그대로 입니다 선생님.다 배우면 이것을 React 프로젝트에도 적용이 가능한지 궁금합니다. 좋은 강의를 무료로 베풀어주셔서 감사합니다!

안녕하세요 , 23년도에도 듣고 계신 분이 계실지는 모르겠지만.. 강의 들으면서 혹시 막히시는 부분들 제가 수업 들으면서 작성한 코드와 비교해서 본인이 작성한 어떤 부분이 잘못되었는지 확인하시면 문제해결에 도움이 될듯해서요 !birdflies 함수 작성에서 작은 따옴표가 아닌 ` <- 이 부분 (숫자 1 옆의 템플릿 리터럴 ) 활성화 > 비활성화가 되었을 때 다시 돌아오지 않는 부분 이였습니다.위 두가지에서 시간이 좀 잡아먹었는데 저와같은 분들이라면 제 js 랑 비교해보세요 ㅋㅋ( 이 부분은 애니메이션이 완전히 끝까지 완료 후 스크롤을 내려야 다시 활성화 되었을 때 애니메이션이 제자리에서 작동을 하더라구요. )html { font-family: 'Noto Sans KR', sans-serif; } body { margin: 0; } div, section, header, footer, p, h1, h2 { box-sizing: border-box; } a { color: royalblue; } img { max-width: 100%; height: auto; } /* 배경이 되는 이미지들 */ .global-width{ max-width: 620px; margin: 0 auto; padding: 0 1rem; } .scroll-graphic{ overflow-x: hidden; position:sticky; top:0; height: 100vh; } .graphic-item{ display: flex; align-items: center; justify-content: center; position:absolute; left: 0; top:0; width: 100vw; height: 100vh; opacity: 0; transition: 0.5s; will-change: opacity; } .visible{ opacity: 1; } .scene-img{ max-height: 100vh; } .scroll-text{ position: relative; padding-bottom: 1px; } .step{ margin-bottom: 60vh; padding: 0.5rem 1rem; border-radius: 10px; border : 0.2px solid rgba(216,216,216,0.2); box-shadow: rgba(0,0,0,0.3)0 0 3px; background: rgba(255,255,255,0.8); } .bird{ position:absolute; left: 0; bottom:70%; width: 100px; transform:translateX(-100%); transition:1.5s 0.5s linear; } [data-index="5"] .bird{ left: 30%; bottom:30%; } .global-footer{ text-align: center; padding:2rem 0; } .strikethrough{ text-decoration: line-through; }// 전역변수 사용 회피 (() => { const actions = { birdFlies(key){ if (key) { document.querySelector('[data-index="2"] .bird').style.transform = `translateX(${window.innerWidth}px)`; }else{ document.querySelector('[data-index="2"] .bird').style.transform = `translateX(-100%)`; } }, birdFlies2(key) { if (key) { document.querySelector('[data-index="5"] .bird').style.transform = `translate(${window.innerWidth}px, ${-window.innerHeight * 0.7}px)`; }else{ document.querySelector('[data-index="5"] .bird').style.transform = `translateX(-100%)`; } } }; const stepElems = document.querySelectorAll('.step'); const graphicElems = document.querySelectorAll('.graphic-item'); let currentItem = graphicElems[0]; let ioIndex; const io = new IntersectionObserver((entries,observer)=>{ ioIndex = entries[0].target.dataset.index *1 ; console.log(ioIndex); }) for (let i = 0; i < stepElems.length; i++) { io.observe(stepElems[i]); stepElems[i].dataset.index = i; graphicElems[i].dataset.index = i; } function activate(action) { currentItem.classList.add('visible'); if (action) { actions[action](true); } } function inactivate(action) { currentItem.classList.remove('visible'); if (action) { actions[action](false); } } window.addEventListener('scroll', () => { let step; let boundingRect; for (let i=ioIndex-1; i<ioIndex+2; i++){ step = stepElems[i]; if(!step) continue; boundingRect = step.getBoundingClientRect(); if(boundingRect.top > window.innerHeight* 0.1 && boundingRect.top < window.innerHeight*0.8){ inactivate(currentItem.dataset.action); currentItem = graphicElems[step.dataset.index]; activate(currentItem.dataset.action); } } }); window.addEventListener('load',()=>{ setTimeout (() => scrollTo(0,0),100); }) activate(); })(); 

안녕하세요. 강사님.  수업을 재밌게 듣고 있는 초보 프로그래머입니다.  수업을 듣던 도중 발생하는 style.css의 .bird오류들과 관련해 문의 드립니다. 

질좋은 강의 무료로 올려주심에 만세 3창 드립니다. 다름이 아니라요 선생님 트위터 새 모션을 설정하는 함수에서  위 사진 상으로 4번째 줄 가운데 ('[data-index = "2"].bird')에서 대괄호와 .bird를 붙이면 이렇게 오류가 나는데 대괄호와 .bird를 띄우면 잘 작동합니다... 자바스크립트를 공부한지 얼마 되지 않아 왜 저런 차이가 있는지 궁금합니다 

새가 원래자리로 돌아올때도 transition 시간이 필요한데. 돌아올때는 바로 돌아오록 하는 Tip 이 있을까요? 저는 밑에 방식대로 처리했는데 혹시 더 좋은 방법 있을까요? birdElement.style.transform = `translate3d(${window.innerWidth}px, 0, 0)`; birdElement.style.transition = `1s 0.5s`;

Uncaught TypeError: Cannot read property 'classList' of undefined 계속 정의되지 않았다고 하는데 왜그럴까요...

(()=>{     const actions = {         birdFlies(key) {             if(key){                 document.querySelector('[data-index="2"] .bird').style.transform = 'translateX(${window.innerWidth}px)';             }             else{                 document.querySelector('[data-index="2"] .bird').style.transform = 'translateX(-100%)';             }         },         birdFlies2(key) {             if(key){                 document.querySelector('[data-index="5"] .bird').style.transform = 'translateX(${window.innerWidth}px, ${-window.innerHeight * 0.7}px)';             }             else{                 document.querySelector('[data-index="5"] .bird').style.transform = 'translateX(-100%)';             }         }     };     const stepElems = document.querySelectorAll('.step');     const graphicElems = document.querySelectorAll('.graphic-item');     let currentItem=graphicElems[0]; //현재 활성화된 (visible 클래스가 붙은) .graphic-item을 지정     let ioIndex;     const io = new IntersectionObserver((entries, observer) => {         ioIndex = entries[0].target.dataset.index*1; //숫자로 변환     });     for(let i=0; i<stepElems.length; i++){         io.observe(stepElems[i]);         stepElems[i].dataset.index = i;         graphicElems[i].dataset.index = i;     }     function activate(action){         currentItem.classList.add('visible');         if(action){             actions[action](true);         }     }     function inactivate(action){         currentItem.classList.remove('visible');         if(action){             actions[action](false);         }     }     addEventListener('scroll', ()=>{         let step;         let boundingRect;         for (let i = ioIndex-1; i < ioIndex+2; i++){             step = stepElems[i];             if(!step) continue;             boundingRect = step.getBoundingClientRect();             if(boundingRect.top > window.innerHeight * 0.1 && boundingRect.top < window.innerHeight * 0.8){                 if(currentItem){                     inactivate();                 }                 currentItem = graphicElems[step.dataset.index];                 activate(currentItem.dataset.action);             }         }     })     activate(); })(); 일단 콘솔 오류창에서 아무 오류도 안나는데 새 애니메이션이 전혀 작동하지 않습니다. CSS도 따라 써보고 오타 있는지 확인해봐도 움직이지 않네요

(()=>{   const actions = {     birdFlies(key){       if(key){         document.querySelector('[data-index="2"] .bird').style.transform = `translateX(${window.innerWidth}px)`;       } else{         document.querySelector('[data-index="2"] .bird').style.transform = `translateX(-100%)`;       }            },     birdFlies2(key){       if(key){         document.querySelector('[data-index="5"] .bird').style.transform = `translate(${window.innerWidth}px, ${-window.innerHeight * 0.7}px`;       } else{         document.querySelector('[data-index="5"] .bird').style.transform = `translateX(-100%)`;       }            }   };   const stepElems = document.querySelectorAll('.step');   const graphicElems = document.querySelectorAll('.graphic-item');   let currentItem = graphicElems[0];    let ioIndex;   const io = new IntersectionObserver((entries, observer) => {     ioIndex = entries[0].target.dataset.index * 1;   });   for(let i = 0; i < stepElems.length; i++){     io.observe(stepElems[i]);     stepElems[i].dataset.index = i;      graphicElems[i].dataset.index = i;   }   function activate(action){//활성화     currentItem.classList.add('visible');     if(action){       actions[action](true);     }   }   function inactivate(action){//비활성화     currentItem.classList.remove('visible');     if (action) {       actions[action](false);   }   }   window.addEventListener('scroll', () => {     let step;     let boundingRect;     for(let i = ioIndex - 1; i < ioIndex + 2; i++){       step = stepElems[i];        if(!step) continue;       boundingRect = step.getBoundingClientRect();             if(boundingRect.top > window.innerHeight * 0.1 &&          boundingRect.top < window.innerHeight * 0.8){           inactivate();                     currentItem = graphicElems[step.dataset.index];            activate(currentItem.dataset.action);       }     }   });   window.addEventListener('load', () => {     setTimeout(() => scrollTo(0, 0), 100);   });   activate(); })();

// 즉시실행 인명함수 (() => {     const actions = {         bordFlies(){             document.querySelector(['data-index="2"'] .bird).style.transform = `translateX($(window.innerWidth)px)`;         }     }     const stepElems = document.querySelectorAll('.step');     const graphicElems = document.querySelectorAll('.graphic-item');      // 현재 활성화된(visible 클래스가 붙은) .graphic-item을 지정     let currentItem = graphicElems[0];     let ioIndex;     const io = new IntersectionObserver((entries, observer) => {         //console.log(entries[0].target.dataset.index);         ioIndex = entries[0].target.dataset.index * 1;         //console.log(iosIndex);     });     for(let i=0; i< stepElems.length; i++){         io.observe(stepElems[i]);         //stepElems[i].setAttribute('data-index', i);         stepElems[i].dataset.index = i;         graphicElems[i].dataset.index = i;         //console.log(stepElems[i].setAttribute('data-index', i));     }     // 활성화     function activate(action){         currentItem.classList.add('visible');         if(action){             actions[action](); // 오류         }         console.log(action);     }     // 비활성화     function inactivate(){         currentItem.classList.remove('visible');     }     window.addEventListener('scroll', () => {         let step;         let boundingRect;         let temp = 0;         //for (let i = 0; i < stepElems.length; i++){         for (let i = ioIndex - 1; i < ioIndex + 2; i++){             step = stepElems[i];             if(!step) continue;             boundingRect = step.getBoundingClientRect();             //console.log(boundingRect.top);             temp++;             // 범위설정             if(boundingRect.top > window.innerHeight * 0.1  && boundingRect.top < window.innerHeight * 0.8){                 //console.log(step.dataset.index);                 //graphicElems[step.dataset.index].classList.add('visible');                 if(currentItem){                     inactivate();                 }                 currentItem = graphicElems[step.dataset.index];                 activate(currentItem.dataset.action);  // 오류             }         }         console.log(temp);     });     activate(); })();// 즉시실행 인명함수 (() => {     const actions = {         bordFlies(){             document.querySelector(['data-index="2"'] .bird).style.transform = `translateX($(window.innerWidth)px)`;         }     }     const stepElems = document.querySelectorAll('.step');     const graphicElems = document.querySelectorAll('.graphic-item');      // 현재 활성화된(visible 클래스가 붙은) .graphic-item을 지정     let currentItem = graphicElems[0];     let ioIndex;     const io = new IntersectionObserver((entries, observer) => {         //console.log(entries[0].target.dataset.index);         ioIndex = entries[0].target.dataset.index * 1;         //console.log(iosIndex);     });     for(let i=0; i< stepElems.length; i++){         io.observe(stepElems[i]);         //stepElems[i].setAttribute('data-index', i);         stepElems[i].dataset.index = i;         graphicElems[i].dataset.index = i;         //console.log(stepElems[i].setAttribute('data-index', i));     }     // 활성화     function activate(action){         currentItem.classList.add('visible');         if(action){             actions[action](); // 오류         }         console.log(action);     }     // 비활성화     function inactivate(){         currentItem.classList.remove('visible');     }     window.addEventListener('scroll', () => {         let step;         let boundingRect;         let temp = 0;         //for (let i = 0; i < stepElems.length; i++){         for (let i = ioIndex - 1; i < ioIndex + 2; i++){             step = stepElems[i];             if(!step) continue;             boundingRect = step.getBoundingClientRect();             //console.log(boundingRect.top);             temp++;             // 범위설정             if(boundingRect.top > window.innerHeight * 0.1  && boundingRect.top < window.innerHeight * 0.8){                 //console.log(step.dataset.index);                 //graphicElems[step.dataset.index].classList.add('visible');                 if(currentItem){                     inactivate();                 }                 currentItem = graphicElems[step.dataset.index];                 activate(currentItem.dataset.action);  // 오류             }         }         console.log(temp);     });     activate(); })();// 즉시실행 인명함수 (() => {     const actions = {         bordFlies(){             document.querySelector(['data-index="2"'] .bird).style.transform = `translateX($(window.innerWidth)px)`;         }     }     const stepElems = document.querySelectorAll('.step');     const graphicElems = document.querySelectorAll('.graphic-item');      // 현재 활성화된(visible 클래스가 붙은) .graphic-item을 지정     let currentItem = graphicElems[0];     let ioIndex;     const io = new IntersectionObserver((entries, observer) => {         //console.log(entries[0].target.dataset.index);         ioIndex = entries[0].target.dataset.index * 1;         //console.log(iosIndex);     });     for(let i=0; i< stepElems.length; i++){         io.observe(stepElems[i]);         //stepElems[i].setAttribute('data-index', i);         stepElems[i].dataset.index = i;         graphicElems[i].dataset.index = i;         //console.log(stepElems[i].setAttribute('data-index', i));     }     // 활성화     function activate(action){         currentItem.classList.add('visible');         if(action){             actions[action](); // 오류         }         console.log(action);     }     // 비활성화     function inactivate(){         currentItem.classList.remove('visible');     }     window.addEventListener('scroll', () => {         let step;         let boundingRect;         let temp = 0;         //for (let i = 0; i < stepElems.length; i++){         for (let i = ioIndex - 1; i < ioIndex + 2; i++){             step = stepElems[i];             if(!step) continue;             boundingRect = step.getBoundingClientRect();             //console.log(boundingRect.top);             temp++;             // 범위설정             if(boundingRect.top > window.innerHeight * 0.1  && boundingRect.top < window.innerHeight * 0.8){                 //console.log(step.dataset.index);                 //graphicElems[step.dataset.index].classList.add('visible');                 if(currentItem){                     inactivate();                 }                 currentItem = graphicElems[step.dataset.index];                 activate(currentItem.dataset.action);  // 오류             }         }         console.log(temp);     });     activate(); })();

배경으로 깔린 음악이 학습할 때 매우 듣기가 좋네요. 혹시 제목 공유 가능하신가요?

자꾸 질문만하네요.. 혼자 찾아보려고 삽질하다가 도저히 모르겠어서 올립니다 😂😂😂 계속 actions[action] is not a function라고 뜨는데 뭐가 문제일까요.. js코드입니다 😂😂 (() => {     const actions = {         birdFlies(key) {             if (key) {                 document.querySelector('[data-index="2"] .bird').style.transform = `translateX(${window.innerWidth}px)`;             } else {                 document.querySelector('[data-index="2"] .bird').style.transform = `translateX(-100%)`;             }         }     }     const stepElems = document.querySelectorAll('.step');     const graphicElems = document.querySelectorAll('.graphic-item');     let currentItem = graphicElems[0];     let ioIndex;     const io = new IntersectionObserver((entries, observer) => {         ioIndex = entries[0].target.dataset.index * 1;     });     for (let i = 0; i < stepElems.length; i++) {         io.observe(stepElems[i]);         // stepElems[i].setAttribute('date-index', i);         stepElems[i].dataset.index = i;         graphicElems[i].dataset.index = i;     }     function activate(action) {         currentItem.classList.add('visible');         if (action) {             actions[action](true);         }     }     function inactivate(action) {         currentItem.classList.remove('visible');         if (action) {             actions[action](false);         }     }     window.addEventListener('scroll', () => {         let step;         let boundingRect;         let temp = 0;         for (let i = ioIndex - 1; i < ioIndex + 2; i++) {             step = stepElems[i];             if (!step) continue;             boundingRect = step.getBoundingClientRect();             if (boundingRect.top > window.innerHeight * 0.1 &&                 boundingRect.top < window.innerHeight * 0.8) {                 inactivate();                 currentItem = graphicElems[step.dataset.index];                 activate(currentItem.dataset.action);             }         }     });     activate(); })();

보여드린 스크린샷처럼 첫번째는 여백에 비해 그림이 너무 동떨어지고,  마지막 폰하는 그림이 요가 그림을 스크롤하면 바로 밑으로 나옵니다 😥  css 코드는 html {   font-family: "Noto Sans KR", sans-serif; } body {   margin: 0; } div, section, header, footer, p, h1, h2 {   box-sizing: border-box; } a {   color: royalblue; } img {   max-width: 100%;   height: auto; } .global-width {   max-width: 620px;   margin: 0 auto;   padding: 0 1rem; } .scroll-graphic {   position: sticky;   top: 0;   height: 100vh; } .graphic-item {   display: flex;   align-items: center;   justify-content: center;   position: absolute;   left: 0;   top: 0;   width: 100vw;   height: 100vh;   opacity: 0;   transition: 0.5s; } .visible {   opacity: 1; } .scene-img {   max-height: 100vh; } .scroll-text {   position: relative; } .step {   margin-bottom: 60vh;   padding: 0.5rem 1rem;   border-radius: 10px;   border: 0.2px solid rgba(216, 216, 216, 0.2);   box-shadow: rgba(0, 0, 0, 0.3) 0 0 3px;   background: rgba(255, 255, 255, 0.8); } 이거구요 js는 (() => {     const stepElems = document.querySelectorAll('.step');     const graphicElems = document.querySelectorAll('.graphic-item');     let currentItem = graphicElems[0];     for (let i = 0; i < stepElems.length; i++) {         // stepElems[i].setAttribute('date-index', i);         stepElems[i].dataset.index = i;         graphicElems[i].dataset.index = i;     }     function activate() {         currentItem.classList.add('visible');     }     function inactivate() {         currentItem.classList.remove('visible');     }     window.addEventListener('scroll', () => {         let step;         let boundingRect;         for (let i = 0; i < stepElems.length; i++) {             step = stepElems[i];             boundingRect = step.getBoundingClientRect();             if (boundingRect.top > window.innerHeight * 0.1 &&                 boundingRect.top < window.innerHeight * 0.8) {                 inactivate();                 currentItem = graphicElems[step.dataset.index];                 activate();             }         }     });     activate(); })(); 이 코드입니다 어떤게 문제일까요..?😥

window.addEventListener("scroll", () => { let boundingRect; let temp = 0; steps.forEach((step, i) => { if (i > ioIndex + 1 || i < ioIndex - 1) return; boundingRect = step.getBoundingClientRect(); temp++; if ( boundingRect.top > window.innerHeight * 0.2 && boundingRect.top < window.innerHeight * 0.8 ) { inactivate(); currentItem = graphics[step.dataset.index]; activate(); } }); console.log("temp", temp); }); 말 안 듣고 forEach로 만들어봤는데 temp도 2, 3 뜨는 거 보면 잘 동작하는 거 같습니다만 혹시 틀린 점이 있을까요??

.step { margin-bottom: 60vh; padding: : 0.5rem 1rem; border-radius: : 10px; background: rgba(255, 255, 255, 0.8); box-shadow: rgba(0, 0, 0, 0.3)0 0 3px; } 이 부분에서 배경, 그림자, 말풍선끼리의 차이? 까지는 들어가는데 말풍선 내부 패딩과 모서리 둥글리기가 적용이 안되네요.. 이유가 뭘까요? 숫자를 크게해도 같아요

.scroll-text 에   padding-bottom: 1px; 을 넣는 이유가 뭔지 궁금합니다!