무딘붓의 코딩기록

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..

마이크 볼륨 시각화하기 에 이어서, 마이크 변경과 오디오 볼륨을 조절하는 방법을 간단히 살펴봅니다. 바닐라 Javascript로 개발한 예제코드는 아래에서 확인할 수 있습니다. https://codepen.io/vchgekmq-the-flexboxer/pen/poBWNbE 1. 입력 마이크 변경하기 입력 마이크를 변경하는 기능을 간단히 추가해 보겠습니다. 이전에 만든 볼륨 시각화 코드에서 이어서 개발할 예정이므로, 이전 게시글을 참고해 주시면 감사하겠습니다. Javascript로 마이크 볼륨 시각화하기 기록으로 남기는 실시간 화이트보드 강의 서비스, 🙂 Boarlog 를 개발하며 구현한 내용을 담고 있습니다. 게시글의 기능을 이용한 최종 서비스는 GitHub 링크 에서 확인하실 수 있습니다. 웹 페이지 ..

자바스크립트의 문자열 자바스크립트에서 문자열을 감싸는 따옴표로 '작은따옴표' , "큰따옴표" , `역따옴표(백틱)` 을 사용할수있다. 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 Collapsible W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Jav..

객체를 불러오기 위해 사용하는 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()도 주기적으로 불러와서 사용할 수 있다. 특정 횟수만 반복..