본문 바로가기

전체 글

 (68)
[React] Reconciliation - (feat, Diffing 알고리즘) Intro. 지난 글에서 Reconcilation에 대해 잠깐 이야기를 했습니다만, 이번 글에서 Reconcilation에 대해 좀더 깊게 다뤄보려합니다. 현재 최신 reconciler는 fiber structure를 기반으로한 reconciler지만, 글에서 중점적으로 다루려고 하는 내용이 diffing algorithm이기에, stack reconciler 피쳐를 사용해 설명하겠습니다. Main. Reconcilation에 대한 지난 글을 정리하자면 다음과 같습니다. React Element Tree를 생성하는 것. (VDOM) React Element란 결국 plain Obejct이기에, tree 생성은 굉장히 빠르다. 이 과정은 setState와 render호출 시, 일어난다. VDOM 생성 후,..
React Element vs Component vs Component Instance vs React Node Intro. const MyComponent = () => { return Hello from div; }; export default MyComponent; 위와 같은 코드가 있습니다. 흔히 부르는 '함수형 컴포넌트' 입니다. 여기서 잠깐 멈춰서 생각해볼것이, 그럼 React Element란 무엇일까요? 그동안은 사실 뭐~ 동음이의어가 아닐까? 하고 넘겼었는데, 어느날 문득 의문이 들어 찾아본 결과 매우 큰 착각임을 깨닫고 글을 써봅니다. 먼저 'Component'란 무엇일까요? React 문서에 따르면 다음과 같습니다. 개념적으로 컴포넌트는 JavaScript 함수와 유사합니다. “props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환합니다. Pr..
[Javascript] 폭죽 이펙트 (fireworks) Intro 한동안 web3쪽 공부만 하다보니, 이펙트 구현 욕구가 스멀스멀 밀려오길래 만들어 봤습니다 :) 간만에 만들고 이것저것 취향에 맞게 건들이다보니 이번 휴일은 순삭이었습니다.. (흑흑) Intuition 해당 이펙트의 무브먼트를 생각해보면 사실 크게 어려운건 없습니다. 1. viewport 하단에서 폭죽이 뿅 쏘아올려집니다. 2. 최고점에 도달할 시, 사방 팔방 파편이 튕겨 나가집니다. 이 정도입니다. Method 구현하기 위해 3가지 클래스를 만들었습니다. (정확히는 1가지 더 있는데, 얘는 이따 설명하겠습니다) 1. Firework - 말 그대로 폭죽 이펙트 하나에 대응하는 클래스 입니다. 2. Particle - 눈에 보이는 입자 하나에 대응하는 클래스 입니다. 3. Vector - 유..
[Javascript] JS Engine (자바스크립트 엔진에 대하여) 왜 자바스크립트는 c++보다 느릴까? 자바스크립트와 c++을 비교했을 때, 일단 제 눈에 제일 띄는 부분은 다음과 같습니다. 타입 명시를 안해도 되는 것. int myInteger = 3; var myVariable = 3 타입 명시가 필요없는 이유는 자바스크립트 런타임 시, 알아서 타입을 추론하기 때문입니다. 이걸 동적 타이핑(Dynamic typing)이라 합니다. 이 피쳐는 개발자 입장에선 편할지 몰라도 컴파일러 입장에선 굉장히 부담스럽습니다. 다음 예시를 한번 볼까요? const call = (obj) => obj.x; 잉...? 이게 뭐가 문제지? 싶은데, 컴파일러 입장에서 봅시다. 사용자가 'call'을 호출 시, 컴파일러 입장에선 꽤나 난감합니다. 왜냐면 컴파일러 입장에서 'x'에 대한 정보..
[Webpack + Opt] Code splitting (코드 스플릿팅) Intro. ( 방법만 궁금하시면 아래로 쭉 내려주셔요!) 아무런 설정을 안할 시, 웹팩은 모든 소스파일들을 하나의 파일로 번들링합니다. 하나의 파일로 번들링한다는게 나쁜건 아닙니다만, 예를 들어, 특정 피쳐 A가 있고, A의 경우, 특정 상황이 아니면 사용하지 않는다 하면 어떨까요? 가장 대표적으로 node_modules가 있겠습니다. 실제로 node_modules를 열어보면 굉장히 많은 모듈들이 있으나, 실제로 주로 사용하는 것은 몇개 안된다는걸 깨달으실 겁니다. 그리고 렌더링 관점에서 따지자면, 더욱 그 수는 줄어들것이구요. 만약 하나의 파일로 번들링된다면, 굉~장히 거대한 번들이 될테고, 브라우저 캐싱 관점에서도 굉장한 비효율이 야기되겠죠? 게다가 번들 하나의 사이즈가 크기 때문에, 피쳐 A와 같..
[Webpack] babel + Typescript 구성하기 Why Babel + Typescript? 타입스크립트 자체로 tsc(타입스크립트 컴파일러)가 있는데, 왜 babel과 연계해서 사용해야하지? 맞습니다. TS 또한 Babel마냥, 브라우저 호환을 위한 이전 버전으로의 자바스크립트로 트랜스파일링이 가능합니다. 하지만, Babel을 사용함으로써, 더욱 최적화된 빌드 결과물을 얻을 수 있습니다. 1. 타겟을 명확하게 지정가능함 @babel/preset-env를 이용해, 지원하고자하는 브라우저만 대상으로 지원가능합니다. 심지어 모던 브라우저에는 최신 코드를, 구식 브라우저에는 트랜스파일링 된 코드를 제공할 수 있게 여러 번들링 파일을 생산가능합니다. 2. 브라우저 폴리필 최신 문법을 이전 버전에서도 쓸 수 있도록 폴리필 가능합니다. 3. Tree Shakin..
[Webpack] Babel 설정하기 ( compatibility , polyfill, env etc..) Intro. 프로그래밍 하면서 하위 호환성(Backward Compatibility)라는 단어를 들어 보셨나요? 쉽게 말해, 특정 피쳐가 하위 호환을 지원한다는 뜻은 곧, 하위 버전에서 해당 피쳐를 사용할 수 있다는 뜻입니다. JS로 프로그래밍 할 때도 해당 개념을 신경 써야합니다. 왜냐하면, 스크립트를 실행하는 브라우저가 굉장히 다양하고 또 어떤 브라우저(IE)는 더 이상 업데이트를 안하기 때문이지요. 그래서 최신 피쳐를 사용하려 하니 어떤 브라우저에선 되는데, 어떤 브라우저에선 에러를 던지는 현상을 간간이 보실 수 있습니다. 그리고 이러한 문제는 트랜스파일러(Transpiler)를 이용하여, 최신 코드를 특정 브라우저가 이해할 수 있는 코드로 바꾸는 방법이 있습니다. 이번 글에선, babel이란 트랜..
[Webpack] 동적으로 참조되는 애셋 번들링 하기 (copy-webpack-plugin) Intro. webpack이 애셋을 번들링하는 방식은 기본적으로 정적입니다. 프로그래밍적으로 참조되는 애셋의 경우, 빌드 시, 번들링 되지 않는다는 뜻입니다. 예를들어 볼까요? //index.js function init(){ const newContent = `` document.innerHTML += newContent; } init() 위 코드를 웹팩으로 빌드 하였을때, 어떻게 될까요? frog1.jpg 만 참조되어 빌드됩니다. 위와 같이 동적으로 참조하는 방식은 꽤 흔한데 말이죠. 따라서 이번 글에선, 위와 같은 문제를 해결하는 방법에 대해 써보려합니다. Goal Method 1. copy-webpack-plugin을 설치합니다. yarn add -D copy-webpack-plugin 2. ..

티스토리툴바