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

안녕하세요. 루루개발자입니다. 이번에는 리액트에서 기본으로 제공해주는 훅 함수 중 하나인 "useEffect" 에 대해 알아보고자 합니다. 아래 예시 코드들은 리액트의 프레임워크인 Next.js 를 기준으로 작성되었으므로 이 점 참고해주세요. useEffect 란? 리액트(react) 공식 문서에 의하면, useEffect 는 외부 시스템과 컴포넌트를 동기화 할 수 있게 해주는 리액트 훅(hook) 이라고 정의 되어 있습니다. 여기서 말하는 외부 시스템이란, 리액트에 의해 제어 되지 않는 것들을 말합니다. 리액트에 의해 제어 되지 않는 예시는 다음과 같습니다. API 통신 ref 를 이용한 dom 제어 window 전역 객체에 이벤트 리스너 할당 또는 해제 이 밖에도 여러가지가 있겠지만, 대체로 이런 상..

안녕하세요. 루루개발자 입니다. 리액트로 프론트엔드 개발을 하다보면 자주 접하는 훅 함수가 있습니다. 바로 "useState" 입니다. useState 란 무엇인가? useState 는 리액트에서 기본으로 제공해주는 훅 함수들 중 하나로, 컴포넌트에 상태 변수를 추가할 수 있도록 해주는 훅 함수입니다. 해당 함수는 2개의 원소를 갖는 배열이 반환되며, 첫번째 원소에는 상태 값이 반환되며 두번째 원소에는 상태 값을 변경할 때 사용되는 setter 함수가 반환되게 됩니다. 그렇기 때문에 보통 아래와 같이 구조 분해 할당을 이용하여 선언하게 됩니다. const [state, setState] = useState(initialState); 상태값 변경시 리렌더링 발생 useState 에서 반환된 배열의 두번째 ..

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

안녕하세요. 루루개발자 입니다. 회사에서 프론트엔드 개발을 진행중에 있는데, 프론트에서.. 즉 브라우저죠, 브라우저에서 mqtt 통신을 통해 토픽을 구독하고 이벤트를 받거나 토픽으로 메시지를 발행하여 여러가지 처리를 진행해야 하는 상황이 있었습니다. 처음에 회사에서 mqtt 를 사용해야 한다는 말을 들었을 때 mqtt 라는 단어를 처음 들어봤습니다. 그래서 이번에는 mqtt 에 대해 한번 알아보는 시간을 가져보려 합니다. MQTT 란? mqtt 는 경량화된 발행/구독 메시징 프로토콜(통신규격)을 의미합니다. 낮은 전력, 낮은 대역폭 환경에서도 정상 작동될 수 있도록 설계되었기 때문에 매우 가볍다고 표현되기도 하며, 이러한 특성 때문에 iot(사물인터넷) 같은 곳에서 자주 사용된다고 합니다. 발행과 구독..

안녕하세요. 루루개발자 입니다. 이번 시간에는 github action 을 활용하여 github package 저장소에 npm package 를 배포하는 방법에 대해 기술해보고자 합니다. 본 글에서는 typescript 기반의 react 와 프론트엔드(브라우저)에서 사용되는 패키지를 기준으로 하며 레포지토리의 패키지 개발 코드들이 src 폴더 밑에 있다고 가정하고 배포하는 방법을 설명하기 때문에 이 점 참고해주세요. :) 1. personal access token 발급 받기 github action 에서 github package 저장소로 패키지를 publish 하기 위해서는 해당 권한이 있는 토큰이 필요하므로 아래 과정을 참고하여 토큰을 발급받아 주세요. https://github.com/ githu..

펭귄의 호흡 제 11형 "k get all -A"

펭귄의 호흡 제 10형 "docker rm -f $(docker ps -a -q)"

펭귄의 호흡 제 9형 "netstat -antpo"

대체로 진실에는 두 가지 면이 있다.

은혜 갚는 여우

자유다.