본문 바로가기

Development7

자바스크립트로 옵저빙(변수 변화 탐지)를 구현하는 방법들 자바스크립트의 옵저빙 자바스크립트에서 변수의 변화를 탐지하는 방법들에 대해 정리해보았다. 옵저버(관찰자) 디자인 패턴 리덕스에서 사용되는 옵저버 패턴 예시 getState()를 통해 상태를 바라보는 순간 subscribe가 된다는 점이라던가 변경된 state와 이전 state를 비교해 리렌더링을 한다던가 하는 부분처럼 실제 구현과는 차이가 있다. 하지만 디자인 패턴을 파악하기 위한 예시이므로 생략한다. export function createStore() { // 외부에서 접근할 수 없도록, state값을 저장(캡퍼링)하기 위해 클로저 구현 let state; const handlers = []; function dispatch(newState) { state = newState // 호출될때마다 구독된.. 2022. 9. 22.
이벤트 플로우 (이벤트 캡처링, 이벤트 버블링, 이벤트 위임) 이벤트 플로우 Click Here! 위 html 코드에서 div, html, body 모두에 클릭 이벤트가 달려있을때 div를 클릭하면 3가지 이벤트가 모두 실행된다. 그러나 3가지 이벤트가 실행되는 순서가 존재한다. 이 순서를 이벤트 플로우라고 한다. target vs currentTarget target : 시작점을 뜻한다. currentTarget : 지금 실행중인 이벤트가 어디에서 실행중인지를 의미한다. 처음 보았던 html 코드에서 div를 클릭해서 이벤트가 발생했을때, div 이벤트 핸들러에서 target과 currentTarget은 모두 div가 된다. 반면, body 이벤트 핸들러에서는 target은 이벤트의 시작점인 div가 되고 currentTarget은 body에 연결된 핸들러이므로 .. 2022. 9. 17.
자바스크립트의 이벤트 루프 들어 가기 전 브라우저의 구성 Web APIs Event Table: 특정 event가 발생했을 때 어떤 callback 함수가 호출되야 하는지를 알고 있는 자료구조 자바스크립트 런타임 환경의 시각적 표현 스택 (Call Stack) 실행된 코드 환경을 저장하는 자료구조 함수를 호출할때 함수의 인자와 지역 변수를 포함하는 프레임이 생성되어 스택에 push 된다. 힙 객체는 힙에 할당된다. 힙은 메모리의 큰 영역을 지칭하는 용어이다. 메모리 할당이 발생하는 곳 큐 JavaScript의 런타임은 메시지 큐, 즉 처리할 메시지의 대기열을 사용한다. 각각의 메시지에는 메시지를 처리하기 위한 함수가 연결되어 있다. 이벤트 루프 임의 시점에 런타임은 대기열에서 가장 오래된 메시지부터 큐에서 제거하며 처리한다. 이때.. 2022. 2. 19.
평가전략 (Evaluation Strategy) 평가전략이란? 프로그래밍 언어에서 함수 호출의 argument의 순서를 언제 결정하고 함수에 어떤 종류의 값을 통과 시킬지 결정하는 것 parameter 와 argument의 차이 그동안 parameter와 argument를 명확히 구분하지 않고 혼용하여 사용했는데 둘의 차이는 아래 예시 코드의 주석을 통해 확인할 수 있다. parameter는 함수 선언부에 정의 되고, arguments는 함수 호출부에서 사용된다. let arg = 1; let myFunc = function(param) { // parameter (매개변수) //... }; myFunc(arg); // arguments (인자) Call by Value - imutable arguments로 값이 넘어올 때 복사된 값이 넘어온다. c.. 2022. 2. 11.
자바스크립트의 메모리 누수 (Memory Leaks) Memory Leaks 메모리 누수란? 부주의 또는 일부 프로그램 오류로 인해 더 이상 사용되지 않는 메모리를 해제하지 못하는 것 자바스크립트의 메모리 스택 메모리: 단순 변수 (String, Number, Boolean, Null, Undefined, Symbol, Bigint) 힙 메모리: 참조 데이터 타입 (Object, Array, Function) MDN 문서의 자바스크립트 메모리 관리 C 언어같은 저수준 언어에서는 메모리 관리를 위해 malloc() 과 free()를 사용한다. 반면, 자바스크립트는 객체가 생성되었을 때 자동으로 메모리를 할당하고 쓸모 없어졌을 때 자동으로 해제한다(가비지 컬렉션). 이러한 자동 메모리 관리는 잠재적 혼란의 원인이기도 한데, 개발자가 메모리 관리에 대해 고민할 .. 2022. 2. 8.
ReactNode | ReactElement 에러 로그 TS2322: Type 'false | Element' is not assignable to type 'ReactElement'. Type 'boolean' is not assignable to type 'ReactElement'. 자바스크립트로 만들어진 프로젝트를 타입스크립트로 마이그레이션 하는 도중 위와 같은 에러를 만났다. 아래 예시 처럼 isSomthingTrue가 true인 경우에만 특정 엘리먼트를 반환하는 코드였는데 자바스크립트에서는 문제 없이 동작하였지만 타입 스크립트에서 ParentElement의 children props의 타입을 ReactElement | ReactElement[] 로 지정하자 위와 같은 에러가 발생했다. {...} {isSomethingTrue && ( So.. 2021. 12. 20.
Promise JavaScript는 싱글 쓰레드로 동작하는 언어이다.( 메인쓰레드 하나 , 콜스택 하나 ) 작업을 시작하면 콜스택에 작업이 쌓이고 실행이 끝나면 사라진다. JavaScript는 코어 엔진만 가지고 돌아가지 않는다. 실행환경 (런타임) 의 도움을 받아 동시 실행을 한다. (WebApi (dom, ajax, setTimeout...), Task Queue(콜백 큐), Event Loop 등) JavaScrip의 비동기 처리 방식 작업 : -> 콜스택 -> api에게 처리 요청(위임) -> setTimeout만큼 기다림 -> 콜백큐에 콜백함수 넘겨줌 -> 이벤트루프를 통해 콜스택에 콜백함수 넘겨줌 -> 콜스택에서 처리 후 사라짐 Call back 이란? 콜백은 자바스크립트가 비동기 처리를 하기 위한 패턴 중.. 2021. 10. 7.

티스토리툴바