분류 전체보기18 [Nuxt] Nuxt3에서 pinia-plugin-persistedstate 사용하여 Pinia 상태 유지하기 pinia-plugin-persistedstate pinia로 상태 관리를 하는 경우 화면을 새로고침 할 때 store 안에 존재하는 값들이 초기화 된다. 이 때 로컬 스토리지를 이용하여 상태를 유지할 수 있는데 이를 간편하게 해주는 플러그인이다. vuex의 vuex-persistedstate와 유사하다. 설치 및 설정 방법 yarn add pinia-plugin-persistedstate 로컬 스토리지를 사용하도록 설정 // plugins/persistedstate.client.ts import { createPersistedState } from "pinia-plugin-persistedstate"; export default defineNuxtPlugin((nuxtApp) => { nuxtApp.$.. 2022. 8. 2. [TypeORM] Azure MySQL DB와 암호화 통신하기 MySQL TLS 통신 데이터베이스와 통신을 하는 경우 기본적으로 암호화 보안 프로토콜인 SSL/TLS이 권장된다. SSL/TLS로 통신을 하는 경우 전달하는 데이터의 기밀성, 데이터 무결성, 인증을 제공한다. 따라서 중간자 공격(MITM)으로부터 보호할 수 있다. MySQL은 설정을 통해 SSL 통신을 유무를 설정할 수 있고, 버전에 따라 지원하는 SSL/TLS 통신이 다르다. 만약 직접 데이터베이스를 구축하고, SSL/TLS 구성을 해야한다면 다음을 참고하여 설정을 할 수 있다. Creating SSL and RSA Certificates and Keys using MySQL Database에서 지원하는 SSL/TLS 설정 현재 토이프로젝트에선 Azure Database for MySQL을 사용하고 .. 2022. 7. 17. [Nuxt] Nuxt3에서 Windi CSS + Iconify 사용하기 Windi CSS Windy CSS는 CSS 프레임워크로 Tailwind CSS의 대안으로 소개되었다. 클래스 그루핑과 공통 클래스 선언을 할 수 있고 Tailwind보다 빌드 타임이 빠르다고 한다. 아래 설정한 내용은 Github에서 확인할 수 있다. Windi CSS 설치 nuxt-windicss와 animation을 위해 플러그인도 같이 설치했다. yarn add nuxt-windicss @windicss/plugin-animations nuxt.config 설정 buildModules에 nuxt-windicss를 추가해주면 된다. import { defineNuxtConfig } from 'nuxt3' export default defineNuxtConfig({ buildModule.. 2022. 7. 7. [Nuxt] Nuxt3에서 Vuetify + mdi 사용하기 Vuetify Vue.js 기반의 UI 프레임워크다. Material Design Spec에 따라 개발되었다. 현재 2.x.x 버전은 Vue3를 지원하지 않기 때문에 Nuxt3에서는 Vuetify 3버전 이상을 사용해야 한다. 아래 설정한 내용은 Github에서 확인할 수 있다. Vuetify 설치 sass와 vuetify 최신 버전을 설치해야 한다. yarn add vuetify@next sass 설치를 하고 나면 package.json파일이 아래와 유사한 형태가 될 것이다. { "private": true, "scripts": { "build": "nuxt build", "dev": "nuxt dev", "generate": "nuxt generate", "preview": "nuxt preview".. 2022. 7. 7. [Nuxt] Nuxt3에서 Element Plus 사용하기 Element Plus Vue3의 UI Framework로 UI 관련해서 다양한 기능을 지원한다. 아래 설정한 내용은 Github에서 확인할 수 있다. 설치 전 시작하기 전 다음 명령어로 Nuxt3 프로젝트가 생성되어 있어야 한다. npx nuxi init nuxt-app 그리고 Nuxt3의 프로젝트 폴더에 의존성이 모두 추가되어 있어야 한다. cd nuxt-app yarn 설치 Element UI를 사용하려면 다음 의존성을 설치해야 한다. sass element-plus @element-plus/icons-vue unplugin-vue-components unplugin-auto-import yarn add sass element-plus @element-plus/icons-vue unplugin-vu.. 2022. 7. 7. [TypeORM] EntityRepository deprecated EntityRepository is deprecated TypeORM 0.3.0 부터 EntityRepository가 deprecated 되었다. nest에서 기존의 EntityRepository 을 사용하는 것과 사용방법이 유사한 해결방법을 찾게 되었다. 직접 데코레이터를 생성하고, 데코레이터가 적용된 Repository를 받아줄 모듈을 사용하는 방법으로 해결 방법은 다음과 같다. @CustomRepository decorator 생성 // db/typeorm-ex.decorator.ts import { SetMetadata } from "@nestjs/common"; export const TYPEORM_EX_CUSTOM_REPOSITORY = "TYPEORM_EX_CUSTOM_REPOSITORY";.. 2022. 6. 22. 이전 1 2 3 다음
