vue8 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. 210708_Virtual DOM 이 빠른 이유 VirtualDOM 이 빠른 이유 브라우저 렌더링 에 대한 이해 VirtualDOM 이 빠른 이유 프론트앤드를 공부하다보면, "Virtual DOM" 이라는 단어를 한번씩 마주치게 됩니다. 많이 사용되는 프레임워크들은, 주로 Virtual DOM 을 사용해서 속도를 올립니다. 어떻게 이렇게 빠른걸까요? 그리고 왜 실제 DOM 은 느리고 비효율적일까요? 브라우저 렌더링 에 대한 이해 사실 프론트앤드 개발자들은 복잡하더라도 DOM 을 기본적으로 이해할 필요가 있습니다. HTML/CSS 페이지만 서버에서 요청해온다고 가정해보겠습니다. JS 는 여기서 필요하지 않습니다. HTML/CSS 형식의 파일을 응답으로 받은 후에는, 아래와 같은 일들이 일어납니다. 1. HTML 파싱 브라우저는 HTML 파일들을 파싱하고.. 2021. 7. 8. 210425_Jest 사용법 Jest 기본 사용법 Test 파일 구성 Test File 이름 짓기 Jest 코드 작성 Jest 로 스냅샷 테스트하기 비동기 테스트 패턴 테스트 더블 (Test double) 모의 함수 만들기 (Mocking) SpyOn 사용하기 (Spying) Jest 기본 사용법 Spharos CMP 프로젝트의 Jest 는 package.json dependencies 내부에 @vue-plugin-e2e-cypress 로 정의되어있으며, 하단 스크립트로 실행 할 수 있습니다. --mode 는, 개발기 dev, 배포용 prod 으로 변경할 수 있습니다. "scripts": { "test:unit": "vue-cli-service test:unit --mode prod" }, "devDependencies": { "@.. 2021. 5. 28. 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 (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. 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. 이전 1 다음
