Angular 5.1.0 버전과 Angular CLI 1.6.0 정식 버전이 릴리즈 되었습니다. 그리고 Angular Material과 CDK 도 첫번째 정식버전이 릴리즈 되었습니다.(2017.12.7)

각 릴리즈 내용에 대해서 간단히 정리했습니다.

Image for post
Image for post
angular.io 공식 홈페이지

Angular 5.1.0

animation 과 service-worker 에 대한 버그픽스가 릴리즈 되었습니다.(CHANGELOG)

  • animations: ensure DOM is cleaned up after multiple @trigger leave animations finish
  • service-worker: initialize in browser only
  • service-worker: esm2015 points to wrong path

Angular CLI 1.6.0

Service Worker / Universal / App Shell 지원이 추가되었습니다.

Angular 5.0.0 에서 추가된 Service Worker 를 지원합니다.

ng new <project-name> --service-worker

Angular Sevice Worker의 자세한 내용은 공식문서를 참고하세요.

서버사이드 렌더링을 위한 Angular Universal 명령어가 추가되었습니다.

ng generate universal <name>ng build --app=<name>

generate 실행시 자동으로 package.json, .angular-cli.json, main.ts, app.module.ts 파일에 Universal 을 위한 코드가 업데이트 되며, app.server.module.ts, main.server.ts, tsconfig.server.json 파일이 생성됩니다. …


Image for post
Image for post

Angular 를 학습하면서 정리 목적의 포스팅으로 첫번째 내용은 Pipe 이다.

Pipe의 사용법, 내장 Pipe, 커스텀 Pipe 구현방법에 대해서 정리하였다.

작성 버전

  • Angular 4.0.0
  • Angular CLI 1.0.0

Pipe 란?

Pipe 는 템플릿에서 값의 표시되는 형태를 변환해서 보여주기 위해서 사용한다.

AngularJS 에서는 Filter 라는 이름으로 불렸고, 파이프( | ) 를 사용하는 방법은 동일하다.

예를들어 날짜 데이터(Sun Apr 16 2017 17:35:39 GMT+0900 (KST))를 원하는 포멧(2017.4.16)으로 보여줄 수 있다.

사용법

HTML 마크업 상에서 변환하고자 하는 데이터에 다음과 같은 형태로 사용한다. (다른 Pipe를 연결해서 사용가능하고, 옵션은 콜론(:)을 연결해서 사용)

{{ value | PipeName : customOption1 :  customOption2 }}
{{ value | Pipe1 | Pipe2 }}

예)

<p>오늘은 {{ today | date:“yyyy.MM.dd”}} 입니다.<p> 
// input) today = Sun Apr 16 2017 17:35:39 GMT+0900 (KST)
// output) 오늘은 2017.4.16 …


Image for post
Image for post
Angular.io

시멘틱 버저닝(Semantic Versioning)을 채택한 후 작년말에 v4.0.0-beta.0을 시작으로 beta.8 이후 rc.6까지 업데이트를 거쳐서 Angular v4.0.0 정식 버전이 2017.03.23일에 릴리즈 되었다. (CHANGELOG)

Angular Blog 에 올라온 “Angular 4.0.0 Now Available” 포스팅을 간단히 정리하였다.

참고로 route 버전 이슈로 Angular 3 은 건너 뛰게 되었다.

Smaller & Faster

Angular 4.0.0 은 2.x 버전과 대부분 호환되며 더 작고 빠르게 되었다. 각 컴포넌트의 코드가 약 60% 정도 줄었으며, 프로덕션 번들의 크기가 수백키로바이트 가량 줄었다.

*ngIf, *ngFor 향상

템플릿 바인딩 구문에서 if / else 구문을 사용할 수 있고, 로컬 변수를 할당 할 수 있다.

<div *ngIf="userList | async as users; else loading">
<user-profile *ngFor="let user of users; count as count"
[user]="user">
</user-profile>
<div>{{count}} total users</div>
</div>
<ng-template #loading>Loading...</ng-template> …


Angular 2 를 비롯한 SPA 프레임워크를 이용해 개발을 하다보면 디버깅이 쉽지 않아서 고생을 많이 하게 된다. React, Vue 역시 크롬 확장 도구로 디버깅 툴이 있는데, Angular 2 도 찾아보니 Angular Augury 라는 이름의 크롬확장도구가 있었다.

추가1 (17.03.27) : Angular 4 프로젝트도 정상적으로 동작한다. (일부 기능만 테스트 해본 것이므로 혹시 문제가 있을수도 있다. )

Image for post
Image for post
Angular Augury

설치방법

Angular Augury 사이트에서 “INSTALL” 버튼을 클릭하면 바로 크롬 확장도구 설치로 이동한다.

아니면 크롬 웹 스토어에서 angury 를 검색해서 바로 설치할 수 있다.

사용방법

Augury 는 개발자도구에 탭 형태로 추가 된다.

Image for post
Image for post
Dev Tools

특징

Augury는 컴포넌트 트리와 시각적 도구를 통해 어플리케이션 구조를 파악하기 쉽다.

  • Component Tree : 앱의 전체 컴포넌트의 구조를 한눈에 볼 수 있다. 각 컴포넌트를 클릭하면 속성(properties)과 구조(Hierarchy, Graph)를 확인할 수 있다. …


지난 2017년 1월 25일 Ionic블로그에 2.0.0 Final 릴리즈에 대한 공지가 올라왔다.

Ionic 2 는 2016.1.26일 첫 alpha버전을 공개 한 후에 딱 1년만에 정식버전을 릴리즈 하였다. (alpha, beta, rc 총 25번의 릴리즈)

최종 릴리즈는 Virtual Scroll을 제외하고 크게 추가된 내용은 없었고 정리차원에서 주요 내용에 대해서 간단히 정리하였다. (원문링크)

Image for post
Image for post
Ionic 2

ionic 2.0.0 은 이미 알고 있는 ionic 2 의 첫 안정화 제품 버전(stable, production version)이다.

Ionic 2 의 새로운 특징

크로스 플랫폼 컴포넌트로 Material 디자인의 100% 지원 (FAB(Float Action Button)포함), 더 유용한 modal, menu, toast, navigation 지원, 그리고 브라우저에서 사용할 수 있는 DateTime Picker 와 같은 새로운 폼 컨트롤을 개발하였다.

강력하고 새로운 native plugin system을 지원. 70개가 넘는 네이티브 기능을 Web API 와 같이 사용 할 수 있다. …


React, AngularJS 와 함께 최근 가장 뜨거운 프레임워크가 Vue.js 인것 같다. 공식 문서가 한글 번역되어 있어 너무나 쉽게 시작할 수 있고, 상대적으로 진입장벽이 조금 낮다.

Image for post
Image for post
Vue.JS 한글 사이트

Vue를 처음 접한다면 먼저 공식문서에 시작하기에 있는 JSFiddle Hello World 예제velopert님의 블로그Vue.js 2.0 소개 및 시작하기를 통해서 어떻게 동작하는지 맛보는걸 추천한다. 특히 velopert님도 언급했듯이 공식문서의 다른 프레임워크와의 비교 글은 꼭 읽어보길 추천한다.

이 글에서는 vue-cli 를 통해서 빠르게 기본환경 세팅 및 개발서버, 테스트, 빌드에 대해서 알아보겠다. (vue-cli v2.8.0 기준)

설치

최소 요구사항으로 Node.js 4.x 이상(6.x 추천)과 Git 이 설치되어 있어야 한다.

// vue-cli 전역 설치, 권한에러시 sudo 추가
npm install -g vue-cli

프로젝트 생성

// vue init <template-name> <project-name>
vue init webpack…


Image for post
Image for post
Boostnote website

Boostnote 는 다양한 언어의 코드조각(snippet)을 작성할 수 있고, 마크다운으로 메모 할 수 있는 심플한 데스크탑 노트 앱 이다.

Image for post
Image for post
마크다운 / 코드조각


Image for post
Image for post
ionic Framework

ionic 1(angularJS 1) 시작하는 방법과 달라진점은 없으나 ionic 2는 AngularJS 2 기반으로 설치 및 기본 파일 구조에 대해서 정리하였다.

이 글을 작성하는 시점의 ionic 2은 v2.0.0 rc.4 버전이다.

설치

npm install -g ionic cordova

필수사항으로 node.js 를 설치 해야 하고, cordova 와 ionic CLI를 설치 합니다.

프로젝트 설치(v2)

ionic start --v2 [프로젝트명] [blank, tabs, sidemenu, tutorial, github-URL]
Image for post
Image for post

기본적으로 3개의 템플릿(blank, tabs, sidemenu)을 지원한다. 추가로 market starters 에서 무료 또는 구입한 템플릿으로 시작할 수 있다. (무료 템플릿의 경우 github URL 을 넣어서 설치 가능)

프로젝트 구조

ionic CLI로 설치된 프로젝트 폴더를 보면 네이티브 플러그인 폴더(plugins)와 cordova 폴더(platforms)를 볼 수 있다.

./src/

src 폴더 안에는 컴파일되지 않은 raw 코드가 있다. ionic serve를 실행하면 src/ 안에있는 코드가 컴파일 되어서 보여지게 된다. (ES6…


Image for post
Image for post
Nicole Sullivan Slide

CSS 방법론(1)-BEM 방법론에 이어서 OOCSS 객체지향 CSS 방법론에 대해서 정리해 보았다.

2가지 기본원칙

  • 구조(structure)와 모양(skin)의 분리 : 반복적인 시각적 기능(배경, 테두리..)을 별도의 “스킨”으로 정의하여 다양한 객체와 혼합하여 중복 코드없이 시각적 다양성을 표현할 수 있다.
  • 콘테이너와 콘텐츠의 분리 : 스타일을 정의할때 위치에 의존적인 스타일을 사용하지 않는다. 사물의 모양은 어디에 위치 하던지 동일하게 보인다. (예: .object h2{} 사용하지 않고 h2에 .title(클래스 이름)을 부여하여 사용한다. 이렇게 하면 클래스가 없는 h2는 모두 동일한 모습이고, title 클래스 역시 동일하게 보일것이며, 불필요한 스타일을 중복해서 정의할 필요가 없다)

네이밍 방법

  • 가능한 짧고 간결하게 작성한다.
  • 동작과 형태가 예상 가능하도록 명확하게 작성한다.
  • 어떻게 생겼는지 보다는 어떤 목적인지 알 수 있도록 의미있게 작성한다.
  • 지나치게 구체적 이지 않게 일반적으로 사용가능 하도록 작성한다. …


Image for post
Image for post
BEM(https://en.bem.info/)

WSConf에서 CSS 방법론(OOCSS, BEM)에 대한 세션을 들으면서 CSS를 작성할때 어떤 방법론을 통해서 작성해 본적이 없었고 그냥 생각나는데로, 또는 다른데서 봤던 형태로 작성하고 있었던거 같다.

id, class명을 작성할때, 항상 고민이였던 부분이 네이밍이였고, 그때그때 떠오르는데로 작성하는 경우가 많았다. 그러다 보니 나중에 이게 어떤놈인지 알기 힘들었고 수정하려면 HTML과 CSS를 다 찾아보아야 했다.

CSS 방법론은 쉽게 유지보수가 가능하게 하고, 재사용 할 수 있도록 구현하며, 쉽게 확장가능하게 하는 공통의 목적을 가지고 있다.

여러 방법론 중에서 BEM과 OOCSS에 대해서 알아보고 어떻게 적용할지 고민해보기로 했다.

먼저 BEM 방법론에 대해서 정리해 보았다.

작명규칙(Naming Convention)

  • 개발, 디버깅, 유지보수를 위하여 CSS 선택자의 이름을 가능한 한 명확하게 만드는 것이 목표이다.
  • 소문자, 숫자 만을 이용해서 작명한다. …

About

스키머(schemr)

행복한 프론트엔드 개발자

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store