전체 글101 52일차 (CS 29,30) 브라우저 렌더링 과정 (예를 들어 화면에서 DOM이 어떻게 결정되고, CSS는 어떻게 입혀지는지 등) 먼저 브라우저는 서버로부터 받은 HTML 문서를 파싱 하여 DOM 트리를 구성한다. 이후 태그 내의 CSS를 파싱 하여 CSSOM(CSS Object Model) 트리를 구성한다. 이후 DOM과 CSSOM을 결합하여 렌더 트리를 생성한다. 렌더트리가 생성된 후, 각 노드의 위치와 크기를 계산하는데, 이를 Reflow라고 한다. Reflow 단계를 통해 계산된 위치와 크기 정보를 바탕으로 브라우저는 각 노드를 화면에 그린다. 이러한 과정을 지나고 나면 마지막으로 여러 레이어 그려진 내용을 합쳐 최종적으로 화면에 표시한다. Event bubbling 과 capturing을 비교 Event bubbling은 .. 2023. 10. 26. 51일차 (CS 27, 28) Lazy loading과 Code splitting Lazy Loading은 필요한 시점에 리소스나 데이터를 로드하는 기법을 의미한다. 웹 페이지나 애플리케이션에서 모든 리소스를 한 번에 로드하면 초기 로딩 시간이 길어질 수 있는데, Lazy Loading을 사용하면 사용자가 실제로 필요로 하는 시점에만 특정 리소스를 로드할 수 있다. 예를 들어, 웹 페이지에 많은 이미지가 있을 때, 사용자가 스크롤을 내리지 않아서 보지 않는 이미지는 로드하지 않고, 사용자가 해당 이미지 위치까지 스크롤할 때 이미지를 로드하는 것이 Lazy Loading의 한 예다. Code Splitting은 큰 규모의 애플리케이션을 여러 개의 작은 번들로 분리하는 기법을 의미한다. 이를 통해 사용자가 애플리케이션의 특정 부분만 필요.. 2023. 10. 25. 50일차 (CS 25, 26) 라이프사이클 메서드란 라이프사이클 메서드란 React 클래스 컴포넌트에서 생명 주기 동안 발생하는 여러 단계에서 실행되는 메서드를 의미한다. 이 메서드들을 사용하면 컴포넌트가 DOM에 마운트, 업데이트, 언마운트될 때 특정한 작업을 수행할 수 있다. React의 라이프사이클은 크게 세 가지 단계로 나눌 수 있다. 첫 번째는 마운트 단계로 컴포넌트가 처음으로 DOM에 생성되고 삽입될 때 실행되는 단계이다. 이 단계에서는 초기 state를 설정할 수 있는 constructor() 메서드, Props로부터 state를 도출할 때 사용되는 static getDerivedStateFromProps() 메서드, 컴포넌트를 렌더링 하는 render() 메서드, 외부 데이터를 가져오는 작업을 주로 수행하는 compon.. 2023. 10. 23. 49일차 (CS 23, 24) 상태의 불변성이 중요한 이유 먼저 첫 번째 이유는 불변성을 유지하면 상태가 어떻게 변경될지 예측하기가 쉽기 때문이다. 이는 디버깅을 용이하게 하며, 코드의 안정성을 높인다. 두 번째 이유는 불변성을 지키면서 상태를 업데이트하는 패턴을 사용하면 코드의 명확성이 높아지기 때문이다. 세 번째 이유는 리액트와 같은 라이브러리는 상태나 Props의 변경을 감지하기 위해 얕은 비교를 수행하는데, 불변성을 유지하면 이러한 비교가 효율적으로 이루어지며, 불필요한 렌더링을 방지하여 성능을 최적화할 수 있기 때문이다. 결론적으로 상태의 불변성을 유지하는 것은 프론트엔드 개발에서 안정성, 성능, 코드의 명확성 등 다양한 이점을 제공하기 때문에, 상태를 업데이트할 때는 항상 불변성을 유지하는 방식을 사용하는 것이 좋다. 라이.. 2023. 10. 22. 이전 1 ··· 6 7 8 9 10 11 12 ··· 26 다음 728x90