All
-
새로운 Angular engine, Ivy Compiler 에 대하여 알아봅시다.Angular 2019. 11. 4. 15:58
현재 Angular v8.2.11 에는 Ivy Preview 버전이 탑재 되어 있습니다. 원래 계획으로는 v8 에 적용 될 예정이었지만 자동 마이그레이션에서 버그가 생각보다 많이 나온 것 같네요. Angular v9 도 10월 초에 공개될 예정이었지만, 계속 늦어지고 있는 걸 보니... (11월 말 공개예정) 사실 Ivy Compiler 자체의 문제보다 Angular 는 이전부터 전버전에 관하여 손쉽게 마이그레이션을 할 수 있도록 update 명령을 제공하는데, 이 부분에서 생각보다 많은 시간이 소요되는 것 같습니다. Angular js 에서 Angular v2 ++ 버전으로 이동하면서 많은 비난과 욕을 먹었다보니, 마이그레이션에 집착하는 것 같습니다? 본론으로 들어가서 Angualr Ivy Compil..
-
[React] RxJS 를 이용한 간단한 상태 관리 프로그램React 2019. 9. 27. 00:15
React 에서 RxJS 를 활용한 상태관리를 통하여 간단한 Todo List 를 만들어 봅니다. RxJS 는 Reactive Programming 을 활용할때 사용할 수 있는 가장 좋은 라이브러리 중 하나 입니다. 국내에서는 RxJS 를 사용한 예제를 많이 찾아 볼 수가 없더군요. 익숙한 사람이 적은 것 일수도 있지만 굳이 도입 할 필요성을 못 느끼는 것 같기도 합니다. Angular 를 주로 해왔던 전 어느정도 익숙 해 졌지만, 국내는 아직 React (또는 Vue) 가 강세고 Angular 를 잘 사용하지 않는 듯 합니다. 아무래도 진입장벽이 타 라이브러리에 비해 조금 높고, 그 중 RxJS, TypeScript 를 기본 베이스로 사용하는 부분이 크게 한 몫 하는 것 같습니다. Angular 를 접..
-
Flutter 의 App State Management Provider 에 대하여 알아봅시다.Flutter 2019. 8. 27. 02:18
Google I/0 2019 에서 발표 된 Flutter 의 State Management 방법인 Provider 패키지를 이용하는 방법을 간단하게 핵심만 알아 봅시다. Provider 는 Flutter 커뮤니티에서 시작되었으며, 이후 Google 에서 리 패키징하여 현재 공식적으로 업데이트를 하고 있습니다. Bloc, Inheritedwidget, ScopeModel, Redux 등 Flutter 에서 State Management관련 기법이 이미 다양하게 있지만 Provider 는 좀 더 깔끔하고 간편하게 사용할 수 있습니다. ScopeModel 의 상위 버전 같은 느낌입니다. 간단하게 기본 제공되는 Counter App 에서 사용 해 봅시다. 새로운 프로젝트를 만들고, import 'package:..
-
Flutter Local Storage (SQLite) 사용하기 with BLoC PatternFlutter 2019. 7. 31. 16:16
Flutter 에서 sqflite 를 사용하여 로컬 에서 데이터를 관리 해 봅시다. 참고로 sqflite 는 flutter 에서 sqlite 의 사용을 도와주는 패키지 이름 입니다. 기본적인 개발환경은 구성이 되어있다는 전제하에 글을 적기 때문에 만약 flutter를 완전히 처음 접한다면 공식문서를 보고 오는 것이 좋습니다. 새로운 프로젝트를 생성 했다면 먼저 sqflite 와 파일 경로 찾기를 도와주는 path provider 패키지를 설치합시다. sqflite 는 DB 제어와 쿼리, 자동 버전관리 등 을 도와주는 패키지 이며, path provider 는 자주 사용 되는 파일시스템 의 위치를 쉽게 찾을 수 있게 도와 줍니다. SQFLite: https://pub.dev/packages/sqflite ..
-
Angular Http Interceptor 사용하기Angular 2019. 7. 26. 18:04
이번 주제는 Angular 에서 전역으로 Api 요청을 컨트롤 하는 Http Intercepror 사용입니다. 주로 AuthToken을 사용한 Api 요청이나 전역적으로 Http 에러를 처리할 때 자주 쓰입니다. Angular v8.1.2 먼저 새 프로젝트를 만들고 서비스를 만들어야겠죠. // * src/services/example.service import { Injectable } from "@angular/core"; import { HttpClient } from '@angular/common/http'; import { Observable } from 'rxjs'; import { map } from 'rxjs/operators'; @Injectable({ providedIn: 'root' }..
-
Web Component 에 대하여 간략하게 알아봅시다.Javascript 2019. 4. 24. 23:57
Web Component 는 복잡해진 마크업 요소들을 코드의 충돌없이 재사용 가능하고, 캡슐 화 시키기 위한 목적으로 만들어 졌습니다. WebComponent 의 장점으로는 아무래도 웹표준을 따르는 만큼 어떤 FE 프레임워크나 라이브러리를 사용하더라도 공유, 조합이 가능하다는 것 입니다. 캡슐화 되어있는 Web Component 는 현재 사용중인 테마, 프레임워크로 부터컨텐츠를 보호 할 수 있으며, 잘 만들어진 디자인 시스템으로 무장된 Web Component 는 재사용 할 기회가 굉장히 많아 집니다. 최근 발표된 Apple Music Web 의 Beta 버전에는 ember 와 함께 stencil 을 활용한 Web component 가 적절하게 사용 되었습니다. 기존 웹보다 앱에 치중하던 애플이 이제는 ..
-
Flutter 란 무엇인가? RN 과 뭐가 다르지?Flutter 2019. 4. 24. 01:42
작년에 사이드 프로젝트 앱 개발을 위해 크로스플랫폼 프레임워크를 한참 찾아봤습니다. 후보에 오른게 NativeScript 와 React Native 그리고 Ionic 이었죠. 사실 가장 웹 개발자가 바로 접근하기엔 위 3개가 가장 유명하기도 했었구요. (NativeScript 는....) 어쨌든 본인은 React 보단 Angular 를 더 선호하는 편이라 Native Script 로 만들려 했지만 결국 Ionic 으로 시작 (?) 하지만 아무래도 웹뷰를 사용하는 Ionic 의 퍼포먼스 한계와 Android , Ios 의 개별 스타일링을 해야 하는 점 등이 발목을 잡아 개발을 중단하게 되었습니다. ReactNative 는 충분히 빠르고, 거대한 생태계를 가지고 있으며, React 를 다룰 줄 안다면 약간의..