본문 바로가기

IT193

React - Virtual Dom 개념 실제 DOM과 같은 내용을 담고 있는 복사본 이 복사본은 자바스크립트 객체 형태로 메모리 상에 저장되어 있다. 존재 이유 기본적으로 브라우저는 DOM을 업데이트하기 위해서 수 많은 일들을 최소화하기 위함 DOM 업데이트 과정 1. 변경될 요소를 찾는다. 2. 찾은 요소와 자식 요소를 제거 3. 새로운 요소를 추가 4. CSS 계산 5. Layout정보를 알맞게 수정 요소가 tree로 저장되어 있어서 탐색과 추가 및 삭제는 빠르게 진행된다. 하지만 브라우저에 새롭게 그려주는 작업은 꽤나 복잡하다. N가 수정되면 N번 브라우저를 새롭게 그러주는 작업을 해줘야 해서 비효율적이다. 특징 리엑트는 항상 두개의 virtual dom을 갖고 있다. 첫번째는 변경 이전의 내용을 담고 있고, 두번째는 변경 이후에 .. 2023. 6. 22.
React - List Key의 중요성 이유 보통 key를 index에 의존하는 경우가 많은데 이건 큰 이슈를 불러이르킨다. list 추가 삭제할 때 추가 및 삭제 할 때 리스트의 고유 키가 변경되면서 리스트의 모든 요소가 다시 만들어 진다. 이로 인하여 성능 최적화가 안된다. key가 잘 설정 되어 있다면 추가 및 삭제 시 해당되는 요소만 UI에 반영된다는 걸 브라우저 콘솔에서 확인 할 수 있다. list 안에 어떤 state 값이 존재 할 때 리스트가 index 기준으로 나열 되어 있고 첫번째 요소 안에 input value가 있다고 가정해보자. 요소가 첫번째에 추가되면 input value가 두번째가 아니라 첫번째에 저장되어 있다. debugging도 안되기에 이유를 찾기 싶지 않을 것이다. 존재 이유 기본적으로 브라우저는 DOM을 업데.. 2023. 6. 22.
React - batching 개념 여러 개의 state 업데이트를 하나의 리렌더링 (re-render)로 묶는 것 이유 기존에는 각 state가 변경될 때마다 re-renderning이 발생하여 불필요하게 re-rendering이 많이 발생했다. function App() { const [count, setCount] = useState(0); const [active, setActive] = useState(false); function handleClick() { setCount((c) => c + 1); //Nothing happens setActive((f) => !f); //Nothing happens //rerender component after this function runs. this is batching. } r.. 2023. 6. 22.
[JS] - Runtime 이란 JavaScript 환경에서 런타임은 JavaScript 코드가 실행되는 환경을 의미합니다. JavaScript 런타임은 JavaScript 코드를 해석하고 실행하는 데 필요한 인프라 및 리소스를 제공합니다. 여기에는 인터프리터 또는 JIT(Just-in-Time) 컴파일러, 메모리 관리 시스템 및 호스트 환경과 상호 작용하기 위한 라이브러리와 같은 다양한 구성 요소가 포함됩니다. JavaScript 런타임은 웹 브라우저, 서버 및 독립 실행형 응용.. 2023. 6. 21.
[JS] - Array at Method 개념정수 (양수, 0, 음수)를 받아, 해당 값을 인덱스로 사용하여 요소를 반환하는 메소드 특징맨 마지막 값을 가져올 때 편하게 가져올 수 있음값이 없으면 undefined를 내려준다. 이부분이 맘에 든다.이유는 arr[arr.length - 1] 이렇게 하면 타입 추론에 undefined는 없기 때문이다. <.. 2023. 6. 19.
Paging - offset vs cursor offset 개념 n번째 row에서 n개 가져오기 offset: 어디에서 가져올 것인가 limit: 가져올 때 몇개를 가져올 것인가 SELECT column1, column2, ... FROM your_table ORDER BY column_to_order LIMIT page_size OFFSET offset_value; 장점 - 간단 명료하게 구현 가능 단점 - 엄청난 양의 row를 건너뛰는 과정에서 속도 저하가 발생할 수 있다. - 다음 페이지를 요청했지만 결과가 일부 중복으로 노출될 수 있다. 첫번째 페이지에 최신 데이터를 불러왔고 그 이후 데이터가 추가되었더라면, 2번째 페이지에서 첫번째 페이지에서 봤던 값이 보일 수도 있다. cursor 개념 x 값을 가진 row 기준으로 n개 가져오기 curs.. 2023. 6. 19.

티스토리툴바