이유기존 DOM 구조 상에서는 DatePicker와 SelectBox 컴포넌트 최상위 div 하위에 팝업이 포함돼있었다.그러나 DatePicker와 SelectBox를 다른 요소의 하위로 넣는 경우, 팝업 또한 상위 요소 범위를 벗어나지 못한다는 단점이 존재했다.그렇기 때문에 DOM구조에서 독립적으로 분리해 팝업이 열렸을 때 최상위에서 잘림없이 보여지게 하기 위해 재구현했다. 이때 모달에 많이 사용하는 createPortal을 사용했다. createPortal createPortal – ReactThe library for web and native user interfacesko.react.dev부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링할 수 있게 한다. creat..
dom
자바스크립트가 가장 많이 사용되는 분야는 웹 브라우저 환경에서 동작하는 웹페이지/애플리케이션의 클라이언트 사이드다. 브라우저가 HTML, CSS, 자바스크립트로 작성된 텍스트 문서를 어떻게 파싱(해석)하여 브러우저에 렌더링❓ 파싱(parsing) = 구문 분석 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 들여 실행하기 위해 텍스트 문서의 문자열을 토큰으로 분해하고, 토큰에 문법적 의미와 구조를 반영하여 트리 구조의 자료구조인 파스 트리를 생성하는 일련의 과정 일반적으로 파싱이 완료된 이후에는 파스 트리를 기반으로 중간 언어인 바이트코드를 생성하고 실행한다. 렌더링(rendering) HTML, CSS, 자바스크립트로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것 브라우저 렌더링 과..