1. 가상 돔(Virtual DOM) 이란? 웹페이지가 표시해야 할 DOM을 일단 메모리에 저장하고, 리액트가 실제 변경에 대한 준비가 완료됐을 때 실제 브라우저의 DOM에 적용 이러한 가상 돔은, 파이버(Fiber)라는 아키텍처로 구성되어 있다. 2. 리액트 파이버(React Fiber) 하나의 element에 파이버 하나가 생성되는 1:1 관계 파이버가 하는 일 작업을 작은 단위로 분할한 다음, 우선순위를 매긴다. 이러한 작업을 일시 중지하고 나중에 다시 시작할 수 있다. 이전에 했던 작업을 다시 재사용하거나 필요하지 않은 경우에는 폐기할 수 있다. ⏩️ 이러한 작업들이 모두 비동기로 일어난다. 파이버 구현체의 주요 속성 tag: element 1:1 매칭 정보 (리액트 컴포넌트, DOM노드, .....
리액트 라이프 사이클이란? 리액트 컴포넌트의 탄생, 변화, 죽음 클래스형 컴포넌트의 라이프 사이클 1. Mount 컴포넌트가 화면에 추가될 때 Render phase constructor() getDerivedStateFromProps() render Commit phase 리액트가 DOM 업데이트 componentDidMount() 2. Update 컴포넌트가 새로운 prop, 상태를 받을 때 Render phase New props, setState(), forceUpdate() shouldComponentUpdate() 에서 true 반환하는 경우 + forceUpdate() render Pre-Commit Phase getSnapShotBeforeUpdate() Commit phase 리액트가 D..
이미지 최적화의 필요성 이미지는 웹에서 많은 용량을 차지하고 있다! 그만큼 웹 최적화에 많은 영향을 끼치기 때문에 중요하다. 적절한 이미지 포맷 선택하기 PNG JPEG WebP 👍 비손실 압축 👍 색상이 다양한 이미지에 적합 👍 PNG보다 용량이 비교적 작다 👍 용량이 PNG, JPEG보다 작다 👎 색상이 다양한 이미지에 부적합 👎 손실 압축 👎 투명도 지원 X 👎 구형 브라우저 지원 X 👎 이미지 변환 작업 필요 ⏩️ WebP 가 95%의 커버리지를 가지고 있다고 하니 웬만하면 WebP 쓰자! 반응형 이미지 제공하기 의 속성 이용! src 반응형 X fallback으로 이용 srcset 제공할 이미지들을 적는다. "이미지이름 크기w, 이미지이름 크기w, ..." 형식으로 적어주면 된다. sizes 이..
용어 알기 ✅ 하이드레이션(hydration) 1. JS 코드가 실행되어 2. JS로직과 HTML이 연결 후 3. 유저 상호작용이 가능하도록 하는 것 ✅ 요청 페이지 요청을 의미 ✅ TTFB(Time To First Byte) ⏩️ 데이터가 브라우저에 도달 ✅ FCP(First Contentful Paint) ⏩️ 유저가 컨텐츠를 볼 수 있음 ✅ LCP(Largest Contentful Paint) ⏩️ 유저가 주요 컨텐츠를 볼 수 있음 ✅ TTI(Time To Interactive) ⏩️ 유저와 상호작용 가능 CSR (Client Side Rendering) 데이터 페칭 이후에 렌더링. 1. User Request 2. CDN이 JS로 접근할 수 있는 링크와 HTML 파일을 서빙 3. 브라우저는 HTM..
클로저(Closure)란? 정의 1 “A closure is the combination of a function and the lexical environment within which that function was declared” 클로저는 함수와 그 함수가 선언됐을 때의 렉시컬 환경(Lexical environment)과의 조합이다. [240130] 렉시컬 환경, 렉시컬 스코프 렉시컬 환경(렉시컬 환경 객체) 이란? 코드블록({...}), function, script를 실행하기 앞서 생성되는 특별한 객체 실행할 스코프 범위 안에 있는 변수와 함수를 프로퍼티로 저장하는 객체 렉시컬 환경 hamo0.tistory.com 함수 makeCounter()를 호출하면 내부 함수 function() { re..
CDN(Content Delivery Network)이란 컨텐츠 전송 네트워크(CDN)는 지리적으로 분산된 서버들을 연결한 네트워크이다. 사용자가 웹 사이트를 방문할 때 해당 웹 사이트 서버의 데이터는 사용자의 컴퓨터에 도달하기 위해 인터넷을 통해 이동해야 함 사용자가 해당 서버에서 멀리 떨어져 있는 경우 동영상 또는 웹 사이트 이미지와 같은 대용량 파일을 로드하는 데 시간이 오래 걸림 웹 사이트 컨텐츠는 지리적으로 사용자와 가까운 CDN 서버에 저장되며 컴퓨터에 훨씬 빨리 도달 가능 CDN의 장점 페이지 로드 시간 단축 대역폭 비용 절감 캐싱 및 기타 최적화를 통해 CDN은 서버가 제공해야 하는 데이터의 양을 줄임 컨텐츠 가용성 ⬆️ 더 많은 웹 트래픽을 처리하고 웹서버의 로드를 줄일 수 있음 하나 이..
[240126] 실행 컨텍스트 - (1) 실행 컨텍스트(execution context)란? 함수 실행에 대한 세부 정보를 담고 있는 내부 데이터 객체. 동일한 환경에 있는 환경 정보들을 모은 실행 컨텍스트를 콜스택에 쌓아올린 후 실행하여 코드의 환 hamo0.tistory.com 이전 글에서는 실행 컨텍스트가 무엇인지, 어떻게 구성되는지 알아보았다! 이번에는 실행 컨텍스트의 생성 과정을 살펴보자. 0. 예시 코드 var var1 = "gvar1"; const const1 = "gconst1"; function first() { var var1 = "fvar1"; var var2 = "fvar2" const const1 = "fconst1"; function second() { const const2 =..
문제 https://www.acmicpc.net/problem/1406 1406번: 에디터 첫째 줄에는 초기에 편집기에 입력되어 있는 문자열이 주어진다. 이 문자열은 길이가 N이고, 영어 소문자로만 이루어져 있으며, 길이는 100,000을 넘지 않는다. 둘째 줄에는 입력할 명령어의 개수 www.acmicpc.net 풀이과정 💡 아이디어 실제 cursor 변수를 다룬다고 생각하지 말고, cursor의 왼쪽과 오른쪽에 있어야 할 문자열을 stack으로 관리한다. 명령어 L : 커서를 왼쪽으로 한 칸 옮김 (커서가 문장의 맨 앞이면 무시됨) if (c === 'L') { if (cursor_left.length) { const top = cursor_left.pop(); cursor_right.push(top..
