본문 바로가기

분류 전체보기

(123)
Angular2의 특징 1. 컴포넌트 기반 개발- AngularJS에서는 컨트롤러가 개발의 중심이었다면 Angular2에서는 컴포넌트가 개발의 중심- Angular2의 컴포넌트는 컨트롤러의 기능을 완전히 대체하며 구조적으로 컨트롤러보다 견고함 2. 타입스크립트를 주력 언어로 채택- 타입스크립트는 마이크로소프트에서 만든 자바스크립트의 상위 집합 언어- 때문에 자바스크립트 문법을 그대로 이용할 수 있고 최신 ECMA 스크립트 표준인 ES6, ES7의 특징까지도 지원 3. 고성능 프레임워크- Angular2는 모바일 환경을 목표로 만들어진 고성능 프레임워크- Angular2는 AngularJS보다 적은 용량으로 더욱 빠르게 프레임워크를 로딩- Angular2의 성능을 향상시킬 수 있었던 기능 중 하나가 지연 로딩(Lazy Loadi..
[번역] 당신이 2017년에 배워야 하는 언어, 프레임워크, 도구 (2017년 웹 개발 트렌드) http://web-front-end.tistory.com/39
다른 프레임워크와 vue.js 비교 http://www.haruair.com/blog/3605
JavaScript - FILTER filter() 메소드는 제공된 함수로 구현된 테스트를 통과하는 모든 요소가 있는 새로운 배열을 만듭니다. var new_array = arr.filter(callback[, thisArg]) 예) 모든 작은 값 걸러내기 다음 예는 값이 10 이하인 모든 요소가 제거된 걸러진 배열을 만들기 위해 filter()를 사용합니다. function isBigEnough(value) { return value >= 10; } var filtered = [12, 5, 8, 130, 44].filter(isBigEnough); // filtered 는 [12, 130, 44] JSON에서 무효한 항목 거르기 다음 예는 0이 아닌, 숫자 id인 모든 요소의 걸러진 json을 만들기 위해 filter()를 사용합니다. ..
JavaScript - SORT sort () 메서드는 배열의 요소를 적절한 위치에 정렬하고 배열을 반환합니다. 종류가 반드시 안정적 일 필요는 없습니다. 기본 정렬 순서는 문자열 유니 코드 코드 포인트에 따릅니다. arr.sort() arr.sort(compareFunction) var fruit = ['cherries', 'apples', 'bananas']; fruit.sort(); // ['apples', 'bananas', 'cherries'] var scores = [1, 10, 21, 2]; scores.sort(); // [1, 10, 2, 21] // 10이 2, // Unicode 코드 포인트 순서에서 '10'이 '2'앞에 오기 때문에. var things = ['word', 'Word', '1 Word', '2 Wo..
React 기본 작업 환경 - babel 을 통한 ES6 변환- webpack-dev-server 사용- react-hot-loader 를 통한 Hot Module Reload 사용
Webpack을 왜 사용하나요? - 하나의 파일로 js 파일을 번들할 수 있습니다.- 프론트엔드 코드에 npm 패키지를 사용할 수 있습니다.- ES6/ES7 자바스크립트 코드를 작성할 수 있습니다. (Babel을 이용하여)- 코드를 압축 또는 최적화할 수 있습니다.- LESS/SCSS를 CSS로 돌릴 수 있습니다.- HMR(Hot Module Replacement)을 사용할 수 있습니다.- 자바스크립트로 모든 유형의 파일을 포함할 수 있습니다.- 이 글에서 다루지 못한 아주 많은 고급기능이 있습니다. 왜 이러한 기능이 필요한가요? - js 파일 번들 - 자바스크립트를 모듈로 작성할 수 있습니다, 그래서 각각의 파일에 대해서 태그를 별도로 작성할 필요가 없습니다. (상황에 따라서 둘 이상의 js 파일이 필요한 경우 구성 가능함)- npm..
package.json 설정 { "name": "codelab", "version": "1.0.0", "main": "index.js", "scripts": { "dev-server": "webpack-dev-server" }, "author": "", "license": "ISC", "description": "", "dependencies": { "react": "^15.3.1", "react-dom": "^15.3.1", "react-hot-loader": "^3.0.0-beta.3" }, "devDependencies": { "babel-core": "^6.9.1", "babel-loader": "^6.2.4", "babel-preset-es2015": "^6.9.0", "babel-preset-react": "^6.5.0"..