전체 글 39

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

React Server Side Rendering

+ 추가SSR에 대해 아티클을 작성한지 어느덧 2년이 되어간다. 그동안 Webpack, Babel, React 버전이 올라감에 따라 프로젝트의 설정방법과 몇몇 API가 변경되었다. 따라서 가장 최신으로 SSR 프로젝트를 구성하는 방법으로 다시 글을 작성했다. Next.js 같은 좋은 프레임워크도 있지만 프레임워크에는 커스터마이징에 한계가 있으므로, 이 글에서는 직접 만들 경우엔 어떻게 하는지에 초점을 맞춘다. 소스코드는 Github에 올려두었으므로 참고하길 바라며, 사용한 라이브러리와 툴은 아래와 같다. Babel 7Webpack 4React 16.7.x 작년과 올해 들어 가장 각광받는 JavaScript Library를 뽑아보면 React도 그 안에 들어갈 것이다. React의 장점을 생각해보면 Vir..

Nodejs 2017.04.30

nodejs error handling

오늘은 nodejs framework로 많이 사용하는 Express의 error handling에 대해서 정리해 보도록 하자. Express에서 어떻게 어플리케이션을 구조화하는지에 대한 가이드를 제공하지 않는다. 그 이유는 어플리케이션의 규모 및 참여하는 팀의 규모에 따라 구조가 달라질 수 있기 때문에, 최대한 유연성을 유지하기 위하여 구조에 대한 전제조건을 배제하려했기 때문이다. 따라서 Express를 사용해 보면 Spring이나 Nginx에 비해서 굉장히 자유롭다는 것을 느낄 수 있다. 그렇다면 error handling은 어떻게 해야 할까? 공식 문서를 보더라도 오류 처리에 대한 설명이 매우 간결하다. 정말 별 내용이 없다. 따라서 error handling을 하면서 궁금했던 몇가지 점이 있었는데,..

Nodejs 2017.04.23

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

LINE Bot 만들기 - 3. Nodejs 서버 만들기

이제 Nodejs를 이용해서 AWS에 올라갈 서버를 만들어 보도록 하겠습니다. 비지니스 로직 구현에 참고할 문서는 Messaging API(https://devdocs.line.me/en/)를 참고하였습니다. 여기서는 서버 설정과 간단히 응답하는 코드에 대해서만 설명하도록 하겠습니다. 아래 내용은 express module에 대해서 알고 있다는 전제하에 진행하도록 하겠습니다. 1. SSL 설정하기 우리가 만든 서버에서 https protocol을 사용하기 위해서는 서버에 SSL 설정을 해주어야합니다. 인증 설정을 하기 위해서는 .ca-bundle 파일 / .key 파일 / .crt파일이 필요합니다. 위 파일들은 인증서를 발급할때 인증기관을 통하여 얻을 수 있습니다. (comodo 인증기관의 경우 인증이 ..

Nodejs 2016.10.29

LINE Bot 만들기 - 2. AWS 서버 & SSL 인증서

앞에서 설명한 callback URL에 등록할 서버를 만들어 보도록 합시다. Messaging API는 https 프로토콜을 사용해야 하기 때문에 SSL 인증서가 필요합니다. 여기서 SSL인증서는 comodo 업체의 인증서를 사용해서 만들어 보도록 하겠습니다. AWS 서버 구축하기 아마존 웹 서비스(AWS)는 처음 가입하면 12개월 무료로 사용할 수 있는 프리티어 서비스를 제공합니다. (쉽게말하면 12개월 공짜!) 우리는 AWS 프리티어 서비스 중 EC2 라는 클라우드 서버 서비스를 사용해서 우리의 봇 서버를 돌려보도록 하겠습니다. 1) AWS 가입하기 이미 계정이 있으신분들은 이부분은 넘어가셔도 좋습니다. 이 포스트에서는 가입하는 부분은 다른 분들이 작성하신 포스트를 참조하도록 하겠습니다. AWS 가입..

Nodejs 2016.10.29