IT 엘도라도

1. 브라우저 렌더링 과정 1-1. DOM 트리 생성 HTML 파서가 전달받은 HTML 파일에 담겨 있는 HTML 코드들을 파싱 하여 메모리 상에 DOM 객체들로 이뤄진 DOM 트리를 생성한다. DOM(Document Object Model)은 문서의 각 요소를 객체(Object)로 표현하는 방법이자 모델을 뜻한다. 이러한 DOM 트리의 구축으로 인해 스크립트 언어가 문서의 뷰를 편하게 조작할 수 있다. 1-2. 스타일 규칙 생성 CSS 파서가 전달받은 HTML 파일과 CSS 파일에 담겨 있는 CSS 코드들을 파싱 하여 메모리 상에 스타일 규칙들을 생성한다. 1-3. 렌더 트리 생성 앞서 생성한 DOM 트리와 스타일 규칙들의 정보를 바탕으로, 실제로 브라우저의 화면에 노출되어야 하는 노드들에 대한 정보인..

1. 일반적인 웹 어플리케이션의 동작 원리 : 풀 스택 (Full Stack) 프론트 엔드와 백 엔드가 구분되지 않는 일반적인 웹 어플리케이션의 동작 원리는 어떠할까? 파이썬 기반의 장고(Django), 자바 기반의 스프링(Spring) 등이 대표적인 웹 어플리케이션이라고 볼 수 있다. 이러한 웹 어플리케이션의 동작 원리는 아주 단순하다. 클라이언트가 요청(Request)을 보내면 서버에 존재하는 웹 어플리케이션이 데이터베이스 서버와 통신하여 필요한 데이터들을 전부 가져오고, 이것들을 가지고 완전한 HTML, CSS, JavaScript 파일들을 만들어서 클라이언트에게 제공한다. 그러면 클라이언트는 그렇게 전달받은 파일들을 그대로 브라우저에서 사용하기만 하면 된다. 이와 같은 방식으로 웹을 개발하는 사람..

* 개인적으로 React를 막 공부하기 시작하면서 정리한 내용들입니다. 잘못된 내용이 있다면 지적 부탁드립니다. 1. React 최초 렌더링 과정 ReactDOM.render(루트 엘리먼트, DOM 노드) 호출 루트 엘리먼트부터 시작해서, 마주친 엘리먼트의 type을 검사한다. DOM 엘리먼트 : 자식 엘리먼트들에 대하여 동일한 과정을 재귀적으로 반복한다. 컴포넌트 엘리먼트 : 해당 컴포넌트에게 props를 입력으로 제공하여 엘리먼트 트리를 얻는다. 함수형 컴포넌트라면 해당 함수를 호출함으로써, 클래스형 컴포넌트라면 컴포넌트 인스턴스를 생성한 후 render() 메소드를 호출함으로써 얻을 수 있다. 그리고 그렇게 얻은 엘리먼트 트리의 루트 엘리먼트에 대해서 동일한 과정을 재귀적으로 반복한다. 위와 같이 ..

1. 엘리먼트 (Element) 실제로 화면에 렌더링 할 DOM 노드들의 정보를 React에게 알려주기 위한 수단이다. DOM 노드 혹은 컴포넌트를 표현하는 JavaScript의 일반 불변 객체(Plain Immutable Object)에 해당한다. type(문자열 혹은 컴포넌트 함수/클래스) 필드와 props(객체) 필드로 표현된다. 일반적으로 하나 이상의 자식 엘리먼트는 props의 children 필드로 표현하며, 이를 통해 엘리먼트들이 중첩될 수 있다. (이 필드에는 텍스트에 해당하는 문자열, 엘리먼트, 혹은 엘리먼트들의 배열 등이 저장될 수 있다.) 일반적으로 JavaScript의 React.createElement() 함수 또는 JSX의 태그 문법(ex. )으로 작성한다. 엘리먼트들로 이뤄진 ..