[ Frontend ]

[ Frontend ]/Vue.js & Nuxt.js

[Nuxt3] Nuxt가 제공하는 페이지 이동 컴포넌트 <NuxtLink>

NuxtLink 개요는 Vue Router의 와 html의 태그를 모두 대체하는 Nuxt3의 내장 컴포넌트이다.내부 링크와 외부 링크를 자동으로 구분하고, 최적화를 사용하여 링크를 렌더링 한다.NuxtLink는 내부 링크인지 외부 링크인지 자동으로 감지하고 적절한 방식으로 처리합니다.내부 링크 (/main 같은 경로)는 Vue Router를 사용해 클라이언트 사이드 내비게이션을 수행합니다.외부 링크 (https://example.com)는 일반적인 태그로 렌더링 됩니다.내부 라우팅이렇게 내부 경로의 /main으로 설정되어 있는 경우, 내부의 다른 페이지에 연결한다. Main Page 외부 라우팅이렇게 외부 경로 url이 설정되어있는 경우, 외부 웹사이트에 연결한다. Nuxt Doc..

[ Frontend ]/Vue.js & Nuxt.js

[Nuxt3] 사용자 정의 페이지 메타 함수 definePageMeta()

definePageMeta()pages/ 디렉터리에 있는 페이지 컴포넌트에 대한 메타데이터를 설정하는 데 사용할 수 있는 컴파일러 매크로 함수이다. 주요 요소들은 아래와 같다.definePageMeta로 정의한 메타데이터의 주요 요소 • alias여러 URL을 동일한 페이지로 연결할 수 있도록 별칭을 지정합니다. • keepalive페이지를 로 감싸 상태를 유지하도록 설정합니다. • key의 렌더링을 제어하기 위한 키 값을 설정합니다. • layout페이지에 사용할 레이아웃을 지정합니다. false로 설정하면 레이아웃을 비활성화할 수 있습니다. • layoutTransition / pageTransition페이지 및 레이아웃 변경 시 사용할 전환 효과를 설정합니다. • middleware페이지를 로드하기..

[ Frontend ]/Vue.js & Nuxt.js

[Nuxt3] Props 선언 및 사용

1.  (구)Nuxt 2 Props 선언 props: { title: { type: String, default: '', }, seq: { type: Number, default: 1, }, },2. Nuxt3 Props 선언title 뒤에 ? 가 붙어있는 것을 볼 수 있다.?가 있을 경우 undefined도 할당할 수 있고, ?가 없을 경우 오직 string만 가능하다.interface Props { title?: string; seq?: number;}defineProps(); 3. default값 설정interface Props { title: string; seq: number;}withDefaults(defineProps(), ..

[ Frontend ]/Vue.js & Nuxt.js

[Nuxt3] 개발환경 구성 Get started

Nuxt 3 공식 문서https://nuxt.com/docs/getting-started/installation Installation · Get Started with NuxtGet started with Nuxt quickly with our online starters or start locally with your terminal.nuxt.com0. node version# node versionnvm install 20nvm use 20npm -v1. create nuxt빈 폴더 하나를 만들고, 터미널에서 pnpm으로 설치했다.npx nuxi@latest init nuxt3_lecture 2. package manager 선택npm 선택 3. package.json 수정 (nuxi)nuxt3부터..

[ Frontend ]/Vue.js & Nuxt.js

[Vue.js] Vue cli로 Vue.js 프로젝트 생성하기

vue cli 공식 사이트https://cli.vuejs.org/ Vue CLI cli.vuejs.org node, npm 버전 확인node, npm 버전을 확인하고, 없으면 설치해야한다.node -vnpm -v vue cli 설치npm install -g @vue/cli vue 프로젝트 생성vue create  vue 프로젝트 실행npm run serve

[ Frontend ]/Vue.js & Nuxt.js

[Vue.js] 기본 문법 알아보기 / Vue 인스턴스, 컴포넌트 / Vue 디렉티브

Vue 인스턴스: new Vue()new Vue()로 생성한 Vue 인스턴스는 화면에 뿌려지는 최상위(Root) 컴포넌트를 말한다. 해당 Vue Instance에서 여러 컴포넌트를 호출에서 사용하는 것이 Vue의 기본 문법이다. 아래의 5가지 요소들을 가장 많이 사용한다.el: '#app'Vue 인스턴스가 관리할 DOM 요소를 지정한다. 위쪽에 id=app인 에 Vue 인스턴스를 연결한다.해당 Vue 인스턴스는 위에 id=app인 태그만을 관리한다.dataVue 인스턴스에서 관리할 데이터를 정의한다.  {{ message }}  message란 이름의 데이터를 Vue 인스턴스 내에서 this.message로 사용 가능하고, DOM 요소에서는 {{message}}로 가..

[ Frontend ]

[Mock Rest API] jsonplaceholder 소개 (REST API 테스트용 가상 데이터 제공 사이트)

해당 사이트에 정말 쉽고 편하게 설명되어 있기 때문에, 기록용으로 쓰는 글입니다.프런트엔드 쪽은 처음 공부해 보는데 정말 편리한 사이트들이 많네요...(이게 말로만 듣던 javascript 생태계..?) jsonplaceholder.typicode.comhttps://jsonplaceholder.typicode.com/ JSONPlaceholder - Free Fake REST API{JSON} Placeholder Free fake and reliable API for testing and prototyping. Powered by JSON Server + LowDB. Serving ~3 billion requests each month.jsonplaceholder.typicode.com  위의 사이트..

[ Frontend ]/Vue.js & Nuxt.js

[Nuxt / axios] axios 사용법 / require() of es module 에러 해결 방법

axios 사용법axios를 import 하고, async - await와 함께 axios.get을 사용했다.axios base-url을 설정하는 방법 / import 없이 사용npm install @nuxtjs/axiosnuxt.config.jsmodules: [ '@nuxtjs/axios', ], // Axios 설정 axios: { baseURL: 'http://localhost:8080', // 기본 URL 설정 },export default { async created(){ const response = await this.$axios.get('/blog/happyhsryu/posts'); console.log(response); }} 이렇게 하면 require(..

HSRyuuu
'[ Frontend ]' 카테고리의 글 목록