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

컴파일 검출하고자 하는 패턴 만드는 일, 아래와 같이 정규표현식 객체를 만드는 일은 2가지가 있다. 정규표현식 리터럴 var pattern = /a/; 정규표현식 객체 생성자 var pattern = new RegExp('a'); 정규표현식 메소드 실행 RegExp.exec() console.log(pattern.exec('abcdef')); //TRUE console.log(pattern.exec('abcdef')); //FALSE Sting과 정규표현식 String.match() RegExp.exec()와 비슷하다. var pattern = /a/; var str = 'abcde'; str.match(pattern); // ["a"] 출력 'bcdef'.match(pattern); // null 출력..