DOM2 Browser’s Rendering Process 어떤 브라우저를 쓰든 UX/UI 취향의 문제로만 치부하고 있다면, 아직도 개발자가 아니다. 브라우저에서 화면을 그리는 방식은 브라우저마다 다르기 때문이다. 웹 프론트를 만든다면 꼭 인식하고 있어야할 게 브라우저 렌더링 프로세스다. 그나마 HTML5에서는 이론으로나마 렌더링 방법을 표준화했다. 이과정을 Critical Rendering Path로도 부른다. 물론, 표준화 채택여부는 각 브라우저에게 있다. 웹페이지 표현 순서 1. 사용자가 주소를 입력하면 브라우저는 DNS 서버로 접속해 IP주소를 찾아온다. 2. 웹페이지를 그리기 위한 자료를 해당 서버에 요청한다. 3. 서버는 요청 확인 후 브라우저에게 웹페이지 자료를 전송한다. 4. 브라우저는 해당 IP주소로 부터 밭은 웹페이지 정보를 조립해 보여준다. .. 2022. 10. 24. Lifecycle(feat. DOM) 컴포넌트는 각자 라이프사이클을 가지고 있다. 컴포넌트는 생성되고, 업데이트되고, 사라진다. 자세히 얘기해보자. 컴포넌트가 DOM에 끼워질 때 생성된다, 그리고 업데이트되면 DOM에 표시된 컴포넌트가 변한다. DOM에서 컴포넌트가 사라진다면 그 컴포넌트는 역할을 다한 셈이다. 라이프사이클(lifecycle) 나타나고 수정하고 사라지는 모든 것을 말하며, 리액트에서는 이 라이프사이클을 조절할 수 있다. (리액트 공식 문서에서는 생명주기라고 번역되어 있으나 실제 현장에선 라이프사이클이라 표현한다.) 사실 필자는 전에 라이프사이클과 관련 있는 글을 썼다. 바로 useEffect. useEffect가 컴포넌트의 라이프사이클을 조절하는 hook이었다. 함수형 컴포넌트는 라이프사이클을 useEffect로 조절하며, .. 2022. 10. 3. 이전 1 다음
