끄적끄적 끄적끄적

- async/await async/await 의 문법을 알기전에 그전에 정리했던 내용들을 복습해보자.Node.js는 비동기방식으로 처리를 하게 되며 처리가 끝나면 자동적으로 callback 함수가 호출되게된다.callback 함수는 특정함수에 매개변수로서 전달되는 함수로 비동기 코드를 동기식으로 처리 가능하게 해준다.하지만 여러개의 callback 을 연달아 사용하게 되면 에러가 발생할 가능성이 높고, 코드의 가독성이 크게 떨어진다.아래의 그림은 '콜백 지옥' 이라고 불리는 좋지않은 현상이다. 이러한 callback의 지옥을 벗어나기위해 Promise 개념이 ES6에서 도입되었고 좀더 효율적으로 동기적 처리가 가능하게 되었다.(resolve,reject). 하지만 C,Java 와 같은 절차 언어처럼 좀..

- Promise "A promise is an object that may produce a single value some time in the future: either a resolved value, or a reason that it’s not resolved" Promise는 ES6 에서부터 지원된 문법으로서 JavaScript 비동기 처리에 사용되는 객체이다.비동기 처리라는 뜻은 글 목록 처음( Node.js[1] - Single thread,Async,Callback )에도 설명했듯이 '하나의 요청 처리가 끝날때까지 기다리지 않고 다른 요청을 동시에 처리할수 있는 방식' 을 뜻한다.이러한 비동기 처리의 단점중 critical 한 단점으로 동기식 처리가 필요한 작업을 해결하기 어렵다는 것이다..

- TDD & BDD Mocha 를 먼저 얘기하기전에 TDD 와 BDD 에 대한 개념이 먼저 잡혀야 될꺼같애서 공부해보았다. 먼저 TDD(Test-driven-development) TDD 의 정의를 5단계로 나누어볼수 있다. 먼저 개발자는 몇 가지 테스트를 작성한다. - Add Tests 개발자는 그런 테스트를 실행하고 실제로 테스트할 구현된 기능이 없으므로 당연히 실패한다. - See Tests Fall다음으로 개발자는 코드에서 이러한 테스트를 실제로 구현한다. - Write Code개발자가 코드를 잘 작성하면 다음 단계에서 테스트가 통과하는 것을 볼수 있다. - Run Tests개발자는 새로운 코드가 무언가를 망치면 테스트가 실패할 것이라는 것을 알고 있기 때문에 원하는대로 코드를 리펙토링하고 주석..

- Webpack 아직 내가 알지 못하는 JS 모듈 시스템들이 엄청나게 많다. ES2015모듈, RequireJS, CommonJS, UMD 같은 JS 모듈 시스템들이 나오면서 JS파일도 다른 프로그래밍 언어처럼 모듈개념이 생겨나서 상당한 의존 관계를 가지게 된다.이러한 의존관계를 가진 JS 파일들을 파일별로 모듈을 관리할수 있게하여 각 파일의 스코프범위를 유지시켜 충돌의 위험성을 줄여야한다. 하지만 브라우저 상에서는 이러한 파일 단위 모듈 시스템을 사용하는 것이 쉽지 않다.웹 프론트쪽에서의 JavaScript 언어는 웹페이지에 html,css,img,JSON 등 수많은 구성요소들과 엉켜있어 모듈을 IIFE 스타일로 변경해 주는 과정 뿐만 아니라 하나의 파일로 묶어(Bundled) 네트워크 비용을 최소화..

- Babel Babel , 바벨 이라고 불리우는 이 녀석은 뭐하는 애일까?일단 이 친구를 알기 전에 ES6,7 과 ES5 간의 차이를 알아야 한다. ES5는 2009년도 에 표준화된 JavaScript로 우리가 익히 알고 있던 JavaScript 표준 언어(동적 언어)이다.그러다 2015년에 개정판으로 표준화된 JavaScript가 나오게 됬는데 이것을 ECMAScript2015(EC2015) , ECMAScript6(ES6) 이라고 한다.더 나아가서 2016년에도 추가로 개정되어 ES7 이 나와서 최신 표준이 되었지만 아직까지 ES6가 대세이고 이 ES6에 들어와서 획기적인 변화들이 생기게 되었다. 변화된 문법들중 대표적으로 import & exportlet & constclassarrow funct..

- Function함수 또는 메소드를 정의할때 TypeScript은 인자와 반환값에 타입을 설정해준다.JavaScript는 타입이라는 것이 없기때문에 가독하기위해 메소드명과 변수명에 타입을 명시할 수 밖에 없었다. function getMonthFromString(dateOfStringFormat){ //date 인자는 string const monthOfNumberFormat = parseInt(dateOfStringFormat.subString(4,6),10); //month 반환값은 Number } 굉장한 불편함과 만약 인자값으로 string이 아닌 다른 타입의 인자값이 들어왔다면 에러가 발생하게 된다.TypeScript는 이러한 단점을 보완하고자 const getMonth = (data:strin..

- Class 기존의 JavaScript는 재사용 가능한 component를 만들기 위해 함수와 프로토타입에 기반한 상속을 이용했다.하지만 C#, Java 와 같이 객체 지향에 익숙한 개발자들에겐 어려운 개념들이었다.그래서 ECMAScript2015(ES6)에서 개발자들이 좀더 쉽게 JavaScript Application을 구현할수 있도록 전통적인 class 기반의 객체지향 개념을 도입했다. class Book { btitle : string; // property 선언 bauthor : string; constructor(btitle : string,bauthor : string){ // constructor 선언 this.btitle=btitle; this.bauthor=bauthor; } prin..

- Interface Interface 라는 개념은 Java 나 C# 등의 정적 타입 언어에서 이미 많이 쓰이는 개념이다.Interface는 클래스에서 구현부가 빠졌다고 이해하면 편하다. 즉, 어떠한 객체가 이러이러한 프로퍼티 혹은 메소드를 가진다고 선언하는 것이다. 실질적인 구현은 이를 구현한다고 선언하는 클래스에 맡긴다.TypeScript에서 interface는 새로운 데이터 타입을 만드는 추상데이터 타입으로 사용이 되며 일반 변수,함수,클래스의 type check을 위해 사용된다. Interface를 이용하여 타입을 선언하면 Interface안에 명시된 property의 선언과 method의 구현이 강제되기 때문에 프로그래밍의 일관성을 확보할수 있다.*참고로 ES6은 Interface를 지원하지 않..