Vue 스터디
Vue.js 에서 HOC(High Order Component) 만들기
HOC(High Order Component)란? 자주 반복해서 작성하게 되는 코드를 함수화하여 재사용하는 것을 말합니다. 리액트에서는 자주 반복되는 코드를 공통화한 뒤 props로 컴포넌트를 받아 로직을 처리한 후에 컴포넌트를 리턴해주는 형식으로 많이 사용됩니다. 이러한 개념을 Vue.js에서도 비슷하게 사용할 수 있습니다. //NewsView.vue //JobsView.vue 위의 두 소스코드는 가져오는 데이터만 다르지 그 외의 구조나 로직들은 똑같은 것을 볼 수 있습니다. 이러한 컴포넌트 위에 새로운 컴포넌트를 정의하고 공통된 로직을 모아두는 기법이라고 보면 됩니다. 하지만 이러한 HOC는 공통 요소를 뽑아내 코드를 재사용할 수 있다는 장점이 있지만, 많이 사용할 수록 컴포넌트의 레빌이 깊어져서 복..
Vue.js 라우터 네비게이션 가드
네비게이션 가드란? 네비게이션 가드란 뷰 라우터로 특정 URL에 접근할 해 해당 URL의 접근을 막는 방법을 말합니다. 예를 들어, 사용자의 인증 정보가 없으면 특정 페이지에 접근하지 못하게 할 때 사용하는 기술입니다. 종류 애플리케이션 전역에서 동작하는 전역 가드 특정 URL에서만 동작하는 라우터 가드 라우터 컴포넌트 안에 정의하는 컴포넌트 가드 전역 가드 전역 가드는 라우터 인스턴스를 참조하는 객체로 설정할 수 있습니다. 먼저, 전역 가드 설정을 위해 라우터 인스턴스를 생성합니다. var router = new VueRouter(); 다음으로 beforeEach() API를 호출합니다. router.beforeEach(function (to, from, next) { // to : 이동할 url //..
Nuxt.js에서 Axios 통신
Nuxt.js에서 Axios 통신 설치 프로젝트에 @nuxtjs/axios 종속성을 추가합니다. yarn add @nuxtjs/axios그 다음 nuxt.config.js 의 module 섹션에 추가해줍니다. export default{ ... modules : ['@nuxtjs/axios'], ... } 이렇게 하면 nuxt 앱에서 $axios를 사용할 수 있습니다. 위 과정도 귀찮다면 yarn create nuxt-app 으로 프로젝트를 생성할 때 axios를 추가해서 생성해주면 자동으로 의존성처리를 해줍니다. 옵션 export default { axios: { // Axios options here } } 위 코드처럼 nuxt.config.js 파일의 axios 섹션 안에 옵션을 추가..
Nuxt.js 란?
Nuxt.js 란? Nuxt.js는 Vue.js 애플리케이션 개발을 보다 강력하고 사용하기 쉽게 만들어주는 프레임워크이다. 말그대로 설명하면 프레임워크를 더 쉽게 사용하기 위해 만든 프레임워크라고 한다. Nuxt.js의 등장배경 Nuxt.js가 등장한 배경에 대해 알기 위해서는 SPA와 CSR, SSR에 대해 알고 있어야 합니다. 단일 페이지 애플리케이션 - SPA(Single Page Application) 기존의 웹 서비스는 요청시마다 서버로부터 리소스와 데이터를 요청해서 화면에 렌더링하는 방식이었지만 SPA는 최초에 한번 페이지를 전체 로드하고 그 이후부터는 특정 부분에 대해서만 데이터를 바인딩하는 방식 Client측에서 렌더링을 한다고 CSR(Client Sid Rendering)이라고도 합니다...
Vuex
Vuex Vuex란? 무수히 많은 컴포넌트의 데이터를 관리하기 위한 상태 관리 패턴이자 라이브러리 React의 Flux 패턴에서 기인함 Vue.js 중고급 개발자로 성장하기 위한 필수 관문 Flux란? MVC 패턴의 복잡한 데이터 흐름 문제를 해결하는 개발 패턴 -Unidirectional data flow 데이터 흐름이 한 방향으로 흐름 (단반향 통신) => Vue의 데이터 흐름을 보면 비슷하다. action : 화면에서 발생하는 이벤트 또는 사용자의 입력 dispatcher : 데이터를 변경하는 방법, 메서드 (모델을 바꾸기 위한 방법) model : 화면에 표시할 데이터 view : 사용자에게 비춰지는 화면 MVC 패턴 vs Flux 패턴 비교 MVC 패턴 Flux 패턴 MVC 패턴의 문제점 기능 ..
Vuex란?
Vuex란? 무수히 많은 컴포넌트의 데이터를 관리하기 위한 상태 관리 패턴이자 라이브러리 React의 Flux 패턴에서 기인함 Vue.js 중고급 개발자로 성장하기 위한 필수 관문 Flux란? MVC 패턴의 복잡한 데이터 흐름 문제를 해결하는 개발 패턴 -Unidirectional data flow 데이터 흐름이 한 방향으로 흐름 (단반향 통신) => Vue의 데이터 흐름을 보면 비슷하다. action : 화면에서 발생하는 이벤트 또는 사용자의 입력 dispatcher : 데이터를 변경하는 방법, 메서드 (모델을 바꾸기 위한 방법) model : 화면에 표시할 데이터 view : 사용자에게 비춰지는 화면 MVC 패턴 vs Flux 패턴 비교 MVC 패턴 Flux 패턴 MVC 패턴의 문제점 기능 추가 및 ..
How the virtual DOM works in Vue.js
Vue.js는 빠른 로딩 속도와 쉬운 확장성으로 유명한 자바스크립트 프레임워크입니다. 일부 기능은 필요에 따라 실제 DOM을 업데이트하기 위해 가상 DOM을 사용하는 데 직접 연결할 수 있습니다. 가상 DOM을 이해하는 것은 Vue.js를 배우는 데 필요한 조건은 아니지만, 새로운 Vue 개발자들이 뒤에서 일어나는 몇몇 일들을 이해하는데 확실히 도움이 될 수 있다. The DOM itself This is a Heading This is a paragraph. Vue.js 가상 DOM에 대해 이야기하기 전에 DOM 자체가 무엇인지 이해하는 것이 중요합니다. Document Object Model 또는 DOM은 모든 마크업 언어(사용자 HTML)를 연결된 노드로 처리하는 인터페이스의 일종이다. 트리와 같은..
Vue.js의 Virtual DOM이란?
Vue.js의 핵심 기능과 성능 및 확장성의 큰 요소는 필요할 때 실제 DOM을 효율적으로 업데이트하기 위해 Virtual Dom을 활용하는 것입니다. 이 과정은 아래에서 설명하는 컴포넌트 템플릿 렌더링 단계에서 백그라운드에서 발생합니다. 먼저 DOM이 무엇인지 살펴보겠습니다. DOM(Document Object Model)이란? DOM(Document Object Model)은 HTML 문서를 트리 구조로 취급하는 인터페이스로, 각 노드가 문서의 일부를 나타내는 객체이다. DOM은 노드의 논리적 트리와 같은 문서를 나타냅니다. DOM 메서드는 트리에 대한 프로그래밍적인 방식의 액세스를 허용하며 문서의 내용, 스타일, 구조를 변경할 수 있게 해줍니다. 노드는 또한 DOM에 이벤트 핸들러를 연결할 수 있습..