[서론] 이번 개발을 진행하면서 IndexedDB를 사용하게 되었다. 그 이유는 서버로부터 많은 데이터를 받아오게 되는 우리 서비스 환경상 계속해서 서버로 부터 많은 데이터를 계속해서 가져가면 조회 속도에 문제가 발생하여 이를 개선하고자 IndexedDB를 사용하게 되었다. 이번 포스팅에서는 IndexedDB를 사용하면서 내가 실수 했던 두가지에 대해서 포스팅 할 것이다. 전체적인 소스코드는 별도로 공유하지 않습니다. [문제점] 1. indexedDB에서 데이터를 넣고 조회하는 작업이 모두 비동기라는 점 2. getAll() 메소드가 많은 데이터를 호출 할 때는 동작하지 않았던 점 위 두가지가 내가 실수 했던 요소 두가지이며 어떻게 해결 했는지에 대해서 공유한다. getAll()이 동작하지 않는 부분에서..
서론 Angular를 사용하면서 Router(이하 라우터)를 사용하지 않는 개발자는 없을 것이다. 물론 Router를 사용하지는 않을 수 있겠지만 그렇게 되면 성능상 손해를 보게 될 것이다. 그 이유는 라우터를 사용하지 않고 페이지를 전환하게 되면 Angular의 특성상 lazy 로딩이 설정 되어 있지 않은 모든 모듈 및 컴포넌트를 로딩 하게 되는데 이것이 성능에 큰 손해를 주게 된다. 이번 포스팅에서는 라우터를 사용 할 경우 URL에 있는 파라미터를 가져오는 방법에 대해서 설명하며 포스팅에서 사용한 Angular의 버전은 5버전이며 6버전 까지 나온 상태이다. 라우터를 사용한 값 전달 및 가져오기 예를 들어 value1이라는 값을 전달하고 할 때 라우터를 사용하여 값을 전달 할 수 있는 방법은 두가지가..
[서론] 나는 지금 참여하고 있는 플젝에서는 Backbone을 사용하고 있다. Backbone은 배포를 할 때 따로 빌드를 해주어서 배포를 하지 않는다. 그냥 javascript로 이루어 져있기 때문에 FTP를 이용해서 서버에 올려만 주면 된다. 하지만 Angular를 사용하여 Typescript로 Application을 만들게 되면 이야기는 틀려진다. 이번 포스팅에서는 Angular를 사용해서 서버에 배포하는 방법에 대해서 설명한다. 서버 환경은 ubuntu 17, apache이다. Angular는 5버전이다. [빌드하기] 먼저 Angular APP을 Typescript로 구현했다고 생각하고 진행한다. Angular를 개발하면 angular-cli를 사용하게 될텐데 (물론 안쓰고도 가능하다.) angu..
[서론] 인터넷상에서 정보가 존재하는 위치는 URL을 사용하여 접근하게 된다. 접근하고자 하는 URL의 길이가 길어지게 되면 URL Shortener를 사용하여 줄여서 사용 할 수 있게 된다. URL Shortener API를 제공하는 곳은 많지만 이번 포스팅에서는 구글을 사용하여 포스팅을 진행 할 것이며, 이번 포스팅에서는 URL Shortener의 동작 원리와 사용법에 대해서 설명한다. [URL Shortener 원리] https://goo.gl/ 해당 URL에 접근하여 Short URL을 발급 받으면 https://goo.gl/UeyLrd 과 같은 형식의 짧은 URL을 받게 된다. 해당 URL은 나의 블로그로 연결 해놓았기 때문에 해당 URL로 접근하게 되면 해당 블로그로 접근하게 된다. 그렇다면 ..
[서론]Angular는 Component(이하 컴포넌트)를 기반으로 개발을 진행하게 된다. 컴포넌트를 기반으로 개발을 하다 보면 컴포넌트들 간의 상하관계가 발생하고 이렇게 상하 관계가 발생 하게 되면 특정 컴포넌트의 이벤트에 의한 값이 자신이 포함 하고 있는 하위 컴포터넌트로 전달 되거나 혹은 그 반대로 자신이 포함하고 있는 하위 컴포터넌트의 이벤트 값을 받아서 처리 해야 할 수도 있다. 이번 포스티에서는 컴포넌트 간의 이벤트 전달에 대해서 설명한다. Angular에서는 컴포터넌트 들이 서로 데이터를 전달 받고 전달할 수 있도록 @Inputs(), @Output() 어노테이션으로 변수를 선언 할 수 있는데, @Input의 경우 하위 컴포넌트로 값을 전달 하기 위한 변수 설정이다. @Output같은 경우는..
[서론] Angular를 사용하면 guard(이하 가드)라는 용어를 볼 수 있다. 가드란 영어사전에서 찾아보면 경비, 보호, 수비 라는 뜻으로 사용된다. Angular에서 가드는 Router를 사용하면서 접하게 되는데 간단하게 설명하면 라우팅 시 해당 url에 대한 접근을 제어할 때 사용하는 녀석이다. 기본적으로 가드에는 4가지의 가드가 있다. 아래에는 4가지 가드에 대한 설명이다.CanActivate 가드 : 해당 가드는 라우터에 대해서 접근이 가능한지 불가능 한지 접근 권한을 체크 하는 기능을 한다. 해당 가드를 사용 하고자 한다면 구현하고자 하는 가드 클래스에 CanActivate 인터페이스 모듈을 구현 해야하며 해당 인터페이스에는 canActivate(route: ActivatedRouteSnap..