본문 바로가기
반응형

Vue5

< Vuex > Vue는 Data 관리가 중요하다 부모 자신 간에 이벤트를 전달할 때 emit과 prop의 발생이 복잡하게 일어나기 때문!Vuex에서 저장소(임시저장공간)를 운영! VuexVue.js application에 대한 상태관리패턴 + 라이브러리application의 모든 Component들의 중앙 저장소 역할(데이터관리)상위(부모) 하위(자식)의 단계가 많이 복잡해 진다면 데이터의 전달하는 부분이 매우 매우 복잡해진다.application이 여러 구성 요소로 구성되고 더 커지는 경우 데이터 공유 문제도 발생 Vue의 이벤트 구조 Vuex의 저장소를 이용한 구조 상태 관리 패턴상태 (state - data) : 앱을 작동하는 원본 소스뷰 (DOM) : 상태의 선언적 매핑액션 (methods) : 뷰에서 사용자 .. 2021. 1. 6.
< Vue / Cli > CLI Command Line InterfaceVue.js 개발을 위한 시스템. Vue.js에서 공식으로 제공하는 CLI개발의 필수는 아니지만 거의 필수처럼 사용Vue 프로젝트를 빠르게 구성할 수 있는 스캐폴딩 제공Vue와 관련된 오픈 소스 대부분이 CLI를 통해 구성@vue/cli 설치codenpm install -g @vue/cli vue create my-project참고 : https://cli.vuejs.org/ NPMNPM ( Node Package Manager ) - Maven과 유사하다NodeJS - LTS 버전이용 (다운로드 : https://nodejs.org/ko/)NPM 검색 사이트 : https://www.npmjs.com/npm init : 새로운 프로젝트나 패키지를 만들 때 .. 2021. 1. 6.
< ES6 - Destructuring / LocalStorage > 비구조 할당 (구조 분해 할당)예시 Code1 예시 Code2 예시 Code3/** es5까지 주로 사용된 문법 구조 */ function showMember(member) { console.log('아이디: ', member.id); console.log('이름: ', member.name); console.log('나이: ', member.age); } let member = { id: 'aaa', name: 'bbb', age: '22', }; /** es6부터 주로 사용하는 문법 - 비구조 할당 (구조 분해 할당) */ function showMember2({ id, name, age }) { console.log('아이디: ', id); console.log('이름: ', name); conso.. 2021. 1. 6.
< Vue 정리 2 > Module 프로그램을 기능별 로 여러개의 파일로 나누는 형태 Module System CommonJS(NodeJS) - 웹 브라우저 밖에서도 동작될 수 있는 모듈 규칙 설립 AMD(Asynchronous Module Definition) - 비동기적 모듈 로딩 ESM(ECMAScript Module, ECMA215, ES6) - 자바스크립트 자체 모듈 Module 정의 및 사용 가져오기 : import import Module_Name from Module_place 내보내기 : export export → export default 예시 Code 파일명 - calc.js export const title = '계산기 모듈' export function add(i,j){ return i+j; } exp.. 2021. 1. 6.
< Vue 정리 > Vue.jsEvan You에 의해서 만들어짐Vue 탄생은 Google에서 Angular로 개발하다가 가벼운 것을 만들어보고 싶어 시작사용자 인터페이스를 만들기 위해 사용하는 오픈소스 Progressive Framework Vuejs특징접근성 유연성 고성능 MVVM 패턴Model + View + ViewModelModel : 순수 자바스크립트 객체View : 웹페이지의 DOMViewModel : Vue의 역할기존에는 자바스크립트로 vuew에 해당하는 DOM에 접근/수정 하기 위해 JQuery와 같은 Library를 사용.Vue는 View와 Model을 연결. 자동으로 바인딩. 양방향 통신이 가능 MVCController - View - 화면 업데이트 - Model - Data갱신 MVVCView → Vie.. 2021. 1. 6.
반응형