본문 바로가기

Web

(104)
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"..
NodeJS 강좌 https://velopert.com/node-js-tutorials
JavaScript - MAP map() 메소드는 파라미터로 전달 된 함수를 통하여 배열 내의 각 요소를 처리해서 그 결과로 새로운 배열을 생성합니다. arr.map(callback, [thisArg]) callback 새로운 배열의 요소를 생성하는 함수로서, 다음 세가지 인수를 가집니다. currentValue 현재 처리되고 있는 요소 index 현재 처리되고 있는 요소의 index 값 array 메소드가 불려진 배열 thisArg (선택항목) callback 함수 내부에서 사용 할 this 값을 설정 var numbers = [1, 2, 3, 4, 5]; var processed = numbers.map(function(num){ return num*num; }); /* ES6 Syntax */ let numbers = [1, 2..
webpack 설정하기 var webpack = require('webpack'); module.exports = { entry: ['react-hot-loader/patch', './src/index.js'] , output: { path: __dirname + '/public/', filename: 'bundle.js' }, devServer: { hot: true, //컴포넌트가 수정 될 경우 그 수정된 부분만 리로드 해주는 부분 모듈 리로딩(“Hot Module Reloading”) 옵션 inline: true, //전체 페이지에 대한 실시간 리로딩(“Live Reloading”) 옵션 host: '0.0.0.0', //서버를 listen 할 주소 port: 4000, //포트 contentBase: __dirname ..
React 강좌 https://velopert.com/reactjs-tutorials