무딘붓의 코딩기록

자바스크립트로 정확한 타이머를 만드는 것은 어렵습니다. 어려운 이유는 무엇인지, 그리고 어떻게 비교적 정확한 타이머를 만들 수 있는지 알아보겠습니다. 🤔 1. setInterval()과 setTimeout()이 정확하지 못한 이유 JavaScript에서 타이머 기능을 구현할 때 자주 사용하는 `setInterval()`과 `setTimeout()` 함수는 브라우저 환경에서 일정 시간 간격으로 코드를 실행할 수 있게 해 줍니다.`setTimeout()` 함수를 이용해 1초 간격으로 실행되는 타이머를 만들어 보겠습니다. const INTERVAL = 1000; // 1초 간격let startTime = Date.now();function timerFunction() { const currentTime..

1. 개요   자바스크립트에서 0.1 + 0.2는 0.3이 아닙니다.  사실 알고 보면 C언어와 자바, 파이썬에서도 같은 오류가 발생합니다.왜 이런 오류가 발생하고, 어떻게 정확한 실수 연산을 할 수 있을지 알아보도록 하겠습니다. 2. 자바스크립트가 숫자를 저장하는 방법 우선 자바스크립트에서는 숫자를 어떻게 저장하는지 알아보겠습니다. 자바스크립트는 C언어의 int, float, double처럼 실수와 정수를 구분하지 않고, 모든 숫자를 number 타입으로 저장합니다.ECMAScript 사양에 따르면, number 타입은 IEEE 754 표준을 이용해 숫자를 저장합니다. IEEE 754는 부동소수점을 표현하는 가장 널리 쓰이는 표준으로, C와 C++, Java의 double 타입, Python의 floa..

기록으로 남기는 실시간 화이트보드 강의 서비스, 🙂 Boarlog 를 개발하며 구현한 내용을 담고 있습니다. 게시글의 기능을 이용한 최종 서비스는 GitHub 링크 에서 확인하실 수 있습니다. 이 게시글에서는 React 프로젝트에서 Fabric.js 라이브러리로 화이트보드(그림판)를 만드는 과정을 정리합니다. 실행 예시와 React 코드는 링크(codesandbox)에서 확인할 수 있습니다. 0. 왜 Fabric.js 라이브러리를 사용하나요? 우선, Fabric.js는 HTML Canvas를 쉽고 강력하게 관리할 수 있게 해주는 라이브러리 입니다. 가장 큰 특징은, 캔버스에 그려진 요소를 객체 형태로 관리할 수 있다는 점 입니다. 이를 이용해서 캔버스의 요소들을 선택, 이동, 회전, 크기조절 할 수 있는..

자바스크립트의 문자열 자바스크립트에서 문자열을 감싸는 따옴표로 '작은따옴표' , "큰따옴표" , `역따옴표(백틱)` 을 사용할수있다. let A = '작은따옴표'; let B = "큰따옴표"; let C = `역따옴표`; console.log(A); // 작은따옴표 console.log(B); // 큰따옴표 console.log(C); // 역따옴표 이중에서 작은따옴표와 큰따옴표는 차이가 없고, 역따옴표는 Javascript ES6에서 추가된 템플릿 리터럴에 쓰인다. 템플릿 리터럴(template literal) 템플릿 리터럴은 역따옴표(`)로 감싼 문자열 중간에 ${…}로 감싼 표현식을 표현하는 기능이다. 우선 기존의 문자열로 표현식을 표현하는 방법을 확인해보자. let A = 1 let B = 2 c..

자바스크립트를 처음 공부했을 때 가장 생소했던 것 중 하나는 비교 연산자 '==='였다. 일반적으로 다른 언어에서 비교연산자로 '=='만 쓰는 것과는 달리, 자바스크립트는 비교연산자로 '=='(동등 연산자)와 '==='(일치 연산자)를 구분해서 사용한다. 쉽게 두 연산자의 차이를 설명하면 '==' 는 값만 비교하지만, '===' 는 값과 자료형을 함께 비교한다. 값만 비교한다는 것이 잘 이해가 안 될 수 있는데, 이는 자바스크립트의 특성 때문이다. 예를 들어, 자바스크립트에서는 1 == "1" 의 결과는 true이다. 자바스크립트에서 '=='의 경우 알아서 비교하는 내용의 형식을 변환해서(형변환 비교) 비교한다. 그렇기 때문에, 자바스크립트는 문자열 "1"을 숫자 1로 변환해서 비교해버린다. 따라서, 다..

, 태그를 이용해서 편하게 내용을 접고 펼치는 기능을 구현할 수 있지만,좀 더 다양한 기능 (특정 조건에서 펼치기, 하나만 펼쳐지게 하기 등)이 필요해서 자바스크립트를 이용해서 구현하는 방법을 찾았다. 기초적인 내용은 아래 링크를 통해 구현했다.https://www.w3schools.com/howto/howto_js_collapsible.asp How To Create a CollapsibleW3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java,..

객체를 불러오기 위해 사용하는 getElementsByClassName과 querySelectorAll의 차이를 간단히 요약하면, 1. getElementsByClassName(그리고, getElementsByTagName)은 HTMLCollection을 반환하고, 2. querySelectorAll은 NodeList를 반환한다. 3. 일반적으로, getElementsByClassName이 더 빠르다고 한다. 우선 자바스크립트에서 객체에 접근하는 방법을 알아보자. 1. getElementById("id") → id 값이 "id"인 첫번째 객체를 리턴한다. 2. getElementsByTagName("div") → 태그 이름이 "div"인 모든 DOM 객체들을 찾아 컬렉션 리턴한다. 3. getElemen..

웹 문서를 만들때, '문서가 로드되는 시점'에 발생하는 이벤트로 주로DOMContentLoaded와 onload를 사용한다. 두 이벤트의 차이는 간략하게 요약하면 1. DOMContentLoaded는 DOM 트리를 완성하는 즉시 발생한다. 2. onload는 문서의 모든 콘텐츠(images, script, css, etc)가 로드되었을 때 실행된다. 따라서, DOMContentLoaded가 onload보다 먼저 실행된다. 아래는 사용 예시이다. document.addEventListener("DOMContentLoaded", function () { //실행할 코드 }); window.onload = function () { //실행할 코드 }

타임아웃 코드 반복 호출하는 코드로 setInterval()을 사용하는것이 일반적이지만, 이번에는 setTimeout()을 이용하여 setInterval()과 같은 역할을 수행하는 코드를 작성해보기로 한다. 먼저, setInterval()을 이용한 코드를 확인해보자, 10밀리초(=1초) 주기로 changeTime()을 호출하여 현재 시간을 표시하는 간단한 예시이다. setTimeout()을 이용하여 이와 동일한 결과물을 만들어 내는 것은 간단하다. 바로 setTimeout()을 재귀적으로 사용하면 된다. 아래는 재귀적으로 setTimeout()을 사용하여 위의 코드와 동일한 결과물을 만드는 코드이다. 이와같이 재귀를 사용하면 setTimeout()도 주기적으로 불러와서 사용할 수 있다. 특정 횟수만 반복..