Art Rudy

Arrow Functions 함수는 간결해지고 코드는 짧아졌다. ES5 문법 this 예제1 let function_ES5 = function(param){ return param; } let function_ES6 = (param) => { return param; } ES6 문법 this 예제2 function NumberEx2() { this.num = 0; setInterval(() => { this.num++; // this is from NumberEx console.log(this.num); }, 500) } ES5 문법 this 예제3 function NumberEx3() { this.num = 0; console.log("NumberEx3() this : " + this.num); con..

let & const let은 블록 범위이며 재할당은 가능하지만 재선언은 불가능하다. function test() { let let_ = "test_let_"; let_ = "test_let_reassignment"; // let let_ = "test_let_2"; // SyntaxError: Identifier 'let_' has already been declared if (true) { let let_ = "if_let_"; console.log(let_); // if_let_ } console.log(let_); // test_let_reassignment } test(); 결과 출력 > if_let > test_let_reassignment var의 이슈를 let이 해결 const var_fu..

Class Class 문법을 제공한다. constructor 메소드도 사용할 수 있고 extends를 통해서 클래스 상속도 가능하다. class Person { constructor (id, name) { this.id = id this.name = name } toString() { return `(${this.id}, ${this.name})` } } class Student extends Person { constructor (id, name, age) { super(id, name) this.age = age } toString() { return super.toString() + ' and ' + this.age } } Setter/Getter class Person { constructor (..

콜백함수(Callback Function)란? 파라미터로 함수를 전달받아, 함수의 내부에서 실행하는 함수이다. 함수를 파라미터로 만들어 전달하는 경우는 대부분 비동기 프로그래밍 방식으로 코드를 만들 때이다. 예를 들어 더하기 함수를 실행한 후 결과 값이 반환될 때까지 기다리지 않고 그 다음 코드를 실행하려면 비동기 방식으로 코드를 만들어야 한다. 즉, 더하기 함수를 실행하는 데 시간이 걸릴 수 있기 때문에 그 다음 코드를 바로 실행한다. 그리고 나서 연산이 끝났을 때 파라미터로 전달한 함수가 실행될 수 있다면 그 시점에 결과를 처리할 수 있으므로 효율적인 프로그램을 만들 수 있다. 이때 파라미터로 전달되는 함수를 콜백함수(Callback Function)라고 한다. 콜백함수는 함수가 실행되는 중간에 호출..

EventLoop 개요 자바스크립트는 기본적으로 단일쓰레드에서 동작한다. 하지만 주로 웹에 쓰이는 언어다보니, 단일쓰레드에서 동기적으로만 동작한다면 이런저런 문제가 발생할 수 있다. 외부에서 용량이 큰 데이터를 받아서 띄워주는 경우를 예로 들어보자. 만약 데이터를 받는 시간이 밀리세컨드 단위라면 동기적으로 실행되어도 큰 문제는 없을 것이다. 하지만 받는 시간이, 1, 2초나 그 이상의 시간이 걸리는 경우, 최악의 경우엔 데이터 파일 하나 때문에 웹페이지 전체를 띄우지 못하는 경우가 생길 수 있다. 이러한 문제 상황에 대비해서, 자바스크립트에서는 단일쓰레드에서도 비동기적인 프로그래밍이 가능하도록 몇 가지 장치를 해두었는데, 그것이 Event Queue와 Event Loop이다. Call Stack Call..

ECMAScript란? ECMAScript is a standard script language 자바스크립트 언어의 표준이다. 히스토리 넷스케이프에서 자바스크립트를 지원하면서 자바스크립트가 성공하자 마이크로소프트가 J스크립트를 개발했다. 넷스케이프는 표준화를 위해 자바스크립트 기술 규격을 ECMA 인터내셔널에 제출하였고 ECMA-262라는 표준이 생겨났다. 넷스케이프의 Brendan Eich가 JavaScript를 개발하였으며 Javascript는 처음에는 Mocha 라는 이름으로 후에는 LiveScript 최종적으로 Javascript라는 이름이 됐다. 개요 ECMAScript6(ES6, ES2015)는 2015년 6월에 업데이트 되었다. ECMAScript의 6번째 에디션이다. 2021년 현재는 ES..

Redis란? Remote Dictionary Server의 약어인 Redis는 데이터베이스, 캐시, 메시지 브로커 및 대기열로 사용하는 빠르고 오픈 소스, 인 메모리 키-값 데이터 스토어이다. Redis는 캐싱, 세션 관리, 게임, 리더 보드, 실시간 분석, 지형 공간, 라이드 헤일링, 채팅/메시징, 미디어 스트리밍 및 게시/구독 앱에서 주로 사용된다. 설치 https://github.com/tporadowski/redis/releases -> 최신 버전 설치 다음 명령을 사용해 redis를 설치한다. $ npm install ioredis 기본 사용 방법 const Redis = require("ioredis"); const redis = new Redis(); // uses defaults unle..

Cluster란? Cluster는 단일 쓰레드 환경인 Node.js 환경을 멀티쓰레드 처럼 동작할 수 있도록 만든 모듈이다. 기본적으로 하나의 프로세스가 32bit에서는 512MB의 메모리, 64bit에서는 1.5GB메모리를 사용하도록 제한되어 있다. V8엔진의 제한을 그대로 반영한 것인데, 설정을 더 늘릴 수는 있지만 그렇게 하기보다는 worker를 늘리는 것을 권장한다. 여러 개의 워커들이 병렬로 동작하며 효율을 극대화하는 것을 바람직한 방향으로 권하는 것. 모든 이벤트를 이벤트 큐로 넘기기 때문에 쓰레드가 하는 일은 그렇게 많지 않다. 대신 이벤트가 큐로 등록되기에 실행 시간이 예측하기 힘들다는 단점이 있다. 그래서 사용하는 것이 Cluster라는 기술이다. worker를 생성하는 두가지 방법 no..

Sass란? Sass(Syntactically Awesome StyleSheets)는 CSS pre-processor로서 CSS의 한계와 단점을 보완하여 보다 가독성이 높고 코드의 재사용에 유리한 CSS를 생성하기 위한 CSS의 확장(extension)이다. CSS의 간결한 문법은 배우기 쉬우며 명확하여 프로젝트 초기에는 문제가 없이 보이지만 프로젝트의 규모가 커지고 수정이 빈번히 발생함에 따라 쉽게 복잡해지고 유지 보수도 어려워지는 단점도 가지고 있다. 이러한 CSS의 태생적 한계를 보완하기 위해 Sass는 다음과 같은 추가 기능과 유용한 도구들을 제공한다. 변수의 사용 조건문과 반복문 Import Nesting Mixin Extend/Inheritance CSS와 비교하여 Sass는 아래와 같은 장점..

Babel이란? Babel은 자바스크립트 컴파일러로서, 최신의 자바스크립트 코드를 이전 단계의 자바스크립트 코드로 변환 가능하게 해주는 개발 도구, 즉 트랜스파일러(Transpiler)이다. 이와 같은 트랜스파일러(Transpiler)가 필요한 이유는, ES6+를 사용하여 프로젝트를 진행하려면 ES6+로 작성된 코드를 IE를 포함하여 모든 브라우저에서 문제 없이 작동할 수 있는 코드로 변환해야 하기 때문이다. 즉, Babel 패키지를 활용하면 자바스크립트 최신 문법으로 자유롭게 코딩하면, 그것과 웹브라우저간의 호환을 Babel 패키지가 책임져준다. 아래 예제는 ES6의 화살표 함수와 ES7의 지수 연산자를 사용하고 있다. // ES6 화살표 함수와 ES7 지수 연산자 [object_name].map(n ..