JavaScript로 shell 스크립트 작성하기 😎 Google’s zx 라이브러리

JavaScript는 브라우저뿐만 아니라 Node.js 덕분에 서버에서도 자주 사용된다.그런데 이 언어를 활용해 터미널 명령어를 실행하는 shell 스크립트를 작성할 수 있다면 얼마나 좋을까? 이런 요구사항을 Google의 zx 라이브러리가 만족한다 👍이번엔 zx 라이브러리를 실제로 사용해본 경험을 공유하기로 했다. zx란 ❓zx는 Google이 개발한 Node.js 기반의 라이브러리로, JavaScript나 TypeScript를 사용하여 터미널 명령어를 실행하는 스크립트를 간단하고 직관적으로 작성할 수 있게 해준다.✨ 따라서, shell 스크립트가 생소한 JS 개발자가 손쉽게 스크립트를 작성할 수 있게 해준다기존의 스크립트와 비교했을 때 더 강력한 기능과 유연성을 제공한다.zx의 장점 😎간결한 문법..

• format_list_bulleted JavaScript
• · 2025. 1. 22.
• textsms

TextEncoder를 활용하여 텍스트 인코딩하기 (문자열 byte 계산하기 🎶)

새삼스럽지만 프로그래밍에서 데이터는 byte단위의 용량을 가진다.당연히 작성하는 코드의 String 데이터도 byte 단위의 용량을 가지는데, 그 용량은 다음과 같다. (UTF-8 기준)영어, 공백, 숫자, 특수문자 : 1byte한글 : 3bytes대부분의 이모지 ❤️ : 4 bytes가끔은 데이터를 바이트로 바꾸어 사용하거나, 작성된 텍스트가 몇 바이트인지 체크해야할 경우가 있을 수 있다.파일 입출력네트워크 전송바이트 크기 계산이럴 경우에는 Javascript 내장 객체 TextEncoder를 활용하여 손쉽게 바이트로 데이터를 다룰 수 있다 👍 const encoder = new TextEncoder();  간단한 예제를 통해서 문자열을 바이트로 변환해보자.const encoder = new Text..

• format_list_bulleted JavaScript
• · 2024. 11. 7.
• textsms

자바스크립트 Proxy 객체를 사용해서 State 만들어 보자

React를 사용하면 useState를 통해서 데이터를 바꿔서 DOM을 다시 그리는 기능을 사용할 수 있다. 생각해보면, 순수 자바스크립트로 화면을 바꾸고자 한다면 DOM에서 element를 찾은 뒤에 데이터를 직접 수정해줘야 하는 부분이다. 그래서 어떻게 React는 이런 반응성, Reactivity를 구현했을까 고민해보고 자바스립트의 Proxy 객체를 사용해서 State를 비슷하게 구현해보자 하였다. 🙌 직접 구현한 예제 최대한 React와 비슷하게 구현해보려고 노력했다. 다음은 구현한 코드 내용인데, 일단 HTML이다.  root에 element가 삽입되는 것으로 생각했고, 하나의 js를 통해서 이를 통제할 수 있도록 구현해봤다. Proxy를 사용해서 구현했는데, Proxy..

• format_list_bulleted JavaScript
• · 2024. 8. 25.
• textsms

commander를 이용한 JS CLI 라이브러리 File Output 생성하기

종종 CLI 기능이 있는 라이브러리를 사용하면, 파일을 생성해주는 기능이 있는 경우를 종종 봤다. 이번에는 이를 어떻게 구현할 수 있을지 직접 만들어봤다. 작성한 colors-helper-tools 라이브러리의 cli 코드이다.빨간색으로 테두리친 부분이 CLI 코드에서 실제로 file output을 생성하는 부분이다.-f나 --file 옵션을 사용하면, 파일을 생성한다. 이때, 파일 이름은 중복이 일어나면 에러가 발생할 수 있다.때문에 현재 시간을 이용하여 파일을 만듦으로써 중복을 방지한다./** * * @param prefix file name prefix * @param extension file_name.extension * @returns file name String */const generat..

• format_list_bulleted JavaScript
• · 2024. 6. 16.
• textsms

번들러 Rollup 세팅해보기

Javascript 라이브러리를 만들 때, 번들링을 하면 여러 장점이 있다.Tree Shaking을 하여 불필요한 코드가 최종 결과물에 포함되지 않도록 할 수 있다. (최종 번들 크기를 줄일 수 있)모듈화된 코드들을 하나의 js 파일로 만들기 때문에, 네트워크 요청 비용을 절감하고 코드의 보안성을 높일 수도 있다.다양한 플러그인을 사용할 수 있고, 필요한 폴리필을 자동으로 포함시킬 수 있으 transpiling을 간편하게 설정할 수 있다. (다양한 환경에서 코드가 호환되도록 할 수 있다.)HMR(Hot Module Replacement)과 같은 개발환경을 구축하는데도 도움이 된다.소스 맵(Source Map)을 생성하여 디버깅을 쉽게 할 수 있다. (번들된 코드가 아닌 원본 코드의 위치와 내용을 확인할 ..

• format_list_bulleted JavaScript
• · 2024. 6. 7.
• textsms

commander.js를 사용한 js CLI 라이브러리 구현 (with 예제)

CLI 라이브러리를 구현하기 위해서는 여러 키워드들에 대해서 알아야 한다. - bin 등록 (package.json의 bin)- 커맨드를 통해 인자를 받기 위한 process.argv- shell 스크립트 작성등등... 위와 같이 CLI 라이브러리 구현을 위해서 많은 고려사항들이 있다. 이때, commander.js을 사용하면 js로 간단하게 나만의 cli 라이브러리를 구현할 수 있다. commander.js는 Node.js 환경에서 CLI를 쉽게 작성할 수 있게 해주는 라이브러리로, 명령어와 옵션을 간단하게 정의하고 파싱할 수 있는 기능을 제공한다.🎶 복잡한 코드 작성과 테스트 과정을 줄일 수 있다. npm i commander commander를 설치한 뒤, 다음의 예제 코드를 살펴보자. ❓ #!/..

• format_list_bulleted JavaScript
• · 2024. 6. 4.
• textsms