Vue3 Nuxt3 AG Grid 사용 방법
·
프로그래밍 일기/Front-End
https://www.ag-grid.com/ AG Grid: High-Performance React Grid, Angular Grid, JavaScript GridAG Grid is a feature-rich datagrid for major JavaScript frameworks, offering filtering, grouping, pivoting, and more. Free Community version or 2-month Enterprise trial available.www.ag-grid.com npm install ag-grid-vue3 ag-grid-community  삭제
Nuxt3 구글 애널리틱스, 애드센스 등록 방법 Analytics, Adsense
·
프로그래밍 일기/Front-End
npx nuxi@latest module add gtag또는npm install nuxt-gtag# nuxt.config.tsexport default defineNuxtConfig({ modules: ['nuxt-gtag'], gtag: { id: process.env.GOOGLE_ANALYTICS_ID }, app: { head: { script: [ { hid: 'adsense', async: true, src: `https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${process.env.GOOGLE_ADSENSE_ID}`, ..
nuxt 폴더구조
·
프로그래밍 일기/Front-End
assets = image / css / js 등과 같은 정적인 파일이 존재함components = vue 컴포넌트 파일이 존재함layouts = 레이아웃 구조로 만든 vue 파일이 존재함node_modules = npm을 통해 설치한 라이브러리들이 존재함pages = 라우터 역할을 함nuxt.config.ts = nuxt설정파일package.json = 라이브러리 버전 관리package-lock.json = 라이브러리들의 관계를 볼 수 있음
node 버전 변경 nvm 설치
·
프로그래밍 일기/Front-End
https://github.com/coreybutler/nvm-windows/releases Releases · coreybutler/nvm-windows A node.js version management utility for Windows. Ironically written in Go. - coreybutler/nvm-windows github.com 해당 링크를 통해 nvm을 설치해야 합니다. nvm-setup.exe 파일을 설치합니다. node -v nvm list available nvm install 18.19.0 nvm list nvm use 18.19.0 위와 같은 순서로 진행하면 정상적으로 node 버전을 바꿀 수 있습니다.
[Nuxt3] BootStrap 부트스트랩 css, js 적용
·
프로그래밍 일기/Front-End
버전 정보 Nuxt 3.6.2 nuxt.config.ts export default defineNuxtConfig({ devtools: { enabled: true }, app: { head: { link: [ { rel: 'stylesheet', href: 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css', integrity: 'sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD', crossorigin: 'anonymous' } ], script: [ { src: 'https://cdn.jsdelivr.net/npm/bootstra..
Nuxt3 vue3 formData 다중 파일 업로드, 파라미터 전달
·
프로그래밍 일기/Front-End
test.vue const addFile = async () => { const formData = new FormData(); for (var i = 0; i < multipleFile.value.length; i++) { formData.append('fileArray', multipleFile.value[i]); // 파일 객체 } await useFetch('http://localhost:8080/file/add', { method: 'POST', body: formData, }); } formData.append를 같은 이름으로 넘겨 주어야 합니다. 단일 파일의 경우 for문만 제거하면 됩니다. const multipleFile = ref([]); const multipleFileChange =..