javascript
-
3.6 객체 -모든객체의 모형 - Objectjavascript/javascript마스터북(책) - 내용 정리 2019. 2. 9. 12:26
현재 매주 화요일마다 자바스크립트 마스터북 이책으로 스터디를 하고 있어, 그때 그때 읽은 부분의 내가 이해한 것의 정리 내용 입니다. Object객체는 자신을 인스턴스화 할 수 있는 것 뿐만 아니라 다른 객체에 대하여 객체의 공통적인 성질/기능을 제공 한다. Object객체는 모든 객체의 기본 객체라고도 말 할 수 있다.'객체'라고 이름 붙은 모든것은 Object 객체에 정의된 프로퍼티나 메소드를 공통으로 이용 할 수 있다. 관련 메써드는 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object 이곳에서 확인 할 수 있다. assign 메소드로 기존의 객체를 결합할 수 있다.구문 : Object.assign(t..
-
3.3 객체 -값의 집합 관련(Array/Map/Set)javascript/javascript마스터북(책) - 내용 정리 2019. 2. 4. 14:07
현재 매주 화요일마다 자바스크립트 마스터북 이책으로 스터디를 하고 있어, 그때 그때 읽은 부분의 내가 이해한 것의 정리 내용 입니다. javascript 는 값의 집합을 조작 하기 위해 Array, Map, Set 객체를 제공한다. Array : 배열형의 값을 취급하며, 배열에 대한 요소의 추가/삭제, 결합, 정렬등을 행하기 위한 기능 제공Array 관련 메소드는 https://www.w3schools.com/jsref/jsref_obj_array.asp 에 정리 되어 있음. Map : ES2015에서 추가 , 키/값의 세트 - 연상배열(해시)을 관리 하기 위한 객체Map 관련 메소드는 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/..
-
3. 객체 관련 개념 정리(객체, 인스턴스, 인스턴스화, 생성자, 인스턴스변수)javascript/javascript마스터북(책) - 내용 정리 2019. 2. 4. 13:05
현재 매주 화요일마다 자바스크립트 마스터북 이책으로 스터디를 하고 있어, 그때 그때 읽은 부분의 내가 이해한 것의 정리 내용 입니다. 객체는 프로퍼티와 메소드로 구성 되어 있다. 프로퍼티와 매소드 관점에서 봤을때 객체란 데이터를 조작하기 위해 여러가지 기능을 가진 고기능의 그릇 객체의 원본에는 손을 대지 않고 원본을 복제한 복사본을 조작함으로써 데이터의 병합을 방지 하도록 되어 있다.객체의 복제를 만드는 것을 인스턴스화 라고 하며, 인스턴스화에 의해 만들어진 복제본을 인스턴스 라고 부른다. 인스턴스화를 하기 위해서는 new 연산자를 사용한다.var 변수 = new 객체명([인수,...]) 분홍색으로 칠한 부분( ) 을 생성자(constructor) 라고 부른다.new 객체명은 생성자명 이라고 할 수 있다..
-
es6 - constructorjavascript/es6 2018. 11. 25. 22:35
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes/constructor 의 설명과 예제의 내용 을 복습차원에서 정리한 것입니다. constructor 메소드는 클래스가 오브젝트로 생성되고 초기되기 위한 특별한 메소드 입니다. 12345 var Polygon = function (){ this.name = "Polygon"; } var poly1 = new Polygon(); console.log(poly1.name);cs 위의 소스를 class 와 constructor로 수정을 하게 되면 다음 과 같다. 12345678 class Polygon { constructor() { this.name = "Polygon"; } } va..
-
react - 5. 상태와 프로퍼티javascript/React 2018. 11. 22. 23:51
책 "모던 자바스크립트 개발자를 위한 리액트 프로그래밍" 의 내용을 복습 차원 에서 정리한 내용입니다. state(상태)컴포넌트의 상태를 나타내며, 변화 할 수 있는 데이터의 집합.상태가 변화 하면 컴포넌트를 다시 랜더링 한다.컴포넌트의 상태를 나타내는 값은 "리스트에서 선택한 값", "체크박스에서 값이 체크됬는지 여부", " 텍스트박스의 텍스트" 등이다. 상태는 직접 변경 할 수 있다.상태는 외부에는 비공개 이며, 컴포넌트 스스로가 관리해야 하는 것상태를 변경 할 때는 this.setState()를 통해 값을 변경 한다. 상태가 변화 하면 다음과 같은 메서드가 자동 호출 된다. shouldComponentUpdate(nextProps, nextState)componentWillUpdate()render..
-
react - 4. 컴포넌트의 라이프 사이클 정리javascript/React 2018. 11. 12. 00:14
책 "모던 자바스크립트 개발자를 위한 리액트 프로그래밍" 의 내용을 복습 차원 에서 정리한 내용입니다. mount: DOM, 혹은 페이지 위에 올라갈 때 unmount: DOM 트리에서 삭제되거나 웹 페이지에서 없어질 때 컴포넌트가 생성되고, DOM에 마운트(추가) 될 때 다음과 같은 순서로 매서드가 호출된다. . constructor(props) - 객체가 생성될 때. componentWillmount() - 컴포넌트가 DOM에 마운트 되기 직전. render() - 컴포넌트가 렌더링될 때. componentDidMount() - 컴포넌트가 DOM에 마운트된 직후 컴포넌트의 프로퍼티가 변경되면 다음과 같은 메서드가 호출된다. . componentWillReceiveProps(nextProps) - 컴포..
-
react - 3. createElementjavascript/React 2018. 10. 28. 00:49
책 "learning React" 의 내용을 복습 차원에서 정리한 내용입니다. React.createElement 로 브라우저 DOM을 표현 할 수 있다. 표현 하는 방법은 다음과 같다.React.createElement("태그", 태그속성, 자식 노드) 2장에서 "안녕~!!" 이라는 텍스트를 출력 할때 의 소스를 보면 다음과 같다,React.createElement("h1", {id: "idarea", className: "classarea"}, "안녕~!!") 콘솔로 찍으면 다음과 같이 나온다. createElement 콘솔로 찍으면 $$typeof, key, props , type등 여러 필드가 나오는 것을 볼 수 있다.
-
react - 2. ReactDom 으로 그리기javascript/React 2018. 10. 23. 13:19
책 "learning React" 의 내용을 복습 차원에서 정리한 내용입니다. ReactDom에는 리액트 엘리먼트를 브라우저에 렌더링 하는데 필요한 모든 도구들이 들어 있다.리액트 엘리먼트와 그 모든 자식 엘리먼트를 함께 랜더링 하기 위해 ReactDOM.Render 를 사용한다. 아래의 이미지를 보면, ReactDOM.Render 는 첫번째 인자(빨간박스)는 렌더링할 리액트 엘리먼트,두번째 인자(노란박스)는 렌더링이 일어날 대상 DOM 노드다.위에 소스에서 보면 react-container 라는 id를 갖고 있는 div의 h1 태그 및 그 안에 내용이 추가 되어 화면에 렌더링이 되어 진다. 브라우저 화면 모든 DOM 렌더링 기능이 ReactDOM으로 옮겨 졌다.브라우저는 단지 리액트를 사용 할 수 있는..