이번 포스팅에서는 Angular Material Bottom Sheet을 이용해서 특정한 동작을 했을 때 하단에서 메뉴가 올라오는 하단 메뉴를 만들어보겠습니다. Angular Material UI component infrastructure and Material Design components for Angular web applications. material.angular.io 먼저 버튼 모듈인 MatButtonModule과 하단 메뉴를 위한 MatBottomSheetModule 모듈을 추가해주도록 하겠습니다. import {BrowserModule} from '@angular/platform-browser'; import {NgModule} from '@angular/core'; import {A..

이번 포스팅에서는 Angular Material Badge를 이용해서 알림 개수를 표시하는 뱃지를 만들어보겠습니다. Angular Material UI component infrastructure and Material Design components for Angular web applications. material.angular.io 먼저 아이콘을 보여주기 위한 MatIconModule과 뱃지를 표시해줄 MatBadgeModule 모듈을 추가해줍니다. import {BrowserModule} from '@angular/platform-browser'; import {NgModule} from '@angular/core'; import {AppComponent} from './app.component..

이번 포스팅에서는 Angular Material의 Autocomplete를 이용해서 input에 자동 완성 기능을 만들어 보도록 하겠습니다. Angular Material UI component infrastructure and Material Design components for Angular web applications. material.angular.io 먼저 Input을 위한 MatInputModule과 MatFormFieldModule, 그리고 자동 완성을 위한 MatAutocompleteModule, 그리고 input에 formControl 등 form을 사용하기 위해 FormsModule과 ReactiveFormsModule 모듈을 추가해줍니다. // app.module.ts import..

이번 포스팅에서 angular material의 mat-menu를 클릭했을 시 패널을 유지하고 특정 버튼을 클릭했을 시 닫히도록 해보겠습니다. mat-menu에 대한 자세한 내용은 Angular Material 페이지에서 확인할 수 있습니다. Angular Material UI component infrastructure and Material Design components for Angular web applications. material.angular.io 기본적으로 mat-menu를 사용하면 메뉴가 나온 다음 메뉴 패널 안을 클릭을 해도 무조건 닫히게 됩니다. 아래의 코드를 mat-menu안에 (click)="$event.stopPropagation()"을 추가를 해주면 클릭시 닫히는 걸 방지할..

Bitbucket은 Atlassian에서 운영하는 Git 버전 관리 저장소입니다. Github에는 CI/CD를 위한 Action이 존재하고 Bitbucket에는 pipeline이 있습니다. 아래에서 확인 할 수 있다시피 무료 버전의 경우 한달에 50분이라는 build 시간이 주어집니다. 추가로 시간이 더 필요한 경우에는 업그레이드를 통해서 build 시간을 늘릴수 있습니다. Standard의 경우에는 한달에 2,500분, Premium의 경우에는 한달에 3,500분이 주어집니다. Bitbucket - Pricing | Atlassian Bitbucket is the Git solution for professional teams. Bitbucket Cloud is free for teams of 5. B..

오늘은 Angular CLI에 대해서 포스팅을 하도록 하겠습니다. 간단하게 Angular CLI는 NPM을 통해서 쉽게 설치를 할 수 있습니다. $ npm i -g @angular/cli 처음으로 알아 볼 건 프로젝트 생성입니다. 프로젝트 생성은 아래와 같이 new를 사용하여 생성을 할 수 있습니다. $ ng new [project-name] 추가로 option을 추가할 수 있는 옵션이 꽤 많지만 몇가지만 알아보도록 하겠습니다. 먼저 prefix 옵션에 대해서 알아보겠습니다. 기본 적으로 Angular는 prefix가 app으로 설정이 되어 있습니다. 만약 이걸 다른 걸로 변경을 하고 싶다면 --prefix 옵션(짧게 -p)을 사용하면 됩니다. 예를 들어 prefix를 my로 사용을 하고 싶다면 아래와 ..