Nuxt 에서 오류 처리하는 방법 createError, showError, NuxtErrorBoundary

프론트엔드 개발을 하면 많은 오류를 만날 수 있습니다. 서버에서 오류가 날 때,Vue 렌더링 할 때,클라이언트에서 오류 등개발 중 또는 Product 시점에서도 오류가 나타날 수 있습니다. 오류가 나타날 것을 예상해 적절하게 처리를 해준다면, 사용자도 개발자도 더 편리하게 사이트를 사용할 수 있습니다. Nuxt에서 오류처리 하는 방법에 대해서 알아보도록 하겠습니다. 오류 처리하는 방법치명적 오류 ▶ 전체 페이지가 오류 페이지로 전환비치명적 오류 ▶ 오류가 발생 createError()사용법 const { data } = await useFetch(`/api/products`)if (!data.value) { throw createError({ statusCode: 404, statusMessage: '..

• format_list_bulleted Develop/Nuxt
• · 2024. 6. 2.
• textsms

Nuxt Universal Rendering, Hydration 이란?

Nuxt에는 여러 가지 렌더링 모드가 있습니다.Universal Rendering , Client-side Rendering, Hybrid Rendering Universal Rendering일반적으로 Nuxt에서 기본적으로 렌더링 되는 방법입니다. url이 요청이 되면 서버에서 Vue.js 코드를 실행하여 화면에 보일 HTML 문서를 구성합니다.클라이언트에서는 사용되어지는 이벤트, 페이지 전환 등 동적으로 움직여야 할 자바스크립트 코드를 로드합니다. 이러한 과정을 정적인 페이지를 동적인 페이지로 전환하는 것을 Hydration (수화)라고 합니다. 장점서버에서 코드를 실행하여 HTML 문서를 구성하여 내려주니, 빠르게 접근이 가능하고 검색 엔진 최적화에 좋습니다. Hydration 과정Hydration..

• format_list_bulleted Develop/Nuxt
• · 2024. 5. 11.
• textsms

NuxtLink 사용법, 반드시 사용해야하는 이유

란?NuxtLink 는 Nuxt 프레임워크에서 Vue의 와 태그를 대체해서 사용할 수 있는 컴포넌트 입니다.지능적으로 내부링크인지, 외부링크인지 파악합니다.Nuxt2 에서는 내부링크만 사용 가능하였지만, Nuxt3 부터 외부링크도 사용이 가능하게 되었습니다. 반드시 사용해야 하는 이유내부링크의 경우에는prefetching 기능으로 미리 해당 페이지에 대한 정보를 가지고 와서화면이 이동하게 되면 빠르게 다음 페이지로 넘어갈 수 있도록 합니다.이러한 기능으로 사용자 경험을 최적화 합니다. 현재 화면에 표시되지 않고, 숨어있으면 다음 페이지의 정보를 로드하지 않고, 스크롤로 내려서 화면에 보이는 순간데이터를 가지고 오는 아주 똑똑한 녀석입니다. 반대로 외부링크의 경우에는 a tag rel 속성을 지정합니다..

• format_list_bulleted Develop/Nuxt
• · 2024. 5. 9.
• textsms

Nuxt - 컴포넌트 계층 app.vue, pages, components, layouts

Nuxt에서는 여러 컴포넌트 계층을 사용합니다.이러한 컴포넌트 계층을 사용하면 사이트의 UI 개발을 좀 더 쉽고 빠르게 구현할 수 있습니다. app.vue기본적으로 진입점(entry point)입니다.사이트의 모든 경로에 대한 컨텐츠를 렌더링 합니다. 기본 사용법 Hello World! Page 디렉터리 사용할 때  Components재사용 가능한 UI 컴포넌트들을 저장합니다. (ex, button, header...)따로 명시적으로 import 없이 자동으로 가져올 수 있는 특징이 있습니다.| components/--| AppHeader.vue--| AppFooter.vue Pages페이지 컴포넌트들을 표시합니다.페이지 폴더 내에 있는 파일들을 각각 다른 경로를 나타냅니다.app.v..

• format_list_bulleted Develop/Nuxt
• · 2024. 5. 5.
• textsms

Nuxt 프로젝트 설정하기

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..

• format_list_bulleted Develop/Nuxt
• · 2024. 4. 23.
• textsms

Nuxt 특징 기능 소개

Nuxt.js 는 현업에서도 아주 많이 사용하고 있는 프레임워크 중 하나입니다. Nuxt 란?Vue를 이용한 풀스택 프레임워크 입니다.풀스택 웹사트이를 개발 하기 위해서는 단순히 UI 뿐만 아니라,Data Fetch, SSR, Route 등 많은 것을 신경써야하지만Nuxt.js 를 사용하면 이 모든 것을 직관적으로 빠르게 개발을 할 수 있습니다. Nuxt 기능라우팅파일 기반 라우팅으로, Vue를 이용하면 Vue-router를 이용하여 매번 동일한 코드를 반복하여 작성해야 하지만,Nuxt에서는 파일만으로 라우팅 기능을 구현할 수 있습니다.코드 분할Nuxt.js 초기 애플리케이션 로딩 시에 자동으로 필요한 코드만 가져오도록 하여 초기 로딩속도 개선 향상에 도움을 줍니다.SSR기본적으로 서버가 내장되어있어서,..

• format_list_bulleted Develop/Nuxt
• · 2024. 4. 22.
• textsms

Nuxt fetch() 컴포넌트 데이터가 업데이트가 안돼요

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..

• format_list_bulleted Develop/Nuxt
• · 2023. 11. 18.
• textsms

Nuxt asyncData / fetch 설명 차이점 무엇을 사용하는 것이 좋을까?

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 ..

• format_list_bulleted Develop/Nuxt
• · 2023. 7. 24.
• textsms

Nuxt modules / buildModules 란? 사용법

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 속성이..

• format_list_bulleted Develop/Nuxt
• · 2023. 7. 6.
• textsms