d3 라이브러리를 활용해서 계기판 차트를 한번 만들어보았습니다. 계기판 차트 시연 영상 개발 코드 https://github.com/wisdomstar94/d3-custom-librarys/blob/main/src/app/instrument-panel/page.tsx 계기판 차트 구현 코드는 위 URL 에서 확인해보실 수 있습니다. 완성 이미지 value : 현재 값 minimum : 최소 값 maximum : 최대 값 unitCount : 계기판을 이루는 요소들의 총 갯수 unitAngle : 계기판을 이루는 요소들이 차지하는 원주율 값 strokeWidthAngle : 계기판을 이루는 요소들의 총 길이가 차지하는 원주율 값 strokeWeight : 계기판을 이루는 요소들의 두께 값 cornerRad..

리액트에서 특정 요소에 직접 event listener 를 할당해야 하는 경우에 사용될 수 있는 useAddEventListener 훅을 제공하는 @wisdomstar94/react-add-event-listener 패키지를 소개합니다. 설치 방법 npm i @wisdomstar94/react-add-event-listener https://www.npmjs.com/package/@wisdomstar94/react-add-event-listener @wisdomstar94/react-add-event-listener 본 레포지토리는 js 의 addEventListener 와 관련된 기능을 제공해주는 리액트 훅의 레포지토리 입니다. addEventListener에 콜백함수로 넘긴 함수를 갱신시켜주지 않으면..

안녕하세요. 루루개발자 입니다. 이번 글에서는 javascript 에서 aes256 암호화, 복호화 하는 방법에 대해 공유드리고자 합니다. 먼저 이 글을 보시는 분들께서는 가까운 시일 내에 또는 지금 당장 javascript 에서 aes256 암호화, 복호화를 적용해야 하는 상황이실 거라 생각됩니다. 그래서 먼저 제가 만들어 둔 코드를 공유 드리겠습니다. import { AES, enc } from 'crypto-js'; export function encrypt(data: string, key: string): string { const dataWA = enc.Utf8.parse(data); const keyWA = enc.Utf8.parse(key); const ivWA = enc.Utf8.parse..

안녕하세요. 루루개발자 입니다. 프론트엔드 개발을 하다보면 한번쯤은 들어봤을 법한 단어가 있습니다. 바로 "호이스팅" 입니다. 사실 이 호이스팅에 대한 글을 이전에 한번 올린적이 있는데 좀 더 세부적으로 작성하고 만화로 설명한 부분도 추가한 버전으로 재작성하여 올려보게 되었습니다. 호이스팅이란? 호이스팅은 간단하게 설명하면 "코드가 실행되기 전에 변수 선언 부분이 최상단으로 끌어 올려지는 현상" 이라고 말해볼 수 있습니다. 하지만 이를 좀 더 자세히 설명하면 "자바스크립트 엔진이 각각의 스코프들을 하나씩 돌면서 해당 스코프안에 선언된 정보들을, 코드를 실행하기 전에 미리 수집하는 현상" 이라고 말해볼 수 있습니다. 즉, 코드를 실행하기 전에 어떤 변수들이 선언 되었는지 미리 수집하였고 그렇기에 미리 알고..

d3.area d3.area 는 선 밑으로 영역을 그릴 때 사용되는 함수입니다. 예제 다음과 같이 typescript 코드를 작성합니다. (js 로의 빌드는 esbuild 등으로 진행 하신 후, 브라우저에서 script 태그로 불러오시면 됩니다.) import * as d3 from 'd3'; interface Data { x: number; y: number; } window.addEventListener('load', function() { const data: Data[] = [ {x: 0, y: 20}, {x: 10, y: 15}, {x: 20, y: 50}, {x: 30, y: 35}, {x: 40, y: 70}, {x: 50, y: 115}, {x: 60, y: 89}, {x: 90, y: 6..

안녕하세요. 루루개발자 입니다. 이번에는 클로저(Closure) 에 대해 알아보려고 합니다. 클로저(Closure) 란? 일반적으로 함수 내에 선언된 지역 변수들은 그 함수가 처리되는 동안에만 존재합니다. 즉, 함수가 종료되면 (리턴되면) 함수 내에 선언되었던 변수는 파괴되고 더 이상 접근 불가능 하다고 생각하는 것이 일반적입니다만, 예외가 존재합니다. function makeFunc() { const name = "홍길동"; function displayName() { alert(name); } return displayName; } const myFunc = makeFunc(); myFunc(); 위 예시에서 name 이란 변수는 "makeFunc" 함수 내에 선언된 지역 변수 입니다. "displa..

안녕하세요. 루루개발자 입니다. 이번 글에서는 javascript 난독화를 적용하면서 생긴 이슈에 대해 공유드리고자 합니다. 다음과 같은 상황이라고 가정해봅시다. -- test-class.class.js class TestClass { apiUrl; apiCallback; constructor(options) { console.log('TestClass.options', options); this.apiUrl = options.apiUrl; this.apiCallback = options.apiCallback; console.log('this.apiUrl', this.apiUrl); console.log('tthis.apiCallback', this.apiCallback); } } -- test-clas..

안녕하세요. 이번에는 Javascript 의 TDZ(Temporal Dead Zone) 에 대해 알아보겠습니다. ▣ TDZ 가 뭐야? TDZ 란 Temporal Dead Zone 의 약자로 우리 말로 번역하면 일시적 사각지대라는 의미이며, 스코프 시작 ~ 초기화 시작 사이의 구간을 의미합니다. 다른 말로 변수가 선언되고 변수의 초기화가 이루어지기 전까지의 구간이라고 말할 수 있겠습니다. 그림으로 표현하면 다음과 같이 표현 할 수 있을 것 같습니다. TDZ 에서는 선언 되기 전이거나 초기화 되기 전인 상태의 변수를 사용하는 것을 허용하지 않습니다. 그래서 TDZ 구간 때 선언되지 않거나 초기화 전인 변수를 참조하게 되면 에러가 발생하게 됩니다. ▣ 변수 생성 단계 TDZ 를 이해하기 위해서는 Javascr..