Nuxt3

Nuxt Framework 애플리케이션을 배포하기 위해 알아야할 기본적인 커맨드

하나의 repository가 있다. 이 저장소의 코드는 A라는 기존 템플릿 코드에 B 템플릿 코드를 합친 형태다. 하나의 도메인 안에서 A와 B 화면이 유기적으로 사용되어야했고, A와 B에 각각에 있는 스타일이나 기능 코드를 쉽게 가져다 쓰기 위해 이렇게 병합된 형태가 되었다. 그런데 애플리케이션의 사이즈가 커지면서 점점 패키지 충돌이 발생하게 되었다. 그래서 처음부터 다시 설계하여 분리하는것이 적절하다고 판단했고, 이 때 Monolithic Repository 구조를 적용하게되었다.

Nuxt3에서 HTML 내용 일부를 PDF 파일로 추출하는 방법 📌 기능구현에 사용된 패키지 : “html2pdf” 패키지 설치 npm install --save html2pdf.js 위 명령을 입력하면 package.json 파일의 dependencies 안에 "html2pdf.js": "^0.10.1", 한줄 추가된 것을 확인할 수 있다. HTML to PDF Code PDF로 다운로드하고자 하는 특정 HTML 요소의 id를 html-to-pdf 라고 가정 // PDF 다운로드 버튼 추가 예시 <button type="button" @click="generatePdf"> PDF Download</button> PDF 다운로드 기능 js <script setup lang="ts"> import html2pdf from "html2pdf.js" const generatePdf = () => { let element = document.getElementById('html-to-pdf'); let opt = { margin: 0, filename: 'myfile.pdf', image: { type: 'jpeg', quality: 0.98 }, html2canvas: { scale: 2 }, jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' } }; // New Promise-based usage: html2pdf().set(opt).from(element).save(); } </script>

Nuxt3에서는 vue 파일에 특별한 설정이 없다면 해당 페이지의 레이아웃은 “default” 레이아웃으로 설정된다. default 레이아웃 예시 <template> <div> <slot /> </div> </template> 실무에서 사용중인 레이아웃 예시 ~/layouts/ 경로에 default.vue 파일을 추가하여 설정할 수 있다. <template> <div id="page" class="page font--jakarta"> <HeaderLayout1 /> <slot /> <FooterLayout1 /> </div> </template> *default.vue * ※ 참고 slot 태그는 페이지를 렌더링하는 특수한 태그 해당 태그가 존재하지 않을 경우, 이상 동작할 수 있으므로 반드시 포함 필요 단, 페이지 영역을 숨겨할 경우는 v-show 등을 사용하여 제어해야 하며, v-show는 반드시 slot이 아닌 상위 Element에 위치해야 한다 ...

우선 fetch와 $fetch를 사용한 각각의 예시코드부터 확인해보자. fetch 사용 예시 import { useAsyncData } from 'nuxt3' export default { setup() { const { data, pending, error, refresh } = useAsyncData('user', () => fetch('http://localhost:8080/api/user/1') .then(response => response.json()) ) return { data, pending, error, refresh } } } $fetch 사용 예시 const { data, pending, error, refresh } = await useAsyncData( 'mountains', // key () => $fetch('https://api.nuxtjs.dev/mountains') ) fetch, $fetch 차이점 위의 코드를 살펴보면 둘 다 useAsyncData의 두 번째 매개변수로 함수를 전달하고 있다. 이 함수는 데이터를 가져오는 데 필요한 비동기 작업을 수행하며, 이 함수가 반환하는 Promise의 결과값이 useAsyncData의 data로 설정된다. 이 중 첫 번째 코드는 fetch 함수를 직접 사용하여 HTTP 요청을 보낸 후 .then 메서드를 사용하여 응답을 처리하는 내용이다. 그리고 응답값을 JSON 형식으로 파싱하기 위해 response.json()을 직접 호출하고있다. response.json()은 Fetch API에서 제공하는 메서드로, 응답값을 JSON 형식으로 파싱한다. 두 번째 코드에서 $fetch를 사용하면 이 메서드가 자동으로 적용된다. $fetch는 내부적으로 fetch를 사용하되, 추가적인 처리를 수행한다. 그 중 하나가 바로 응답을 자동으로 JSON 형식으로 파싱하는것이기 때문에 $fetch를 사용하면 response.json()을 호출하지 않아도 된다. ...

Nuxt3에서는 useAsyncData와 useFetch라는 훅을 지원한다. 이 둘은 코드 구성 형태가 비슷하기 때문에 차이점은 무엇인지 정리해보았다. useFetch useFetch는 created 단계 이후에 실행 (즉 ,새로운 Vue 인스턴스가 만들어진 후 데이터가 준비된 후에 실행) 이렇게 하면 useFetch가 실행되는 시점에는 컴포넌트의 데이터가 이미 준비되어 있으므로, 이 데이터를 기반으로 서버로부터 필요한 데이터를 요청하거나 필요한 작업을 수행할 수 있다. 이는 비동기적으로 데이터를 처리하는 웹 애플리케이션에서 매우 중요한 부분 useAsyncData useAsyncData는 created 단계 이전에 즉, 첫 렌더링이 시작되기 전에 실행 ...