홈페이지를 방문하다 보면 왼쪽이나 오른쪽에 따라다니는 배너 등을 볼 수 있습니다. 예전에는 제이쿼리(jquery)로 많이 구현했는데 이번에 한번 순수 자바스크립트로 바꿔 보겠습니다. Top Home Login Join html, css는 컴퓨터에 모아둔 코드 조금 수정해서 적었습니다. 이 부분이 jquery 스크롤 플로팅 배너 코드입니다. 이렇게 화면에서 스크롤을 움직이면 저 오른쪽에 있는 메뉴들이 따라다니는 기능입니다. 이 코드를 순수 자바스크립트로 바꿔보겠습니다. const quick_scroll = (function() { const quickmenu_sub = document.getElementById('quickmenu_sub'); const current_position = quickmenu_..

제이쿼리(jquery)로 작성된 코드를 바닐라 자바스크립트(vanilla javascript)로 바꿔보기입니다. 바닐라 자바스크립트는 프레임워크 또는 라이브러리가 적용되지 않은 순수 자바스크립트를 말합니다. 아래처럼 제이쿼리로 작성한 클릭 토글 코드가 있습니다. 해당 예시는 다국어 홈페이지 언어 클릭 시 나라별 메뉴가 보이고, 다시 클릭했을 때 안 보이게 하는 예시입니다. 이 코드를 아래처럼 순수 자바스크립트로 바꿔봤습니다. 변수명은 습관이니 이해해 주시기 바랍니다. 코드 안에 주석으로 설명 적어 놨습니다. 사실 코드는 제이쿼리가 짧고 워낙 익숙해진 터라 더 편하지만, 예전처럼 크로스 브라우징 이슈가 적어지고 무겁다는 이유 등으로 지양하는 추세입니다. 몇 개월 전 프로젝트 작업할 때 제이쿼리 사용 안 하..