ES6에 들어오면서 축약기능이 생겼는데, 길었던 코드를 짧게 작성할 수 있도록 지원해주는 기능이다. 여기서 메소드 축약기능이 제일 마음에 든다. 어려운 건 없으니, 그냥 아래처럼 작성하면 된다. 1. 프로퍼티 축약기능 -- 기존 ES5 // 변수 x,y 선언 var x = 1, y = 2; // 객체 생성시, 키값과, value(변수명)가 똑같아도 둘 다 작성해주어야 함.. var obj = { x: x, y: y }; console.log(obj); // { x: 1, y: 2 } -- ES6 // 변수 x,y 선언 let x = 1, y = 2; // 키값과 value(변수명)이 같으면 키값을 생력할 수 있다.. const obj = { x, y }; console.log(obj); // { x: 1..
예전에 this를 공부하면서 일반함수와 Arrow Function에서의 this가 다르다는 것을 배웠다. 그렇게 기억하고 있다가, 이번에 Vue 컴포넌트 코드를 작성하고 있는데, methods안에 메서드를 선언하는데 Arrow Function으로 작성하고 싶은 욕심이 생겼다.. 그래서 작성한 코드는 아래... 예제 import dummyData from './data.js'; // 더미데이터 import export default{ template : ` 테스트 `, data () { return { data : {} // 데이터 하나 선언 } }, mounted () { this.data = dummyData; // 마운트 되었을 때 더미데이터를 넣어줌.. }, methods () { getYoutub..
( 이전글 )에 이어서 유튜브 데이터API를 통해 데이터를 가져와보자. 참고로 라이브러리는 Vue만 쓰고 그 외에는 최대한 ES6문법만 쓰려고 한다. 그래서 fetch API를 통해 가져올거다... 그리고 이전글에서는 .jsp였는데, html로 변경하면서 Thymeleaf 템플릿을 적용하였으니, 원하는 사람은 ( 참조글 )을 참조하자. 그럼 바로 시작해보자.. 1. 유튜브 데이터 API키 발급 ============================================================================ 우선 API키를 발급받기 위해 구글 개발자 콘솔에 접속하자. 접속 한 후 새 프로젝트를 생성해주도록 하자. 나는 이미 youtube-project를 생성해놓았다. 처음 하는 사람..
java를 배웠다면 Class를 많이 썼을텐데.. javascript에서는 Class를 사용해본 적이 없다. 그래서 오늘 한번 정리해보려고 한다.. ES6에서 Class문법이 추가되었고, 덕분에 기존의 prototype 기반으로 클래스를 만드는 것보다 명료하게 클래스를 만들 수 있게 되었다고 한다. Class ============================================================================ 기본문법 -- Class 생성 -- Class안에 여러 메서드를 정의 할 수 있음 class MyClass { constructor() {} method1() { ... } method2() { ... } method3() { ... } ... } // Class..
오늘은 ES6문 문법에 새로 추가 된 Map()이라는 녀석에 대해 알아보려고 한다. Map()은 Object나 Array와 같은 자료구조로써, 특히 Object와 비슷한 점이 많다. 특히 Object와 마찬가지로 key와 value를 가지는 것이 가장 큰 특징인데.. Map에 대해 정리하자면 다음과 같다. Map의 특징 Map() 은 자바스크립트의 key-value 페어(pair) 로 이루어진 컬렉션 key 를 사용해서 value 를 get, set 할 수 있음 key 들은 중복될 수 없음: 하나의 key 에는 하나의 value 만 key 로 사용할 수 있는 데이터형: string, symbol(ES6), object, function >> number 는 사용할 수 없음에 주의! 기본 문법 -- map..
javascript를 사용해서 개발을 하다보면 this라는 키워드를 정말 많이 사용한다. 그래서 오늘 정리를 한번 해보려고 한다. 아마 글이 많이 길어질 듯 한데.. this란?? ============================================================================ this란 ‘이것’ 이란 뜻이다. this란 JavaScript 예약어다. this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-reference variable)이다 우선 정의는 저렇다. 3번째 자신이 속한 객체 또는 자신이 생성 할 인스턴스 저것만 기억하면 될 것 같다. 저기 "자신이 속한 객체" 이놈이 중요한데, 이 말을 풀어서 보면 this를 누..