2024.08.10 - [Development Environment] - Why Vite? JS 모듈화의 역사, CJS, ESM, Webpack 2024.08.17 - [Development Environment] - 2016, Left-pad 사건에 대한 Rich Harris(Rollup)의 글로 알아보는 번들링의 중요성 위 글과 함께 차례대로 보게 된다면 더욱 이해가 잘 될 것이다. 이전 글에서 ES Modules에 비해 CommonJS의 단점으로 Tree-shaking이 어렵다는 점을 꼽았다. 단순히 import와 require만이 차이점은 아닐 것이다. 정확히 어떤 이유로 그렇게 말을 하는지, 동작 방식을 파헤쳐보면서 이유를 알아보자. Tree-shaking의 정의와 역사코드를 최적화 할 때 적용..

최근 실무에서 상태 관리를 위해 Zustand docs와 상태 관리와 관련한 책을 들여다보다 문득 상태 관리를 하려면 상태에 대해서 알아야되는 것 아닌지, 이미 상태에 대해 잘 안다고 단언할 수 있는가하고 스스로 의심하게 되었다. 제일 기본적인 useState도 제대로 알고 쓰는지 확신할 수 없었다. 리액트 공식 문서와 리액트 딥다이브, 리액트 훅을 활용한 마이크로 상태관리 등의 책을 참고하여 상태를 알아보고자 한다. 참고로 원문을 직접 번역해서 적었기 때문에 부족한 부분이 있을 수 있고 그렇기에 react-ko.dev 내용과 차이가 있을 수 있다. State 상태 컴포넌트는 상호작용의 결과에 따라 화면에 표시되는 내용을 변경해야하는 경우가 잦다. form에 입력할 때, input field를 업데이트해..

리액트 스터디 중 "가상DOM과 리액트 파이버" 주제가 나왔다. 발표를 맡게된 리액트 렌더링 부분을 준비하고, 발표 당일 스터디원들과 얘기하며 조금씩 윤곽이 잡히기 시작했다. 하지만 여전히 어려운 건 매한가지... 그러다가 좋은 글을 발견했는데 포스팅 일자가 리액트 15,16 기준이라 렌더가 동기식으로 진행된다고 되어있어서 🤔 제대로 스터디 내용을 복기할 겸, 그리고 파이버와 좀 친해질 겸 포스팅 주제로 선정하게 되었다. 조금 의문이었던 것은 재조정 과정은 똑같고, 여전히 유효할 것 같은데 리뉴얼된 React 사이트에는 파이버와 관련된 내용이 전부 생략되어있다. 왜일까????? 그래서 더 어렵게 느껴졌던 것 같다. 더이상 관련이 없는 내용인지? 레거시한 부분인 건지에 대한 고민. 리액트 파이버 아키텍처 ..

Introduction 나는 null이 아니라 any 형식이 포함된다고 Error가 떴다. React에서의 event를 제대로 이해하지 못한 탓인지 tsx를 화나게 했다. 나처럼 js에서의 Event는 익숙한데, React + TypeScript에서의 Event 타입을 어떻게 다루어야 할 지 이해하지 못하는 분들을 위해 글을 쓴다! React, TypeScript에서의 Event Type JavaScript에서 자주 쓴 `addEventListener( )`, `on____` 예시로 `onChange` change event는 주로 input element의 값이 수정되었을 때 발생하도록쓰인다. // Syntax addEventListener("change", (event) => {}); onchange..

2023.09.29 - [JavaScript/TypeScript] - Type의 근원을 알아보고 타입스크립트의 Type System 바라보기 🔼 이전 글을 읽고 읽어보면 더욱 이해가 잘 될 것이다. Top Type, Bottom Type TypeScript에서는 any와 unknown이라는 Top Type(최상위 타입: ⊤)과 never라는 유일한 Bottom type(최하위 타입)이 있다. 이것은 모든 타입들의 상한(Upper bound)과 하한(Lower bound)를 나타낸다. TypeScript의 모든 Type은 계층 구조를 기반으로 자리를 잡고 있다. Supertype, Subtype ✔️ 일반적인 타입을 슈퍼타입Supertype, 특수한 타입을 서브타입Subtype이라 한다. 어떤 타입이 다른..

타입스크립트에서의 타입은 자바스크립트의 타입과 무엇이 다를까? 이전에 배운 객체지향에서의 타입, 타입시스템이 반영되어 있는 걸까? 타입은 프로그래밍에서 어떤 의미인가 🤔 코드보다 이론 위주의 포스팅이 될 것이라 유의바람. 타입 Type 타입을 알기 위해선 추상화 Abstraction에 대한 이해가 선행되어야 한다. 추상화 抽象化 어떤 양상, 세부 사항, 구조를 명확하게 이해하기 위해 특정 절차나 물체를 의도적으로 생략하거나 감춤으로써 복잡도를 극복하는 방법. 복잡성을 다루기 위해 추상화는 두 차원에서 이루어진다. 1. 구체적인 사물들 간의 공통점만 취하고 차이점을 버리는 일반화를 통해 단순하게 만드는 것. 2. 중요한 부분을 강조하기 위해 불필요한 세부 사항을 제거함으로써 단순하게 만드는 것. ➡️ 이 ..

이전에 배운 preload, preconnect, prefetch로 리소스 우선순위를 변경하는 것을 배웠는데 next.js에서 이걸 어떻게 차용했고 어떤 효과를 이루어 냈는지를 알아볼 것이다. 우선 next.js에 대해서 먼저 알아보자. Next.js 란? The React Framework for the Web 빠른 웹 애플리케이션을 만들 수 있는 빌딩 블록을 제공하는 유연한 React 프레임워크이다. React 구성요소를 사용하여 UI를 구축하고 Next.js를 사용하여 추가 기능과 최적화를 수행한다. 내부적으로 Next.js는 번들링, 컴파일 등과 같이 React에 필요한 도구를 추상화하고 자동으로 구성하여 구성에 시간을 낭비하는 대신 애플리케이션 구축에 집중할 수 있게 해준다. 주요 특징 Next..

HTML 파일 아래 ✶ 스크립트를 비동기적으로 로드하도록 지정한다. ✶ 스크립트를 불러오는 과정에서 DOM 렌더를 차단하지 않도록 보장한다. ✶ 오직 파일을 불러오는 것만 병렬적으로 실행한다는 것이 중요. ✶ 실행되는 시점은 다운로드가 완료되는 순서에 따라 다를 수 있으므로 스크립트 간의 의존성이 있는 경우 조심해야 된다. ✶ 파일의 로딩을 마치게 되면 즉시 DOM 렌더를 멈추고 async 방식으로 불러온 스크립트 파일의 해석을 시작한다. ✶ 실행 순서가 보장되지 않음. ✶ 독립적으로 동작하는 스크립트 파일에 사용된다. ✶ DOMContentLoaded 이벤트 콜백으로 load를 보장할 수 없음. ⭕️ async 스크립트는 DOM에 직접 접근하지 않거나, 다른 스크립트에 의존적이지 않은 스크립트들을 독립..

테스트 코드, API를 사용하게 되면서 코드로 접한 비동기는 공부할 때의 비동기와는 또 달랐다. 익숙해지기 위해선 계속 공부하고 접해야 된다. 꼼꼼히 공부해보자. 비동기 Asynchronous 여기서 자바스크립트의 비동기 처리란 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 특성을 의미한다. 얼마전에 공부한 Web API의 setTimeout()도 비동기 처리 사례라고 볼 수 있다. // #1 console.log('Hello'); // #2 setTimeout(function() { console.log('Bye'); }, 3000); // #3 console.log('Hello, Again'); 위의 결과 값으로 Hello => Hello Again => (3초후) Bye..

이전에 배열을 공부하면서 구조 분해 할당을 배웠는데 실제로 적용해 보는 거랑은 또 다른 것 같다. 코드 구조를 보다가 가독성을 높일 수 있게 바꿀 수 있는 방법으로 쓸 수 있을 것 같아 리팩토링 해보았다. 먼저 구조 분해 할당에 대해 알아보고, 어떻게 적용했는지 말하겠다! 구조 분해 할당 Destructuring assignment 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다. 이를 통해 데이터 뭉치(그룹화)를 쉽게 만들 수 있다! 변수에 나머지 할당하기 구조 분해 할당의 구문은 할당문의 좌변 => 원래 변수로 어떤 값을 분해하여 할당할지 정의한다. const people = ["😎", "😡", "🥸", "🥶", "😳"];..