프론트엔드 공부 블로그 프론트엔드 공부 블로그

자바스크립트를 모두 이해하고 알 수 있다고 생각하는 것은 잘못되었다 -> 꾸준히 배워나가고 익혀야 한다결과를 중시하고 과정에 대한 생각을 멈추면 안된다 (인내심이 중요)언어에 대한 이해도가 중요 😀 ## 챕터 1자바스크립트의 정복은 있을 수 없으므로, 목표가 되어서도 안됨자바스크립트는 자바랑은 사실 관련이 없다. (자바와 스크립트가 붙은 건 마케팅을 위함이었다...)요즘엔 JS라는 이름으로 자바스크립트를 호칭하려는 흐름이 있다는 듯ECMA 국제 표준화 기구에 의해 공식화된 JS의 명칭은 ECMAScript이다. (16년도부터 해당 명칭 뒤에 개정 연도가 붙는다)자바스크립트의 공식 명세서는 TC39 (JS를 관리하는 TSC, 기술 운영 위원회) 에서 관리한다.TC39 정기 모임에서 명세 변경 안건에 대해..

가끔 좋은 JS 라이브러리를 발견해서 써보려고 했는데, 해당 라이브러리가 직접 React를 지원하지 않는 경우들이 있다.이런 경우에 UI 컴포넌트 instance를 생성해서 React에 직접 연결해주는 작업이 필요한데, 이를 어떻게 잘 할 수 있을지 고민해보았다 😃(이런 경우는 인스턴스를 직접 컨트롤해야 하는 UI 컴포넌트가 많아서 더욱 고민이 필요하다) 보통 React에서는 useRef를 통해서 인스턴스를 관리하는데, 여기에 추가로 useImperativeHandle을 활용해 Tui Grid를 React에서 자연스럽게 사용하는 예제를 한번 만들어 보았다.(tui는 react 까지 레핑된 라이브러리를 하긴 하는데.., 유지보수가 멈췄다 🤣)1️⃣ 기본적인 그리드 설정Tui Grid는 JavaScrip..

프론트엔드 개발을 하다 보면 input 이벤트나 keydown, keyup 이벤트를 다룰 때, 예상치 못한 버그를 마주할 때가 있다. 특히 IME(Input Method Editor)를 사용하는 환경(예: 한글 입력)에서 이벤트 핸들러가 엉뚱한 동작을 하거나, 입력값이 두 번 처리되는 등의 문제가 발생할 수 있다. 이때 유용하게 활용할 수 있는 속성이 바로 event.isComposing이다. event.isComposing 🎉event.isComposing은 사용자가 IME를 사용하여 입력을 조합(Composing)하는 중인지 여부를 나타내는 불리언 값이다.(한글의 경우에는 자음과 모음, 혹은 또 하나의 자음이 합쳐져 하나의 글자가 되므로, 조합형 글자이다)true 사용자가 아직 글자를 완성하지..

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

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

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

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

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