쉽고 빠른 웹앱 프로토타이핑을 진행할 수 있게 도와주는 툴입니다.
node.js 기반으로 주요 기능으로는 아래와 같습니다.
* 스케폴딩으로 인한 빠른 프로젝트 템플릿 구성
* LiveReload를 이용한 라이브 코딩
* 이미지 optimization
* Compass, CoffeeScript 자동 컴파일링
* JS 라이브러리의 의존성 체크 및 업데이트 관리
* 정적검사 및 유닛 테스트
* JS/CSS merge 및 minimize 그리고 dist 배포
쉽고 빠른 웹앱 프로토타이핑을 진행할 수 있게 도와주는 툴입니다.
node.js 기반으로 주요 기능으로는 아래와 같습니다.
* 스케폴딩으로 인한 빠른 프로젝트 템플릿 구성
* LiveReload를 이용한 라이브 코딩
* 이미지 optimization
* Compass, CoffeeScript 자동 컴파일링
* JS 라이브러리의 의존성 체크 및 업데이트 관리
* 정적검사 및 유닛 테스트
* JS/CSS merge 및 minimize 그리고 dist 배포
[TechDays 2015]에서 발표한 "두근두근 ASP.NET 5!" 세션의 발표 자료입니다.
ASP.NET의 Reboot이라고까지 불리는 ASP.NET 5를 미리 만나볼 수 있는 시간을 가져봅니다.
무엇이 달라졌고 개선되었는지, 또 어떤 매력을 가졌는지에 대해서 알아볼 수 있는 ASP.NET 5와의 첫 만남!
그 두근거림을 느껴 보시기 바랍니다.
초고속 웹사이트 개발을 위한 Codeigniter PHP FrameworkInseok Lee
지난 10월에 연구실에서 진행했던 세미나 자료입니다.
웹개발에 대한 기본적인 개념이나 프레임웤에 대한 내용을 전혀 모르는 학부 학생들과 연세가 있으신 박사과정 학생들을 위해 제작되었습니다.
Codeigniter의 내용보다도 왜 Codeigniter를 쓰면 좋은지, 그리고 웹 개발 방법은 어떻게 바뀌어 왔는지 등을 이곳저곳의 슬라이드(Codeigniter 한국사용자 포럼의 웅파님, 다음커뮤니케이션의 윤석찬님)를 정리하였습니다.
초보자를 대상으로 하는 강의에서 참고하면 좋을 것 같아용~
관련 문의는 Codeigniter 한국사용자 포럼 codeigniter-kr.org 에서 해주세요~
2. ES6? ES2015?
• 최초엔 ES5의 다음 버전이라고 하여 ES6로 지칭
• ES6, ES7 등의 명세 작업에 TC39가 착수하면서
ES2015 라고 부르자는 커뮤니티 합의가 있었음
https://esdiscuss.org/topic/javascript-2015
• 둘다 명칭은 맞지만 ES2015로 부르는 추세
3. Technical Commitee:
TC39
• ECMA : European Computer Manufacturers
Association
• ECMA에 는 기술 위원회 (TC39)를 발족,
문법과 의미를 표 화,
일반적인 목 에 쓸 수 있고,
플랫폼을 가리지 않으며,
제조사에 중립적인 스크립트 어를 만들기로 함
4. ES2015 Syntax
• 대다수 브라우저는 아직 ES5 만 해 할 수 있음
(최신 크롬도 마찬가지)
• ES2015의 문법을 이 할 수 있는 브라우저는
극히 일부
• 과연 지금 공부해서 쓸모가 있을까?
5. Next Frameworks
• 그럼에도 최신 FE 프레임워크들은 차 ES2015
(혹은 ES2015명세를 포함하는 TypeScript)
형태로 개발 되기 시작
근래 많은 오픈소스 라이브러리도 ES2015로 개발
• 트렌드나 택이 아니라 필수로 자리 매김 하는 분위기
(ECMAScript Standard)
• React.js
• Angular 2
• 기타 등등 (video.js)
6. So, can I use ES2015?
• 실제 서비스 사례
30여개 서비스를 대상으로 한 어느 모듈
Babel 변환을 기반으로 한 ES2015 로 100% 전환
• 필드에 8개월간 수많은 피드 을 받아본 과,
Polyfill을 이용했을 때 기본적인 문법들은 정상적으로 동작
(심지어 IE7-8, Android 2 OK)
• BUT, 기능에 따라 동작 여부 확인 필요
(Promise, WeakMap 등)
• Babel 6 을 사용하려면 좀 더 신중할 필요
(IE8에 syntax 오류가 발생하는 default 키워드 변환 > 이 참
고 > https://phabricator.babeljs.io/T2817)
7. Babel
• ES2015의 Syntax 에 대한 많은 화
• 거의 모든 브라우저에 100% 지원이 되지 않음
• 하지만, 문법은 언젠가 표 화 될 것이고, 지금 당장 사용
하려면 변환(transform to ES5) 프로세스가 필요함
• 그 변환을 도와주는
node.js 기반의 Front-End 도구. Babel.js
• 기존의 여러 도구들과 통합해서 사용 가능
(gulp, grunt, webpack 등등)
8. Preset ES2015
• babel 만으로는 변환이 되지 않음
• preset 이라는 추가 node 모듈(패키지)을 설치하여
babel 변환에 사용
• preset 은 여러가지가 재
stage-0,1,2, preset2015, react
• 여러 플러그인을 포함하는 일종의 패키지
9. 일단 실행 & 실습 해보기
• babel에 제공하는 실시간 Transformer
http://babeljs.io/repl/
• 좌측 코드는,
브라우저에
바로 실행 안됨
• 변환된 우측 코드는,
브라우저에
바로 실행 가능
10. 커맨드 실행
저 babel 도구 설치
(node.js 선행 설치 필요)
npm install -g babel-cli (babel cli 설치)
npm install babel babel-preset-es2015
그리고 babel 실행
13. imports?
• js 안에 추가로 파일 import를 할 땐
module bundler가 필요. (webpack, browserify)
다양한 툴이 있기 때문에 기호에 맞춰서 사용됨
14. 레퍼런스 모음
• 호환성 테이블
http://kangax.github.io/compat-table/es6/
• ES6 Features
http://es6-features.org/
• ES6 Features github
https://github.com/lukehoban/es6features
• Babel - learn ES2015
https://babeljs.io/docs/learn-es2015/
15. 산출물 코드 저장
• https://github.com/FE-next/es2015/
16. Appendix1.
Webstorm with ES2015
• Webstorm 이용시 에디터창에
es2015인식을 못할땐,
설정에 Languages & Frameworks >
Javascript 의 Javascript language version 을
ECMAScript 6로 변경
18. Appendix3.
Live Coding
• webpack 을 써서 프로젝트를 만들다보면 transform 과
정에 시간이 많이 소요됨
(어느 프로젝트는 10초 내외)
• 매 코드를 갱신하려면 10초씩 기다려야 하지만,
webpack-dev-server를 이용하면 빠르게 변환이 가능함
http://webpack.github.io/docs/webpack-dev-server.html
• 작성해서 사용하고 있는 샘플 코드
https://github.com/FE-next/es2015/blob/master/jinkwon/spinbox/
webpack.dev-server.config.js