본문 바로가기

Front-End64

[nuxt3] plugin 기능과 definePageMeta를 활용한 웹 내 페이지 검색 기능 구현 🎯목표 이렇게 페이지의 타이틀을 검색하면 검색 결과가 나오고, 클릭하면 routing이 되는 기능을 구현해 볼 것이다. 1. 먼저 plugins 폴더가 없다면 폴더를 생성하고 하위 파일을 생성한다. 공식문서에 따르면 "Nuxt는 자동으로 plugins 디렉토리의 파일을 읽고 Vue 애플리케이션 생성 시 로드합니다." 라고 되어있다. 이제 이 기능을 활용해서 웹페이지가 로드될 때 useRouter로 앱에 있는 모든 router 정보를 긁어올 것이다. https://nuxt.com/docs/guide/directory-structure/plugins plugins/ · Nuxt Directory Structure Nuxt automatically reads the files in your plugins di.. 2023. 8. 7.
[nuxt] nuxt3 + vue3 개념 및 용법 정리 🔎nuxt 폴더 구조 . ├── assets/ ├── components/ ├── layouts/ ├── middleware/ ├── pages/ ├── plugins/ ├── static/ ├── store/ ├── nuxt.config.js └── package.json assets 이미지, 스타일시트 및 기타 자산을 저장하는 디렉토리. 이 자산은 빌드 후에 /_nuxt/ 디렉토리에 복사됨. components Vue.js 컴포넌트를 저장하는 디렉토리. layouts 애플리케이션의 레이아웃을 저장하는 디렉토리. 레이아웃은 페이지 컴포넌트를 렌더링할 때 사용됨. middleware 미들웨어 함수를 저장하는 디렉토리. 미들웨어는 페이지 렌더링 전에 실행됨. pages 애플리케이션의 페이지 컴포넌트를 저장.. 2023. 5. 10.
서버 사이드 렌더링과 Nuxt.js 📝 목차 클라이언트 사이드 렌더링 서버 사이드 렌더링 서버 사이드 렌더링과 클라이언트 사이드 렌더링 차이점 서버 사이드 렌더링의 장점 서버 사이드 렌더링의 단점 Nuxt란? Nuxt를 쓰는 이유? 📌 클라이언트 사이드 렌더링 뷰 싱글 페이지 어플리케이션은 클라이언트 사이드 렌더링 방식 서버에서 브라우저로 빈 HTML을 보내고, 화면에서 js로 DOM을 그려주는 방식 이벤트가 발생할 경우 서버로 가지않고 화면에서 값을 변경하는 방식 클라이언트 사이드 렌더링을 이해하기 위해서 뷰 CLI로 생성된 프로젝트의 실행 결과를 살펴보겠습니다. 아래는 뷰 CLI로 생성한 프로젝트의 기본 코드입니다. // src/main.js import Vue from .. 2023. 3. 14.
[javascript] import 할 때 중괄호{} 의 유무 차이 vue나 reate 등등 예제코드 상단에 import 구문은 다음과 같이 두가지 케이스를 볼 수 있다 1. import { a } from '경로' 2. import a from '경로' 어떨때 중괄호를 넣고 어떨 때 변수만 지정을 할까? 바로 export 문법에 따라 결정된다. export 방식에는 이름을 지정해서 내보내기 방법(named)와 기본(default) 내보내기 방법이 있다. /*유명(named) 내보내기*/ // 먼저 선언한 식별자 내보내기 export { myFunction, myVariable }; // 각각의 식별자 내보내기 // (변수, 상수, 함수, 클래스) export let myVariable = Math.sqrt(2); export function myFunction() { .. 2023. 3. 10.
[vue] 코드 저장할 때마다 웹팩 자동 저장(웹팩 감시 옵션) package.json { "name": "response-check", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack --watch" }, "author": "", "license": "ISC", "dependencies": { "vue": "^3.2.45" }, "devDependencies": { "@vue/compiler-sfc": "^3.2.45", "vue-loader": "^17.0.1", "webpack": "^5.75.0", "webpack-cli": "^5.0.1" } } np.. 2023. 1. 9.
[vue] 웹팩 사용하기 해당 포스팅은 인프런 웹 게임을 만들며 배우는 Vue 강의를 참고하여 작성하였습니다. https://www.inflearn.com/course/web-game-vue [무료] 웹 게임을 만들며 배우는 Vue - 인프런 | 강의 간단한 8가지 웹 게임을 만들며 Vue.js와 Vue와 함께 사용되는 Vuex, Vue Router를 배워봅니다., - 강의 소개 | 인프런... www.inflearn.com 해당 포스팅은 vue3 기준으로 작성되어 강의 내용과 상이한 부분이 있습니다! 🎯 스크립트 관리하기가 힘들어 질때 webpack를 설치 ==> npm으로 패키지 관리를 함 📌 사전 설치 목록 node.js npm (node.js 설치 시 자동으로 설치됨) npm이란? Node Package Manager의 .. 2022. 12. 28.

티스토리툴바