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

이번 글에서는 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..

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

안녕하세요! 최근에 타입 가드와 타입 축소에 대한 용어를 처음 들어봐서 해당 용어에 대해 알아보려고 합니다. 타입 가드 타입 가드(Type Guard)는 컴파일러가 타입을 예측할 수 있도록 타입의 범위를 축소시켜 주는 것을 의미합니다. 타입 축소 말 그대로 타입의 범위를 축소하는 것을 의미합니다. 즉, 타입 가드를 해주기 위해 타입 축소를 하는 거라고 말할 수 있습니다. 타입 가드 적용 방법 타입 가드를 적용하는 방법은 다음과 같이 여러가지 방법이 있습니다. 1. typeof function test(value) { if (typeof value !== 'string') { return; } // 여기부터는 value 를 string type 으로 확정 인식! } 위 코드와 같이 typeof 를 통해 확..

package.json 에 명시된 버전 표기법에 대해 알아보려고 합니다. 버전 구성 버전은 크게 3가지로 분류 됩니다. Major.Minor.Patch Major : 이전 버전과 호환성이 보장되지 않는 업데이트이며 주로 대규모 업데이트가 일어났을 때 메이저 버전이 변경됩니다. Minor : 이전 버전과 호환 되면서 일부 새로운 기능이 추가되거나 수정되는 업데이트가 일어났을 때 마이너 버전이 변경됩니다. Patch : 버그 수정 및 성능 개선과 관련된 업데이트가 일어났을 때 패치 버전이 변경됩니다. 버전을 표기하는 방법이 여러개? package.json 을 보면 다음과 같이 버전 앞에 ~ 또는 ^ 문자가 붙은 것을 볼 수 있습니다. 이 둘의 차이에 대해 알아보겠습니다. Tilde (틸드, ~) 버전 앞에 ..

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

d3.arc d3.arc 는 호를 그릴 때 사용됩니다. 원형 그래프를 그릴 때 유용하게 사용될 수 있습니다. 예제 다음과 같이 typescript 코드를 작성합니다. (js 로의 빌드는 esbuild 등으로 진행 하신 후, 브라우저에서 script 태그로 불러오시면 됩니다.) import * as d3 from 'd3'; window.addEventListener('load', function() { const svgD3Instance = d3.select('svg').append("g"); svgD3Instance.append("path") .attr("class", "arc") .attr("d", function(d) { return d3.arc()({ innerRadius: 40, outerRadi..