Page tree
Skip to end of metadata
Go to start of metadata

angular, firebase, rxjs 전체 개요 - 박재성

angular, firebase 프로젝트 생성 및 배포 - 박재성

"앵귤러 첫걸음" 책의 1, 2장과 firebase를 추가해 실습 진행

목표

  • angular 기반으로 "app works"를 출력하는 프로젝트를 생성한 후 firebase에 배포하는 경험

angular 프로젝트 생성 및 서버 시작

firebase 프로젝트 생성

firebase 프로젝트 초기화

https://alligator.io/angular/deploying-angular-app-to-firebase/ 문서 참고

  • $ npm install -g firebase-tools
  • firebase login
  • firebase init
    • Hosting: Configure and deploy Firebase Hosting sites 선택
    • public 디렉토리를 dist로 변경
    • default 프로젝트 설정에서는 앞에서 생성한 프로젝트 선택
  • $ ng bulid

  • firebase deploy

  •  브라우저에서 https://{저장소 id}.firebaseapp.com 으로 접속. 앞의 예제의 경우 https://slipp-todo.firebaseapp.com 으로 접속

여러 개의 firebase 저장소와 연결 설정

  • .firebaserc 파일에 다음과 같이 설정

    {
      "projects": {
        "default": "slipp-todo",
        "prod": "slipp-todo-prod"
      }
    }
  • $ firebase use prod
  • $ firebase deploy

Firebase 인증, DB와의 연결 설정

  • firebase console의 "웹 앱에 firebase 추가" 메뉴 클릭해 key를 복사한 후 src/environments/environment.ts 파일에 복사

    export const environment = {
      production: false,
      firebase: {
        apiKey: '',
        authDomain: '',
        databaseURL: '',
        storageBucket: '',
        messagingSenderId: ''
      }
    };

angular 아키텍처 - 이호영

"앵귤러 첫걸음" 책의 3장 앵귤러 아키텍처로 소스코드 리뷰하는 방식으로 진행

추천 에디터: vs code     

                   다운로드 링크 : https://code.visualstudio.com/Download

 준비 작업: 

                    Git 설치 :   https://git-scm.com/book/ko/v1/%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0-Git-%EC%84%A4%EC%B9%98

                    소스코드 clone  :     git clone https://github.com/not-for-me/hb-angular-first.git

                    git:  분산 형상관리 시스템. 협업도구.

                    추천 클라이언트 :  CLI,  GUI:  Source Tree(https://www.sourcetreeapp.com/)

                   node 6.0 이상 버전 설치: https://nodejs.org/ko/download/

        •      node 설치하면 npm 도 설치된다.

                    angular 글로벌 환경에 설치 

                                    npm i @angular/cli -g

                    npm 모듈 설치

                                 각 프로젝트의 package.json 파일이 있는 폴더에서 

                                 npm i

3.1 뷰 구성 살펴 보기

  •  화면 맛보기
    • HTML 과 .ts 파일의 상호 작용
  •  컨포넌트 생명 주기 중 ngAfterViewInit 이벤트 맛보기
    • 기타 이벤트는 6장에서.
  •  컨포넌트 트리구조로 화면 조립
    • 화면은 결국 조립해서 만든다.
  •  데이터 바인딩 방식 살펴보기
    • 단방향: 삽입식, 프로퍼티 바인딩, 이벤트 바인딩
    • 양방향: FormModule 제공하는 방식

3.2 뷰 구성에 도움주는 기타 기능들

  • 의존성 주입. 
  • 지시자 중 *ngFor 맛보기
  • 파이프

3.2.5  전체 구조 다시 살펴 보기

  • 모듈

3.3 화면에 디자인 입히기

      사전 설치 필요: 

           1. npm i --save @angular/cdk

           2. npm i --save @angular/animations @angular/material hammerjs

          정상 설치 확인 후 ng server

  • 머터리얼, 부트스트랩 등 패키지도 nmp 패키지 형태로 설치가능.
  • CSS(Cascading Style Sheets): 마크업 구조(XML, HTML)와 style 구조를 분리하기 위해 태여남. 

3.4 정리.

  • No labels