이번 포스팅에서는 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()"을 추가를 해주면 클릭시 닫히는 걸 방지할..

sequelize는 NodeJS ORM입니다. ORM은 Object Relational Mapping의 줄임말로 관계형 데이터베이스를 객체에 자동으로 맵핑해주는걸 말합니다. 사용을 하기 위해 먼저 NPM을 통해서 sequelize와 mysql2를 설치해주도록 하겠습니다. $ npm i sequelize mysql2 그 다음 sequelize를 호출을 해서 설정을 해주도록 하겠습니다. sequelize constructor는 아래와 같습니다. Sequelize(database, username, password, options); constructor안에 있는 options에 timezone을 설정해서 서울 시간대를 설정해줄수 있습니다. timezone을 'Asia/Seoul'로 설정을 해주면 됩니다. c..

IntelliJ와 같은 개발도구를 쓰다 보면 종종 맥 업데이트 이후에 Cannot Run Git 등과 같이 Git 경로를 찾지 못하는 문제가 발생을 할 때가 있습니다. 그럴 경우 Intellij에 커밋 명령어를 호출을 하게 되면 변경된 사항을 찾지 못하는 등의 문제가 발생을 하게 됩니다. 그럴때 git을 실행하면 종종 아래와 같은 오류 코드를 볼수를 볼수가 습니다. xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun 위와 같은 문제를 해결하는 방법으로 터미널에서 아래의 명령어를 실행을 해서..

안녕하세요. 이번 포스팅은 HTML에 있는 contenteditable을 이용해서 editor를 만들기입니다. 만드는 방법은 아주 간단합니다. input, textarea와 같은 텍스트 입력 태그가 아닌 div와 같은 태그에 contenteditable="true"를 추가해주면 됩니다. 그렇게 되면 아래와 같이 원래는 텍스트 입력이 불가능한 div 태그에 아래와 같이 텍스트를 입력할 수 있습니다. 그럼 이제 텍스트 입력이 되는 것을 확인했으니 CSS를 적용해보겠습니다. 그렇게 하면 아래와 같이 에디터 영역이 보이게 됩니다. 이제 추가로 editor 메뉴를 만들어 보겠습니다. 기본적으로 굵기 적용, 기울임 적용, 밑줄 적용, 취소선 적용, 숫자 목록, 기호 목록 메뉴를 만들어보겠습니다. 먼저 메뉴 버튼을 ..