Language (58) 썸네일형 리스트형 [ES6]default parameter 함수에서 파라미터를 다룰 때 사용 할 수 있는 기술을 알아보자 default parameter const f1 = function(x, y, z) { console.log(x, y, z);}; 이러한 함수가 있다고 가정할 때 f1(0, null); 이러한 값을 불러온다고 치자 x는 0을 불러왔기 때문에 0을 리턴할 것이고y는 null을 불러왔기 때문에 null을 리턴할 것이고z 는 아무것도 불러오지 않았기 때문에 undefinded가 리턴 될 것이다. 그런데 아무것도 불러오지 않았을 때의 기본값을 주고 싶다면 다음과 같이 만들 수 있 을것이다., const f2 = function(x, y, z) { x = x ? x : 4; y = y || 5; if (!z) { z = 6; } console.log(.. [Tool]Webpack 구성하기 각각 무슨 역할을 하는지 정도는 알고 가야 할 것 같다. 설치는 webpack과webpack-cli webpack-cli은 터미널에서 웹팩을 사용할 수 있게 도와주는 도구 예시로scss와 모던js를 전환해주는 설정을 보자 const path = require("path");const autoprefixer = require("autoprefixer");const ExtractCSS = require("extract-text-webpack-plugin"); const MODE = process.env.WEBPACK_ENV;const ENTRY_FILE = path.resolve(__dirname, "assets", "js", "main.js");const OUTPUT_DIR = path.join(__dir.. [ES6]CallBack,Promise,Async/Await 비동기함수 출처 : https://medium.com/@constell99 동기(지금) VS 비동기(나중)동기와 비동기의 구분은 요청받고 응답받는 시간대의 차이라고 생각합니다 요청하고-응답받는 시간을 하나의 박스(box)라로 정의한다면, 동기는 박스 안에서 움직이고, 비동기는 박스를 벗어나 작동되는 원리 라고 생각합니다.동기 : 요청과 응답이 같은 시간대 “안에” 고정되어 있어, 요청에 대해 응답이 완료되기까지 프로그램이 정지합니다. 응답을 받고나서야 비로소 다시 진행되는 특성을 가집니다.비동기 : 요청-응답 간 결합이 자유로워 프로그램이 응답 받기 위해 대기하지 않고 쿨하게?! 자기 갈길?! 가는 특성입니다. 언젠간 응답을 받을테고 다음 로직을 수행 합니다.동기(synchronous)요청을 하는 시기와 응답을 받.. [Babel]바벨 기본시작 여태까지 아무 생각없이 사용해왔는데, 기본적인것은 정리 하는게 좋을꺼 같아서.. https://babeljs.io/ nodejs에서 바벨을 사용하기 위해서 다음과 같이 설치 한다. npm install --save-dev @babel/core @babel/node 바벨을 기본적으로 사용하려면 core와 node의 설치가 필요하고 그 이외에 버전을 설치하여야 하는데 여기서는 presets버전을 설치 했다(최신버전이면서 실험적이지는 않은..) npm install @babel/preset-env 그리고 이를 관리하기 위해 .babelrc라는 폴더를 만들어 관리 한다. .babelrec{ "presets" : ["@babel/preset-env"]} node로 실행시킬 때 바벨을 거쳐가고 싶어서 package.. [JS] getter/setter 출처 : http://mygumi.tistory.com/161 처음에는 get()과 set()의 용도 자체를 이해하지 못했고언젠가부터는 get() set()을 왜 사용하는지 이해를 못했는데이제서야 이해가 되는 것 같다. 그중에서 위 블로그가 가장 설명을 잘 해주시는 것 같다. 사용하는 이유들로는 1. 캡슐화2. 사용성 두가지 인것 같다. MVVM패턴을 설명하기 위해 강사님이 설명한 코드이다. 결론만 보면 1. set()을 통해서 model(data)를 바꿀 때,어떤 경우라도 val(변수)를 받아 바뀐다viewModel.model = val같은 식으로 변수를 전달했다면 viewModel.model = "break"와 같이아예 기능을 마비시켰을지도 모르는 일을 방지했다. 2. get() set() 이라는 함.. [ES6]Map과Set 책을 읽다가 Map과 Set에 대해 나왔는데여태까지 한번도 써본 적도 없고왜 써야 되는지 이해가 안되서여기저기 찾아보고 읽어보다 책과 똑같은 예제로 포스팅 하신분이 계서서 가져왔다.(https://shin-ae.github.io/)MAPES6이전에는 키와 값을 연결하려면 객체를 사용해야 했음. 하지만 객체를 이런 목적으로 사용하면 여러가지 단점이 생김프로토타입 체인 때문에 의도하지 않은 연결이 생길 수 있음객체 안 연결된 키와 값이 몇 개나 되는지 쉽게 알아낼 방법이 없음키는 반드시 문자열이나 심볼이어야 하므로 객체를 키로 써서 값과 연결할 수 없음객체는 프로퍼티 순서를 전혀 보장하지 않음map은 키와 값을 연결할 목적이라면 객체보다 나은 선택라고 하는데... 나는 get() has() size()와 같.. [ES6]객체와 객체지향프로그래밍 용어(Terminology)섹션Class객체의 특성을 정의ObjectClass의 인스턴스Property객체의 특성(예: 색깔)Method객체의 능력(예: 걷기)Constructor인스턴스화 되는 시점에서 호출되는 메서드Inheritance클래스는 다른 클래스로부터 특성들을 상속받을 수 있다.Encapsulation클래스는 해당 객체의 특성들만을 정의할 수 있고, 메서드는 그 메서드가 어떻게 실행되는지만 정의할 수 있다. (외부 접근 불가)Abstraction복잡한 상속, 메서드, 객체의 속성의 결합은 반드시 현실 세계를 시뮬레이션할 수 있어야 한다.Polymorphism다른 클래스들이 같은 메서드나 속성으로 정의될 수 있다.객체지향 프로그래밍에 대한 보다 확장된 설명은 Object-oriented pro.. [ES6]for문(for of문 다시보기) for문 종류가 너무 많다. 책을 읽다가 정리해야 겠다고 생각해서 작성 foreach 반복문foreach 반복문은 오직 Array 객체에서만 사용가능한 메서드입니다.(ES6부터는 Map, Set 등에서도 지원됩니다) 배열의 요소들을 반복하여 작업을 수행할 수 있습니다. foreach 구문의 인자로 callback 함수를 등록할 수 있고, 배열의 각 요소들이 반복될 때 이 callback 함수가 호출됩니다. callback 함수에서 배열 요소의 인덱스와 값에 접근할 수 있습니다.var items = ['item1', 'item2', 'item3']; items.forEach(function(item) { console.log(item); }); // 출력 결과: item, item2, item3foreac.. 이전 1 2 3 4 5 6 ··· 8 다음
