오늘도 삽질

JavaScript/Es6

[ES6] Module

모듈 ES6의 모듈을 사용하기에 앞서 보편적인 브라우저에서는 지원하지 않는다. 크롬도 아마도 61+버전 부터 사용이 가능했던걸로 기억한다. 최신버전으로 업데이트 하는 걸 권장한다. 그리고 모듈은 로컬 환경에서 개발 테스트를 할 수 없으며 서버 환경에서실행해야한다.모듈은 자바스크립트 코드의 재사용성을 높이는데 도움이 되며 자신만의 스코프 갖기 , 전역변수와 지역변수를 나누어 선언, 비동기로 모듈을 로드하여 사용 모듈의 주요 기능이다. 모듈은 자기만의 스코프를 가지고 변수 또는 함수는 비공개 API로 선언된다. export 키워드를 앞에 붙이고 변수 또는 함수 등을 선언시 공개 API로 선언된다. 이에앞서 모듈 로드가 선행되야 한다.12module.jsexport default function();cs기본값..

JavaScript/Es6

[ES6] Promise

Promise Promise는 지연 함수와 비동기 연산을 제어할 수 있게 해주는 클래스이다. 자바스크립트는 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용하는데 콜백 패턴은 가독성이 나쁘고 비동기 처리 중 에러의 예외 처리가 곤란하고 여러개의 비동기 처리가 곤란한단점이 있다. 이러한 단점을 극복한 것이 Promise 이다. 12345678910111213let cnt = 0; let promise = new Promise(function(resolve, reject){ // Promise는 new 연산자 뒤에 Promise 함수를 호출 선언 setTimeout(function(){ // 지연함수를 Promise 내부에서 관리 cnt++; resolve(cnt); // 결과값을 전달 })}); pro..

JavaScript

Vue.js 인스턴스 & 컴포넌트

뷰로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위 - 뷰 인스턴스 1234new Vue({...}) cs 뷰 인스턴스의 사용은 위 형식으로 뷰 인스턴스를 생성한다. 123456789101112131415161718192021 Vue {{ message }} new Vue({ el: '#app', data: { message: 'Vue.js!' } }); Colored by Color Scriptercs vue.js 텍스트를 화면에 표시하기 위해 new Vue 뷰 인스턴스를 생성하고 인스턴스 안에 el 속성으로 뷰 인스턴스가 나올 지정후data 속성에 message 값을 넣어 화면의 {{message}}에 연결했다.new Vue()로 인스턴스를 생성할 떄 Vue를 생성자라고 하는데. Vue 생..

JavaScript/Es6

[ES6] For of 문 이터러블 규약

For of for.. of문은 기존에 배열이나 함수의 arguments 객체와 같은 컬렉션을 순회하는 for..in 문이나 forEach()함수 같은 역활을 한다.문자열을 한 글자씩 잘라 순회하는 것도 가능해졌다. 이터러블 규약을 따라야만 하고 for..of 문으로 순회하려면 @@iterator 메서드를내장한 객체이거나, 직접 @@iterator 메서드를 구현해야 한다. @@iterator : Sybol.irerator() 줄임말. 12for(variables of iterable){}csfor..of 문의 작성법for of는 for in 문의 단점을 보안했다. 배열을 for .. in 문으로 순회하고 원소의 index를 얻어 index + 1 과 같은 연산처리를 하였을 떄1 + 1 = 2 가 아닌 '..