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

## chapter 4 함수나 블록 단위로 변수의 스코프를 한정짓는 것은 프로그래밍 언어의 기본스코프 안에는 다른 스코프가 올 수 있고, 해당 스코프에서는 해당 스코프 및 바깥 스코프 레벨의 변수만 접근할 수 있다.안쪽 스코프나 숨겨진 변수는 접근 불가능위와 같은 스코프를 렉시컬 스코프라고 한다 🎶 JS의 스코프는 특이점이 두 가지 있는데 호이스팅과 var이다.var 변수는 블록 위치와 관계 없이 함수 기준으로 스코프가 생성된다.var가 아닌 let, const는 TDZ 특징 때문에 특이하게 작동클로저는 JS와 같이 함수를 first class value로 취급하는 언어에서 렉시컬 스코프 모델을 사용했을 때 나타나는 자연스러운 결과물바깥 스코프에 있는 변수를 참조하는 함수가 있는 경우, 이 함수가 변수..

## chapter 3이터레이터 디자인 패턴은 데이터를 일정 단위로 쪼개고 점진적으로 처리한다는 아이디어다.next() 메서드가 있는 게 이터레이터 패턴의 대표적인 예인데, next를 호출하면 쪼개진 단위로 다음 데이터를 불러온다.더 이상 불러올 데이터가 없으면 예외를 발생시킨다.이터레이터 패턴의 핵심은 데이터를 처리할 때 표준화된 방법을 제공한다는 점이다.JS에서 이터레이터 패턴은 ES6에 추가되어 next() 메서드는 이터레이터 result 라 불리는 객체를 반환하고 해당 객체 내부에는 done과 value가 있어야 한다고 정의된다.반복 작업이 안끝나면 done은 false다for of 문법으로 이터레이터 result 객체를 소비할 수 있다... 같은 전개구문, 나머지 매개변수로도 소비 가능하다. 이..

## chapter 2js에서는 파일 하나가 하나의 프로그램이다.오류 처리 관점에서 하나의 프로그램으로 보는 것은 중요하다. 파일 하나를 하나의 프로그램으로 보기 때문에, 오류 발생 시 파일, 즉 프로그램이 멈춘다.빌드 도구로 합쳐진 JS 파일 하나는 거대한 하나의 프로그램으로 볼 수 있다 💘여러개의 js 파일, 프로그램을 하나의 프로그램으로 작동시키기 위해서 전역 스코프를 잘 활용해야 한다.ES6 모듈도 하나의 파일로 개별적인 프로그램으로 볼 수 있다. JS의 값은 원시타입과 객체타입이 있다.백틱은 보간법 방식이 허용된다.비어있는 단일 값을 표현하기 위해서 null과 undefined중 하나를 선택할 수 있는데, undefined가 더 안전한 방법이다.https://github.com/getify/Y..

자바스크립트를 모두 이해하고 알 수 있다고 생각하는 것은 잘못되었다 -> 꾸준히 배워나가고 익혀야 한다결과를 중시하고 과정에 대한 생각을 멈추면 안된다 (인내심이 중요)언어에 대한 이해도가 중요 😀 ## 챕터 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..