🖼Front

브라우저의 Workflow 1. DOM Tree 생성 브라우저가 HTML을 받으면 해당 코드를 파싱하여 문서객체트리(DOM Tree)를 만듭니다. 2. Render Tree 생성 만들어진 DOM Tree 와 CSS의 스타일 정보를 이용해 렌더 트리를 생성합니다. 3. Layout (=Reflow) 만들어진 렌더트리를 이용하여 각 노드들의 절대 값 좌표가 주어지고, 정확하게 어디에 나타나야 할 지 정합니다. 4. Painting (=Repainting) Layout 과정까지 마쳤다면 트리의 각 노드들을 필요할 때 화면에 그립니다. React의 Virtual DOM 기존의 웹 브라우저에서는 DOM을 조작하면 렌더 트리를 다시 만들고, Layout 과정을 거쳐 페인팅을 하게됩니다. 옛날의 웹페이지는 단순히 H..

react 프로젝트를 생성해봅시다. 콘솔창에 npx create-react-app 을 입력하거나 편집기의 기능을 사용하면 됩니다. create-react-app.dev/docs/getting-started Getting Started | Create React App Create React App is an officially supported way to create single-page React create-react-app.dev 참고로 이 방식으로 설치하게 되면 yarn 프로젝트 매니저가 함께 설치됩니다. yarn은 페이스북에서 npm처럼 사용할려고 만든 의존성 관리 프로젝트 매니저인데 npm의 단점인 패키지 설치 속도와 보안성을 개선할려고 만든 도구입니다. 둘 중 뭐가 더 좋다기보다는 둘 다 ..

리액트는 컴포넌트 기반 View 라이브러리로 특별한 문법 공부 없이 자바스크립트를 안다면 유사하게 사용 가능합니다. 주로 함수형 프로그래밍 방식으로 많이 작성하게 됩니다. 이 글에서는 자바스크립트의 *더보기 arr.map(callback, [thisArg]) 를 사용합니다. 더보기 arr.map(callback, [thisArg]) Array.prototype.map( ) callback 함수를 주면, 배열의 요소를 순회하며 해당 함수 적용 시킨 배열을 반환합니다. 단, 원본 배열은 수정하지 않습니다. [thisArg]를 입력한다면 콜백함수 내부에서 사용할 this 값을 설정 해 줄수 있습니다. 콜백 함수 callback ( currentValue, [index ,[array]] ) currentValu..

#1 props (Property) 상위 컴포넌트의 속성을 변수처럼 가져와서 사용할 수 있습니다. 컴포넌트 내부의 불변한 데이터 (Immutable Data)를 사용할 때 이용합니다. this.props.속성이름 으로 접근 할 수 있으며 속성 말고 태그 사이에 데이터를 가져오고 싶다면 this.props.children 을 통해 가져올 수 있습니다. this.props.children에는 여기에 있는 값 이 들어가게 됩니다. 안녕하세요 name prop에요 여기가 children 값입니다 class Hello extends React.Component{ render() { return( 안녕하세요 {this.props.name} {this.props.children} ) } } class App exte..

React.js 는 페이스북에서 만든 자바스크립트 라이브러리입니다. 가장 큰 특징으로 JSX (자바스크립트 코드에 HTML을 바로 쓰는 확장문법)과 가상 DOM의 사용입니다. 가상 DOM이란? #1. React는 컴포넌트 기반이다. 보통 클라이언트 도구의 경우 Controller, Model, View model, Template...등으로 나누어져 있는 경우가 많습니다. 하지만 리액트의 모든 것은 Component 기반으로 동작합니다. 참고로 리액트는 View만 담당하는 라이브러리이며, 서버 사이드 / 클라이언트 사이드 렌더링을 둘 다 지원합니다. #2 import react , reactDOM 기존에는 라이브러리 한 개만 불러오면 되었으나 최신버전의 리액트는 라이브러리(react) 와 렌더링(reac..

HTML에서 직접 이벤트를 연결하는 방법 HTML에서는 이벤트를 생성하고, onevent(ex. onclick, onfocus 등)에 자바스크립트 메서드를 연결하여 HTML-DOM에서 자바스크립트가 해당 이벤트에 반응하게 한다. 또는 아래와 같이 직접 HTML 속성에 직접 자바스크립트 코드를 작성하는 방법도 있다. (여러 구문일 경우 세미콜론으로 구분한다.) JavaScript 에서 이벤트를 관리하는 방법 자바스크립트에서는 기본적으로 event-driven programming 모델을 사용한다. 쉽게말해 해당 이벤트가 발생하면 브라우저에서 자바스크립트로 작성한 이벤트 관리 메서드(event handler)를 호출한다. let btn = document.getElementById('btn'); btn.ad..

HTML, CSS, JS 2021.03.22 - [Web/HTML&CSS] - HTML, CSS 기초 ECMA Script 자바스크립트의 표준. Java 이름의 저작권 문제 + 문법 표준이라는 의미로 ECMA(European Computer Manafactures Assocation)라고 부릅니다. 2015년 ES6 이전의 자바스크립트는 언어라고 부르기엔 민망할정도로 개판이었고 ES6 (ES2015) 이후 자바스크립트 표준이 확립되며 여러 편리한 기능이 추가되기 시작했습니다. Node.js 웹 브라우저가 아닌 곳에도 자바스크립트가 작동하도록 해주는 런타임 환경. 유명한 패키지 다운로드 매니저(npm)을 기본 제공해주며 크롬의 V8 웹 브라우저 엔진을 사용합니다. Npm, Yarn 자바스크립트 패키지 매니..

웹 브라우저에게 해당 문서를 어떤 형식으로 읽어야 할지 알려주는 힌트입니다. 웹페이지의 시작과 끝, 루트 태그 모든 태그들은 html 안에 존재한다. 웹페이지의 정보, 메타데이터, 외부 파일 링크. 단 자바스크립트 는 body 마지막 부분에 적는 것이 좋습니다. 웹 브라우저가 코드를 읽다가 스크립트를 만나면 html DOM트리가 변경될 수 있으니 모든 작업을 멈추기 때문. - 웹브라우저의 제목 표시줄에 나오는 제목. - 문자 인코딩, 웹 페이지에 필요한 모든 요약 정보 - CSS 등 외부 파일을 연결 할 때 사용 - html 코드 내에 스타일을 직접 지정하고 싶을 때 사용 브라우저에 실제로 표시되는 내용 - 단순 줄 바꿈 태그, 닫는 태그이 없어도 된다. - 문단을 나누는 태그, paragraph - 기..

HTML 문서의 내용과 해당 문서의 정보, 구조를 저장하는 파일입니다. 1. 태그 HTML (Hypertext Markup Language)는 이름답게 태그를 이용해서 문서의 정보를 나타냅니다. 문서내용 2. 기본구조 ~ 태그는 최상단(= 루트) 태그를 의미합니다. 문서의 모든 내용이 html 태그 안에 들어가 있으며 문서의 기본 언어 속성 값을 html 태그 안에 적습니다. ... 3. 메타데이터 참고로 meta-data는 해당 문서를 설명하는 정보를 의미합니다. ... 4. body 작성 이는 아래 CSS 설명 이후에 실습하면서 알아봅시다. CSS Style-Sheet로 문서와 그 문서를 꾸며주는 스타일을 분리하기 위해서 만들었습니다. HTML의 태그에 스타일을 적용할 때 우선순위대로 단계적으로(ca..