frontend6 Props Drilling이란? React 애플리케이션에서 상태관리와 props 전달은 필수적인 요소입니다. 상황에 따라 자식 컴포넌트에 전달해야하는 경우가 많은데, 이때 props를 계속해서 전달하는 props drilling이 발생할 수 있습니다. 예를 들어, 로그인 정보를 생각해보면 서비스에 사용되는 대부분의 컴포넌트에서 로그인 정보가 필요할 수 있습니다.그렇게 되면 로그인 컴포넌트가 최상위 컴포넌트로 로그인 정보를 전달해주고, 상위 컴포넌트에서 하위 컴포넌트로 계속해서 props로 넘겨주는 상황이 발생할 수 있습니다.로그인 컴포넌트로부터 실제 사용하는 G, F 컴포넌트에 전달하기 위해선 회원 정보를 사용하지도 않는 A,B,C,D,E 컴포넌트를 지나가게 됩니다. 이렇게 Props를 계속 내려주는 것을 Props Drilling이라.. 2025. 2. 22. 브라우저 렌더링 과정 오늘은 브라우저 렌더링 과정을 알아보고, 그에 대한 최적화하는 방법을 알아보겠습니다. 지난 포스트를 작성하면서, script 옵션이나 위치에 따라 렌더링 순서나 최적화에 영향을 미치는 것을 알아보았습니다. 이 과정에서 브라우저에 화면이 어떤 순서를 통해 렌더링이 되는 지 알아보고 어느 부분을 신경써서 개선할 수 있는지 알아보기 위해 이번 포스트를 작성하였습니다. MDN 문서를 주로 참고하여 작성하였고 틀린 부분이나 잘못된 부분이 있으면 댓글로 알려주시면 감사하겠습니다. 네트워크로부터 데이터를 받아온 이후, 브라우저 렌더링 과정은 다음과 같이 이루어집니다.구문 분석(parsing)렌더(render)상호작용(interactivity) 1. 구문 분석 (parsing)브라우저가 네트워크를 통해 받은 데이터를 .. 2024. 8. 9. Script 로딩 방식 비교: defer vs $(document).ready() JQuery로 개발하던 중, script를 로딩할 때 defer와 $(document).ready()의 차이가 뭔지 궁금해졌습니다.이 포스트에서는 두 가지 방식인 HTML 파싱과 병렬로 스크립트 다운로드HTML 파싱 완료 후 스크립트 실행$(document).ready()$(document).ready(function() { // 코드 실행});스크립트 즉시 다운로드 및 실행DOM 완전 로드 후 내부 코드 실행2. 스크립트 위치별 비교스크립트 선언 위치에 따른 특징은 다음과 같습니다. 끝defer: HTML 파싱 중단 없이 다운로드, 파싱 후 실행$(document).ready():다운로드 즉시 실행, 내부 코드는 DOM 로드 후 실행스크립트 태그를 만나면 다운로드 되는 동안 HTML 파싱 중단차이.. 2024. 7. 31. Fabric.js에서 디바운싱을 활용한 정렬 가이드 기능 최적화 Fabric.js와 jQuery를 사용하여 웹 에디터를 개발하면서, 객체를 정렬할 때 정렬 가이드를 표시하는 기능을 구현했습니다. 처음에는 객체가 이동할 때마다 object:moving 이벤트에서 직접 정렬 가이드를 그리는 방식으로 구현했습니다. 하지만 이 방법은 객체를 빠르게 이동할 때 불필요한 계산과 렌더링이 반복되어 성능 문제가 발생했습니다. 이를 해결하기 위하여 디바운싱을 적용한 사례를 소개해드리고자합니다. 정렬 가이드란?정렬 가이드는 사용자가 객체를 이동할 때 다른 객체와의 정렬을 쉽게 할 수 있도록 도와주는 시각적 보조 도구입니다. Figma, Sketch 등의 디자인 툴에서 흔히 볼 수 있는 이 기능은 사용자 경험을 크게 향상시킵니다.기본 코드먼저, 디바운싱을 적용하지 않은 기본적인 정렬 가.. 2024. 7. 25. 이전 1 2 다음 반응형
