React 리엑트 컴포넌트는 특정 상태가 변화할 때 화면을 다시 그리는 특성을 지닌다. 이를 렌더리이라고 한다. 컴포넌트의 Props나 State 가 변경되면 반응하며 렌더링을 발생시켜 요소를 전부 새로 그리는 작업을 수행한다. 모든 요소에 대해서 리렌더링이 발생하면 성능이나 동작상 오류가 생기므로 여러 Hook을 이용하여 이를 제어하여야 한다. ​ useState UI와 반응하여 업데이트 되는 상태를 정의한다. 변화가 일어나면 현재의 모든 하위 요소에 대해 렌더링을 발생시킨다. ​ useMemo 컴포넌트가 리렌더링 될 때 컴포넌트 리렌더링이 필요 없는 부분을 메모이제이션하여 처리하기 위해 사용한다. static한 성질(한번 출력 후 변하지 않는 요소 )을 지니는 컴포넌트의 출력에 쓰이며, 특정 의존성이..

Vite VS CRA ( Create React App ) 우선 주인공 설명에 앞서서 CRA 부터 알아보겠습니다. CRA CRA는 리액트 팀에서 추천하는 공식 보일러 플레이트로 가장 대중적으로 사용되고 있습니다. 기본적으로 Webpack을 사용합니다. Webpack은 자바스크립트로 개발된 번들 툴로 여러개의 파일( 소스, css, 사진 등 )을 하나로 합쳐서 하나의 번들로 만들어서 전송하는 방식입니다. JS의 파일을 저장하지 못하고 매번 로딩을 해야한다는 단점은 극복되었지만 가장 큰 문제는 속도였습니다. 수정할 때 마다 모든 파일을 하나로 합치는 빌드 과정을 거쳐야 해서 속도가 상당히 느립니다. 그래서 개발자들은 Low-Level-Language를 활용하여 자바스크립트 툴을 만들어냈는데 그렇게 생겨난게 ..

block : 가로 100% inline-block : 사이즈에 맞게 width : 100vw : 브라우저의 가로 100% height : 100vh : 브라우저의 세로 100% position: absolute : 레이어를 새로 그림 z-index 0; : 레이어의 우선 순위 ( 낮은 번호일수록 우선순위 높음) rgba(0, 0, 0, 0.5) : rgb 코드 3자 + 투명도 0.5 = 50%

DevTools (F12 or ctrl + shift + i ) > Network > Response 에서 확인 가능 Constructing HTML DOM Tree 태그의 내용들 , 등 load css, js CSS CSSOM Render Tree ​ Operating Layout 위치, 크기 지정 Paint Layer 그리기 Composition Layer 결합 ​ ​ 큰 분류로는 Constructing 과 Operating 으로 구분되어 분류되며 소분류로는 앞 순서로 갈수록 웹이 그려질 때 더 많은 과정이 소모된다. ​ CSS 영향도 사이트 https://csstriggers.com/ CSS Triggers @PROPERTY_DESCRIPTION@ B G W E Change from default ..