Fall in IT.

안녕하세요.오늘은 Angular5에서 쉽게 email 유효값을 검사하는 방법에 대해서 알아보도록 하겠습니다. 사용 방법Angular5에서는 API로 email validation 체크하는 directive를 제공하기 때문에 간단하게 유효값 검사가 가능합니다.하지만, @뒤에 .(dot)은 검사할 수 없습니다. 예제 코드 결과 참조 https://stackoverflow.com/questions/42366649/angular2-email-validationhttps://angular.io/api/forms/EmailValidator 모두 즐거운 코딩하세요~

안녕하세요. 오늘은 Angular 프로젝트에서 npm script 를 등록하고 사용하는 방법에 대해서 알아보도록 하겠습니다. npm script 사용하기Angular Cli를 사용하여 프로젝트를 생성하면, 아래 명령어를 사용하여 프로젝트를 실행할 수 있습니다. 프로젝트 실행$ npm start 테스트 코드 실행$ npm test 등등.. 이처럼 다양한 명령어를 사용하여 프로젝트를 동작시킬 수 있는 이유는 어딘가에 해당 스크립트가 등록되어 있기 때문입니다.package.json 파일을 열어보면 "scripts" 부분에 start, build, test, lint 등 다양한 스크립트가 등록되어 있는 것을 확인할 수 있습니다. 그렇다면, 우리가 custom한 스크립트를 npm 명령어를 사용하여 실행하고 싶을땐..

안녕하세요. 오늘은 angular-cli를 사용하여 만든 angular5 프로젝트에 scss를 사용할 수 있도록 설정하는 방법에 대해서 알아보겠습니다. 목적angular-cli를 사용하여 만든 angular5 프로젝트에 scss 적용합니다. 진행방법angular-cli를 사용하여 프로젝트를 최초로 생성할때 scss 적용해보기이미 만들어진 angular-cli에 scss 적용해보기 (angular-cli가 설치되어 있다는 가정하에 설명합니다.) angular-cli를 사용하여 프로젝트를 최초로 생성할때 scss 적용하는 방법style 옵션에 scss를 설정하고 프로젝트를 생성합니다.$ ng new my-app --style=scss 이미 만들어진 angular-cli 프로젝트에 scss 적용하는 방법scs..

안녕하세요. 오늘은 Angular5에서 Slick-carousel 사용법에 대해서 알아보겠습니다. 목적Angular5에서 slick-carousel 사용해보기 작업 순서angular-cli를 사용하여 angular5 프로젝트를 생성하고 실행해봅니다.생성한 프로젝트에 slick-carousel 플러그인을 설치하고 적용합니다. angular5 프로젝트 생성 및 실행 (node.js, npm, angular-cli가 설치되어 있다는 가정하에 설명합니다.)angular-cli를 사용하여, angular5 project를 생성합니다. 프로젝트명은 slick-sample-app으로 합니다. - $ ng new slick-sample-app 프로젝트가 생성되면 해당 프로젝트 안으로 진입합니다. - $ cd slick..

최근 만들어진 웹사이트중 가장 심플하게 잘 만들어졌다고 생각하는 kakaobank 사이트를 직접 copy 해보고,어떤 plugin들을 사용했고, 레이아웃은 어떤 방식으로 잡았는지에 대해서 알아보는 시간을 가져보았습니다. 결국, 어떻게 만들었길래 이렇게 이쁠까? 란 궁금증을 해결하기 위해서 직접 똑같이 만들어 보았습니다. 목적kakaobank 사이트와 똑같은 사이트를 구현합니다.구현하면서 필요한 라이브러리 또는 스킬들도 하나하나 정리합니다. 요구사항kakaobank와 최대한(?) 똑같이 만들어야합니다. (따라서, 구현시 사용되는 모든 리소스는 kakaobank의 리소스를 참조하여 개발합니다.)오픈소스로 공개하고 스터디 용으로만 사용합니다. 구축환경angular5를 사용하여 개발합니다. (angular-cl..

안녕하세요.오늘은 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..

안녕하세요. 오늘은 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 상에서만 검증되게 하는 방식입니다. - 검증 대상이 적고 단순한 검증을 수행할 때 적합한 방식 입니다. 모델 주도 검증 - 템플릿 내부에서 검증을 수행하지 않고, 컴포넌트의 외부 모듈에서 검증되게 하는 방식입니다. - 검증 과정이 복잡할 경우 적합한 방식 입니다. 템플릿 주도 검증에 대해서 간단한 예제코드를 통해 알아보도..