Programming 7

빌더 패턴 Builder Pattern

추상 팩토리 패턴과 팩토리 메서드 패턴에 이은 세 번째. 빌더 패턴(Builder Pattern)이다. 개인적으로 빌더 패턴은 앞의 두 패턴보다 자주 사용하고 있는데, 오늘은 design-patterns-JS의 예제를 가지고 설명을 해보도록 하겠다. 빌더 패턴은 무언가를 뭔가를 조합해주는 패턴이라 이해하면 쉽다. 웹에서 많이 사용하는 Request Query를 예를 들어보도록 하자. Request(리퀘스트)는 크게 URL, METHOD(GET, POST, PUT, DELETE), 그리고 데이터 부분으로 이루어져 있다. 이제 우리는 어떤 리퀘스트 정보를 담고 있는 클래스를 만들어 보도록 하자. class Request { constructor(url, method, data) { this.url = url..

Design Pattern 2019.04.28

Javascript Optional Chaining

ES2015가 나온지 꽤 오랜 시간이 지났다. function-bind, rest spread, decorator 등 개발을 편하게 도와주는 문법들이 정의되면서 개발을 하는데 한층 더 수월해지는 것 같다. 오늘은 최근 개발하면서 사용하기 도입하기 시작한 꿀같은 기능. Optional Chaining에 대해서 정리해 보고자 한다. Optional Chaining? Optional Chaining. 말 그대로 특정 값에 대한 참조에 대해서 값이 존재하지 않을 때 선택적으로 체이닝 할 수 있는 문법이다. 이 문법은 C#의 conditional operator, Swift의 Optional Chaining, 또 CoffeeScript의 Existential operator와 매우 유사하다. 다른 언어들에서도 유..

JavaScript 2018.11.10

알아두면 쓸만한 Chrome Console 기능

나는 개발할 때 Chrome 개발자도구의 console을 굉장히 자주 사용하는데(대부분의 개발자들이 그럴 것이라 생각한다), 오늘은 크롬 개발자도구의 편리한 기능과 잘 쓰진 않지만 알아두면 좋은 기능들을 한 번 정리해 보고자 한다.Console OpenWindows / Linux: Ctrl+Shift+JMac: Cmd+Opt+J개발자 도구가 열린 상태: ESCConsole Clearclear() 입력Ctrl+LLog Options console 오른쪽 상단위 톱니바퀴를 누르면 옵션을 볼 수 있다. 주로 사용하는 기능은 다음과 같다.Hide network: 404 또는 500 오류 등은 보여주지 않는다.Log XMLHttpRequst: XML Request를 기록Preserve log: refresh나 탐..

JavaScript 2017.12.31

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

Javascript Image Filter 만들기

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

JavaScript 2017.04.15