본문 바로가기

반응형

모듈

(2)
자바스크립트 모듈 - 물결효과 자바스크립트를 사용하요 텍스트 물결효과 모듈을 만들어 보았습니다. 완성된 물결효과 코드는 아래와 같은데요. 텍스트 요소에 클래스 이름 이름 지정만으로 연동이 가능하도록 구현되어 있으며 작동은 지정된 클래스를 단어로 분리하고 효과를 적용하는 방식입니다. // wave-module.js const waveTextEl = document.querySelector('.wave-text') setInterval(() => { const child = waveTextEl.firstElementChild const spanEls = document.querySelectorAll('.wave-text span') if (window.getComputedStyle(child).transform.includes('-40'..
모듈 (Module) 프로젝트의 규모가 커지면 코드의 양이 늘어나고 가독성이 떨어지죠. 많은 언어에서 라이브러리, 패키지 등 다양한 이름으로 같은 기능을 하는 코드들을 분산해서 저장하고 필요할 때 불러와 쓰는 방식으로 이러한 문제를 해결하는데, 자바스크립트에서도 모듈화를 통해 효율적으로 코드를 작성할 수 있습니다. 모듈은 작성된 코드를 저장하는 별개의 자바스크립트 코드인데요. 어떻게 사용하는지 알아보겠습니다. 사용방법 index.html 파일에서 불러오는 메인스크립트에 type="module"을 추가합니다. 이후 모듈 자바스크립트 파일에서 내보내기 (export)와 이를 사용하고자 하는 자바스크립트 파일 (여기서는 index.js)에서 가져오기 (import)를 통해 사용합니다. module.js function hiWorl..

728x90