분류 전체보기
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 패턴의 문제점 기능 ..
ES6 간단 개념
ES6란? ECMAScript 2015와 동일한 용어 2015년은 ES5(2009년) 이래로 진행한 첫 메이저 업데이트가 승인된 해 최신 Front-End Framework인 React, Vue, Angular에서 권고하는 언어 형식 ES5에 비해 문법이 간결해져서 익숙해지면 코딩을 훨씬 편하게 할 수 있음 Babel 구 버전 브라우저 중에서는 ES6의 기능을 지원하지 않는 브라우저가 있으므로 transpiling이 필요 ES6의 문법을 각 브라우저의 호환 가능한 ES5로 변환하는 컴파일러 const & let 블록 단위 {}로 변수의 범위가 제한되었음 const : 한번 선언한 값에 대해서 변경할 수 없음(상수 개념), but 객체나 배열의 내부는 변경할 수 있음 let : 한번 선언한 값에 대해서 다..
Vuex란?
Vuex란? 무수히 많은 컴포넌트의 데이터를 관리하기 위한 상태 관리 패턴이자 라이브러리 React의 Flux 패턴에서 기인함 Vue.js 중고급 개발자로 성장하기 위한 필수 관문 Flux란? MVC 패턴의 복잡한 데이터 흐름 문제를 해결하는 개발 패턴 -Unidirectional data flow 데이터 흐름이 한 방향으로 흐름 (단반향 통신) => Vue의 데이터 흐름을 보면 비슷하다. action : 화면에서 발생하는 이벤트 또는 사용자의 입력 dispatcher : 데이터를 변경하는 방법, 메서드 (모델을 바꾸기 위한 방법) model : 화면에 표시할 데이터 view : 사용자에게 비춰지는 화면 MVC 패턴 vs Flux 패턴 비교 MVC 패턴 Flux 패턴 MVC 패턴의 문제점 기능 추가 및 ..
마이크로 프론트엔드란?
마이크로 프론트엔드 마이크로 프론트앤드는 마이크로 서비스처럼 전체 화면을 작동할 수 있는 단위로 나누어 개발한 후 서로 조립하는 방식이다. 여기서 작동 단위에 사용된 프론트앤드 프레임워크로 Angular 이든, React 또는 Vue 또는 Vanilla 자바스크립트에 상관하지 않고 조합 가능한 방법을 제공한다. Micro Frontend 개념 마이크로 프론앤드 개념으로 개발을 하는 잇점은 대규모 엔터프라이즈 애플리케이션을 개발한다고 가정할 때, 각 팀별 또는 업무단위에 대해 Backend + Frontend 개발 후 통합하는 이슈를 줄일 수 있다. 장점 작고, 응집력 있고 유지보수성을 가지는 코드베이스를 가질 수 있다. (Simple, decoupled codebase) 분리배포가 용이하고, 자율적인 팀..
Single SPA 프레임 워크를 사용하여 마이크로 프런트 엔드 구축
Single-SPA 프레임 워크를 사용하여 마이크로 프런트 엔드 구축 현대의 웹 애플리케이션들은 시간이 지날수록 복잡해지고 있습니다. 이로인해 품질 저하없이 소프트웨어를 빠르게 출시하는 것은 어렵습니다. 위의 해결책으로, Micro Frontends는 독립적으로 프론트엔드의 조각을 만들고, 테스트하고, 배포하는 것을 목표로하여 등장하였습니다. 이 기사에서는 싱글 SPA를 사용하여 마이크로 프론트 엔드 앱을 개발하는 단계를 보여드리겠습니다. Introduction to Single-SPA "Single-SPA는 여러 개의 JavaScript Microfrontend를 하나의 프런트엔드 애플리케이션에서 독립적으로 구축, 테스트 및 배치하기 위한 JavaScript 프레임워크입니다. Single-SPA는 크게..
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에 이벤트 핸들러를 연결할 수 있습..