angular

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

본 포스트에서는 간단히 Phaser 3 의 기초를 학습하기 위하여 벽돌깨기 게임을 만들어 보도록 하겠습니다. 기본이 되는 내용은 2D breakout game using Phaser 을 바탕으로 진행하였으며, 원본의 코드는 Phaser 2 (CE) 버전을 기반으로 하고 있어, 여기서는 Phaser 3 에서 동작할 수 있도록 소스코드를 수정하였습니다. 사전작업 Phaser 를 사용할 수 있도록 환경을 구성합니다. 혹은 다음의 Stackblitz 링크에서 시작 합니다. 초기환경 링크 프레임 워크 초기화 게임의 기능을 삽입하기 전에 우선 전체적인 구조를 잡아주어야 합니다. Phaser 는 장면(scene) 단위로 게임을 관리합니다. 때문에 우선 장면(scene) 클래스를 생성한 후 이를 Angular 에 추가..

개요 Phaser는 HTML5 Game Framework로 이를 사용하면 우리는 JavaScript를 사용하여 Game을 쉽게 개발할 수 있습니다. 하지만 하나의 Game이 APP으로써 공통적인 요소로 사용자 관리(로그인), 게임자료 관리, (필요에 따라) 실시간 통신 등이 추가로 필요합니다. Angular와 같은 Web Framework를 사용하면 이러한 공통 요소를 좀 더 손쉽게 Game에 추가할 수 있습니다. 이번 포스트에서는 우선 Angular 프로젝트에서 Phaser를 사용할 수 있도록 설정해보도록 하겠습니다. 환경설정 Angular 우선 다음 링크를 참고하여 Angular를 사용할 수 있도록 프로젝트를 생성합니다. Angular 개발환경 설정하기 Angular 시작하기 Phaser 3 설정 P..

개요 앞서 진행하였던 Firebase 의 이메일과 소셜네트워크 계정을 이용한 사용자 인증을 통해 획득되는 기본적인 정보는 사용자의 식별자와 uid 정보입니다. 하지만 이외에도 로그인 과정을 통해 획득할 수 있는 사용자의 정보는 다양합니다. 필요에 따라 이러한 사용자의 추가 정보를 수집하여 데이터베이스에 저장하면 어플에 등록된 사용자에 대한 반복작업을 수행하는데 도움이 될 것입니다.이번 포스트에서는 인증(로그인) 과정을 통해 획득한 사용자의 상세한 정보를 Firebase 파이어 베이스의 데이터베이스 중 하나인 Cloud Firestore 에 저장해 보도록 하겠습니다.기존에 구현하였던 로그인 기능을 바탕으로 수정합니다. 사용자의 정보를 데이터베이스에 저장하기 사용자의 정보를 데이터베이스에 저장하기 위해, A..

개요 이번에는 이메일을 이용하여 회원가입 및 로그인 기능을 구현하도록 하겠습니다. 이메일을 통한 회원가입 및 로그인 기능은 SNS를 통한 인증과 크게 다르지 않으므로 간단히 진행할 수 있습니다. 파이어베이스에서 이메일/암호 인증 활성화 이메일/암호 인증을 사용할 수 있도록 파이어베이스의 이메일/암호인증 기능을 활성화합니다. Auth Service 추가 앞선 과정에서 사용하였던 auth 서비스를 기반으로 내용을 작성하도록 하겠습니다. ▼ /src/app/auth.service.ts ... 생략 ... @Injectable() export class AuthService { authState: FirebaseAuthState = null; constructor(public afAuth: AngularFire..

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

개요 앞선 포스트에서는 Angular Material, Flex Layout의 사용법을 습득하여 로그인 기능 구현을 위한 화면을 구성하였습니다. 이번 포스트에서는 본격적으로 Firebase에서 제공해주는 사용자 인증 API를 사용하여 회원가입 및 로그인 서비스를 구현하도록 하겠습니다. 본문 사전 준비 Firebase 연결하기 포스트의 내용을 참고하여 앞서 생성한 로그인 프로젝트를 Firebase 프로젝트와 연결합니다. 추가로 파이어베이스의 사용자 인증 기능을 사용할 예정이므로 라이브러리의 인증모듈(AngularFireAuthModule)도 import 합니다. ▼ /src/app/app.module.ts import { NgModule } from '@angular/core'; // ... 생략 // A..

개요 대부분의 웹 애플리케이션(웹 앱)은 어떠한 유형이라도 사용자 인증 기능이 공통적으로 사용됩니다. 많은 웹 앱은 외부 SNS 서비스 또는 이메일을 통한 로그인 기능을 제공합니다. 또한 사용자와의 커뮤니케이션 및 상호작용을 통해 콘텐츠를 생성하는 웹 앱은 이러한 사용자의 정보를 저장할 필요가 있습니다. 사용자 인증 서비스를 직접적으로 개발을 하는 것은 최소의 개발인력 또는 1인 개발자로 구성된 웹 어플리케이션의 개발에는 적합하지 않을 수 있습니다. 다행히도 파이어베이스는 모바일 및 웹 앱 모두에서 사용 가능한 사용자 인증 서비스를 제공하기 때문에 이를 직접 개발할 필요 없이 쉽게 Angular 프로젝트에 설정하여 적용할 수 있습니다. 이번 포스트에서는 파이어베이스의 사용자 인증 서비스를 사용하여 여러분..