Devlog

1 사용자 인터페이스 렌더링사용자가 웹 페이지를 방문하면 서버는 다음과 같은 HTML 파일을 브라우저에 반환한다. 그 후에 브라우저는 HTML을 DOM(문서 개체 모델)으로 구성한다 DOM이란? DOM은 HTML요소의 객체 표현 부모와 자식관계가 있는 트리 구조 사용자 이벤트를 수신하고 사용자 인터페이스에서 특정 요소를 선택, 추가, 업데이트, 삭제하여 DOM을 조작 스타일과 내용도 변경 가능 2 Javascript 및 DOM 메서드로 UI 업데이트 명령형 vs 선언형 프로그래밍 명령형: 단계적으로 접근("어떤 방법으로" 컴퓨터 화면에 페이지를 나타내야 하는지를 묘사) 선언형: 단계를 고려하지 않고 선언적으로 접근("무엇"이 나타나야하는지를 묘사) 속도를 높일 수 있어서 선호함 선언적 라이브러리 → 리액..

React Dev Tool 해당 포스트는 React conf 2021 React Developer Tooling 의 내용을 토대로 작성했습니다. ## Key part of React developer experience 영상에서 React 개발자 경험의 핵심 포인트로 아래 3가지를 언급했습니다. 1. Productivity (생산력) 2. Debugging (디버깅) 3. Performance (성능) React Dev Tool - hook Dev Tools는 처음부터 hook 을 지원하므로 개발자가 hook 의 값을 검사하고 편집할 수 있습니다. 그러나 Dev Tool 을 사용하는 사용자들은 각 명시된 hook 에 이름이 표기되지 않아 디버깅 시 불편하다고 했습니다. 아래와 같은 react code 를..