전체 글
-
4. 이벤트 - React 기초 | 생활코딩Front-end/React.js 2020. 2. 22. 23:17
[출처 : https://opentutorials.org] 16-1 이벤트 state props 그리고 render 함수 ※ props나 state의 값이 바뀌면 그 props나 statㄷ를 가지고 있는 컴포넌트의 render()가 다시 호출되고 그 render() 안에 있는 다른 컴포넌트의 render()도 다시 호출된다. * redner() : 어떤 HTML을 그릴 것인가를 결정하는 함수. 16-3 이벤트에서 state 변경하기 ※ 이벤트가 호출됐을 때 함수 안의 this는 undefined이다. // 함수 뒤에 .bind(this)를 추가하면 함수 내의 this는 컴포넌트가 된다. ; 16-4 이벤트 bind 함수 이해하기 # Function.proyotype.bind() bi..
-
3. State - React 기초 | 생활코딩Front-end/React.js 2020. 2. 19. 22:04
[출처 : https://opentutorials.org] 15-1. State 소개 props : 사용자가 컴포넌트를 사용하는 입장에서 중요한 데이터 * 제품의 외부 조작 장치 (유저 인터페이스) state : props에 따라 내부 구현에 필요한 데이터 * 제품을 구현하기 위한 내부 조작 장치 (메커니즘) ※ 외부의 props와 내부의 state의 정보가 철저하게 분리되어야 한다. 사용하는 쪽과 구현하는 쪽을 격리하여 양 쪽의 편의성을 도모 15-2. State 사용 어떤 컴포넌트가 실행될 때 render() 보다 먼저 실행되면서 그 컴포넌트를 초기화시켜주고 싶은 코드는 constructor() 안에 작성 : 컴포넌트가 실행될 때 constructor()가 있으면 제일 먼저 실행되어 초기화를 담당한다..
-
디스트럭처링 - 문법 | PoiemawebJavascript/ECMAScript 2015 (ES6) 2020. 2. 18. 22:49
[출처 : https://poiemaweb.com] ※ 디스트럭처링(Destructuring) - 구조화된 배열 또는 객체를 Destructuring(비구조화, 파괴)하여 개별적인 변수에 할당하는 것이다. - 배열 또는 객체 리터럴에서 필요한 값만을 추출하여 변수에 할당하거나 반환할 때 유용하다. 1. 배열 디스트럭처링 (Array destructuring) ES6의 배열 디스트럭처링은 배열의 각 요소를 배열로부터 추출하여 변수 리스트에 할당한다. 이때 추출/할당 기준은 배열의 인덱스이다. var arr = [1, 2, 3]; // ES5 : 배열의 각 요소를 배열로부터 디스트럭처링하여 변수에 할당하기 위한 방법 var one = arr[0]; var two = arr[1]; var three = arr..
-
객체 리터럴 프로퍼티 기능 확장 - 문법 | PoiemawebJavascript/ECMAScript 2015 (ES6) 2020. 2. 17. 22:45
[출처 : https://poiemaweb.com] 1. 프로퍼티 축약 표현 ES6에서는 프로퍼티 값으로 변수를 사용하는 경우, 프로퍼티 이름을 생략(Property shorthand)할 수 있다. 이때 프로퍼티 이름은 변수의 이름으로 자동 생성된다. var x = 1, y = 2; // ES5 : 객체 리터럴의 프로퍼티는 이름과 값으로 구성된다. 프로퍼티의 값은 변수에 할당된 값일 수도 있다. var Object = { x: x, y: y } // ES6 : 프로퍼티의 값으로 변수를 사용할 경우, 이름은 생략 가능. *프로퍼티 이름 = 변수의 이름 const Object = { x, y }; console.log(Object); // {x: 1, y: 2} 2. 프로퍼티 키 동적 생성 문자열 또는 문자..
-
2. 컴포넌트 제작 - React 기초 | 생활코딩Front-end/React.js 2020. 2. 14. 00:59
[출처 : https://opentutorials.org] 11. 컴포넌트 만들기 # 컴포넌트를 만들 때는 하나의 최상위 태그만 써야 한다. class Subject extends Component { // class 안에 소속되는 함수는 function 생략 *function render()와 같음 render() { return( // 최상위 태그 ... ); } } # 위 코드는 유사 자바스크립트이다 - jsx(페이스북에서 만든 컴퓨터 언어)로 코드를 작성하면 create-react-app이 js 코드로 converting(변환) 해준다. # 리액트는 코드 정리정돈의 도구 - 컴포넌트의 이름에 집중함으로써 코드의 복잡성을 획기적으로 낮춰준다. 12. props # 태그의 이름이라는 공통점과 속성이라..
-
1. 개발환경 - React 기초 | 생활코딩Front-end/React.js 2020. 2. 13. 00:08
[출처 : https://opentutorials.org] 3. 개발환경의 종류 NPM node.js를 이용해 만들어진 여러 앱을 명령어 환경에서 손쉽게 설치할 수 있도록 도와주는 도구 (node.js의 앱스토어) 4. npm을 이용해서 create-react-app 설치하기 > npm install -g create-react-app * -g : 전역(global) 위치에 설치 ※ 권한이 없을 경우 (npm ERR! code EACCES) > sudo npm uninstall -g create-react-app > sudo npm install -g create-react-app > create-react-app -V * 버전 확인 npm 과 npx의 차이 # npm : 프로그램을 설치 # npx : ..
-
참조 - 객체지향 | 생활코딩Javascript/ECMAScript 2009 (ES5) 2020. 2. 11. 22:43
[출처 : https://opentutorials.org] 복제 전자화된 시스템의 가장 중요한 특징은 복제다. 현실의 사물과 다르게 전자화된 시스템 위의 데이터를 복제 하는데는 비용이 거의 들지 않는다. 바로 이러한 특징이 소프트웨어를 기존의 산업과 구분하는 가장 큰 특징일 것이다. 프로그래밍에서 복제가 무엇인가를 살펴보자. var a = 1; // 변수에 담겨진 값은 원시 데이터 타입 var b = a; b = 2 console.log(a); // 1 값을 변경한 것은 변수 b이기 때문에 변수 a에 담겨있는 값은 그대로이다. 변수 b의 값에 변수 a의 값이 복제된 것이다. 참조 var a = {"id":1}; // 변수에 담겨진 값은 참조 데이터 타입 var b = a; b.id = 2; console..
-
데이터 타입 - 객체지향 | 생활코딩Javascript/ECMAScript 2009 (ES5) 2020. 2. 11. 21:47
[출처 : https://opentutorials.org] 원시 데이터 타입(primitive type) 데이터 타입이란 데이터의 형태를 의미한다. 데이터 타입은 크게 두가지로 구분할 수 있다. 객체와 객체가 아닌 것. ㆍ숫자 ㆍ문자열 ㆍ불리언(true/false) ㆍnull ㆍundefined 객체가 아닌 데이터 타입을 원시(기본) 데이터 타입이라고 한다. 그 외의 모든 데이터 타입들은 객체다. 레퍼 객체 var str = "coding"; // str = new String("coding") ⑵ 자바스크립트는 임시로 해당 객체를 만들고 사용이 끝나면 제거 console.log(str.length); // 6 ⑴ 원시 데이터 타입과 관련된 어떤 작업을 하려고 할 때 console.log(str.char..