Fall in IT.

안녕하세요.오늘은 Angular5에서 DOM의 변경이 발생되지 않는 이벤트에 대해서 강제로 변경 감지를 호출 시키는 방법에 대해서 알아보도록 하겠습니다. Angular는 많은 핵심기능들을 가지고 있지만, 그중에서도 Two-way-databinding 기능은 프론트 개발을 하는데 있어서 큰 편리함을 제공합니다. 그러나, javascript 또는 typescript에서 데이터 변경이 일어났음에도 불구하고 DOM에 변경사항이 반영되지 않는 상황이 종종 발생하곤 합니다. 오늘은 이 문제를 해결하는 방법에 대해서 간단하게 알아보도록 하겠습니다. 문제 javascript 또는 typescript에서 데이터 변경이 일어났음에도 불구하고 DOM에 변경사항이 반영되지 않는 문제 이유여러가지 이유가 있을 수 있지만, 아래..

안녕하세요. 오늘은 Angular5(typescript 기반)에서 외부라이브러리 import 하는 방법에 대해서 알아보겠습니다. 정확히는 Typescript에서 tsd 파일 없이 외부라이브러리를 사용하는 방법에 대해서 알아보도록 하겠습니다. Typescript에서 외부라이브러리 import 방법으로 daum 지도를 api사용해 보도록 하겠습니다. 목적Angular5에서 daum 지도 사용 방법을 알아봅니다. 요구사항tsd 파일 없이 외부라이브러리를 import하여 사용합니다. 샘플코드아래와 같이 sample 코드를 작성합니다. 에러 발생컴파일 단계에서 daum 객체에 에러가 발생합니다. 에러 내용은 "cannot find daum"daum 변수에 대한 타입이 지정되어 있지 않아 발생하는 에러로 해결방법은..

안녕하세요. 오늘은 Angular Style Guide에 대해서 간단히 소개해보도록 하겠습니다.아직 Angular(2이상)는 대규모 서비스에서 사용된 사례가 많지 않기 때문에 Style Guide 또한 다듬어져가는 중입니다.Angular 진영에서 공식 사이트에 TECHNIQUES 카테고리에 올린 Style Guide를 참고하여 중요한 부분만 간략하게 정리해 보았습니다. Angular Style GuideAngular 공식 사이트에 나와 있는 style guide를 바탕으로 angular 구문(syntax), 규칙(conventions)에 대해서 정리합니다. File structure conventionshero.component.tshero.component.htmlhero.component.css Si..

안녕하세요. 오늘은 ionic 3에서 --prod 옵션을 사용하여 build 하였을때, 발생하는 에러픽스 방법에 대해서 공유하려고 합니다. 문제 $ ionic cordova run android / ios 를 실행할 경우 정상적으로 동작한다.$ ionic cordova run android --prod 를 실행할 경우 error 가 발생한다. --prod 옵션이란?실제 productions 형태로 빌드할때 사용하는 옵션입니다.js, css 등 필요 없는 파일들은 모두 제거하고, 압축 가능한 파일들은 컴팩트하게 압축하여 결과 파일을 만들어 냅니다.$ ionic cordova run -h 명령어를 사용하여 자세한 내용을 확인하실 수 있습니다. 과정많은 문서들을(ionic forum, stack overflo..

안녕하세요. 오늘은 Ionic Framework 3에서 Moment.js 사용방법에 대해서 알아보도록 하겠습니다. Ionic 3에서 Moment.js 사용방법moment.js 설치 - https://momentjs.com/ - $ npm install moment --save node_modules에 moment 폴더가 생긴 것을 확인할 수 있습니다. 사용하고자 하는 컴포넌트의 ts(typescript) 파일에 import 합니다. - ex. import * as moment from 'moment'; 모두 즐거운 코딩하세요~

안녕하세요. 오늘은 Angular 2에 지시자에 대해서 아주 간단하게 알아보도록 하겠습니다. Angular 지시자의 종류Components Directives (컴포넌트 지시자)Structural Directives (구조 지시자)Attribute Directives (속성 지시자)Custom Directives (커스텀 지시자) Components Directives (컴포넌트 지시자)여러 화면에서 공통적으로 사용되는 화면을 A컴포넌트로 만들어 놨다고 가정했을때, A컴포넌트의 selector 속성을 이용하여 컴포넌트 지시자로 사용합니다.home 컴포넌트에서 child-home 컴포넌트를 사용하는 예제입니다. Structural Directives (구조 지시자)구조적 지시자는 컴포넌트나 DOM을 추가/..

안녕하세요. 오늘은 Angular 4에서 Form에 대해서 간단한 설명과 사용방법을 알아보도록 하겠습니다. 폼이란?일반적으로 form이란 서버에 전달하기 위한 사용자 입력 영역을 의미 합니다.로그인, 회원가입 등 입력 영역에서 보통 form 엘리먼트를 사용하여 구현 합니다. Angular 4의 폼 종류템플릿 주도 검증 - 템플릿 외부에 별도의 검증 모듈을 두지 않고 템플릿 즉, html 상에서만 검증되게 하는 방식입니다. - 검증 대상이 적고 단순한 검증을 수행할 때 적합한 방식 입니다. 모델 주도 검증 - 템플릿 내부에서 검증을 수행하지 않고, 컴포넌트의 외부 모듈에서 검증되게 하는 방식입니다. - 검증 과정이 복잡할 경우 적합한 방식 입니다. 템플릿 주도 검증에 대해서 간단한 예제코드를 통해 알아보도..

안녕하세요. 오늘은 Ionic Framework에서 IOS에서만 숫자 밑에 밑줄(underline)이 생기는 문제를 해결하는 방법에 대해서 알아보도록 하겠습니다. IOS에서 밑줄 없애는 방법CSS나 DOM 조작 없이, 최상위 html 파일의 meta 태그를 사용하여 해결 합니다. 참조https://forum.ionicframework.com/t/remove-hyperlinks-for-phone-numbers/18039/6

안녕하세요. 오늘은 Angular2에서 HTTP 서비스인 get, post 사용법에 대해서 알아보겠습니다. HTTP Service란?간단히, HTTP 서비스를 통해 서버에 데이터를 요청하고, 데이터를 받아올 수 있는 기능입니다. Angular2에서 HTTP 사용법서비스 클래스를 생성합니다. (ionic sample 코드를 가지고 테스트를 진행하였습니다.) - ionic은 모바일앱 개발을 위한 angular2 기반의 오픈소스 프레임워크 입니다. 서비스 클래스에 HTTP 요청을 위한 로직을 구현합니다. - 서비스 클래스는 Injectable 데코레이터를 붙여줍니다. app.module.ts의 provider에 서비스 클래스를 등록합니다. 사용하고자하는 곳에서 import 하여 서비스를 사용합니다. subsc..

안녕하세요. 오늘은 Angularjs에서 발생하는 "Blocked loading resource from url not allowed by $sceDelegate policy" 에러 해결방법에 대해서 알아보겠습니다. 에러상황Angularjs에서 AWS S3 비디오 url 사용시 다음과 같은 에러가 발생합니다. 해결방법해당 url이 사용가능하도록 합니다. app.filter('trusted', ['$sce', function ($sce) { return function(url) { return $sce.trustAsResourceUrl(url); }; }]); 참고http://stackoverflow.com/questions/21292114/external-resource-not-being-loaded-b..