예전에 setTimeout에 대한 글을 정리했으니, setTimeout의 기본문법에 대해 궁금한 사람은 (해당 링크) 확인 이번에 또 이렇게 글을 쓰게 된 건.. 이번에 async랑 await을 쓰면서 비동기 처리 함수를 동기처리 하는 걸 보고 있는데, 이 setTimeout()은 조금 다르게 동작하는 것 같아서 정리해본다.. 아래 샘플코드는 내가 처음 await으로 setTimeout함수를 사용해보려고 했던 코드와 비슷하게 맞추었다. 샘플코드 내 예상으로는 start => setTimeout log => end 가 순서대로 콘솔에 찍혀야 하는데... 결과는 아래와 같았다. 콘솔에 보이는 것처럼 동기처리가 안되고, end가 먼저 찍히고, setTimeout이 나중에 찍힌 것을 확인 할 수 있다.. 그래서..

이번에 promise를 공부할까 하다가 async와 await을 먼저 공부하게 되서 이렇게 공부한다. 계속 거꾸로 가는 느낌.. 우선 아래와 같은 코드가 있다고 해보자. ( async와 await만 볼 사람은 바로 아래로 내려가도록 하자. ) 샘플코드1 javascript는 동기적인 언어이기 때문에 한줄한줄 순서대로 실행이 될 것이다. 그럼 아래와 같은 결과가 나온다. 그럼 또 하나의 샘플코드를 보자. API통신을 했다고 생각하고 setTimeOut을 줬다.. 샘플코드2 아까도 말했듯 javascript는 동기적인 언어이기 때문에, 한줄한줄 실행이 된다. 그럼 결과는 어떻게 될까? 아래와 같이 실행된다. 동기지만, 비동기인 것처럼 실행이 되었다. 이렇게 보면 별 문제 아니겠지 라고 생각할 수 있지만, 실..

보통 Vue에서 클릭했을 때 클릭이벤트로 v-on:click( 이하 @click )을 많이 쓰는데... 검색을 할때는 바로 엔터를 치는 경우가 많다. 검색어를 입력하고, 마우스로 검색버튼을 누르는 일은 많이 없지 않은가 그럴 때 사용하는게 v-on:keyup.enter 라는 녀석이다. 기본문법 v-on:keyup.enter="호출함수()" @keyup.enter="호출함수()" 예제 export default{ template : ` Search `, data () { return { keyWord : '' } }, methods : { search () { alert("검색.."); } } } 예를 들어 이렇게 하면, 클릭했을 때도, 엔터를 눌렀을 때도 저 search라는 함수가 호출 되는 것을 볼 수..

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..

ES6에 Class문법이 생겼다는 것을 저번에 배웠는데 ( 해당 글 참조 ) ES6의 Class에서도 java와 같이 상속이 가능하다. 오늘은 상속에 대해 알아보려고 한다. 상속(inheritance)이란? ========================================================================== 상속(inheritance)이란 기존의 클래스에 기능을 추가하거나 재정의하여 새로운 클래스를 정의하는 것을 의미합니다. 이러한 상속은 캡슐화, 추상화와 더불어 객체 지향 프로그래밍을 구성하는 중요한 특징 중 하나입니다. 상속을 이용하면 기존에 정의되어 있는 클래스의 모든 필드와 메소드를 물려받아, 새로운 클래스를 생성할 수 있습니다. 상속의 정의는 위와 같다. 핵심은 ..