이슬먹는 개발자

nestjs 를 사용하면서 내장 로거로 로그를 남길 수 있는데 파일 저장은 지원하지 않기 때문에 winston 이라는 패키지를 사용해 로그를 파일로 기록 해야 한다 npm i nest-winston winston winston-daily-rotate-file winston-daily-ratate-file 패키지와 함께 사용하면 로그파일을 날짜별로 관리 할 수 있다 그 다음 src 폴더 아래에 utils 라는 폴더를 생성하고 winston.util.ts 파일을 생성한다 import { utilities, WinstonModule } from 'nest-winston' import * as winstonDaily from 'winston-daily-rotate-file' import * as winston ..

기본적으로 설정할 것들은 거의 다 했기 때문에 간단하게 TODO앱을 만들어보면서 nuxt3에 조금씩 적응해 나가보겠다 nuxt.config.ts 파일 설정 // https://v3.nuxtjs.org/api/configuration/nuxt.config export default defineNuxtConfig({ typescript: { shim: false, }, app: { head: { charset: 'utf-8', viewport: 'width=device-width, initial-scale=1', title: 'My Todo App', }, }, css: ['~/assets/scss/main.scss'], }) 전역으로 설정할 Head 태그를 config 파일에 설정해 주었다 css 설정이 ..

이번에 nuxt3를 도입하기로 결정한 가장 큰 이유는 SEO 문제를 해결하기 위해서이다 nuxt3 공식문서에 SEO를 설정하기 위한 3가지 방법을 제시하고 있다. 1. App Head nuxt.config.ts 파일에 아래와 같이 설정을 하면 전역으로 설정이 가능하다 export default defineNuxtConfig({ app: { head: { charset: 'utf-16', viewport: 'width=500, initial-scale=1', title: 'My App', meta: [ // { name: 'description', content: 'My amazing site.' } ], } } }) 공통된 항목은 nuxt.config.ts 파일에 설정 한뒤 각 페이지마다 동적으로 변경되..

sass/scss 를 사용 할 것인데 따로 패키지를 설치해 줘야 한다 yarn add -D sass sass-loader 위 두 패키지를 설치만 해주고 따로 설정은 하지 않아도 scss를 사용 할 수 있다 이제 root 경로에 assets 폴더를 만들고 scss 파일을 여기서 관리 하면 된다 nuxt 에서는 assets 폴더에서 css, image, font 등의 파일을 넣어놓고 관리 하기 때문에 scss 라는 폴더로 구분을 해서 관리하면 좋다 assets/scss/main.scss 라는 파일을 vue 파일에 임포트 하려면 style 태그 아래에 @import '~/assets/scss/main/scss'; 이런식으로 사용 하면 된다. style은 적용하기가 매우 쉽기 때문에 패키지만 잘 설치하면 문제 ..

typescript + eslint + prettier 를 설정 하기 위해 아래의 패키지를 설치해 준다 yarn add -D eslint vue-eslint-parser eslint-plugin-vue eslint-config-prettier @nuxtjs/eslint-config-typescript @typescript-eslint/eslint-plugin typescript 패키지 설치가 끝났으면 파일들을 만들어 줘야 한다 처음으로 .prettierrc 파일을 root 경로에 생성 한다 { "semi": false, "singleQuote": true, "tabWidth": 2 } 위와 같이 옵션을 설정 해서 쓸 수 있다. 필요한 옵션은 그때 그때 찾아서 사용하면 된다 그리고 vscode에 setti..

기존에 회사 프로젝트가 Vue3로 되어 있던걸 리뉴얼 하게 되었는데 SEO 문제 때문에 Nuxt3를 사용해 볼 예정이다 Nuxt3가 2022년 11월 16일 첫번째 정식버전이 출시되었다 국내에 nuxt3 강의가 많지 않아서 직접 공식문서를 보며 하나하나씩 진행해 볼 예정이다 기본적으로 node가 설치된 환경이라고 가정하고 node 설치에 대해서는 언급하지 않는다 공식 문서에 나와 있는 권장 설치 항목들은 nodejs 최신 LTS 버전과 vscode 그리고 vscode extension 인 volar(Vue Language Features) extension을 설치하라고 나와 있다. (node 는 현 시점으로 최신버전이 18 버전인데 아래와 같은 에러가 난다면 16버전의 LTS로 사용 해도 된다) Expe..