본문 바로가기

FRONTEND/Vue9

210712 Next VueRouter 사용법 및 Hash 삭제 Next VueRouter(VueRouter v4.x) 사용법 및 Hash 삭제 Next VueRouter(VueRouter v4.x) 사용법 및 Hash 삭제 기존 VueRouter 호출방식 Next VueRouter 기본 Hash 삭제 이번에 새로 시작하게된 프로젝트를 Vue3 로 설정하게되었는데, Vue Router 를 사용하려니 기존 Vue 2 와 조금 다른 설정방식에 적응이 안되었다. 정말 간단하게 딱 두가지만 설명할 것이다. 기존 VueRouter 호출방식 일단 기존 Vue Router 에서 처럼, import VueRouter from 'vue-router' 를 호출하면 undefined 가 나온다. 이제는 모듈로 내보내주므로, 아래와 같은 방법으로는 Router 를 호출할 수 없다. // .. 2021. 7. 12.
Vue3 에 Tailwind CSS 설치하기 How to setup Tailwind CSS in Vue 3 How to Setup Tailwind CSS in Vue 3 A streamlined walkthrough if you hate docs so much. devjavu.space tailwind - vue3 vite Install Tailwind CSS with Vue 3 and Vite - Tailwind CSS Setting up Tailwind CSS in a Vue 3 and Vite project. tailwindcss.com 2021. 5. 10.
Render Functions & JSX Render Function & JSX Nodes, Trees, Virtual DOM createElement Arguments 내부 Data Object 완성 예제 제약 constraints Template을 일반 JS로 대체하기 v-if & v-for v-model Event & Key Modifier Slots JSX Functional Components Attribute, Event를 Child Element/Component에 전달하기 Render Function Example Codes JSX Tree Example Render Function & JSX Vue는 HTML을 빌드하기위해서 template를 사용합니다. 그러나 JS 프로그램 방식으로 생성할 필요한 경우가 있습니다. 여기서 re.. 2020. 11. 11.
200905 Vue - Lifecycle & Hooks Vue instance의 lifecycle & Hooks beforeCreate() new 키워드로 인스턴스를 생성한 바로 직후, vue는 첫번째 lifecycle (beforeCreate) 를 동기적으로 호출합니다. 이 hook을 호출한 후에, vue는 data observation(관찰)과 event를 초기화하는 과정을 진행합니다. create() 다음으로, create 라는 hook을 가지는데, 인스턴스가 생성된 후에 동기적으로 호출됩니다. 이 hook 이 호출되면, vue 인스턴스의 옵션들은 data observation, computed properties, methods 등등을 세팅하는 과정을 진행합니다. 그리고 우리가 제작한 을 가지고 컴파일링 하게됩니다. 이 말은 즉, Virtual DOM.. 2020. 9. 6.
Vue.js (4) - 프록시 Vue Proxy 전체 시리즈에서, 우리는 data 프로퍼티, methods, computed 프로퍼티, 그리고 watchers를 직접적으로 prefix 없이 접근할 수 있는지 살펴봤습니다. 지금부터는 마지막으로 화면 뒤에서 발생하는 일에 대해서 살펴봅니다. 첫번째로, 몇몇 프로퍼티가 $ 표시로 prefix 되어있는지 주목해주세요. 이것은 우리가 접근할 수 있는 Vue 프로퍼티들이고, 이 시리즈중에서 나중에 확인해볼 것들입니다. $options 프로퍼티를 보면, 우리들의 data, computed 프로퍼티, methods 등등을 포함하고 있습니다. 여기에서 우리는 computed 프로퍼티와 method를 확인할 수 있습니다. data 프로퍼티는 function이므로, data를 직접적으로 여기서 확인할 .. 2020. 9. 6.
Vue.js (3) - Computed :: Getter & Setter의 정의 Computed computed 프로퍼티는 methods와 비슷하지만, 아주 강력한 힘을 가지고 있습니다. Computed는 캐싱(cache)을 가지고있다는 것입니다. 그래서 캐싱이 뭔가요? 캐시(cache)는 잠시 저장해 둔다는 의미를 가진 특별한 기능입니다. 하드웨어에서 '캐시 메모리'라고 하면 실제 메모리와 CPU 사이에서 빠르게 전달하기 위해 미리 데이터들을 저장해 두는 좀 더 빠른 메모리입니다. 같은 맥락으로 네트워크 영역에서도 캐시는 로컬 장소에 파일을 미리 받아놓는것을 의미합니다. 웹 서버에서도 매번 번거롭고 느리게 로딩을 해야 하는 파일들을 미리 로딩해두고, 발빠른 응답을 주기도 합니다. 데이터 베이스를 매번 확인해야 하는 것도 캐시 서버를 이용한다면 빠른 응답을 줄 수 있습니다. 먼 곳에.. 2020. 9. 6.
Vue - Virtual DOM에 대하여 Vitual DOM - 가상 DOM DOM 이란? Virtual DOM에 대해 들어가 보기 전에, DOM 이 무엇인지 살펴보도록 합시다. DOM은 Document Object Model(문서객체모델) 이고, 기본적으로 HTML 마크업과 HTML 요소를 위한 객체로 구성되어 있습니다. 이 객체들은 tree 구조로 저장되어있는데, 브라우저는 이 구조를 웹 페이지를 로딩할 때 만들어내고, DOM은 우리에게 interaction(상호작용)과 HTML 요소(elements나 css 등)를 제작할 수 있도록 합니다. DOM을 이용하는것은 규모가 작은 웹 어플리케이션을 작업할때 아주 깔끔하지만, 앱이 커지면 커질수록, DOM을 직접 제작하는일은 느려지며, 비효율적입니다. 이것이 Virtual DOM이 생겨나게 된 이.. 2020. 7. 26.
Vue.js 기본 사용법 정리 Template Syntax - template 문법 Interpolation {{ }} 문자열을 출력 할 수 있습니다. 또한 간단한 JS문법을 interpolation에 사용할 수 있습니다. (if 는 안됩니다) message: {{ message }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }} Directive 1. v-once 딱 한번만 출력하여 수정할 수 없게 지정할 수 있습니다. Can't modify this text : {{ message }} 2. v-html Native HTML 태그를 그대로 프린트 할 수 있습니다. Using v-html: 3. v-bind 양방향 데이터 바인딩 ** HTML attribute.. 2020. 6. 21.
Vuex 구조 및 정리 1. 상태관리자 Flux architecture Flux 는 facebook이 제작한 내부적으로 하나의 스토어로 데이터를 관리하는 모델. 상태관리자를 사용하는 것도 항상 옳은 것은 아닙니다. state가 하나(공유된상태) 이기 때문에 하나를 잘못 바꿀경우 복잡해질 수도 있습니다. 종류) React - redux, Vue - vuex 2. Vuex 기본 구조 store component script내 등록 위치 동작/변경 방법 $store 호출방식 비고 state ...mapState computed this.$store.state 저장된 상태 getters ...mapGetters computed this.$store.getters state를 화면에 바인딩 할 수 있음 actions ...mapMuta.. 2020. 5. 7.

티스토리툴바