프로그래밍/Vue 썸네일형 리스트형 [Nuxt3] eCharts 적용 (+ 에러) 기존에 chart.js 를 이용 하다가 chart.js 보다 그래프 종류도 다양하고 사용하기도 편한 것 같아서 eCharts를 도입하기로 결정 했다 단점은 중국에서 만든거라 자료가 좀 부족한 것 말고는 괜찮다 이 마저도 공식문서를 보면 거의 다 컨트롤 가능 한 수준이다 SyntaxError: Cannot use import statement outside a module .... import { __extends } from "tslib"; eCharts를 설치하고 사용하려고 하면 위와 같은 에러가 날 수 있다 여러 가지 검색을 해서 찾아봤을 땐 package.json 에 "type": "module" 을 추가하라는 글 들이 많아 적용해 보았지만 nuxt3에서는 작동하지 않았다 그래서 한참을 찾다가 nu.. 더보기 [Nuxt3] 5. 간단한 TODO 앱 만들어보기 기본적으로 설정할 것들은 거의 다 했기 때문에 간단하게 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] 4. SEO를 위한 meta 태그 관리하기 이번에 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 파일에 설정 한뒤 각 페이지마다 동적으로 변경되.. 더보기 [Nuxt3] 3. Style 적용하기 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은 적용하기가 매우 쉽기 때문에 패키지만 잘 설치하면 문제 .. 더보기 [Nuxt3] 2. Eslint + prettier + Typescript 설정 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.. 더보기 [Nuxt3] 1. 프로젝트 생성 및 설정 기존에 회사 프로젝트가 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.. 더보기 [Vuex] 페이지 새로고침시 상태 초기화 방지 Vue를 이용한 프로젝트를 진행하면 상태 관리 라이브러리로 vuex를 많이 이용하게 된다. 이용방법도 쉽고 편하지만 한 가지 문제가 있는데 브라우저에서 뒤로 가기 또는 새로고침을 하게 되면 vuex에 저장되어 있던 state들이 초기화가 된다는 점이다. 예를 들어 회원이 로그인한 상태를 유지하고 있다가 페이지가 새로고침 되면 로그아웃 하지도 않았는데 로그인 상태가 해제되어 버리는 상황이 나올 수 도 있다. 이 문제는 이슈가 워낙 많아서 npm을 만들어 놓은 게 있어 그걸 가져다 쓰게 되면 이런 문제를 해결할 수 있게 된다. // npm 이용시 npm i vuex-persistedstate // yarn 이용 시 yarn add vuex-persistedstate 위에 패키지를 설치해 주면 바로 사용이 가.. 더보기 이전 1 다음
