본문 바로가기

Language/JavaScript

 (47)
<이벤트루프> JS와 이벤트루프 1. 소개 * JS 와 이벤트루프 - 이벤트 루프(event loop)는 태스크가 들어오면 이를 처리하고, 잠들고, 처리하는 일련의 과정을 반복하는 자바스크립트의 루프를 의미한다. 그렇다면 이것이 무슨 의미가 있을까. - 자바스크립트는 '단일 스레드' 기반의 언어이다. 하지만 자바스크립트를 써본 사람들은 이미 알겠지만 여러 작업이 동시에 처리되고 있음을 알 수 있다. 이러한 작업에 필요한 것이 '이벤트 루프'이다. - 정리하면 자바스크립트는 태스크를 처리하는 이벤트 루프를 통해 비동기 방식으로 동시 작업을 지원한다. - 이 때 알아둬야 할 것은 이벤트 루프는 ECMAScript 스펙에 등재된 것이 아닌 브라우저나 노드JS에서 지원하는 것이라는 점이다. 자바스크립트 엔진은 단일 호출 스택(Call Stac..
<ES8> ES2017 Features 1. 소개 - ES2017은 전년도에 발표된 ES2016보다는 많은 기능이 추가되었다. ES8로도 불리는 ES2017의 가장 큰 변화는 역시 async, await의 등장이다. 2. 기능 * Padding a String - 문자열에 패딩 메서드가 추가되었다. const month = "8"; const number = "1.2"; const padMonth = month.padStart(2, "0"); const padNumber = number.padEnd(5, "x"); console.log(padMonth); // 08 console.log(padNumber); // 1.2xx - padStart와 padEnd 모두 첫 번째 인자에 string 길이를 제한하고, 그 길이보다 모자란 부분을 두 번째..
<ES7> ES2016(ES7) Features 1. 소개 ES7은 2016년에 발표된 ECMAScript2016 을 의미한다. 정식명칭은 ES7이 아닌 ES2016이다. 저번 포스팅해서 언급했듯이 TC39는 2015년부터 매년 새로운 버전의 ECMAScript를 릴리즈하기로 했었다. ES2015에 수많은 기능이 추가된지 1년밖에 안되서 그런 것인지는 모르겠지만 ES2016에서는 2개의 기능만 명세에 추가되었다. 하지만 나중에 등재되는 Async Await의 키워드나, Object values, etries등의 키워드가 등장하였다. 그리고 padStart, padEnd로 익히 사용되는 기능이 ES2016에서 padLeft, padRight라는 키워드로 등장하였다. 이들은 모두 ES2017에서 명세에 추가된다. 2. 기능 * Exponentiation ..
<ES6> ES2015(ES6) Features (2) 1. 소개 - 지난 포스팅에서 ES2015의 등장에 대해서 간단히 짚었다. ES2015(ES6)은 ES5가 소개된 후, 무려 6년이나 지나서 나타난 만큼 무수히 많은 기능들이 추가되었다. - 지난 번에 알아본 기능들을 나열해보면 Arrow Function, let, const, Default Parameters, Template Literals, Object Initialize, Destructuring Assignment 이 있다. 2. 기능 이번 포스팅을 끝으로 ES2015의 소개를 마칠 것이므로 모든 기능을 소개할 수는 없을 것 같다. 대표적인 나머지 기능들을 알아보고, 그 외에는 기타로 빼두었다. * Class - 대부분의 객체지향언어(C, Javs, Python)등과 달리 자바스크립트는 Clas..
<ES6> ES2015(ES6) Features (1) 1. 소개 이번 글을 시작으로 ECMA Script의 변화들을 정리해볼 예정이다. 먼저 ES6로 흔히 알려진 ES2015의 변화들과 그 기능들로 시작해보려한다. ES6은 위와 같은 짤이 있을정도로 자바스크립트에 엄청난 진화를 이루어냈다. 이 때를 시작으로 JQuery의 몰락이 시작되기도 했다. JQuery가 2006년 소개된 이후로 프론트 생태계에 엄청난 영향을 끼친 것은 사실이나, JS를 완전히 대체할 수 없었던 점, 노드JS의 등장과 리액트와 뷰와 같은 Virtural DOM의 사용등은 ES5를 사용한 Jquery를 누르기에 충분했다. 필자는 Jquery를 사용해본 적이 없으므로 이 내용은 일단 넘어가자... ES6은 이미 모든 브라우저(IE는 브라우저가 아니다. 응가다.)에서 지원할 정도로 표준화되..
<자바스크립트> 프라미스 체이닝과 에러 1. 프라미스 체이닝 * 체이닝 - 콜백에서 언급했듯이 비동기 작업을 순차적으로 처리해야할 상황이 있다. 이 때 프라미스 체이닝을 사용하며 효율적으로 이를 다룰 수 있다. new Promise(function(resolve, reject) { setTimeout(() => resolve(1), 1000); }).then(function(result) { console.log(result); // 1 return result * 2; }).then(function(result) { console.log(result); // 2 return result * 2; }).then(function(result) { console.log(result); // 4 return result * 2; }); - setT..
<자바스크립트> 프라미스 1. 프라미스 * 소개 - 제작 코드(producing code) : 원격에서 스크립트를 불러오는 것 같이 시간이 걸리는 코드 - 소비 코드(consuming code) : 제작 코드의 결과를 사용하는 코드 - 프라미스(promise) : 제작 코드와 소비코드를 연결해 주는 자바스크립트 객체 - 프라미스 문법은 다음과 같다. let promise = new Promise(function(resolve, reject) { // executor }); - 실행자(executor)의 인수 resolve와 reject는 자바스크립트가 자체적으로 제공하는 콜백이다. - 인수로 넘겨준 resolve와 reject중 하나를 반드시 호출해야 한다. - resolve(value) : 성공적으로 일이 끝난 경우 결과를 v..
<자바스크립트> 콜백 1. 콜백 * 소개 - 실무에서 비동기 동작처리를 할 때 생기는 문제를 먼저 살펴보자. - 대표적인 비동기 동작으로 스크립트나 모듈을 로딩하는 것이 있다. function loadScript(src) { let script = document.createElement('script'); script.src = src; document.head.append(script); } - 위는 src에 있는 스크립트를 불러와서 다큐먼트에 추가하는 함수이다. 이 안에는 우리가 사용하고 싶은 harryFunc라는 함수가 들어있다고 가정하자. loadScript('/harry/script.js'); harryFunc(); - 위에서 정의한 함수를 사용하여 스크립트를 불러오고 함수를 실행했다. 그러나 안타깝게도 에러가 발..
<자바스크립트> try catch & 에러 1. try catch * 소개 - try catch문법은 에러를 잡아서 다룰 수 있게 도와준다. try { // ... } catch (err) { // ... } - 위와 같은 꼴을 하고 있으며, 먼저 try 내부의 코드를 실행한다. 에러가 없으면 catch를 건너뛰고 에러가 있으면 임의의 인자 err에 에러객체를 담아 catch를 실행한다. - 이렇게 하면 에러가 발생하더라도 스크립트가 죽지 않고 에러를 별도로 처리할 수 있다. - try catch는 런타임 에러에만 동작하므로 우선 실행 가능한 코드를 작성해야한다. - try catch는 동기적으로 작동하므로 try내부에 스케줄 된 코드를 작성하면 에러를 잡아내기 힘들다. 이럴 때는 스케줄된 함수 내부에 try catch를 작성하면 된다. * 에러..
<자바스크립트> 클래스의 기본과 상속 1. 클래스 기본 문법 * 클래스란 - 클래스는 객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 메소드를 정의하는 일종의 틀이다. - 클래스는 전부 혹은 일부를 그 클래스 특성으로부터 상속받는 서브클래스를 가질 수 있으며, 클래스는 각 서브클래스에 대해 수퍼클래스가 된다. - 동일한 종류의 여러 객체를 생성할 때 new function을 사용할 수도있지만 자바스크립트의 클래스 문법을 사용하면 객체 지향 프로그래밍의 다양한 기능을 사용할 수 있다. * 기본 문법 - 클래스를 만드는 기본 문법은 다음과 같다. class MyClass { constructor() { ... } method1() { ... } method2() { ... } method3() { ... } ... } - 위와 같이 ..

티스토리툴바