반응형 JS57 [JS] DOM : 크기와 좌표 window.innerWidth / innerHeight Viewport(현재 화면)의 크기를 얻음 window.scrollX / scrollY Viewport의 현재 스크롤 위치를 얻음 (페이지 좌상단 기준) E.scrollLeft / E.scrollTop 스크롤 요소의 현재 스크롤 위치를 얻음 (요소의 좌상단 기준) window.el = document.querySelector('.scrollElement') el.scrollLeft // 수평 스크롤 위치 el.scrollTop // 수직 스크롤 위치 window.scrollTo() / 스크롤요소.scrollTo() 지정된 위치로 스크롤 하기 대상.scrollTo(X, Y) // 또는 대상.scrollTo({ left: x좌표, top: y좌표, b.. 2023. 10. 28. [JS] dom DOM이란 무엇인가? DOM은 Document Object Model의 약자입니다. DOM은 넓은 의미로 웹 브라우저가 HTML 페이지를 인식하는 방식을 의미합니다. 조금 좁은 의미로 본다면 document 객체와 관련된 객체의 집합을 의미할 수도 있습니다. DOM은 어떻게 생겼을까? DOM을 제대로 이해하기 위해서는 tree라는 자료구조를 이해할 필요가 있습니다. DOM이 tree 형식의 자료구조를 가지고 있기 때문입니다. Javascript에서 DOM의 특정 요소(element)를 찾는 방법 1. getElementById() [HTML] Div1입니다. Div2입니다. [JS] function getDiv1() { const div1 = document.getElementById('div_1'); .. 2023. 10. 28. [JS] fetch 메소드 fetch('https://jsonplaceholder.typicode.com/posts/1') .then(res => console.log(res)) fetch 매서드는 JavaScript에서 서버로 네트워크 요청을 보내고 응답을 받을 수 있도록 해주는 매서드이다. fetch 함수로 HTTP 요청하기 1. GET: 존재하는 자원을 요청 2. POST: 새로운 자원 생성 요청 3. PUT: 존재하는 자원 변경 요청 4. DELETE: 존재하는 자원 삭제 요청 2023. 10. 28. [JS] 반복문 비동기 Promise.All()을 이용한다. const func = async () => { const promises = []; for(let i of data){ const promise = insertDatabase(i); promises.push(promise); } await Promise.all(promises); }; 이런 식으로 하면 병렬로 진행되어 다른 반복문을 사용할 때보다 시간이 훨씬 단축된다. 2023. 10. 28. 이전 1 2 3 4 5 6 7 ··· 15 다음 반응형