1. 화살표 함수 함수 표현식을 화살표 함수로 표현할 수 있다. 화살표 함수가 추가되어 ES5의 함수 표현식보다 간결하고 가독성 및 유지보수성이 올라간다. 함수의 본문에 return만 있을 경우 return 과 {} 를 생략할 수 있다. //일반적인 자바스크립트 함수(ES5) function function_test(a, b) { return a + b; } ​ // 화살표 함수(ES6) (a, b) => { return a + b; } // 화살표 함수(ES6) - return, {} 생략 (a, b) => a + b; ​ 2. 템플릿 리터럴(Template literals) 템플릿 리터럴은 기존 자바스크립트에서 문자열을 표시할 때 사용하는 작은 따옴표(')나 큰 따옴표(') 대신 백틱(')을 사용하는..

Getters란 : 중앙 데이터 관리식 구조에서 발생하는 문제점 중 하나는 각 컴포넌트에서 Vuex의 데이터를 접근할때 중복된 코드를 반복호출 하게 되는것이다. 예) //App.vue computed: { doubleCounter() { return $store.state.counter * 2; } } ​ //Child.vue computed: { doubleCounter() { return $store.state.counter * 2; } } 이때 Vuex의 데이터(state) 변경을 각 컴포넌트에서 하는게 아닌 Vuex에서 수행하도록 하고 각 컴포넌트들은 Getters를 호출하여 수행한다. ​ //Getters 등록 // src/store/store.js import Vue from 'vue' imp..

네비게이션 가드 : 특정 URL에 접근할때 접근하지 못하도록 막는 방법 예) 사용자 인증정보(로그인)이 없을 경우 특정페이지에 접근하지 못하도록 막는다. : 특정 URL을 접근하지 못하도록 제어한다. ​ 네비게이션 가드 종류 * 전역가드 : 어플리케이션 전역에서 동작하는 전역가드 ​ * 라우터가드 : 특정 URL에서만 동작하는 라우터가드 ​ * 컴포넌트 가드 : 라우터 컴포넌트 가드에 정의하는 컴포넌트 가드 ​ 전역가드 const router = new VueRouter({ ​ }) ​ //라우터 변수 아래에 추가 router.beforeEach(function(to, from, next){ //to = 이동할 URL 정보가 담긴 라우터 객체 //from = 현재 URL 정보가 담긴 라우터 객체 //ne..

URL.createObjectURL(Blob) 이란? : Blob 객체(이미지, 동영상 등 대용량 바이너리 객체)를 가상의 URL을 부여하여 접근할수 있게 한다. : 생성된 주소는 메모리에 올라가 있다. : createObjectURL(Blob)을 사용한 브라우저가 종료될 경우 메모리에 올라간 가상 URL은 사라지게 된다. ​ 예) Vue 환경 ​ View x Javascript methods: { imageUpload() { this.pdf_files = [ { file: this.$refs.files.files[0], preview: URL.createObjectURL(this.$refs.files.files[0]) } ] } } ​ * Blob(Binary Large Objects) 대용량 바이너리..

Javascript Prototype 자바스크립트는 프로토타입 기반 언어라고 불린다. 객체지향언어 즉, Java에서 사용하는 Class라는 개념과 비슷하지만 자바스크립트에서는 Class라는게 없습니다. 그래서 사용하는게 프로토타입입니다. 클래스가 없으니 상속기능도 없지만 프로토타입을 사용하여 상속이라는걸 흉내내도록 구현해 사용한다. Person 함수를 생성하게 되면 Person 함수의 프로토타입 객체가 생성된다. Person 함수는 내부적으로 prototype 이라는 멤버를 갖게 되는데 해당 prototype 멤버는 Person 함수의 프로토타입 객체를 참조한다. Person 함수의 프로토타입 객체는 constructor 라는 멤버를 갖는데 Person 함수를 참조한다. Person 함수의 prototy..

Vuex : vue는 컴포넌트 기반 프레임워크 : 컴포넌트간의 통신이나 데이터 전달을 유기적으로 관리하기 위해 vuex라는 저장소를 사용한다. : state, mutations, actions, getters : Vue.js 어플리케이션에 대한 상태 관리 패턴 + 라이브러리 입니다. : 어플리케이션의 모든 컴포넌트의 중앙 집중식 저장소 역할, 예측 가능한 방식으로 상태 변경 가능 : Vue의 공식 devtools 확장 프로그램과 통합되어 설정 시간이 필요 없는 디버깅 및 상태 스냅샷 내보내기/가져오기와 같은 고급 기능을 제공한다. ​ ​ * 상태 관리(State Managerment)는 왜 필요한가 : 컴포넌트 기반 프레임워크(Vue)에서는 작은 단위로 쪼개진 여러개의 컴포넌트 화면을 구성합니다. 이에따..