beomy

CodePen CodePen을 이용하여 React.JS를 이야기할 계획입니다. CodePen을 이용하면 별도의 설치 없이 브라우저에서 React.JS 코드를 작성하고 확인 할 수 있습니다. 사용하는 법은 아주 간단합니다. 회원가입 한 후 Pens를 생성하여 간단한 세팅만 설정하면 끝! Settings에서 JavaScript Preprocessor에 Babel로, Add External JavaScript에 https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js와 https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js, react.js와 react-don.js를 포함해주면 끝이납니다. Code..

React 소개 React.JS 란 ? React.JS는 페이스북에서 개발한 View단을 컨트롤하는 라이브러리 입니다.Component 단위로 View를 모듈화 하여, 재사용 가능한 UI를 생성 할 수 있게 합니다. React.JS는 가상 DOM(Virtual DOM)이라는 개념을 사용합니다. 만약 DOM이 변경이 되었다면, 기존의 DOM과 가상 DOM을 비교하여, 최소한의 DOM을 변경하여, DOM 변경 시 최적화 합니다. 왜 가상 DOM을 사용하나요 ?DOM(Document Object Model)은 문서를 객체로 표현하기 위한 표준입니다. 즉, HTML이나 XML 등의 문서를 객체로 표현하기 위한 표준입니다. DOM은 아래의 예시와 같이 HTML은 트리 구조로 표현됩니다. DOM은 트리 구조로 표현..

export 파일이나 모듈안의 함수나, 객체를 export 하는데 사용됩니다. ES6에서 정의된 API로, 브라우저에서 기본으로 제공되지 않기 때문에, Traceurur Complier, Babel, Rollup, Webpack과 같은 별로의 트랜스파일러와 함께 사용되어야 합니다. 1. 문법 export { name1, name2, ..., nameN }; export { variable1 as name1, variable2 as name2, ..., nameN }; export let name1, name2, ..., nameN; // 또는 var export let name1 = ..., name2 = ..., ..., nameN; // 또는 var, const export expression; ex..

정규식(Regular Expressions) 정규식은 문자열에 포함된 문자 조합을 찾기 위해 사용되는 패턴입니다. 코드를 간략하게 만들 수 있으나, 가독성이 떨어질 수 있습니다. RegExp의 exec, test 메소드와 String의 match, replace, search, split 메소드와 함께 사용됩니다. 1. 정규식 두가지 방법으로 정규식을 만들 수 있습니다. 정규식 패턴이 계속 지속될 경우 var re = /ab+c/; 정규식이 계속 지속 될 경우 위와 같은 리터럴 방법을 사용하는 것이 좋습니다. 정규식 패턴이 변경되는 경우 var re = new RegExp("ab+c"); 정규식 패턴이 바뀌는 경우, 생성자 함수를 사용하여 동적으로 정규식을 만들 수 있습니다. 2. 정규식 패턴 만들기 정..

for ... of 문 for ... of 문은 반복가능한 객체(Array, Map, Set, String, TypeArray, arguments 객체등)를 반복하는 문법입니다. 1. 문법 for (variable of iterable) { statement } variable각 반복에 서로 다른 속성값이 variable에 저장됩니다. iterable반복되는 열거가능(enumerable)한 속성이 있는 객체 2. 예시 Array 반복 let iterable = [10, 20, 30]; for (let value of iterable) { console.log(value); } 상수를 사용해야 할 경우 let 대신 const를 사용할 수 있습니다. let iterable = [10, 20, 30]; for..

화살표 함수(Arrow function) 화살표 함수 표현은 일반 함수 표현보다 간결하게 함수를 표현할 수 있습니다.또한, this, arguments, super, new.target을 바인딩하지 않습니다.화살표 함수는 익명 함수이기 때문에, 메소드가 아닌 함수에 사용하는 것이 적절합니다. 또한 익명 함수이기 때문에 생성자로 사용할 수 없습니다. 1. 문법기본 문법 (param1, param2, …, paramN) => { statements } (param1, param2, …, paramN) => expression // 다음과 동일함: => { return expression; } // 매개변수가 하나뿐인 경우 괄호는 선택사항: (singleParam) => { statements } single..

구조분해 할당(Destructuring assignment) 1. 문법구조분해의 기본 문법은 아래의 코드와 같습니다. var a, b, rest; [a, b] = [1, 2]; console.log(a); // 1 console.log(b); // 2 [a, b, ...rest] = [1, 2, 3, 4, 5]; console.log(a); // 1 console.log(b); // 2 console.log(rest); // [3, 4, 5] ({a, b} = {a:1, b:2}); console.log(a); // 1 console.log(b); // 2 구조분해 할당의 좌변은 값을 넣을 변수, 우변에는 값이 되는 변수가 됩니다. var x = [1, 2, 3, 4, 5]; var [y, z] = x;..

기본 매개변수(Default parameter)default parameter은 함수에 전달된 파라미터의 값이 undefined이거나 전달된 값이 없을 때, 초기화 설정된 값을 말합니다.1. 문법기본 문법은 아래와 같습니다.function [name]([param1[ = defaultValue1 ][, ..., paramN[ = defaultValueN ]]]) { statements}default parameter를 사용하지 않는다면, 밑의 코드와 같이 코딩해야 합니다.function multiply(a, b) { b = (typeof b !== 'undefined') ? b : 1; return a * b;}console.log(multiply(5, 2)); // 10console..

나머지 매개변수(Rest parameter)rest parameter은 이름을 정주지 않은 파라미터의 배열을 말합니다.1. 문법var test = function(a, b, ...theArgs) { console.log(a); console.log(b); console.log(theArgs);}test(1, 2, 3, 4, 5);rest parameter은 ...으로 시작되는 마지막 매개변수를 말합니다. 함수에 실제로 전달되는 인수는 제외됩니다. (1과 2는 rest parameter에서 제외)2. arguments와 rest parameter의 차이rest parameter은 이름을 정해주지 않은 파라미터를 말합니다. 반면에 arguments는 함수로 전달되는 모든 파라미터를 말합니다...

ClassES6에서 class 라는 문법이 추가 되었고, 기존의 prototype 기반으로 클래스를 만드는 것보다 명료하게 클래스를 만들 수 있게 되었습니다. 1. 클래스 정의ES6에서 클래스는 특별한 함수입니다. 그렇기 때문에, 함수와 동일하게 클래스 선언(Class declarations)과 클래스 표현(Class expressions)으로 클래스를 만들 수 있습니다 ([자바스크립트] 함수(Function), 즉시실행함수(Immediately-invoked function expression) 참고) 클래스 선언(Class declarations) class Polygon { constructor(height, width) { this.height = height; this.width = width;..