DOM

안녕하세요. 동쪽별입니다. 이번 글에서는 바닐라 자바스크립트로 모달을 직접 구현해본 경험을 공유하고자 합니다. 위 이미지와 같이 날짜 입력 아이템을 클릭시 캘린더 모달이 렌더링 되도록 구현했습니다. 모달은 position: absolute 스타일을 적용하여 쉽게 퍼블리싱할 수 있습니다. 그런다음 클릭 이벤트 발생시 모달 Element를 DOM에 추가하거나, display: none 이었던 모달 Element 스타일을 display: flex 로 변경하는 등의 방식으로 렌더링할 수 있겠죠. 문제는 모달 외 영역 클릭시 해당 모달을 제거하는 동작을 구현하는 것이었습니다. 또한, 모달 제거와 동시에 날짜 입력 아이템의 포커싱 또한 비활성화해야 했습니다. 첫번째 방법 : 상위 Element 에서 이벤트 전파 해..

안녕하세요. 동쪽별입니다. 매주 진행하는 프론트엔드 스터디에서 한 친구가 브라우저 렌더링에 대해서 발표를 했는데, 너무 유익했어요. 그래서 이에 대해 다시 한번 학습하고 기록하고 싶었기에 글을 쓰게 되었답니다. 그럼 브라우저가 어떤 방식으로 동작하는지, 그리고 렌더링을 최적화하기 위한 방법들은 어떤 것들이 있는지 차근차근 살펴봅시다! 목차 브라우저의 기본 구조 렌더링 동작 과정 렌더링 최적화 브라우저는 웹에서 페이지를 찾아서 보여주고, 사용자가 하이퍼링크를 통해 다른 페이지로 이동할 수 있도록 하는 프로그램입니다. 크롬, 사파리, 파이어폭스, 인터넷 익스플로러 등이 이에 해당돼요. 브라우저는 유저가 선택한 리소스를 서버로부터 받아와서 유저에게 보여줍니다. 리소스는 페이지, 이미지 비디오 등의 콘텐츠를 말..