WEB.DEV(33)
-
[NodeJS] Express + Typescript 구성하기
이번 포스팅에서는 Typescript를 이용해서 Express를 구성하는 것을 해보겠습니다. 먼저 필요한 라이브러리를 npm을 이용해서 설치를 해주겠습니다. $ npm i express $ npm i -D nodemon typescript @types/express @types/node 그리고 명령어를 통해서 typescript 환경 파일을 생성해주도록하겠습니다. $ npx tsc --init 위 명령어를 실행을 하면 tsconfig.json 파일이 생성이 됩니다. { "compilerOptions": { /* Visit https://aka.ms/tsconfig.json to read more about this file */ /* Basic Options */ // "incremental": true..
2021.03.03 -
[Angular] Angular Material Bottom Sheet을 이용한 하단 메뉴 만들기
이번 포스팅에서는 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..
2021.02.28 -
[Angular] Angular Material Badge를 이용한 알림 뱃지 만들기
이번 포스팅에서는 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..
2021.02.27 -
[Angular] Angular Material Autocomplete를 이용한 자동완성 만들기
이번 포스팅에서는 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..
2021.02.27 -
[Angular] Material mat menu 유지하고 닫기
이번 포스팅에서 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()"을 추가를 해주면 클릭시 닫히는 걸 방지할..
2021.02.27 -
[NodeJS] Sequelize Timezone 설정
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..
2021.02.27