spread operator(펼침 연산자) es6에 추가된 연산자로 마침표 세 개(...)로 사용되며, 크게 두 가지로 쓰이게 된다. 배열에서의 역할 배열 병합 var arr3 = [...arr1, ...arr2] 와 같이 사용도 가능하며, 다양한 형태로 간단히 사용 가능 배열 복사 shallow copy(얕은 복사) 로 되어 있으나, 깊은 복사는 1레벨 까지 허용 위와 같이 2레벨은 깊은 복사가 되지 않기에 '얕은 복사'라고 나와있다 함수에서의 역할 함수의 매개변수를 spread operator로 작성하는 형태를 Rest parameter printf 와 같은 가변인자 받는 형식으로 이해하면 편하다 위와 같은 코드로 사용이 가능 다른 역할로는 나머지의 개념으로 배열 안에서 나머지를 부른다 생각하면 된다..

className 태그에 class 주고 싶으면 데이터 바인딩 서버에서 가져온 데이터 특정 구역에서 보여줘야 하는 데, 그러한 과정을 데이터 바인딩이라 칭한다 위 코드에서보면 posts 변수를 42seoul로 되어있지만, 데이터베이스에서 가져오면 된다. 그렇게 가져온 값을 특별한 과정을 거치지 않고 중괄호 안에 변수명을 입력 { posts } 꼭! 변수명 뿐만이 아니라 함수도 가능, 또한 src, href, id 등의 속성에도 사용 가능 style 속성 중괄호 안에 object 자료형으로 만든 스타일을 넣으면 된다. font-size 같은 경우에는 camelCase 로 변경 해서 fontSize와 같이 써야 한다. 위에 나왔던 것과 같이 style 속성을 변수에 저장을 하여 가져올 수 있다.

배우기 전에 앞서 중요한 건 개발환경을 만드는 것이다. 우선적으로 VSCode 와 Node.js 최신 버전으로 설치 create-react-app (리액트 프로젝트에 필요한 패키지들을 묶어 리액트 앱을 생성해주는 도구)을 설치하기 위해서. NPM(Node Package Manager)을 통해 설치하는데 이것이 nodejs에 포함 npm : 패키지(모듈)의 설치 및 관리를 쉽게 하기 위해 도와주는 매니저(관리 도구) 작업을 하고자 하는 폴더를 대상으로 VSCode 실행 후, 터미널에서 npx create-react-app 프로젝트명 적으면 리액트 앱이 생성 npx : npm 5.2.0 버전부터 추가된 도구로, npm 레지스트리에 올라가있는 패키지를 쉽게 설치하고 관리할 수 있도록 도와주는 CLI 도구로 실..

자바스크립트의 내장 객체 Object Function Array String Boolean Number Math Date RegExp 배열의 확장 1 2 3 4 5 6 Array.prototype.rand = function(){ var index = Math.floor(this.length*Math.random()); return this[index]; } var arr = new Array('seoul','new york','ladarkh','pusan', 'Tsukuba'); console.log(arr.rand()); Colored by Color Scripter cs Object 아무것도 상속받지 않는 순수한 객체 확장이 가능하나 모든 객체에 영향을 미치기 때문에 바람직하지 않다. Object ..

상속 객체의 로직을 그대로 물려받는 또 다른 객체를 만들 수 있는 기능 아래와 같은 코드가 있으면, 1 2 3 4 5 6 7 8 function Person(name){ this.name = name; this.introduce = function(){ return 'My name is '+this.name; } } var p1 = new Person('egoing'); document.write(p1.introduce()+" "); cs prototype을 통해서 상속을 할 수 있다. 1 2 3 4 5 6 7 8 9 function Person(name){ this.name = name; } Person.prototype.name=null; Person.prototype.introduce = funct..

Java와 비슷한 거 같으나 전혀 다른 객체지향을 추구 서로 연관되어 있는 변수와 메소드를 객체에 담아낸다. var person = {} // {} 는 object == 객체 (비어있는 상자)) peeson.name = 'egoing'; // name 이라는 property (속성)를 객체에 담고 그 내용은 'egoing' person.introduce =fuction() { // property에 담겨있는 게 함수라면, 메소드 return 'My name is '+this.name; } document.write(person.introduce()); 위와 같은 객체는 아래 코드처럼 사용이 가능하다. 1 2 3 4 5 6 7 var person = { 'name' : 'egoing', 'introduce..

arguments 변수에 담긴 숨겨진 유사 배열 1 2 3 4 5 6 7 8 9 function sum(){ var i, _sum = 0; for(i = 0; i

JavaScript에서는 함수도 객체, 일종의 값 함수는 객체의 속성 값으로 담겨진 함수를 메소드 1 2 3 4 5 6 7 8 9 10 var process = [ function(input){ return input + 10;}, function(input){ return input * input;}, function(input){ return input / 2;} ]; var input = 1; for(var i = 0; i