JavaScript
-
[React] RxJS 를 이용한 간단한 상태 관리 프로그램React 2019. 9. 27. 00:15
React 에서 RxJS 를 활용한 상태관리를 통하여 간단한 Todo List 를 만들어 봅니다. RxJS 는 Reactive Programming 을 활용할때 사용할 수 있는 가장 좋은 라이브러리 중 하나 입니다. 국내에서는 RxJS 를 사용한 예제를 많이 찾아 볼 수가 없더군요. 익숙한 사람이 적은 것 일수도 있지만 굳이 도입 할 필요성을 못 느끼는 것 같기도 합니다. Angular 를 주로 해왔던 전 어느정도 익숙 해 졌지만, 국내는 아직 React (또는 Vue) 가 강세고 Angular 를 잘 사용하지 않는 듯 합니다. 아무래도 진입장벽이 타 라이브러리에 비해 조금 높고, 그 중 RxJS, TypeScript 를 기본 베이스로 사용하는 부분이 크게 한 몫 하는 것 같습니다. Angular 를 접..
-
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 가 적절하게 사용 되었습니다. 기존 웹보다 앱에 치중하던 애플이 이제는 ..
-
ES6 기초와 함수형 자바스크립트 코드 예제Javascript 2017. 3. 19. 20:17
ES 6 의 새로운 문법과 함수형 자바스크립트에 대한 코드 예제 함수형 자바스크립트를 작성하는 법에 대해서 일반적으로 쓰는 OOP 개념의 코드와 다른 점을 예제 코드로 적어보겠습니다. * 본 글은 유튜브 https://youtu.be/HvMemAgOw6I 를 바탕으로 작성되었습니다. > ES6 의 배열인자 const array = (...elements) => { return elements; }; array(1,2,3); // [1, 2, 3] const log = (...args) => { console.log(...args); } log('hello', 'Seoul'); // hello Seoul * const : es6 의 새로운 문법으로 const 로 선언된 값은 외부에서 직접적으로 변경할 수 ..
-
9장) Angular 2 -HeroEditor- (5-2)Angular 2017. 2. 4. 01:20
오랜만에 글을 씁니다. 그동안 이것저것 준비하고 바빠서 이제야 시간이 생겼네요 ㅠ 늦은만큼 이제부터 점점 속도를 내서 쓰겠습니다. 혹시나 기다리신 분이 있으셨다면 죄송합니다 ㅜ 저번 시간에 이어서 Routing 부분을 마무리 짓겠습니다. 8장에서 dashboard 를 추가하고 메인화면에서 dashboard 와 Heroes 목록을 이동하는 링크를 추가 하였습니다. 이번엔 여기서 HeroesDetail 컴포넌트를 분리하려 합니다. Dashboard 에서 영웅을 클릭해서 영웅상세화면 으로 가고 싶을땐 어떻게 해야 할까요? 영웅목록 컴포넌트의 영웅 데이터를 가지고와서 비교해야 할까요? 그럼 URL은 어떻게 구성되야 할까요? 추가로 현재 HeroesDetail 컴포넌트는 Heroes 목록 컴포넌트 밑에 붙어 있습..
-
8장) Angular 2 -HeroEditor- (5-1)Angular 2017. 1. 14. 22:21
이제 Hero Editor 도 얼마 남지 않았습니다. 오늘은 Router 에 대하여 알아봅니다. router 는 내용이 많아서 부득이하게 2개로 나눴습니다. Hero Editor 에 새로운 기능을 추가 하려 합니다. 대시보드를 만들어 영웅들의 순위를 나타내고, 해당 영웅을 클릭하면 상세보기로 이동 하도록 하려 합니다.그러기 위해서 Angular Router 를 추가해서 대시보드와 영웅목록 , 상세정보를 Router 를 이용하여 이동하도록 만들겁니다. 오늘의 계획은 이렇습니다. - AppComponent 는 이제 Root Component 의 기능을 확고히 하며, 해당 컴포넌트는 Router에 맞춰서 나타나는 컴포넌트를 보여주는 컴포넌트가 될 것 입니다.- AppComponent 의 Heroes 를 별도의..
-
7장) Angular 2 -HeroEditor- (4)Angular 2017. 1. 12. 14:27
자 오늘은 Services 편 입니다. 서비스는 우리의 web application 에서 필요한 프로세스 중 자주 쓰는 기능을 하나로 묶어서 여러 컴포넌트에서 동시에 공유해서 사용하는 것 입니다. 현재 Hero editor 에서 영웅 데이터에 접근하는 코드들은 따로 서비스로 묶어서 사용하면 컴포넌트의 독립성을 지키고, 좀 더 뷰에 집중할 수 있도록 만들 수 있습니다. 구글에서는 현재 Hero editor 가 더욱 확장되기를 원하고 있습니다. 그들은 여러페이지에서 다양한 방법으로 영웅을 보여주고 싶어 하며, 최고 영웅의 랭킹이 나타나는 화면 , 그리고 영웅의 세부정보를 보고 편집하는 별도의 화면을 원합니다. 이 화면들은 전부 Hero 데이터에 접근 할 필요가 있습니다. 그리하여 영웅데이터에 접근하는 서비스..
-
6장) Angular 2 -HeroEditor- (3)Angular 2017. 1. 10. 21:48
이어서 Hero Editor 를 계속 만들어 봅시다. 오늘은 Multiple Component 파트 입니다. 현재까지의 작업은 컴포넌트 하나에 모든 로직이 들어 가 있습니다. 이러다 나중애 앱이 커지게 되면 관리하기 정말 힘들겠죠? 그래서 이제 각각 컴포넌트로 나누는 작업이 필요합니다. 현재 만들어진 부분에서 먼저 Hero detail 부분을 떼어내서 컴포넌트로 만들어 봅시다./src/app/ 폴더내부에 hero-detail 폴더를 만들고 그 안에 hero-detail.component.ts 파일과 hero.detail.component.html 파일을만듭시다. 그전에 잠깐 !! 설마 일일이 손으로 폴더 만들고, 파일만들고 하는 건 아니겠죠? 지금 우리가 쓰고 있는게 뭘까요 바로바로 angular-cli..