개요 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..
개요 경우에 따라 다르겠지만 일반적으로 웹 또는 모바일 앱을 개발하고 운영하기 위해서는 애플리케이션의 배포, 데이터의 저장, 사용자의 인증 등의 서비스를 제공하기 위한 서버가 필요합니다. 파이어베이스는 웹과 모바일 앱 개발에 필요한 공통적이고 기본적인 기능을 제공하는 **BaaS(**Backend as a Service)입니다. 따라서 Angular 프로젝트에서도 이를 이용하여 개발을 한다면 클라이언트 측의 개발에만 집중하여 전체적인 애플리케이션의 완성을 앞당길 수 있습니다. 이를 위한 환경을 설정해보도록 하겠습니다. Firebase 설정 파이어베이스를 앞선 과정을 통해 생성한 Angular 프로젝트에 연결하도록 하겠습니다. 두 단계로 나누어 진행하도록 하겠습니다. 새로운 Firebase 프로젝트를 생성..
본 포스트는What is a Compilation Context in Angular? 의 내용을 개인적인 메모의 목적으로 재게재 한 것입니다. 컴필레이션 컨텍스트 (Compilation Context) 컴파일할 파일, 컴포넌트 등의 모음입니다. 이것이 의미하는 것은 해당 컨텍스트에는 컴파일러가 어떠한 에러도 없이 컴파일 하는데 필요한 모든 것을 포함하고 있다는 것입니다.typescript 를 컴파일할 때, 여러분은 컨텍스트를 files, include 또는 exclude 옵션을 사용한 tsconfig.json 파일을 이용하여 제어합니다. 이 방식의 typescript 컴파일러는 여러분의 ts 코드간의 관계를 찾을 때 여러분이 제공한 파일들만 사용할 것 입니다. Angular 컴파일러 (Angular Co..
본 포스트는Angular - Architecture overview 의 내용을 개인적인 메모의 목적으로 재게재 한 것입니다. 아키텍처 개요 Angular는 HTML과 타입스크립트(TypeScript)를 이용하여 웹브라우저에서 동작하는 응용 프로그램(클라이언트)을 개발하기위한 플랫폼이자, 프레임워크입니다. Angular는 타입스크립트로 작성되어 있습니다. 타입스크립트 라이브러리를 이용하여 Angular 앱에서 필수적으로 사용해야하는 코어(Core) 부분과 Angular 앱에서 선택적으로 사용할 수 있는 기능들을 구현하였습니다._NgModule_은 Angular 앱의 기본 구성 요소로 내부에 포함되어 있는 컴포넌트(components) 들에 대한 컴필레이션 컨텍스트(compilation context)1를 ..
