이슬먹는 개발자

기본적으로 설정할 것들은 거의 다 했기 때문에 간단하게 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은 적용하기가 매우 쉽기 때문에 패키지만 잘 설치하면 문제 ..