본문 바로가기

Render2

Browser의 기본 구조 및 동작 과정 브라우저란? 웹 서버를 이동(navigate)하며 쌍방향으로 통신하고 HTML 문서나 파일을 출력하는 GUI 기반의 응용 소프트웨어이다. 브라우저의 종류 : FireFox, Chrome, IE, Edge, Opera, Safari 등... 브라우저의 기본 구조 UI (사용자 인터페이스) 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등, 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분 브라우저 엔진 (Brower Engine) UI와 렌더링 엔진 사이의 동작을 제어 렌더링 엔진 (Rendering Engine) 요청한 콘텐츠를 표시 통신 (Network) 네트워크 호출에 사용 자바스크립트 해석기 (JavaScript Interpreter) JavaScript 코드를 해석하고 실행한다. JavaScr.. 2020. 9. 10.
[JavaScript] Vanilla JS로 React 만들기 시작하기 전에... Vanilla JS로 Virtual DOM을 랜더링 하는 간단한 유사 React를 만들어보려고 한다. 우아한 테크러닝 3기 (TypeScript & React)에서 김민태님의 강좌를 참고하였습니다. 글을 보기 전에 Virtual DOM, JSX에 대한 개념을 익히고 읽기를 권장 합니다. 기본 React App 만들기 우측의 결과를 가져오는 React Example App을 작성하였습니다. (github commit 바로가기) JS로 우측 앱을 React의 Virtual DOM을 구현하면서 출력하는 프로그램을 작성해 보겠습니다. React Virtual DOM 분석 위 사진은 React Component를 console.log로 출력한 결과 입니다. 해당 결과를 기반으로 virtualD.. 2020. 9. 9.