본문 바로가기

JavaScript

(8)
div가 맨 위에 있는지 확인하는 방법. div가 맨 위에 있는지 아니면 다른 html element에 가려져 있는지 알고 싶을 때 다음과 같이 하면 됩니다. 1. getBoundingClientRect로 위치를 구한다. 2. 확인하고 싶은 좌표를 선택한다. 3. 좌표에 있는 최상위 element를 찾는다. 4. 내 element와 최상위 element가 같은지 확인한다. 위와 같은 단계를 거치면 됩니다. id가 container이 div의 우측 하단 코너가 현재 화면에 보여지는지 확인하는 예를 들어보겠습니다. const _id = "container"; const _container = document.getElementId("container"); const _rect = _container.getBoundingClientRect(); co..
아직 까지 console.log 만 사용하시나요??? 습관적으로 또는 귀찮다는 이유로 여태껏 console.log만 사용하고 있었는데 우연히 console 객체가 아주 다양한 함수를 제공하고 있다는 걸 알았습니다. 사실, 그동안 알아보려고 하지도 않았습니다. ㅎㅎㅎ https://developer.mozilla.org/en-US/docs/Web/API/console 이것들 중 자주 사용할 만한 것 몇 개만 보겠습니다. 1. 기본 출력 const _width = 100; const _height = 50; console.log(_width, _height); console.log({_width, _height}); 아마 저처럼 기본 기능만 사용하시지 않을까요? ㅎ 출력 결과는 아래와 같습니다. 단순히 변수만 출력하는 것 보다 객체 형태로 출력하면 보기에 훨씬..
중첩된 div에서 마우스 클릭 이벤트 전달 방지. div가 중첩되어 있을 때 마우스 클릭 이벤트를 전달하고 싶지 않을 때가 있습니다. 그림과 같이 BODY, Bottom, Top이 중첩된 구조에서 Top이 팝업 메뉴라 가정하고, Bottom이나 BODY 부분에 마우스 클릭 이벤트 핸들러를 추가해서 Top을 닫는 코드를 넣었다고 가정해 보겠습니다. 코드를 작성 후 실행하면, 의도와 다르게 Top 부분을 클릭해도 Top이 닫혀버립니다. 이유는 Top을 클릭하면 그 이벤트가 Bottom, BODY로 전달되기 때문입니다. 이럴때 사용할 수 있는 것이 stopPropagation입니다. https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation Event.stopPropagation() - We..
css 속성 값으로 계산 식 넣기. calc를 사용하면 css 값을 계산식으로 사용할 수 있습니다. width: calc(100vh - 60px); calc는 position으로 fixed나 absolute를 사용해서 특정 위치에 고정시킨 div 크기를 정할 때 유용합니다. 이때, right, bottom이 0px인 경우 별 문제없습니다. 그러나, 화면 중간에 표시할 때 width, height를 비율로 사용하면 원하는 결과가 안 나옵니다. 이때 calc를 사용하면 창 크기를 변경했을 때 내가 원하는 만큼 화면을 채울 수 있습니다. 아래와 같이 height에 calc를 사용하면 바닥에서 30px 이동한 후 높이를 다 채울 수 있습니다. .calc-test { position: fixed; right: 5px; bottom: 30px; wi..
div에 자동 스크롤 기능 적용하기 div의 innerHTML 속성에 문자열을 이어 붙일 때 스크롤바를 자동으로 맨 밑으로 이동시겨 보겠습니다. 1. 자동 스크롤 테스트를 위한 HTML 코드 작성. ADD LOG 2. div에 overflow style 추가.. #log { white-space: pre; overflow-y: scroll; width:300px; height:100px; border:1px solid black; } 3. JavaScript 코드 추가. const log = document.getElementById("log"); log.isScrollBottom = true; log.addEventListener("scroll", (event) => { if (event.target.scrollHeight - event..
비동기 호출, async, await를 이해해 보자. 2020/04/12 - [JavaScript] - 비동기 호출, Promise를 이해해 보자. 2020/04/14 - [JavaScript] - 비동기 호출, Promise를 이해해 보자(2). 이전 글에서 자바스크립트 비동기 호출을 위한 Promise에 대해서 알아보았는데요. 이 Promise 보다 훨씬 사용하기 편하고, 코드 가독성도 뛰어난 async function, awiat에 대해서 알아보겠습니다. async function async function async function 선언은 AsyncFunction객체를 반환하는 하나의 비동기 함수를 정의합니다. 비동기 함수는 이벤트 루프를 통해 비동기적으로 작동하는 함수로, 암시적으로 Promise를 사용하여 결과를 반환합니다. 그러나 비동기 함수를..
비동기 호출, Promise를 이해해 보자(2). 2020/04/12 - [JavaScript] - 비동기 호출, Promise를 이해해 보자. Promise의 기본 사용법을 다룬 지난 글에 이어서, 이번에는 여러 동기화 작업을 동시에 다루는 방법을 알아보겠습니다. Promise.all() Promise.all() The Promise.all() method returns a single Promise that fulfills when all of the promises passed as an iterable have been fulfilled or when the iterable contains no promises or when the iterable contains promises that have been fulfilled and non-prom..
비동기 호출, Promise를 이해해 보자. 프롤로그 promise? MFC를 사용하는 윈도 프로그래머지만, reactjs, electron에 관심을 가지면서 신묘한 자바스크립트 문법에 적응이 안 되었는데, 그중 하나가 promise! C 프로그램만 하던 나로서는 이게 인터럽트도 아니고, 스레드도 아니고, 콜백도 아닌 것이, 프로그램 코드 진행은 그대로 지나갔는데, 나중에 코드가 실행되니 신기했다. 만약, fetch를 사용하는 아래와 같은 코드를 실행하면, console.log("fetch 시작"); fetch("http://example.com/list.json") .then(res => { return res.json(); }) .then(json => { console.log(JSON.stringify(json)); }); console.lo..