반응형
1. Node 설치하기 Nuxt.js 프레임워크를 설치하기 위해서는 node 18 버전 이상 설치가 필요합니다. https://nodejs.org/en Node.js — Run JavaScript Everywhere Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. 개발 툴 설치하기 Nuxt.js 를 사용하기 위해서는 개발 툴이 필요한데, Nuxt에서는 VS Code 를 추천하고 있습니다. https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefin..
Nuxt.js 는 현업에서도 아주 많이 사용하고 있는 프레임워크 중 하나입니다. Nuxt.js 란? Vue를 이용한 풀스택 프레임워크 입니다. 풀스택 웹사트이를 개발 하기 위해서는 단순히 UI 뿐만 아니라, Data Fetch, SSR, Route 등 많은 것을 신경써야하지만 Nuxt.js 를 사용하면 이 모든 것을 직관적으로 빠르게 개발을 할 수 있습니다. Nuxt.js 기능 라우팅 파일 기반 라우팅으로, Vue를 이용하면 Vue-router를 이용하여 매번 동일한 코드를 반복하여 작성해야 하지만, Nuxt에서는 파일만으로 라우팅 기능을 구현할 수 있습니다. 코드 분할 Nuxt.js 초기 애플리케이션 로딩 시에 자동으로 필요한 코드만 가져오도록 하여 초기 로딩속도 개선 향상에 도움을 줍니다. SSR 기..
Nuxt2에서 아래와 같이 fetch 속성을 사용하려고 하였는데, 컴포넌트 데이터가 업데이트가 되지 않았습니다. async fetch({ $api }) { try { const { data } = await $api.getUserList(); this.list = data; } catch (e) { console.log('error', e) } }, 원인 fetch는 nuxt 2.12 버전 이후로 업데이트가 되었습니다. fetch hook을 사용하려면 fetch안의 파라미터를 넣으면 안됩니다. 파라마터를 넣으면, 업데이트 이전의 fetch가 동작해서 컴포넌트가 업데이트 되지 않습니다. 해결방법 fetch 파라미터를 지우고, this를 통해서 데이터 구성요소를 업데이트 하면 정상 작동합니다. async f..
Nuxt에서 데이터를 가져오는 방법이 두 가지 있습니다. asyncData fetch Nuxt에서 클라이언트 사이드 방식이 mounted()를 통해서 데이터를 호출할 수는 방식을 지원하긴 합니다. 하지만 서버 측에서 데이터를 렌더링 하는 앱을 만들기 위해서는 위 두 가지 훅을 사용해야 합니다. asyncData 페이지 내에서만 사용 가능 비동기적으로 생성되는 데이터일 때 사용 생성한 데이터는 data()로 생성한 데이터와 병합 data()와 차이 없음 단지 동기 / 비동기 차이 this 사용 불가능 async asyncData({ params }) { const response = await fetch(`https://api.example.com/data/${params.id}`); const data ..
Nuxt 에서 modules와 buildModules 속성이 있습니다. modules Nuxt에서 모든 기능을 제공하면 매우 복잡하고 어려워서, 사용자가 프로젝트별로 모듈을 추가 할 수 있습니다. modules에서 정의한 모듈은 Nuxt가 부팅될때 순차적으로 실행이 됩니다. nuxt.config.js 에서 modules 옵션을 설정할 수 있습니다. export default defineNuxtConfig({ modules: [ // Simple usage '@nuxtjs/eslint-module', // With options ['@nuxtjs/eslint-module', { /* module options */ }] ] }) buildModules nuxt v2.9 이후로 buildModules 속성이..