최근 프론트엔드 커뮤니티에서 엄청나게 뜨거운 녀석이 등장했습니다. 1주 동안( 12. 10 ~ 12. 16) github star 4000개 이상을 받은 번들러가 등장한 것인데요. 바로 parcel 입니다. (글 작성한 2017-12-15 일 기준으로 parceljs 사이트가 한글 번역 되었습니다.) [github trend에서 1주 기준 모습] 무려 4163스타를 한주동안 받았다고 합니다. Grunt 에서 Gulp로 그리고 최근에는 Webpack 을 쓰고 있는데 또?? 라는 생각이 제일 먼저 들기 시작했습니다. 어떤놈인지 찾아보니 설정없이 Webpack보다 빠른 번들러라고 소개하고 있습니다. 설정이 필요없다고?? 알아서 bundle이 되는건가?? 궁금한 생각에 한번 angular-cli 로 생성되는 a..
TypeScript로 프로젝트를 진행하다보면 처음엔 tsconfig의 컴파일 옵션때문에 당황할때가 많이 있습니다. ( 저만 그런가요^^?;;)발생되는 에러코드로 검색해보면 원인을 찾아 볼 수 있지만, 워낙 컴파일 옵션이 많아 에러 코드와 함께 하나씩 정리할려고 합니다. 오늘 확인할 에러는 TS6133:'x' is declared but never used. 에러입니다. 해당 에러와 연관된 TypeScript Compiler Option은 아래와 같습니다. let noUnusedLocals: boolean = '사용되지 않은 지역 변수가 있으면 알려줍니다.'; let noUnusedParameters: boolean = '사용되지 않은 메서드 파라미터가 있으면 알려줍니다.';기본값은 false입니다. 많이..
RxJs에서는 Observable를 구독(subscribe) 함으로서 스트림을 통해 데이터를 주고 받고 하고 있습니다. 하지만 Observable를 더 이상 관찰할 필요가 없을 경우 구독취소(unsubscribe)를 해야합니다. 그럼 RxJs를 도입한 Angular(Angular 4)에서는 구독취소(unsubscribe)를 언제 어떻게 해야할까요?오늘 얘기할 내용은 바로 이 구독취소를 언제, 어떻게, 왜 해야하는지에 대해 얘기하고자 합니다. 2017. 09. 15 Update- takeUntil 내용 추가 ps) 글에 피드백을 주신분들께 감사드립니다.왜 구독취소를 해야할까요?이 얘기를 하기위해서는 Observable이 언제 실행되는지 알아야합니다. 기본적으로 Observable은 subscribe(구독)..
Angular2(이하 Angular) 개발시 Service에 선언한 Interface를 export를 하고 다른 컴퍼넌트에서 import를 할려고하니 아래와 같은 에러 메세지가 발생하였습니다. WARNING in ./src/app/core/sidenav/sidenav-item/sidenav-item.component.ts21:83-92 "export 'ISideItem' was not found in '../sidenav.service' at HarmonyImportSpecifierDependency._getErrors (/Users/david/work/resume/client/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency...
HNPWA(Hacker News readers as Progressive Web Apps)은 Google I/O 2017 에서 소개된적이 있으며 TodoMVC와 같은 다양한 자바스크립트 프레임워크를 이용하여 한가지 앱을 구현한 프로젝트입니다. 이름에도 나와있든 이 프로젝트는 Progressive Web App (PWA) 기술을 이용하여 Hacker News 앱을 구현한 프로젝트이며, 이중에서 angular2(이하 angular)를 이용하여 구현한 angular2-hn에는 rxjs, firebase, workboxjs 등의 기술들이 포함되어있어, angular로 pwa를 구현하기전에 참고하기 좋은 프로젝트입니다. 이 글의 원문은 rangle.io 개발자인 Houssein Djirdeh의 블로그(https:..
최근 Angular-cli와 NativeScript 그리고 electron를 이용하여 간단한 프로젝트 및 seed 프로젝트를 구성하고 있는데 angular-cli에 모르고 있던 기능들이 많아서angular-cli.json의 설정들을 정리하고자 합니다. 해당 포스트는 angular-cli wiki의 내용들을 위주로 작성되었습니다.작성당시 angular-cli버전은 1.2.2 입니다. Angular-cli.json의 구성Angular-cli.json의 속성들은 크게 아래와 같이 구성되어있습니다. - project- apps- e2e- lint- test- defaults- packageManager- warningsproject(프로젝트 관련 속성) //프로젝트 전역에 해당하는 설정 "project": { ..
Angular가 Semantic Versioning(유의적 버전관리)에 따라 v4.0.0이 3월 23일 github에 정식 release 되었습니다. 이전에 작성하였던 4.0 베타 릴리즈 정보 및 릴리즈 주기 관련된 글(이전글 보러가기)처럼 3월에 정식 버전이 release되었네요. 4.0으로 변경되면서 어떠한점이 달라졌는지 간단하게 정리해 보았습니다. 정리하기전에 해당 글에서는 용어를 아래와 같이 사용하고 있습니다 .(관련하여 피드백 주시면 감사하겠습니다.) - angular 2.0 -> angular v2 - angular 4.0 -> angular v4 - 공식 문서 분리angular v2와 angular v4 의 문서가 분리되었습니다. angular v2는 레거시 문서로 해당 링크로 별도 분리되었..
작년 구글은 Angular 2.x를 발표한지 6개월만에 Angular 3.x 에 대한 계획을 발표하여 모두를 놀라게 하였습니다. 이제 막 나온 프레임워크를 또 다시 신규 프레임워크로 개발하는 줄 알고 있었습니다. 하지만 Angular 3.x를 출시 하지 않고 2017년 3월 Angular 4.0 릴리즈를 목표로 한다고 합니다. ?? angular 2가 나온지 얼마나 됐다고 3.x 버전이니 4.x 버전이니 하는건가 싶었습니다. 하지만 Angular팀의 버저닝과 릴리즈 정책을 보고 이해가 되었습니다. 아마 기존에 Angular1과 2이 다른 프레임워크로 나뉘어져 있어서 버전 관리를 고민을 많이 한걸로 보입니다.Angular의 버전 정책기존의 Angular1의 버전은 아래와 같이 되어있습니다. Angular ..
ES6 in depth 요약글입니다.ES6 in depth을 참고하여 공부겸 정리하였습니다.ES6? ECMAScript가 도대체 무엇이지?ECMAScript는 자바스크립트 표준 단체인 ECMA가 제정하는 자바스크립트 표준이다.ECMAScript는 브라우저에 사용되는 자바스크립트 부분만 표준으로 정의한다.우리가 현재 사용하고있는 자바스크립트는 ES5이며, 이전에는 ES1 ~ ES3까지 존재하고있다. ES4는 논쟁요소가 많아 폐기 되었으며 ES5부터 먼저 제정하였다고함let과 const기존에 자바스크립트에서는 var를 이용하여 변수를 선언했다. 다른 프로그래밍 언어는 보통 블럭단위(block-level) 유효범위를 가지고있지만이 var는 함수에 대해서만 Scope를 가지고있음 여기서 Sscope란 범위, 영..
Angular CLIA command line interface for Angular- Angular를 위한 command line interface그럼 cli란 무엇인가? 쉽게 생각하면 명령줄을 입력하면 해당 명령에 따른 작업을 실행해주는것을 cli라고 한다.window에서 cmd.exe 같은 도구를 이용하여 명령을 전달하면 그 명령을 받아 명령에 맞는 작업을 실행한다. npm도 어떻게보면 cli라고 할 수 있다. angular 개발을 위해 명령도구들을 모은것이 angular-cli다 기존의 ember개발자였다면ember-cli를 알고있을 것이다. angular-cli는 ember-cli를 기초로 개발하였다고한다. angular-cli를 이용하여 angular 프로젝트를 생성도 가능하며 componen..