전체 글109 JS30-Slide in on Scroll JS30 의 slide in on scroll을 진행하던준 알게된점을 정리해두려 합니다. 1.Debounce 함수 Debounce 함수는 JS에서 기본으로 지원하는 함수는 아니고 여러 라이브러리에서 지원하는 함수라고 한다. Debounce 함수의 기능은 입력이 단시간에 여러번 들어오더라도 한번만 입력되게 하는 것이다. 처음 해당함수를 보고 이해가 안가는 점이 너무 많았다 ㅜㅜ function debounce(func, timeout = 300){ let timer return (...args) => { clearTimeout(timer); timer = setTimeout(() => { func.apply(this, args) }, timeout); }; } function saveInput(){ con.. 2021. 6. 15. JS30-Video Player JS30 의 Video player를 해보던 중 놓쳤거나 개선이 필요했던 부분을 기록해두려 합니다. 1. data- 로 HTML 문서에서 attribute로 지정한 속성은 element.dataset으로 접근해서 활용이 가능하다. //원본 HTML TAG //« 10s //25s » // 내가 작성한 방식 const backSkipBtn = document.querySelector('button[data-skip="-10"]') const forwardSkipBtn = document.querySelector('button[data-skip="25"]') backSkipBtn.addEventListener('click', moveBack) forwardSkipBtn.addEventListener('cli.. 2021. 6. 12. JS30-Checkboxes JS30 10강의 체크박스 예제를 혼자 해봤는데 강의 본문에 나온 코드에 비해 너무 지저분하게 구현해서 몰랐던 부분들을 정리해두려 합니다. 이번 예제는 위에나온 체크박스를 쉬프트 누르고 클릭하면 그사이에 있는 것들이 전부 체크가 되도록 하는 것이었는데 아래는 내가 구현한 코드다. const inbox = document.querySelector(".inbox"); const checkLists = inbox.children //inbox내의 children 리스트 가져오기 const checkListsArr = Array.from(checkLists); // 배열메서드 활용을 위해 배열로 변환 let firstClickedCheckboxIndex; //처음 클릭한 체크박스 저장용 변수 let shiftH.. 2021. 6. 6. JS30 - HTML Canvas HTML에 Canvas 기능을 이용하여 화면상에 그림을 표현할수 있다는걸 처음 알게되어 간단히 정리해두려합니다. this is canvas HTML 캔버스 태그로 특정영역을 지정하면 해당 구역내에서 원하는 도형을 표현할 수 있다. const canvas = document.querySelector("#draw"); const ctx = canvas.getContext('2d'); //캔버스의 컨텍스트를 가져온뒤 canvas.width = window.innerWidth; canvas.height = window.innerHeight; //캔버스 크기를 조절하고 //컨텍스트에서 그려질 내용을 조작한다1(선의 색, 크기...etc). ctx.strokeStyle = '#BADA55'; ctx.lineJoin.. 2021. 6. 2. JS30 - Playing with CSS Variables and JS JS30을 진행하다 새로 알게된점을 기록해두려 합니다. CSS에서도 커스텀 변수를 만들어 활용이 가능한지 몰랐는데 새롭게 알게 되었다. css 문서에서 대쉬두번과 합쳐서 지정한 키워드는 해당 CSS 문서에서 커스텀 변수로 활용이 가능하다. 이러한 방식을 쓰면 좋은점은 여러개의 수치값을 한번에 관리가 가능하다는 점이다. 선언한 키워드를 활용할때는 var() 함수에 매개변수로 넣어주면 이용가능 하다. 2021. 5. 30. JS 30 - Drum Kit Javascript 30 드럼킷을 만들다 중간에 마주친 에러가 있어서 기록해두려 합니다. const key = document.querySelector(`div[data-key="${e.keyCode}"]`); setTimeout(key.classList.remove, 700, "playing") //illegal invocation 발생... setTimeout에서 key.classList.remove로 콜백을 넘겨주면 illegal invocation이 발생한다. 왜 그런지 살펴보니 다음과 같은 이유인것 같다. setTimeout에서 this값을 명시하지 않고 메소드를 그냥 dot notation으로 호출할 경우 호출하는 메소드의 this 값이 window로 설정되어 버린다 따라서 메소드가 어느 객체.. 2021. 5. 26. 이전 1 ··· 5 6 7 8 9 10 11 ··· 19 다음
