몽땅뚝딱 개발자

출처 자바스크립트 ES6+ 기본 - 인프런 | 강의 4개 강좌로 구성된 자바스크립트 바이블 강좌의 3번째 강좌입니다. 자바스크립트 스펙의 95% 이상을 다룹니다. ES6+ 환경에서 새로운 패러다임의 프로그램을 개발할 수 있습니다., 자바스크립트 www.inflearn.com 🚀 let 변수와 this ◽ let 변수와 this 글로벌 오브젝트에서 글로벌 변수로 선언된 let 변수를 this로 참조할 수 없다. // var는 window object에 설정되지만, let은 설정되지 않는다. var music = "음악"; let sports = "축구"; console.log(this.music, this.sports); [실행결과] 음악, undefined 🚀 다수의 js 파일 사용 시 let의 사용 모..

출처 자바스크립트 ES6+ 기본 - 인프런 | 강의 4개 강좌로 구성된 자바스크립트 바이블 강좌의 3번째 강좌입니다. 자바스크립트 스펙의 95% 이상을 다룹니다. ES6+ 환경에서 새로운 패러다임의 프로그램을 개발할 수 있습니다., 자바스크립트 www.inflearn.com 🚀 Rest ◽ Rest 파라미터 - Syntax: function(param, paramN, ...name) - 분리하여 받은 파라미터를 배열로 결합한다. - spread는 분리, rest는 결합으로 볼 수 있다. [코드 1: rest 파라미터] // 다시 배열로 만든다. function point(...param) { console.log(param); console.log(Array.isArray(param)); }; const..

출처 자바스크립트 ES6+ 기본 - 인프런 | 강의 4개 강좌로 구성된 자바스크립트 바이블 강좌의 3번째 강좌입니다. 자바스크립트 스펙의 95% 이상을 다룹니다. ES6+ 환경에서 새로운 패러다임의 프로그램을 개발할 수 있습니다., 자바스크립트 www.inflearn.com 🚀 Spread ◽ Spread - Syntax: [...iterable] const list = [21, 22]; console.log(11, ...list, 12); const obj = {key: 50}; console.log({...obj}); [실행결과] [11, 21, 22, 12] {key: 50} // 이터러블 오브젝트는 아니지만 전개 가능 ◽ Array Spread 1) Spread 대상 배열을 작성한 위치에 Elem..

출처 자바스크립트 ES6+ 기본 - 인프런 | 강의 4개 강좌로 구성된 자바스크립트 바이블 강좌의 3번째 강좌입니다. 자바스크립트 스펙의 95% 이상을 다룹니다. ES6+ 환경에서 새로운 패러다임의 프로그램을 개발할 수 있습니다., 자바스크립트 www.inflearn.com 🚀 이터레이션 / 이터러블 / 이터레이터 1. 이터레이션 ◽ 이터레이션 - 사전적 의미는 '반복'이지만, for문의 반복과는 차이가 있다. [코드 1. for문과 이터레이션] // for문 const list = [10, 20]; for(let value of list) { console.log(value); } // 이터레이션 const obj = list[Symbol.iterator](); console.log(obj.next()..

출처 자바스크립트 ES6+ 기본 - 인프런 | 강의 4개 강좌로 구성된 자바스크립트 바이블 강좌의 3번째 강좌입니다. 자바스크립트 스펙의 95% 이상을 다룹니다. ES6+ 환경에서 새로운 패러다임의 프로그램을 개발할 수 있습니다., 자바스크립트 www.inflearn.com 🚀 화살표 함수 ◽ 화살표 함수 구조 function을 =>로 표기한다. 이 것이 전부가 아니라 구조가 다르다. ◽ 화살표 함수와 this - strict 모드에서 함수를 호출할 때 함수 앞에 오브젝트 작성은 필수이다. ex) window.book(); // 이렇게 하지않으면 undefined - 화살표 함수에서는 this가 글로벌 오브젝트를 참조하기 때문에 오브젝트를 적어주지 않아도 된다. - 화살표 함수는 함수에 this를 갖고 ..

출처 자바스크립트 ES6+ 기본 - 인프런 | 강의 4개 강좌로 구성된 자바스크립트 바이블 강좌의 3번째 강좌입니다. 자바스크립트 스펙의 95% 이상을 다룹니다. ES6+ 환경에서 새로운 패러다임의 프로그램을 개발할 수 있습니다., 자바스크립트 www.inflearn.com 🚀 Default Value ◽ Default Value란? 값을 할당하지않으면 사전에 정의된 값을 할당하는 개념 [코드 1: 할당할 값이 없으면 디폴트 값을 할당] const [one, two, five = 50] = [10, 20]; console.log(five); [실행결과] 50 [코드 2: 할당할 값이 있으면 디폴트 값을 무시] const [one, two, five = 50] = [10, 20, 70]; console.l..

출처 자바스크립트 ES6+ 기본 - 인프런 | 강의 4개 강좌로 구성된 자바스크립트 바이블 강좌의 3번째 강좌입니다. 자바스크립트 스펙의 95% 이상을 다룹니다. ES6+ 환경에서 새로운 패러다임의 프로그램을 개발할 수 있습니다., 자바스크립트 www.inflearn.com 🚀 Destructuring ◽ Destructuring - Destructuring Assignment(분할 할당) - 원 데이터는 변경되지 않는다. [코드 1: Destructuring] let one, two, three; const list = [1, 2, 3]; [one, two, three] = list; console.log(one); console.log(two); console.log(three); console.lo..

출처 자바스크립트 ES6+ 기본 - 인프런 | 강의 4개 강좌로 구성된 자바스크립트 바이블 강좌의 3번째 강좌입니다. 자바스크립트 스펙의 95% 이상을 다룹니다. ES6+ 환경에서 새로운 패러다임의 프로그램을 개발할 수 있습니다., 자바스크립트 www.inflearn.com 🚀 getter, setter 1) getter [코드 1: ES5 getter의 형태] var book = {}; Object.defineProperty(book, "title", { get: function() { return "책"; } }); console.log(book.title); [실행결과] 책 [코드 2: ES6 getter의 형태] // ES5 처럼 프로퍼티의 속성 구조가 아니다. // 다수의 getter를 사용할 ..

Vue는 기본문법과 그 문법을 단축하여 표현할 수 있다. 아래는 공식 사이트에 존재하는 예제이다. ◽ 표현법 // 기본문법 // 단축표현 // 동적 argument의 단축표현 ◽ 이벤트 여러개 할당하기 // @click=[method1(), method2()] 이렇게 써준다. ◽ 이벤트 핸들링 .stop: 클릭 이벤트 전파를 멈춤 (버블링 제어) .prevent: 기본 이벤트가 자동실행되는 것을 중지 .capture .self: 발생 단계에서만 이벤트를 발생시킴 .once: 이벤트를 한번만 실행 .passive ◽ 체이닝(chaining) : 이벤트 핸들링의 메소드를 조합할 수 있다. @click.prevent.self: 클릭 이벤트 발생 시 모든 엘리먼트의 기본동작을 막는다. @click.self.pr..

터미널에서 아래의 명령어를 실행한다. 포트번호는 자유롭게 설정할 수 있다. npm run serve -- --port 3000 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.