본문 바로가기

Language

 (101)
<JS> 제너레이터 1. 제너레이터 * 제너레이터란 - 일반적으로 함수는 0개 또는 하나의 값을 반환한다. 하지만 제너레이터(generator)는 반환값을 여러개로 만들 수 있다. - 제너레이터는 일반적인 함수가 아닌 제너레이터 함수를 통해 만들게 된다. * 제너레이터 만들기 - 제너레이터는 '*' 키워드와 함께 만들 수 있다. function* test() { yield 1; yield 2; return 3; } const generator = test(); const one = generator.next(); const two = generator.next(); const three = generator.next(); console.log(one); // { value: 1, done: false } console.lo..
<ES10> ES2019 Features 1. 소개 - 이번 ES2019 에서도 크게 새로운 기능은 추가되지 않고, 편의성과 관련된 기능들이 몇가지 추가되었다. 2. 기능 * Object fromEntries const arr = [ ["x", "11"], ["y", "22"], ["z", "33"], ]; const obj = Object.fromEntries(arr); console.log(obj); // { x: '11', y: '22', z: '33' } - Object 에 fromEntires 메서드가 추가되었다. 이는 entries 와 정반대의 기능을 하는 메서드이다. entries가 객체를 2차원배열로 만드는 기능이라면 fromEntires는 2차원배열을 객체로 만드는 역할을 한다. * Array flat const arr = [1..
<ES9> ES2018 Features 1. 소개 - ES9라도고 불리는 ES2018은 2018년에 소개된 ECMA Script의 2018버전이다. - 2015만큼은 아니지만 꽤 유용한 기능들이 추가되었다. 객체에서도 나머지 연산자와 스프레드 연산자를 사용할 수 있게 되었고, 비동기 반복이 편리해졌다. 2. 기능 * Spread Properties const obj = { x: 11, y: 22, z: 33 }; const foo = { a: 9999, ...obj }; console.log(foo); // { a: 9999, x: 11, y: 22, z: 33 } - 기존에 배열에서만 사용되었던 스프레드연산자가 객체에서도 사용가능하게 되었다. - 위를 통해 편리하게 얕은복사가 가능해졌다. * Rest Properties const obj =..
<이벤트루프> 태스크 큐 : 마이크로태스크 큐 & 매크로태스크 큐 1. 소개 * 소개 - 지난 장에서 봤듯이 비동기 작업은 태스크큐에서 대기하다가 콜스택으로 넘어가서 실행된다. - 그렇다면 여러개의 비동기 작업이 들어가면 어떻게 될지 알아보자. - 아래에서 사용되는 이미지와 코드는 이전 포스트의 연장선이므로 이전 포스트를 보지 않았다면 보는 것을 권장한다. 2. 실행 * 태스크 큐 - 먼저 동일한 비동기 동작이 여러 개가 있을 경우를 살펴보자. function myFunc1() { Promise.resolve().then(() => { console.log("promise1"); }); myFunc2(); Promise.resolve().then(() => { console.log("promise3"); }); console.log("bye"); } function m..
<이벤트루프> 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. isdigit isalpha isalnum * isdigit x = "100" y = "won" z = "100won" for i in (x, y, z): answer = i.isdigit() print(f'{i} : {answer}') # 100 : True # won : False # 100won : False - isdigit함수는 문자열이 숫자로만 구성되어 있는지 불린값을 반환한다. - isdigit메서드에서 주의해야 할 점은 int자료형에서도 True를 반환할 것 같지만 문자열 메서드이므로 에러를 반환한다. * isalpha x = "100" y = "won" z = "100won" for i in (x, y, z): answer = i.isalpha() print(f'{i} : {answ..

티스토리툴바