선생님 ppt의 소스를 간단하게 쳐서 연습해보는데 브라우저 콘솔이나 jsfiddle 이외에 ide처럼 강력한 기능을 쓸 수 있는 방법이 있을까요? 이클립스 툴은 일일이 웹 프로젝트를 만들어야 하고, 브라우저 콘솔은 제가 틀리게 입력하면 그걸 잡아주는 기능이 좀 부족해요. 자바스크립트 소스만 단순히 실행해주되, ide 같은 툴이 있을까요?

안녕하세요 궁금한 점이 있습니다. TagName과 ClassName 을 쓸 경우 뒤에 [0]처럼 인덱스 번호를 적용해주는데 왜 인덱스 번호를 적용해주어야 하나요?? 선택자가 다수일 수 있어서 그런가요?? h1에 아이디값을 준 후, getElementById 로 적용을 하면 인덱스 번호 지정없이도 적용이 되서요..

안녕하세요 제로초님 프론트앤드 개발자를 희망하는 27살 취준생입니다. 지금 제로초님 강의를 발견하고 자바스크립트 강의를 열심히 따라가고 있습니다. 혹시 이 강의를 따라가면서 계속 복습하고 수업을 따라서 잘 이해하고 구현을 해보려고 한다면 HTML + CSS + Vanila Javascript 로만으로도 충분히 구현을 자유자재로 할수 있을까요? React나 Vue같은 프레임워크 or 라이브러리로 넘어가기 전에 자바스크립트를 충분히 이해하고 자유자재로 다룰수 있어야 한다고 해서 자바스크립트를 우선적으로 공부하려고 하고 있습니다. 취준이 급해서 초조하지만 제로초님 믿고 열심히 해보겠습니다. PS. 그리고 추가적으로 리액트 방향으로 공부해보고 싶은데 제로초님 강의를 Node.js는 구매한 상태입니다. 추가적으로 Nodebird와, Slack 클린 코딩정도만 구매해서 따라공부하면 취업하는데 충분할까요?

잘 따라가고 있었는데 어디서부터인가 꼬여서 오류가 나네요... 선생님이 하신 소스코드 비교하면서 봤는데 제 눈에 오타나 오류가 안 보여서 질문 남깁니다 ㅠㅠ (()=>{     let yOffset = 0; //window.pageYOffset 대신 쓸 변수     let prevScrollHeight = 0; //현재 스크롤 위치 (yOffset)보다 이전에 위치한 스크롤 섹션들의 스크롤 높이의 합     let currentScene = 0; //현재 활성화된(눈 앞에 보고 있는) 씬(scroll-section)     const sceneInfo = [         {             //0             type: 'sticky',             heightNum: 5,        //브라우저 높이의 5배로 srollHeight 세팅             scrollHeight: 0,             objs: {                 container: document.querySelector('#scroll-section-0'),                 messageA: document.querySelector('#scroll-section-0.main-message.a'),                 messageB: document.querySelector('#scroll-section-0.main-message.b'),                 messageC: document.querySelector('#scroll-section-0.main-message.c'),                 messageD: document.querySelector('#scroll-section-0.main-message.d')             },             values:{                 messageA_opacity:[0, 1]             }         },         {             //1             type: 'normal',             heightNum: 5,                     scrollHeight: 0,             objs: {                 container: document.querySelector('#scroll-section-1')             }         },         {             //2             type: 'sticky',             heightNum: 5,                     scrollHeight: 0,             objs: {                 container: document.querySelector('#scroll-section-2')             }         },         {             //3             type: 'sticky',             heightNum: 5,                     scrollHeight: 0,             objs: {                 container: document.querySelector('#scroll-section-3')             }         }     ];          function setLayout(){         //각 스크롤 섹션의 높이 세팅         for(let i = 0; i < sceneInfo.lenght; i++) {             sceneInfo[i].scrollHeight = sceneInfo[i].heightNum * window.innerHeight;             sceneInfo[i].objs.container.style.height =`${scrollHeight[i].scrollHeight}px`;         }         yOffset = window.pageYOffset;                  let totalScrollHeight = 0;         for (let i = 0; i < sceneInfo.length; i++){             totalScrollHeight += sceneInfo[i].scrollHeight;             if(totalScrollHeight >= yOffset){                 currentScene = i;                 break;             }         }         document.body.setAttribute ('id', `show-scene-${currentScene}`);     }     function playAnimation(){         switch (currentScene){             case 0:                 console.log('0 play');                 break;             case 1:                 console.log('1 play');                 break;             case 2:                 console.log('2 play');                 break;             case 3:                 console.log('3 play');                 break;         }     }     function scrollLoop(){         prevScrollHeight = 0;                  for(let i = 0; i < currentScene; i++) {             prevScrollHeight += sceneInfo[i].scrollHeight;         }                  if(yOffset < prevScrollHeight + sceneInfo[currentScene].scrollHeight) {             currentScene++;             document.body.setAttribute ('id', `show-scene-${currentScene}`);         }         if (yOffset > prevScrollHeight){             if (currentScene === 0) return; //브라우저 바운스 효과로 인해 마이너스가 되는 것을 방지(모바일)             currentScene--;             document.body.setAttribute ('id', `show-scene-${currentScene}`);         }         playAnimation();              }          window.addEventListener('scroll', () => {         yOffset = window.pageYOffset;         scrollLoop();     })     //window.addEventListener('DOMContentLoaded', setLayout);     window.addEventListener('load', setLayout);     window.addEventListener('resize', setLayout);     setLayout(); })(); //같은 말: (function())();