인문학적 공학도

virtual DOM React.js는 DOM 객체 기반의 브라우저가 유저와의 잦은 인터랙션을 최적화하기 위한 라이브러리입니다. 유저의 인터랙션에 따라 상태가 변화할 경우, DOM 요소들이 업데이트 되는데, 일부분이 바뀜에도 전체 DOM을 업데이트 하는 것은 브라우저의 연산에 많은 부담을 줍니다. 리액트의 virtual DOM은 상태 변화로 뷰 포트를 업데이트 하기 전에 virtual DOM에 먼저 적용하고 이후에 최종 변화결과를 DOM에 전달하여 한 번의 렌더링으로 마무리할 수 있습니다. Virtual DOM이 메모리에 저장된 상태에서 변경 사항들을 먼저 반영한 뒤 기존 DOM과 비교 후 변경된 사항만을 DOM에 전달해 줍니다. 즉 실제 DOM의 렌더링 횟수를 줄여주므로 성능에 적은 영향을 주게 되는 ..

네이버 DEVIEW 2021 심흥운님의 Inside React(동시성을 구현하는 기술)의 요약 및 소감이다. React18 버전에서 가장 크게 강조된 키워드는 "동시성"이다. 동시성에 대해 알아보기 위해서는 병렬성과 비교하며 알아보는 것이 좋겠다. 동시성 싱글코어에서도 작동 동시에 실행되는것처럼 보임 컨텍스트 스위칭 필요 최소 두 개의 논리적 통제 흐름 예) 동영상 재생하면서 메모장 쓰기 병렬성 멀티코어 필요 실제로 동시에 실행됨 최소 한 개의 논리적 통제 흐름 예) GPU를 이용해 이미지 출력 동시성이란 2개 이상의 독립적인 작업을 잘게 나누어 동시에 실행되는 것처럼 보이도록 프로그램을 구조화하는 방법이다. 중요한 부분은 "것처럼 보이도록" 한다는 것이다. 자바스크립트는 싱글스레드 언어이기 때문에 한 ..

체크박스를 감싸는 영역(label)의 클릭이 체크박스에 연동되도록 하는 과정에서 심상치 않은 발생했다. 클릭 시 focus-within을 이용해 해당 영역의 backgroundColor가 변경되어 focus되었다는 것을 시각적으로 보여주고자 하였다. 일단 그 때 당시의 상황을 코드로 재현해보았다. 보시다시피 다른 체크박스를 클릭하는 순간 backgroundColor이 깜빡거리는 것을 확인할 수 있다. 원인은 을 감싼 태그가 focus 불가능한 엘리먼트이기 때문이다. 마우스 다운 시 input의 focus가 풀리면서 backgroundColor도 풀리게 되고, 마우스 업을 하면서 input의 focus가 다시 되살아나서 비활성화되었던 focus-within이 활성화되는 것이다. 해결법은 간단하다. 에 ta..

Introducing the New JSX Transform – React Blog Although React 17 doesn’t contain new features, it will provide support for a new version of the JSX transform. In this post, we will describe what it is and how to try it. What’s a JSX Transform? Browsers don’t understand JSX out of the box, so most ko.reactjs.org 늦은 감이 없잖아 있지만 React 17버전에서는 new JSX transform을 지원한다. 이를 적용하면 import React from 'react..

create-react-app만 사용하며 언젠가는 직접 개발환경을 세팅해야지 미루다가 드디어 하루 꼬박 들여서 기본 개발환경을 바닥부터 세팅하였다. 클론해다가 그대로 이용하기만 하면 되니 애용 부탁드린다. student513/react-dev-template react 작업환경이 세팅된 템플릿. Contribute to student513/react-dev-template development by creating an account on GitHub. github.com

1. key에 index를 사용하지 않는 이유 Key란? React에서 여러 컴포넌트를 동적으로 생성하여 표시할 때 반드시 고유의 key를 주도록 하고 있습니다. Key 속성은 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다. // key를 사용한 배열 렌더링 예시 const todoItems = todos.map((todo) => {todo.text} ); Key를 사용하는 이유는? 요소의 변화를 탐지하기 위해 필요합니다. React는 기본적으로 state 중 변화가 발생할 때만 캐치해서 DOM을 업데이트 합니다. state의 배열에 어떤 요소가 추가되었을 경우, 배열 전체를 리렌더링하기보다는 추가된 요소만을 리렌더링하는 것이 더 효율적입니다. arr = [ {id: 0, t..