모듈, 프레임웍/Angular

개요 어플리케이션에서 사용자의 로그인을 요구하는 것은, 사용자의 정보를 바탕으로 어플리케이션에서 맞춤 정보를 제공하기 위해서 입니다. 예를 들어 어플리케이션에 따라서는 사용자의 로그인 여부에 따라, 혹은 사용자의 등급에 따라 정보에 대한 접근을 제한해야 하는 경우도 있습니다. 대표적인 경우가 어플리케이션의 관리자 페이지에 대한 접근 제한입니다. 이를 위해서는 앞선 포스트에서 보았던 것처럼 사용자의 Login 상태에 따라 화면 및 링크를 숨겨 접근을 차단 할 수도 있습니다. 하지만 이러한 방법을 모든 컴포넌트에 적용하게 되면 설정이 여기저기 산재되어 지속적인 유지 관리가 쉽지 않습니다. 이번 포스트에서는 Angular 에서 제공하는 Router 모듈을 이용하여 입력받은 URL 에 따라 표시할 수 있는 컴포..

본 포스트는 Angular - User Input 을 개인적인 학습목적으로 번역 및 정리한 것 입니다. 사용자 입력 링크나 버튼을 클릭하거나 텍스트를 입력하는 것과 같은 사용자가 웹페이지에서 하는 행동에 따라 DOM 이벤트가 발생합니다. 이렇게 발생한 DOM 이벤트를 Angular 에서는 이벤트 바인딩 구문을 사용하여 컴포넌트의 이벤트 핸들러와 DOM 이벤트를 연결(바인딩) 합니다. 사용자 입력을 이벤트에 바인딩 Angular 이벤트 바인딩 을 사용하면 DOM 이벤트에 응답(처리)할 수 있습니다. 많은 DOM 이벤트는 사용자 입력에 의해 트리거됩니다. 이러한 이벤트에 바인딩하여 사용자 입력을 받을 수 있습니다.DOM 이벤트와 사용자 입력을 연결하려면 DOM 이벤트 이름을 괄호로 묶고 따옴표 안에 템플릿문..

개요 Angular 튜토리얼에서는 프로젝트에서 사용하는 외부 라이브러리를 npm 을 이용하여 프로젝트 내에 설치 후, import 를 통하여 해당 모듈을 사용합니다.하지만 프로젝트에서 사용하는 외부 라이브러리가 CDN(Content Delivery Network) 으로 제공되는 경우에 대한 예시 및 방법이 확인되지 않아 인터넷을 검색하여 그 결과를 정리하여 놓습니다. 본문 우선 사용하고자 하는 js 파일을 src/index.html 파일에 포합시킵니다.예를 들어 카카오 로그인 기능을 사용하기 위하여 SDK 라이브러리를 불러오는 것은 다음과 같습니다.▼ /src/index.html loading 스크립트를 컴포넌트에서 사용할 때, Typescript 에서 컴파일 에러가 발생하는 것을 방지하기 위해 스크립트..

개요 Icon 폰트 라이브러리를 사용하면 웹/앱을 좀 더 분명하고, 생동감 있게 표현할 수 있습니다.Angular 프로젝트에 Angular Material 모듈을 적용하게 되면, 기본적으로 구글의 머터리얼 아이콘 폰트를 별도의 설정 없이 사용할 수 있습니다.Font Awesome 은 회사의 로고와 같은 머터리얼 아이콘 폰트에서 제공하지 않는 추가적인 아이콘이 필요할 경우 사용할 수 있는 Icon 폰트 라이브러리입니다.이번 포스트에서는 Font Awesome 을 Angular 프로젝트에 설치해보도록 하고, 간단한 사용방법을 확인해보도록 하겠습니다. 설치 Font Awesome 은 공식적으로 angular-fontawesome 이라는 모듈을 제공하기 때문에 Angula1.r Project 에 적용하는 것이 ..

개요 Flex Layout 은 flexbox CSS 와 mediaQuery 를 사용하여 Angular 에서 반응형 레이아웃을 쉽게 만들 수 있는 API 를 제공하는 모듈입니다. 반응형 레이아웃은 웹사이트에 접속하는 기기의 화면의 크기에 따라 레이아웃이 변경되는 것을 말합니다.다음과 같이 동일한 https://angular.io/ 사이트를 접속하였을 경우라도 PC(위) 와 모바일 기기(아래)로 각각 접속한 화면 구성이 서로 다르다는 것을 확인할 수 있습니다. 모바일 기기의 화면이 PC 화면에 비하여 너비가 좁으므로 메뉴등이 화면에 표시되지 않고 삼선(三) 단축아이콘으로 축소되었음을 확인할 수 있습니다.▼ https://angular.io (PC 접속) ▼ https://angular.io (모바일기기 접속..

개요 Angular 의 기본 기능을 활용하여 음악을 신청하는 게시판의 기능을 작성해보도록 하겠습니다. 본 내용은 다음의 Angular Tutorial 을 기반으로 작성되었습니다. Angular - Tour of Hero The Application Shell Angular - Tour of Hero The Hero Editor Angular - Tour of Hero Display a Heroes List 프로젝트 생성 $ ng new music-vote 우선 Angular Cli 의 ng new 명령어를 사용하여 어플리케이션의 토대를 만들도록 합니다. music-vote 는 이번 내용에서 만들고자 하는 어플리케이션의 이름입니다. 이후, Angular Material 을 설치하여 어플리케이션 전체의 색상..

개요 Angular Material이란, 2014년 구글에서 제시한 디자인 가이드라인인 머터리얼 디자인(Material Design)을 Angular 애플리케이션에서 쉽게 사용할 수 있도록 구현한 모듈입니다. 구글에서 직접적으로 관리하는 모듈인 만큼, 다양한 예제와 문서화가 잘되어 있어 초보자가 사용하기 좋습니다. (저와 같은 웹개발 비경험자의 입장에서는 간단히 적용하여 그럴듯한 모양새의 애플리케이션을 완성할 수 있게 해주는 고마운 스킨(?)입니다.) 이번 포스트에서는 이 Angular Material을 새로운 Angular Project에 적용해보도록 하겠습니다. 모든 내용은 Angular Material의 공식 가이드인 Getting stared 문서를 참고하였습니다. 본 포스트의 내용에 따라 Ang..

본 포스트는What is a Compilation Context in Angular? 의 내용을 개인적인 메모의 목적으로 재게재 한 것입니다. 컴필레이션 컨텍스트 (Compilation Context) 컴파일할 파일, 컴포넌트 등의 모음입니다. 이것이 의미하는 것은 해당 컨텍스트에는 컴파일러가 어떠한 에러도 없이 컴파일 하는데 필요한 모든 것을 포함하고 있다는 것입니다.typescript 를 컴파일할 때, 여러분은 컨텍스트를 files, include 또는 exclude 옵션을 사용한 tsconfig.json 파일을 이용하여 제어합니다. 이 방식의 typescript 컴파일러는 여러분의 ts 코드간의 관계를 찾을 때 여러분이 제공한 파일들만 사용할 것 입니다. Angular 컴파일러 (Angular Co..