es6

React

React STEP 17 - JSX에서 배열 사용

⭐ JSX에서의 배열 1. 단계 1class Round extends React.Component { render() { let roundStyle = { display: "inline-block", margin:10, width: 100, height: 100, backgroundColor: this.props.backgroundColor, borderRadius: 50 } return( ) }; }root.render ( ) 2. 단계 2class Round2 extends React.Component { render() { let roundStyle = { display: "inline-bl..

React

React STEP 10 - EcmaScript6 문법 - 3

⭐ EcmaScript6 1. forEach() 함수 사용하기배열 함수 forEach()는 for 구문에서 사용하던 순번과 배열의 크기 변수를 사용하지 않습니다.class ForEach extends React.Component { componentDidMount() { let forArray=[3, 2, 8, 8]; let forNewArray=[]; for(let i=0; i { // console.log(result); forEachNewArray.push(result); }); console.log("2. forEachNewArray : ["+forEachNewArray+"]"); } render(){ let h2Style={ ..

React

React STEP 9 - EcmaScript6 문법 - 2

⭐ EcmaScript6 1. 전개 연산자(...) 사용하기전개 연산자는 배열이나 객체를 좀 더 직관적이고 편리하게 합치거나 추출할 수 있게 도와주는 문법입니다.변수 앞에 마침표 3개(...)를 입력해 사용합니다.class SpreadOperator extends React.Component { componentDidMount() { //javaScript Array var varArray1=["num1", "num2"]; var varArray2=["num3", "num4"]; var sumVarArray=[]; sumVarArray=sumVarArray.concat(varArray1, varArray2); console.log("1. sumVarArray : "+su..

React

React STEP 8 - EcmaScript6 문법 - 1

⭐ EcmaScript표준화된 스크립트 언어, 숫자는 버전을 의미ES6는 많은 기능이 추가 되었고, React에서도 모든 기능을 사용할 수 있습니다.1. 템플릿 문자열 사용하기문자열과 변수를 합치기 위해서는 문자열을 따옴표로 감싸고 +로 연결따옴표가 아닌 백틱(')으로 전체 문자열과 변수를 묶어 사용할 수 있습니다.변수는 ${변수명} 형태로 넣고 코드상에서 줄바꿈을 하면 개행 문자 없이도 사용할 수 있습니다.class ES6 extends React.Component { componentDidMount() { var jsString1 = "JavaScript"; var jsString2 = "입니다. \n 다음줄 입니다."; console.log(jsString1+" 프로그래밍"+jsS..

Vue.js

ES6 STEP 2 - 기본 문법 2

★ 새로운 객체 리터럴 객체의 속성을 작성할 때 변수명과 동일하다면 생략 가능. var name = "홍길동"; var age = 20; var email = "gdhong@test.com"; var obj = { name, age, email }; console.log(obj); 새로운 메서드 표기법 ES6가 제공하는 새로운 객체 리터럴 -> function 키워드를 사용하지 않고 바로 { } 구현부가 따라옴. 이 함수는 화살표 함수가 아니기 때문에, 함수가 중첩되었을 때 바깥쪽 함수의 this가 이 함수의 this로 자동으로 전달되지 않는다. let p1 = { name : "아이패드", price : 200000, quantity : 2, order : function() { if(!this.amo..

Vue.js

ES6 STEP 1 - 기본 문법

★ 호스이팅 변수의 선언을 스코프의 최상단으로 옮기는 행위 var console.log(A1); var A1 = "hello"; var는 if문이나 for문의 중괄호 {}, 에 의한 블록 수준의 유효 범위를 제공하지 않는다. 호이스팅 단계에서 이미 변수가 생성되어 있다면, 변수를 생성하지 않고 건너뛴다. var A1 = 100; console.log(A1); var A1 = 'hello'; console.log(A1); 동일한 이름의 변수가 생성되어 오류가 발생할 것 같지만 오류 X ★ ES6 1. let 이러한 문제를 해결하기 위해 let 키워드를 지원 let msg = "GLOBAL"; function outer() { let msg = "OUTER"; console.log(msg); if(true)..