saga의 특징 공식문서 발췌(https://redux-saga.js.org/) 1. 비동기 - redux-saga는 ES6 문법인 generator를 사용하여 비동기 flow를 더 쉽고 가독성있게 작성할 수 있도록 돕고, test도 쉽게 만들수 있다. - 복잡한 side effect을 세부사항에 얽매이지 않고 생성할 수 있다. 2. 컴포지션(구성) 중심 - saga는 병렬 수행, 작업 동시성, 작업 경쟁, 작업 취소 등을 다루는 다양한 접근 방식을 가지고 코드 흐름을 완벽하게 제어한다. 3. 테스트하기 쉬운 - saga와 generator의 각 단계의 결과를 assertion할 수 있다. - side effect 테스트가 빠르고 간결하고 고통스럽지않게 된다. 아래는 너무 잘 정리된 특정 블로그의 글을 ..
https://wormwlrm.github.io/2019/12/04/Why-JSON-parse-is-faster-than-object-literal.html 왜 JSON.parse가 더 빠를까? 최근에 처음 깨달은 사실인데, JSON.parse("{}")로 객체를 만드는 것이 쉽다고 한다. 그 이유는 자바스크립트 엔진에게 있어서, JSON을 분석하는 것이 매우 간단하기 떄문이라고 한다. 오오 너무 신기하다. 자바스크립트는 문맥에 민감하기 때문에 {}를 파싱하는 것에 여러가지 신경을 써야하고, Number, String, Boolean, Array, Object 등등의 리터럴들에 대한 대비를 해야한다. (토큰이라고 하는듯) 하지만 JSON.parse("{}")으로 객체를 생성한다고 하면 String 토큰만..
총 3가지 예제를 통해서 javascript의 class를 function으로 변환해봅시다. 이게 가능한 이유는, javascript class는 그저 syntactic sugar이기 때문이고, 내부적으로는 function과 prototype의 조합으로 이루어져 있기 떄문입니다. 예제 1. class A { constructor(x,y) { this.x = x; this.y = y; } } 이것은 function으로 다음과 같이 바꿀 수 있습니다. function A(x,y) { this.x=x; this.y=y; } 간단합니다! 그럼 메서드를 추가해봅시다. 예제2. class A { constructor(x,y){ this.x = x; this.y = y; } say(){ return "say"; } ..
IIFE란? Immediately Invoked Function Express. 즉, 즉시 실행함수의 약자이다. 일회성 함수이거나, 모듈간 스코프분리를 위해서 주로 사용한다. 예제는 다음과 같다. // 1 (function () {})() // 2 (function (){}()) // 3 (() => {})() 여기서 한자기 의문이 있다. 2는 왜 되는거지? 일단은 "그냥 된다"라고 설명해두고 다른 질문에 답해보자. // 4 (() => {}()) 4는 왜 안되는 걸까? 2번과 같다고 생각되는데 4번은 되지 않는다. 그 이유는 https://github.com/babel/babel/issues/2118 ArrowFunction: CallExpression not allowed after closing }..
면접 스터디를 진행하다가 많은 사람들이 Vitual DOM이 하는 일을 "정말 변경사항이 일어난 부분만 Real DOM에 반영해주기 위한 기술"이라고 대답을 했다. 물론 맞는 말이긴한데 살짝 설명이 부족하다고 생각을 한다. "Virtual DOM의 꽃은 변경사항을 한번에 모아서 Real DOM에 렌더링하여 렌더링 비용을 절감시키기위한 기술" 이라고 생각하기 때문이다. 실제로 우아한테크코스의 마지막 과제로 나만의 UI 라이브러리를 수행한적이있다. Virtual DOM의 기능을 어느정도 구현하면 되었다. 나는 createNodeIterator 라는 document의 내장 메서드를 사용하여 DOM 객체를 순회하였는데, 변경사항이 일어나면, 실제 DOM과 업데이트 하려는 DOM간의 비교를 통해서 변경사항이 일어..
자바스크립트 인터프리터가 변수와 함수 선언에 대한 메모리 공간을 미리 할당해 놓는 것. 자바스크립트만의 특별한 기능이라기보다. 기본적으로 프로그래밍 언어에서 지원하는 기능이다. 직접 프로그래밍언어를 만들때에도, 어떤 변수가 선언되어있는지 메모리에 할당을 해놓고, 코드를 실행하는 것이 더 쉬울 것이다. 이런 개념을 이해하기 쉽게 "끌어올린다"라는 명칭을 붙여서 호이스팅이라고 명명하게 되었다. -- 자바스크립트에는 다음과 같은 변수 선언방식이 있다고 할 수 있다. 1. var 2. const, let 그리고 이 모든 선언은 호이스팅이 일어난다. 차이점이 있다면, const/let은 호이스팅은 되어 메모리에 할당되어있지만 실제 const/let으로 선언된 값을 const/let가 선언된 코드 이전에서 접근을 ..
자바스크립트를 예로 들자면, 원시타입으로 Number, String, Undefined, Null, BigInt, Symbol, Boolean 값이 있고, 참조타입으로 Array, Object가 있습니다. 처음부터 이렇게 학습해서 당연하게 받아들였었는데, 아래 영상을 보고 새롭게 깨달은 것이 있습니다. https://www.youtube.com/watch?v=vMsK5f_0938&ab_channel=Taehoon 왜 참조타입이 따로있는걸까? Object나 Array도 값으로 저장하면 안될까? 라는 근본적인 질문을 하게되었는데요. 이 영상에서 제시하는 답은 다음과 같습니다. Object. Array같은 경우는 깊이가 얼마든지 커질 수 있는 구조이기 때문에, 값으로 저장하게 되면 값을 복사하는 비용이 매우 ..
- Virtual DOM이란 무엇인가요? 리액트는 기존에 M이 포함된 아키텍처 (MVC, MVVM 등)에서, 어플리케이션이 복잡해질수록 Model-View간의 구현 복잡도가 올라가는 문제점을 해결하기위해 나온 Flux 아키텍처를 기반으로 합니다. 그 과정에서 상태의 변화가 있으면, 기존의 DOM을 아예 새로 그리자는 철학을 가지고 있는데요. 매번 DOM을 새로그리게 된다면, reflow가 잦게 일어나는 것이므로 웹 페이지의 성능에 상당한 부담을 주게 됩니다. 그래서 나온것이 Virtual DOM입니다. Virtual DOM은 말그대로 가상의 DOM으로써 메모리에만 존재하는 DOM입니다. 앞서 React에 DOM 업데이트가 일어났을때 DOM을 아예 새로그리는 것이 아니라, 이전의 DOM 상태를 기억하고 있..
