프로그래밍/웹관련(19)
-
[Pug] Syntax
https://github.com/eazisilver/TIL/blob/9dd7cbc3c2fa3c89ad3b9e35ea765383e0b40971/pug/Syntax.md GitHub - eazisilver/TIL Contribute to eazisilver/TIL development by creating an account on GitHub. github.com
2021.08.05 -
[node] setInterval, setTimeout, nextTick
💡 setInterval // setInterval: 1초마다 콜백함수 실행 const interval = setInterval(() => { console.log(num++); }, 1000); // clearInterval(interval); 💡 setTimeout // setTimeout: 6초뒤 콜백함수 실행 setTimeout(() => { console.log('Timeout!'); clearInterval(interval); }, 6000); ✔ nextTick과 setTimout 차이점 setTimeout : 콜백함수가 Task Queue의 제일 끝으로 들어감 nextTick : 콜백함수가 Task Queue의 제일 앞으로 들어가서, 가능한 제일 빨리 실행될 수 있도록 함
2021.07.30 -
[Web APIs] scrollBy, scrollTo, scrollIntoView
💡 Window.scrollBy() window 창에 있는 document를 지정된 크기만큼 스크롤한다 Syntax window.scrollBy(x-coord, y-coord); window.scrollBy(options) 예를 들어 window.scrollBy(0, 100) 이면 수직으로 100px씩 스크롤 💡 Window.scrollTo() document의 특정 좌표로 스크롤 Syntax window.scrollTo(x-coord, y-coord) window.scrollTo(options) 예를 들어 window.scrollTo(0, 100)이면 y축이 100px 인곳으로 스크롤 💡 Element.scrollIntoView() Element의 위치로 스크롤 Syntax element.scrollI..
2021.06.29 -
[HTML] script async vs defer
🌟드림코딩 엘리님의 youtube강의를 보고 공부한 내용을 정리한 포스팅입니다🌟 👉youtube강의 https://www.youtube.com/watch?v=tJieVCgGzhs 💡 HTML에서 자바스크립트를 포함할 때 어떻게 포함하는게 효율적인가 1. 🅰 브라우저가 한줄씩 HTML parsing 🅱 script태그가 나오면 HTML parsing 하는 것을 잠시 멈추고, 필요한 자바스크립트(app.js)를 다운받고 실행한다. 그 다음 다시 HTML parsing 단점 💩 만약 자바스크립트 파일용량이 크고, 인터넷도 느리면 웹사이트를 보기까지 많은 시간이 소요된다. 2. 안에 script 포함하는 방법 🅰 ⬇ ⬇ 🅱 ➡ ⬇ 페이지가 준비가 된 다음에 자바스크립트를 다운받고 실행한다. 장점 😀 사용자가 기..
2021.06.28 -
[Web APIs] 브라우저 좌표 - client X,Y 와 page X,Y 비교
💡 client X,Y 와 page X,Y 비교 client의 X,Y 좌표는 브라우저 창을 통해 "보이는" 페이지의 왼쪽 상단 모서리에 상대적 page의 X,Y 좌표는 전체 페이지의 왼쪽 상단 모서리에 상대적(스크롤링으로 숨겨진 부분 포함) 즉, page 좌표는 브라우저 창에 숨겨진 영역까지 포함해서 좌표가 측정되고, client 좌표는 브라우저 창을 기준으로 좌표가 측정되는 것 참고 https://stackoverflow.com/questions/6073505/what-is-the-difference-between-screenx-y-clientx-y-and-pagex-y
2021.06.28 -
[Web APIs] 브라우저 좌표 - Element.getBoundingClientRect()
💡 Element.getBoundingClientRect() Element의 위치와 크기 등의 정보를 알고 싶을 때! MDN 요소의 크기와 뷰포트에 상대적인 위치에 대한 정보를 제공하는 DOMRect 개체를 반환. 주의 💦 CSS는 오른쪽 아래를 기준으로 bottom, right 이 측정되기 때문에 주의할 것! Syntax domRect = element.getBoundingClientRect(); 참고 https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
2021.06.28