JavaScript 21

React v16 무엇이 바뀌었나

React의 새로운 버전이 Fiber란 코드 네임으로 개발 된 지 꽤 시간이 지났다. 대략 한달 전 v16의 RC버전이 릴리즈 된 후 이제 정식버전이 출시되었다. 최근 저작권 이슈를 겪으면서 한번 위기를 맞이 했던 React. 과연 v16에서는 어떤것이 바뀌었을까. 하나씩 알아보도록 하자. 먼저 React v16(이하 v16)을 만들게 된 이유는 무엇일까? 가장 먼저 생각나는건 Virtual DOM의 성능이다. 초창기 V-DOM을 도입한 프레임워크였던 React는 최근에 V-DOM을 사용하는 프레임워크들(예를들면 vue)에 대해 벤치마크 성능이 떨어진다. 이에 문제를 느꼈던 페이스북 개발자들은 React의 Core 알고리즘을 다시 짜야 할 필요성을 느꼈을 것이다. 이렇게 핵심 코드가 다시 만들어진게 Re..

JavaScript 2017.10.08

Currying in Javascript

지난 포스트(Functional Programming in Javascript)에서 함수형 패러다임에 대해 간략히 소개했었는데, 이번에는 그 중 Currying에 대해서 좀 더 자세히 알아보도록 하자. 함수형 프로그래밍이 뭔지 궁금한 사람은 이전 포스트를 참고하길 바란다.Currying ? 우선 커링에 대한 정의에 대해 알아보도록 하자.수학과 컴퓨터 과학에서 커링이란 다중 인수 (혹은 여러 인수의 튜플)을 갖는 함수를 단일 인수를 갖는 함수들의 함수열로 바꾸는 것을 말한다. 모지즈 쇤핑클에 의해 도입되었고, 이후 하스켈 커리에 의해 발전하였다. 무슨말인지 잘 모르겠다. 쉽게 풀어 쓰면 이렇다. 여러개의 인자(parameter)를 갖는 함수를 단일 인자를 갖는 함수들의 연결로 바꾸는 것을 의미한다. 한가지..

JavaScript 2017.07.23

Functional Programming in Javascript

이번 포스팅에서는 자바스크립트에서 함수형 프로그래밍(Functional Programming) 하는 방법을 정리해 보고자한다. 함수형 패러다임 개념이 생소한 사람은 다음 포스팅을 읽어보도록 하자. (번역) 함수형 프로그래밍이란 무엇인가? 위 포스팅에서 말하고자 하는 핵심은 다음과 같다. 함수형 프로그래밍은 순수 함수를 작성하는 것, 그러니까 숨겨진 입력이나 출력을 최대한 제거하여 가능한한 우리 코드의 대부분이 단지 입력과 출력의 관계를 기술하게끔 하는 것을 말한다. 부작용을 완전히 피할 수는 없다. 대부분의 프로그램은 반환 값을 얻기 위해서가 아니라 어떤 동작을 하기 위해 실행하기 때문이다. 하지만 프로그램 내부에서는 엄격하게 통제하고자 한다. 우리는 가능한 모든 곳에서 부작용(과 부원인)을 제거하고, ..

JavaScript 2017.07.22

TDD & Mocha - Javascript Test Framework

TDD, BDD. 테스트 주도 개발 방법론에 대한 관심이 많이 있었는데 실제 써볼 기회는 많지 않았다. 이번 기회에 TDD에 대한 개념을 정리해 보고 javascript에서 사용할 수 있는 Test Framework에 대해 한번 공부해 보고자 한다. 찾아보니 Jasmine, Karma, JUnit, 또 최근 페이스북에서 만든 오픈소스 Jest 등 정말 종류가 다양하다. 그중 평소에 눈여겨 보았던 Mocha에 대해 다뤄보려 한다. TDD? TDD(Test-driven development)에 대해 간단히 정리해 보자. 기존 개발 방식 Flow에 대해 생각해 보면 보통은 이런 방식으로 진행된다고 볼 수 있다. 함수 설계 → 코드 작성 → 수동 테스트 만약 새로운 기능이 추가된다거나 유지 보수를 위해서 코드를..

JavaScript 2017.05.14

Javascript Image Filter - convolution

저번 포스팅에서 Javascript를 이용해서 간단한 이미지 필터를 만들어 보았다. 이번에는 컴퓨터 비전 분야에서 주로 사용하는 Mask를 이용해 좀 더 고차원 필터를 만들어 볼 것이다. 소스 코드는 저번에 만들었던 이미지 필터에서 발전시켜 나갈 예정이므로 코드가 없는 사람은 아래 github repository에서 다운받길 바란다. 아울러 앞에 내용에 대해 모르는 사람은 다음 아티클은 참고하도록 하자.Javascript Image Filter 만들기Image Filter Basic Source CodeMask ? 코드를 짜기에 앞서 Mask란 무엇인지 부터 알아보도록 하자. Mask는 이렇게 생겼다.[그림] Mask 위 그림과 같이 보통 3x3, 5x5, 7x7 정방형 행렬로 이루어져 있으며 위 그림에..

JavaScript 2017.05.02

Javascript ES6 Proxy

여기저기서 자바스크립트의 새로운 표준인 ECMA2015(ES6) 문법이 많이 쓰이고 있다. arrow, spread부터 class까지 정말 다양한 스펙들이 추가되었다. 그 중에서 아무리 봐도 잘 이해가 안가는 객체가 있었으니 바로 Proxy이다. 구글링을 해봐도 명쾌하게 이해되는 글은 찾아볼 수가 없었다. 이번 기회에 proxy가 뭔지 파헤쳐 보도록 하자. 처음 Proxy 객체를 접하고 이 글을 적은지 2년이 되어가는데, 다시 보니 많이 부족한 글인 것 같다. 따라서 그 동안 공부했던 내용을 약간 보충해 보았다.Proxy ? 먼저 Proxy란 단어의 사전적 의미부터 알아보자. 네이버 사전에서 Proxy를 검색해 보았다.Proxy란 대리, 대리인, (측정・계산하려는 다른 것을 대표하도록 이용하는) 대용물...

JavaScript 2017.04.16

Javascript Image Filter 만들기

최근 어플리케이션 보면 셀카/셀피를 찍어 이미지 필터를 적용할 수 있는 앱을 쉽게 찾아볼 수 있다. Facebook, Instagram, B612 등 사진을 올릴 때 필터를 쉽게 적용해서 올릴 수 있다. 사실 이런 필터 기능들은 예전부터 포토샵을 이용하면 쉽게 적용할 수 있었다. 사실 필터란, 레스터 그래픽으로 이루어진 사진들의 픽셀(화소)값들을 특정 규칙에 따라 색을 바꿔주는 것이다. 구글에 javascript Filter를 검색해보면 몇몇 Filter Library를 찾을 수 있다. Filter Library를 이용하면 쉽게 필터를 적용할 수 있지만 내 입맛에 맞게 바꾸는 것은 쉽지가 않다. 이번 포스트를 통해 이러한 이미지 필터를 직접 만들어보자. 플랫폼은 물론 웹 기반이 되겠다. 로컬에 저장된 이..

JavaScript 2017.04.15

Webpack2 시작하기

Webpack2 시작하기 오늘날 javascript를 빌드하지 않고 사용하는 경우는 드물다. 때문에 js를 빌드할때 사용하는 빌드툴이 매우 다양한데 최근에는 grunt, gulp, browserify를 거쳐 webpack을 이용해서 빌드를 많이 하는 것 같다. 이번 기회에 webpack2에 대한 소개를 해 보고자 한다. 또 새로운 프로젝트를 만들 때마다 빌드 환경을 설정해 주고 있는데, 그때마다 공식 문서를 찾아보며 빌드 세팅을 하다보니 너무 귀찮아져서 나만의 boilerplate를 만들어 보기로 했다. 먼저 webpack에 대해 간단히 소개하자면, 웹 프로젝트에서 asset들을 bundle(하나의 단일 파일)로 만들어 배포하기 쉽게 빌드해주는 도구이다. js를 예를 들면, 여러 개로 쪼개진 스크립트 파..

JavaScript 2017.04.08

ECMA 2015를 공부해보자

Javascript의 속도가 점점 빨라지면서 이를 이용하여 단순 HTML코드에서 사용되는 스크립트를 넘어, 어플리케이션을 만드는 데에도 사용되고 있다. 따라서 현재 트렌드를 따라가기 위해, 현재 사용되고 있는 ECMA5 문법에 새로운 스펙이 추가 된 ECMA2015(es6)가 표준화 되었다. 그러나 현재 몇몇 브라우저에서 제한된 문법만 지원되고 있을 뿐이어서 실제 개발이나 서비스에 도입하는데는 시간이 걸릴 것으로 보인다. 그렇다면 미리 적용해 볼 수 있는 방법은 없을까? 결론부터 말하자면 가능하다. Babel같은 트랜스파일러를 통해 es6 문법을 es5로 컴파일하여, 문법은 es6로 작성하고 실행은 es5로 하는 것이다. 이 페이지에서는 Babel을 설치한 후 앞으로 사용 될 es6 문법을 미리 공부해 ..

JavaScript 2016.08.07

자바스크립트 배열

배열은 언어에 구분없이 많이 사용되는 자료구조이다. 여기서 자바스크립트에 사용되는 배열을 한번 정리해 보자. 1. 배열 선언 배열을 만드는 방법은 여러가지가 있다. 1) [ ]를 이용하여 배열을 선언하는 방법 var numbers = []; // 배열 선언 var numberArray = [ 1, 2 , 3, 4 , 5]; 2) Array 생성자를 호출하는 방법 var numbers = new Array(); var numberArray = new Array(1, 2, 3, 4, 5); 파라미터를 1개만 줄 경우 배열의 길이를 할당한다. var numbers = new Array(5); // 길이가 5인 배열 생성 일반적으로 1번 방법을 사용하는것이 더 효율적이다. 2. 배열에 접근하기배열에 접근할 땐 ..

JavaScript 2015.11.01