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에 콜백함수로 넘긴 함수를 갱신시켜주지 않으면..

◼️ nvm 이란? nvm 은 node version manager 의 약자로 다양한 버전의 node.js 를 설치하고 관리하는 기능을 제공합니다. ◼️ nvm 을 사용하는 이유 하나의 pc 에서 각기 다른 node.js 버전을 사용하는 프로젝트들을 관리해야 할 때 node.js 버전을 간편히 바꾸기 위해 nvm을 사용합니다. ◼️ 설치 방법 ﹆ M1 Mac 1) 아래 명령어로 ~/.nvm 폴더를 생성합니다. mkdir ~/.nvm 2) ~/.zshrc 파일을 열고, 아래 내용을 작성후 저장합니다. export NVM_DIR="$HOME/.nvm" [ -s "$HOMEBREW_PREFIX/opt/nvm/nvm.sh" ] && \. "$HOMEBREW_PREFIX/opt/nvm/nvm.sh" # This ..

electron 으로 앱을 개발해야 할 때, typescript 와 react 를 사용해야 한다면 매번 일일이 환경 설정을 해주는 것이 불편할 것입니다. 그래서 electron + typescript + react 조합으로 이미 셋팅을 해놓은 제 개인 레포지토리를 공유드립니다. 레포지토리 주소 https://github.com/wisdomstar94/electron-sample GitHub - wisdomstar94/electron-sample: 본 레포지토리는 일렉트론 샘플 프로젝트 입니다. 프론트는 리액트 본 레포지토리는 일렉트론 샘플 프로젝트 입니다. 프론트는 리액트를 사용합니다. Contribute to wisdomstar94/electron-sample development by creating..

이번 글에서는 현재 많이 사용되고 있는 리액트(React)의 역사에 대해 알아보고자 합니다. 리액트를 만든 곳 리액트는 메타(구. 페이스북)에서 만들어졌습니다. 리액트가 탄생하게 된 계기 메타(구. 페이스북)의 개발자들은 2010년 이후부터 페이스북 앱의 기능이 점점 더 많아짐에 따라 코드의 복잡도가 높아진 상태였고 어느 시점부터는 너무 높은 코드 복잡도 때문에 도저히 앱을 유지보수 하거나 신규 기능을 반영하기 어려운 수준까지 도달했습니다. 그래서 코드를 보다 더 효율적으로 관리할 수 있도록 해주는 무언가가 필요하였고, 이는 리액트가 탄생하는 계기가 되었습니다. 2010년 : 리액트의 프리퀄인 XHP 등장 리액트의 첫 시작은 2010년 xhp 로 시작되었습니다. https://github.com/face..

이번 글에서는 javascript 에서 rsa 암호화 및 복호화 하는 방법에 대해 공유드리고자 합니다. 코드 공유 import { JSEncrypt } from 'jsencrypt'; export function encrypt(data: string, key: string): string { const sign = new JSEncrypt(); sign.setKey(key); return sign.encrypt(data).toString(); } export function decrypt(encData: string, key: string): string { const sign = new JSEncrypt(); sign.setKey(key); return sign.decrypt(encData).toStr..

안녕하세요. 루루개발자 입니다. 이번 글에서는 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..

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