Frontend 개발자 - hyo.loui

❤️‍🔥TIL : Today I Learned useRef React에서 DOM 노드, react 엘리먼트에 접근하는 방법인 useRef를 설명합니다. useRef 란? - Ref는 render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공합니다. useRef는 컴포넌트의 라이프사이클 동안 유지되는 가변 변수를 생성하는 React Hook입니다. 이는 일반적으로 DOM 요소나 컴포넌트 내부 또는 자식 요소에서 엑세스 또는 업데이트해야하는 값을 저장하는 데 사용됩니다. 이를 통해 다시 렌더링을 트리거하지 않고도 해당 값에 접근하거나 업데이트 할 수 있습니다. Ref를 사용해야 할 때 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때 애니메이션을 직접적으로 실행시킬 때...

❤️‍🔥TIL : Today I Learned DOM DOM (Document Object Model )은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조다. 1. 노드 - HTML요소와 노드 객체 HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환된다. 이때 HTML 요소의 어트리뷰트는 노드로, HTML 요소의 텍스트 콘텐츠는 텍스트 노드로 변환된다. HTML 문서는 위와 같은 요소들의 집합으로 이뤄지며, 요소 간에는 중첩 관계에 의해 계층적인 부자(부모)관계가 형성 된다. 이러한 관계를 반영하여 모든 노드 객체들을 트리 자료구조로 구성하며 이것을 DOM 또는 DOM 트리라고 한다. 최상위의 부..

🎯목적 : 웹페이지가 브라우저에 랜더링되는 과정을 기록합니다. 클라이언트에서 불러오고 싶은 파일을 서버에 요청한다 주소창에 직접 입력하거나, 클릭을 통해 해당 웹 페이지에 접근한다 클라이언트에서 요청한 URI를 DNS를 통해 IP 주소로 변환하고, 해당 IP를 가진 서버에 GET 요청을 보내게 된다 서버에서 응답으로 받은 HTML 데이터를 파싱한다 (바이트 > 문자 > 토큰 > 노드 > DOM) 서버에 존재하던 HTML 파일이 브라우저의 요청에 의해 응답된다 이때 서버는 브라우저가 요청한 HTML 파일을 읽어 들여 메모리에 저장한 다음 메모리에 저장된 바이트(2진수)를 인터넷을 경유하여 응답한다 브라우저는 서버가 응답한 HTML 문서를 바이트(2진수) 형태로 응답받는다 따라서 응답된 바이트 형태의 HTM..