counter 예제를 통해 에서의 를 사용해보자.. 이 글은 을 기준으로 작성되었습니다. 참고자료 / 실습코드 MobX란? 전역 상태 라이브러리이다. 모든 상태변화를 일어나는 부분을 런타임에 자동으로 추적해주고, 의존 트리를 만듭니다. 이를 통해 필요한 경우에만 연산이 진행되고 최적화 작업을 할 필요가 없습니다. React 뿐만 아니라, Angular, Vue, Flutter, Dart등에서도 사용이 가능하다 UI 프레임워크 밖에서 애플리케이션 상태를 관리를 할 수 있다. 따라서 코드 분리가 쉽고 다른 곳에서 사용하기 유용하며 무엇보다 쉽게 테스트 할 수 있다. MobX의 러닝커브는 낮은편으로 초기에 작성해야하는 코드가 거의 없으며, redux와 달리 state의 불변성도 걱정하지 않아도 된다. MobX 주요 용어 및 개념 : 추적 및 관찰 가능한 state(상태) 정의 : state를 변경하는 메소드 : state에서 더 이상의 상호작용 없이 파생될 수 있는 모든 것 EX) 사용…

redux 우리가 관리하고 싶은 전역 state는 modal을 켰다 끌 수 있는 상태라고 하자. Redux 구성 요소 - Action 사용자의 입력이나 UI 조작, 웹 요청 완료같이 어떠한 상태 변화를 일으킬 수 있는 현상. 즉, 어떤 조작인지 정보를 갖고 있는 자바스크립트 객체이다. Action의 생김새 action 객체는 아래와 같이 생겼다. 조작하고 싶은 정보는 type 프로퍼티에 지정한다. Action 특징 action은 객체이다. action은 반드시 type 프로퍼티가 있어야 하고, 일반적으로 type은 어떤 행동을 설명하는(조작하고 싶은 내용) 문자열이다. type 이외에 다른 프로퍼티를 가져도 되고, 주로 해당 action에 필요한 부가적인 데이터를 전달하고 싶을 때 사용한다. Action 정의 react 프로젝트에서 사용할 action은 객체 리터럴로 바로 정의하는 것이 아니라, action을 만들어주는 함수를 통해 만든다. 이러한 함수를 Action Creator…

왜 Redux를 쓸까? 앱에서 전체적으로 사용할 데이터 관리 필요 React.js 는 단순 UI 라이브러리이기 때문에 데이터 관리를 고려하고 있지 않음 로컬스토리지에 데이터를 저장하고 불러오는 로직 대신 Redux! 하나의 state(데이터)를 여러 컴포넌트에서 필요한 경우가 있다. 페이지를 reload 해도 api 호출 없이 유지해야 할 데이터가 있다. 페이지의 레이아웃에 영향 받지 않는 modal, toast, alert 같은 전역 UI 컴포넌트의 상태 관리도 필요하다. Why_Redux 멀리 떨어진 컴포넌트끼리 상태값을 교환할 때 복잡해지는 데이터 흐름이 전역 스토어를 통해 간결해짐 Redux? Redux는 Flux 패턴을 근본으로한 데이터 관리 라이브러리이다. React 뿐 아니라 다른 UI 라이브러리에서도 사용할 수 있다. Redux : Application의 전체 state는 store라고 불리는 곳에서 관리된다. store는 redux의 상태값(state)를 갖는 객체…

일반적으로 this는 클래스(class)에서만 사용하며, class로 생성한 인스턴스 객체를 의미하나, JavaScript에서는 그렇지 않고 this가 가르키는 대상이 항상 달라집니다. 함수와 메서드 함수와 메서드는 모두 function 키워드로 함수를 정의한 것을 의미 메서드는 객체의 프로퍼티로 함수가 정의되어야 한다. 중요한건 객체가 함수를 호출해야 메서드이다!!! this this란? this가 바라보고 있는 객체인데, 상황에 따라 대상이 달라진다. this는 실행컨텍스트가 생성될 때 결정된다. 실행컨텍스트는 함수를 호출할 때 생성되므로, this는 함수를 호출할 때 결정된다. this의 동작 방식 전역 공간에서 this client(브라우저)에서는 window Node.js에서는 global 메서드로 호출될 때 this (암시적 binding) 객체의 프로퍼티에 할당된 함수를 호출하면, this는 해당 객체를 바라본다 물론 객체가 메서드로 호출해야 함 arrow functi…

Closure 함수를 선언할 때 만들어진 scope가 사라진 후에도 호출할 수 있는 함수 함수가 선언됐을 때가 중요. scope가 끝난 외부 함수의 변수를 참조할 수 있다. 일급 객체 함수의 개념을 이용하여 스코프에 묶인 변수를 바인딩 하기 위한 일종의 기술 함수를 일급 객체로 취급하는 여러 함수형 프로그래밍 언어에서 사용되는 보편적인 특성 일급 객체 함수 란? 다른 객체 및 함수 들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체 및 함수를 가리킨다. 일극 객체 함수의 조건 변수에 할당 할 수 있다 다른 함수를 인자로 전달 받을 수 있다 다른 함수의 결과로서 return 될 수 있다. Closure 예제 어떤 함수 A에서 선언한 변수 a를 참조하는 내부함수 B를 외부로 전달할 경우, A의 실행 컨텍스트가 종료된 이후에도 변수 a가 사라지지 않는 현상 에서 함수 B자체를 반환 실행했으므로 A의 실행컨텍스트는 종료됨 변수는 이제 를 바라보고 있음 outer를 호출하면, 즉…

Scope란? Scope : 변수가 유효한범위 Scope 종류 Global Scope var로 선언한 변수는 전역 객체에 속하게 된다.(프로퍼티가 된다) client(브라우저)의 전역 객체는 , Node.js에서는 Local Scope JavaScipt는 다른 언어와 달리 scope의 범위가 함수 블록 내이다. 즉, ( ), { } 블록과 상관이 없고, 함수에 의해서만 scope가 생성된다. ⚠️ JavaScipt에서 let, const로 변수를 선언할 때의 scope은 블록({}) 단위이다. Scope Chain 변수가 해당 scope에서 유효하지 않을 때, 안에서부터 바깥으로 차례로 검색해 나가는 것 Scope 예제 Scope란? Scope 종류 Global Scope Local Scope Scope Chain Scope 예제

함수 선언문과 함수 표현식 함수 선언문(function declaration) function 정의만 존재하고 별도의 할당 명령이 없다. 함수 표현식(function expression) function 키워드로 정의한 함수를 변수에 할당하는 것을 말한다. Hoisting 변수의 선언을 끌어올리는 것을 말한다. 선언부는 끌어올리고, 할당은 코드가 실행되는 시점에 진행된다. 변수의 Hoisting 전 변수 Hoisting 후 함수 Hoisting 함수 선언식 함수 표현식 let, const의 Hoisting Hoisting이 되지 않는것 처럼 보인다. Temporal Dead Zone(TDZ) let, const 역시 마찬가지로 LexicalEnvironment에 변수 정보를 미리 수집한다 (hoisting의 개념으로 알고 있는 동작) let, const는 실행되기 전까지 액세스 할 수 없고, 이 단계(공간)를 TDZ라고 함 Hoisting 예제 이런 느낌으로 environmentR…

👉🏻 JavaScript의 런타임 모델은 코드의 실행, 이벤트의 수집과 처리, 큐에 대기 중인 하위 작업을 처리하는 이벤트 루프에 기반하고 있습니다. 이벤트 루프 event-loop 힙: 단순히 메모리 영역을 지칭하는 용어. 메모리 할당이 이루어지는 곳으로 변수 등의 정보 저장. (콜스택의 최상단에 있는 실행 컨텍스트가 실행되면서 참조되는 객체들이 저장되어 있는 메모리 공간) 콜스택: 실행하는 코드를 순서대로 실행하는 곳 (실행 컨텍스트가 추가되거나 제거되며 코드의 실행순서를 관리) 콜백큐: 처리할 메시지의 대기열 (비동기 함수의 콜백함수 또는 이벤트 핸들러가 일시적으로 대기) 예제로 콜스택 내부 확인하기 call-stack 이벤트루프 작동 확인하기 greet 호출 => respond 호출 gif1 Web API인 setTimout 호출, setTimeout의 cb 전달 gif2 cb는 1초뒤에 콜백큐로 전달 gif3 콜스택 비어있을 때, 콜백큐에 있던 대기 작업 하나씩 전달 gif…

Promise란? Promise는 비동기 동작을 처리하기 위해 ES6에 도입되었다. Promise는 클래스이고, Promise 클래스를 인스턴스화 해서 promise 객체를 만든다. 반환된 promise로 원하는 비동기 동작을 처리한다. Promise는 와 , 함수를 이해해야 된다. Promise 기본 형태 구현하기 promise 3가지 상태(State) Pending(대기) 비동기 처리 로직이 아직 완료되지 않은 상태 Fulfilled(이행) 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태 Rejected(실패) 비동기 처리가 실패하거나 오류가 발생한 상태 resolve, reject 이해하기 resolve 비동기 로직이 성공했을 때 실행할 함수 reject 비동기 로직이 실패했을 때 실행할 함수 resolve 호출시 전달되는 인자 → then 콜백함수의 매개변수로 받는다. 에러 처리 - reject 두 번째 인자로 에러처리 로직을 작성하시거나, 아래와 같이 catc…

콜백 함수란? 함수의 매개변수가 함수일 때, 매개변수로 받은 함수를 콜백함수르고 부른다. 고차 함수(Higher Order Function)란? 매개변수를 함수로 받은 함수. 즉, 외부에서 콜백함수를 전달받은 함수 고차 컴포넌트 (Higher Order Component(HOC))란? 컴포넌트를 매개변수로받아서, 컴포넌트를 반환하는 컴포넌트 일급함수란? 함수를 다른 변수와 동일하게 다루는 언어는 일급 함수를 가졌다고 표현합니다. 예를 들어, 일급 함수를 가진 언어에서는 함수를 다른 함수에 인수로 제공하거나, 함수가 함수를 반환할 수 있으며, 변수에도 할당할 수 있습니다. 일급함수의 특징 함수를 변수에 할당 가능 함수를 또 다른 함수 인자로 전달 가능 함수의 반환값으로 함수 전달 가능 함수형 프로그래밍 특징 중의 하나가 바로 일급함수 입니다. 콜백함수 사용하기 콜백함수라고 해서 꼭 비동기 동작에 쓰이는 것이 아닙니다. 콜백 함수란? 고차 함수(Higher Order Function)…

동기(Synchronouse) 동기란? 현재 실행 중인 코드가 끝나야 다음 코드를 실행하는 방식 동기의 장/단점 장점: 코드를 순서대로 하나씩 실행하기 때문에, 실행 순서가 보장된다. 단점: 현재 실행중인 task가 종료될 때까지 다음 task가 실행이 안 된다는 문제 (task blocking) 전형적인 동기 task blocking 예제 비동기(Asynchronouse) 비동기란? 현재 실행 중인 코드가 완료되지 않아도, 다음 코드로 넘어감. 즉, 비동기 task(코드)는 실행하라고 브라우저에 맡겨놓고, 다음 task(코드)로 넘어감 비동기의 장/단점 장점: 현재 실행중인 task가 완료되지 않아도, 다음 task를 실행하기 때문에 블로킹이 발생 X 단점: task의 실행 순서가 보장되지 않는다. 비동기 처리가 필요한 이유 자바스크립트 엔진은 한 번에 하나의 task만 실행할 수 있는 Single Thread. Single Thread는처리에 시간이 걸리는 task를 실행하는 …