전체 글301 Virtual DOM 참고: https://youtu.be/PN_WmsgbQCo https://youtu.be/1ojA5mLWts8 https://www.youtube.com/watch?v=gc-kXt0tjTM 1. 등장배경 기존 브라우저의 작동원리는 아래와 같다. Process: 브라우저 렌더엔진이 ①HTML Parsing → ②DOM tree 생성 → ③CSS Parsing → ④CSSOM Tree 생성 → ⑤Render tree 생성(DOM + CSSOM) → ⑥Layout → ⑦Paint 이때 인터랙션이 발생해 DOM에 변화가 발생하면 그때마다 Render tree가 재생성되고 위 과정을 매번 다시 거치게된다. (비효율적인 연산작업이 실행된다.) 그리고 SPA의 사용성이 높아지면서 DOM tree의 조작이 보다 더 많.. 2022. 10. 6. 리액트의 작동원리 키워드: Reconciliation, Virtual DOM, Diffing algorithm, Rendering참고: https://youtu.be/7YhdqIR2Yzo [1] React Components / React Elements / Component InstancesComponent call → React.createElement function calls(compile elements) → Function returns an object($$typeof, key, props, ref, type(name of element): it describe DOM node(HTML element) & component instance) [2] Reconciliation(재조정)1. All React .. 2022. 10. 6. 자바스크립트 작동원리: stack, queue (feat. single thread, event loop, memory heap, 비동기/동시성 [1] stack stack의 사전적 의미는 "쌓는다"이다. 그렇다면 무엇을 쌓는가? 바로 함수이다. stack의 맨 위에 데이터를 추가하는 것을 "push"라고 하고 반대로 맨 위에 데이터를 하나씩 제거하는 것을 "pop"이라고 한다. 하나의 탑에 블록을 계속 쌓아가는 형태이고, 가장 마지막에 올린 데이터가 가장 먼저 나오는 형태라고 해서 "Last-In-First-Out(LIFO)" 형태를 같고 있다. [2] single thread thread는 하나의 stack을 가지고 있고 stack은 선형구조이기 때문에 중간에 다른 작업이 끼어들 수가 없다. 선형구조란 데이터를 입력/출력할 때 정해진 순서에 의해 순차적으로 작업되는 구조를 말한다. [3] 자바스크립트의 동시성(비동기 처리) JS의 특징들 중 .. 2022. 10. 5. 브라우저의 작동원리 ■ 단어정리 - DNS(Domain Name System) - 3 Way-Handshake - HTTP Request/Resonse - DOM Tree - CSSOM Tree - Abstact Syntax Tree - Browser Engine : 사용자 인터페이스와 렌더링 엔진을 연결해주는 역할을 한다. 브라우저 엔진은 문서들 간의 보안 정책을 강제하며 페이지 스크립트에 노출되는 문서 객체 모델(DOM) 자료 구조를 구현한다. 또, 하이퍼링크와 웹 폼을 관리한다. - Layout/Rendering Engine : Gecko, Blink, Trident, Webkit, etc... 텍스트로 된 문서를 읽어내(parsing), 사용자가 볼 수 있는 실제 웹사이트 화면을 만들어준다. - JavaScript .. 2022. 10. 4. 반복문의 동기적(for), 비동기적(forEach, map) 처리 구분 두개 모두 같은 목적으로 작성된 코드이다. 하지만 결과는 다르다. forEach 또는 map 함수로 비동기코드를 호출해 tempArray라는 빈 배열에 비동기 코드의 결과값을 담려고했다. 결과를 먼저 보자면... forEach 또는 map, 해당 배열과 관련된 매서드를 사용해 비동기 코드를 반복시켰을때 console.log가 먼저 실행되고, for 반복문을 실행시켰을때는 내가 원하는데로 작동이되었다. forEach와 map은 비동기로 작동된다. 하지만 for문은 동기식이기 때문에 그렇다. 만약 for문 안에서 어떠한 오류가 발생될 경우 순차적으로 코드를 작동시키는 동기식이기 때문에 오류가 감지되는 즉시 스크립트는 다음 코드로 실행되지 않는다. 만약 반복문 다음에 중요한 코드가 있다면 이는 문제가 될 수 .. 2022. 9. 30. keyof, typeof, as const 객체의 속성명(key)을 타입으로 사용하고싶을때... const obj = { a: "123", b: "hello", c: "world" }type Key = keyof obj // obj는 "값"이기 때문에 타입으로 타이핑할 수 없기 때문에 오류로 표기된다.const obj = { a: "123", b: "hello", c: "world" }type Key = keyof typeof obj // obj의 키(key)들을 타입으로써 사용가능하다. type Key = "a" | "b" | "c" 와 같다.// USE CASES...// 1type Movie = { id: number; name: string; lengthInMinutes: number;}const titanic: Movie = .. 2022. 9. 28. 이전 1 ··· 18 19 20 21 22 23 24 ··· 51 다음
