솔미는 성장중

시작자바스크립트에서 0.1 + 0.2를 해보면 0.3이 아닌 0.30000000000000004가 나오는 것을 볼 수 있습니다.왜 그런걸까요?결론부터 말하자면 자바스크립트는 64비트 부동소수점을 사용하기 때문입니다. 부동소수점이란?그럼 부동소수점이라는 건 뭘까요?쉽게 표현하면 모든 숫자를 1.xxxxxx 형식으로 나타낸다는 것입니다.자바나 파이썬의 Float 타입, 자바스크립트의 number타입이 해당됩니다. 자바스크립트는 숫자 타입을 나타날 때 IEEE 754의 부동소수점 표현 형식 중 배정밀도 64비트 부동소수점 형식을 따릅니다.- 처음 1 Bit : 부호 표시용 (양수 = 0, 음수 = 1)- 11 Bits : 지수 부분. (소수점이 몇 칸 움직일 지)- 52 Bits : 가수 부분 (소수점이 움직..

해당 작업을 하면서 새롭게 배운 부분 또는 정리해두면 좋을 내용만 자세히 작성하였다! (여기 코드만 보고는 전체를 이해하기는 힘들 것 같다. 풀 코드와 함께 보는 것을 추천한담.) https://github.com/SOL-MI/Canvas-Practice/tree/main/2.%20%EB%B6%88%EA%BD%83%EB%86%80%EC%9D%B4 원 모양으로 폭죽 퍼지게 하기 // utils.js export const hypotenuse = (x, y) => { return Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)); }; // index.js createParticles(x, y, colorDeg) { const PARTICLE_NUM = 400; for (let i..

index.html은 크게 수정할 게 없으니 1번 글을 참고하자! index.js에서 우선 arc를 이용해 원을 그려준다. const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); const dpr = window.devicePixelRatio; const canvasWidth = 300; const canvasHeight = 300; canvas.style.width = canvasWidth + "px"; canvas.style.height = canvasHeight + "px"; canvas.width = canvasWidth * dpr; canvas.height = canvasHeight * dpr; c..

우선, index.html에 canvas 태그를 하나 만들어준다. (id는 나중에 css를 적용시키기 위해 넣어준거라 일단은 중요하지 X) 전체 코드를 먼저 보여주고, 자세한 설명은 아래에서 확인해주세요. // index.html // index.js const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); //그리는 도구 console.log(ctx); const dpr = window.devicePixelRatio; // dpr이 높을수록 선명한 그래픽 (dpr=1이면 1픽셀그리는데 하나 사용, dpr=2면 1px에 2*2로 구성) const canvasWidth = 300; const canvasHeig..

📌 정규 표현식이란? 문자 검색 / 문자 대체 / 문자 추출하는 용도로 쓸 수 있는 패턴 📌 어떻게 만들지? 1. 생성자 new RegExp('표현', '옵션') 예시) const regexp = new RegExp('the', 'g') console.log(str.match(regexp)) //str문자열에서 the와 일치하는 것을 찾아줌 옵션) '' : 첫 번째 일치하는 것만 찾음 g : 정확히 일치하는 모든 것들 찾음 i : 대소문자를 고려하지 않고 일치하는 것들 찾음 m : 여러 줄 일치, 각각의 줄을 시작과 끝으로 인식 2. 리터럴 (더 많이 사용) /표현/옵션 예시) const regexp = /the/gi console.log(str.match(regexp)) //console.log(str..