생활하면서 받았던 CS 관련 질문과 답을 정리하려고 한다. 추가 질문을 받는 대로 업데이트를 할 예정이다.
1. Array와 List의 차이
(1) 배열 Array
배열은 원소들을 연속적인 메모리 공간에 저장하는 자료구조이다. 배열의 크기는 고정되어 있다.
장점으론 인덱스를 통한 빠른 데이터 접근이 가능하지만 단점으론 삽입과 삭제가 번거롭고 시간이 오래 걸린다.
(2) 리스트 List
리스트는 비연속적인 메모리 공간에 저장을 하는 자료구조이다. 리스트의 크기는 가변적이다.
장점으론 사입과 삭제가 빠르지만 순차적으로 접근해야 하는 단점이 있다.
2. Virtual Dom을 사용하는 이유
(1) Virtual Dom 이란?
실제 DOM 문서를 추상화한 개념으로 변화가 많은 View를 실제 DOM에서 직접 처리하는 방식이 아닌 Virtual Dom과 메모리에서 미리 처리하고 저장한 후 실제 DOM과 동기화하는 프로그래밍 개념이다.
(2) 사용 이유
결론부터 말하면 브라우저의 불필요한 랜더링 횟수를 줄이기 위해 사용하는 것이다. 변화가 있을 때마다 실제 DOM을 수정하는 것이 아닌 변경사항이 모두 반영된 가상 돔을 만들어 한 번의 DOM수정을 하여 한번만 랜더 트리를 만들어 내기 때문에 사용한다.
(3) Virtual Dom의 단점
Virtual Dom이 항상 빠른 것은 아니다. 약간의 변화에도 반응을 하기 때문에 최적화가 되어있지 않으면 오히려 실제 DOM보다 느려질 수도 있다. 이러한 현상을 오버헤드가 크다라고 하며 가성비가 맞지 않는다는 뜻이다. 이런 형상을 방지하기 위해서 리액트에서는 useCallback, useMemo와 같은 함수를 사용하여 최적화를 진행한다.
3. Async/Await와 Promise 차이
(1) Async/Await
비동기 코드를 마치 동기 코드처럼 작성할 수 있다. 또한 Promise에 비해 가독성이 좋고 문법이 간결하다.
try catch을 사용하여 에러처리를 할 수 있으므로 에러 핸들링에 유용하다.
(2) Promise
Promise은 비동기 처리에 사용되는 객체이며 내용은 실행되었지만 결과를 아직 반환하지 않은 객체라고 이해하면 편하다.
상태로는 Pending(대기), Fulfilled(이행), Rejected(실패) 3가지 상태가 있으며 각각 아직 완료되지 않음, 완료됨, 실패 및 오류의 의미를 갖는다.
. then(). catch()를 사용하여 로직을 분리 및 에러 핸들링을 할 수 있으며 여러 개의. then()을 통해 순차적으로 처리가 가능하지만. then() 지옥에 빠질 가능성이 있다.
4. DOM Tree 구조를 사용하는 이유와 단점
(1) 이유
결론부터 말하면, 계층 관계가 있는 데이터를 표현하기 가장 적합한 자료 구조 이기 때문이다.
HTML태그들은 상위 태그가 하위 태그를 감싸는 형태로 이루어져 있어 계층 관계로 볼 수 있다.
(2) 단점
돔을 업데이트하는데 많은 비용이 든다는 것이다. 만약 수 천 개의 노드들이 존재한다면 작은 업데이트를 위해 복잡한 처리 과정이 일어나고 이로 인해 브라우저의 속도는 느려지게 된다.
5. 웹페이지 최적화 방법
Reference
https://velog.io/@enamu/%EB%B0%B0%EC%97%B4Array%EA%B3%BC-%EB%A6%AC%EC%8A%A4%ED%8A%B8List
https://klmhyeonwooo.tistory.com/54
'CS' 카테고리의 다른 글
| 이벤트 루프(Event Loop)란? (0) | 2024.08.21 |
|---|
