Programming Note

Google에서 만든 V8엔진이 JavaScript의 성능을 비약적으로 개선되면서, JS를 이용해 서버도 돌릴 수 있지 않을까 하는 의문이 시작됐고 Nodejs가 탄생하게 되었다. 최근에는 Nodejs를 이용해서 프로덕트를 구축하는 기업도 많이 늘어나는 추세이며, 앞으로 더욱 발전할 것이라 기대된다. 보통 노드를 이용해서 서버를 구축한다고하면, 기본(default)으로 제공되는 모듈을 이용해서 만드는 사람은 거의 없다고 봐도 무방하다. 노드 진영에서 대표적으로 많이 사용하는 프레임워크로는 Expressjs가 있다. 미들웨어(Middleware) 패턴을 이용해서 빠르게 서버를 구축할 수 있으며, 미니멀(Minimal)하고 러닝 커브(Learning Curve) 또한 적어서 쉽게 적용할 수 있다. 현재 V4..

이전에 Javascaript의 Iterator에 대해서 몇가지 다뤄보았었는데, 도입된지 얼마 안된 스펙이다보니 자유 자재로 다루기가 아직 버겁다는 생각이 많이 들었다. 또한 최근 이터레이터와 제네레이터를 이용해 멋지게 구현한 코드들을 접하고 나서, 연습을 많이 해야겠다는 생각이들어 여기에 정리해 보고자 한다. 아래 함께보면 좋은 글들을 같이 링크하므로 관심있는 사람은 먼저 읽어보는 것도 좋겠다.Javascript IteratorES6의 심볼, 이터레이터, 제네레이터ES6의 제너레이터를 사용한 비동기 프로그래밍Async-await는 어떻게 구현하는가?Iterator를 사용하면 좋은 점? 아무리 좋은 기능이라도 적절하게 사용하지 않으면 독이 될 수 있다. 이번 기회에 Iterator를 사용했을 때 얻을 수 ..

최근 React v16버전으로 업데이트되면서 여러가지 개발 효율성을 높여주는 API들이 추가되고 있다. 최근 회사에서 시작한 스터디에서 이번에 React Conf 2018에서 소개된 Hooks에 대해 공부하기로하여 여기에 정리해 본다. Why Hooks ? 어떤 기능에 대해 깊게 이해하고 싶다면, 그 기능이 왜 생겼는지에 대하여 알아보는 것이 가장 좋은 방법이라 생각한다. 따라서 이 글에서는 Hooks을 다루는 API보단 도입 배경에 초점을 맞추도록 하겠다. Hooks 문법을 모르는 사람은 사람은 간단히 Hooks at a Glance를 읽고 오도록 하자. 다시 돌아와서 Facebook은 React Hooks을 왜 도입되게 되었을까? 사실 공식 문서인 Intoducing Hooks Motivation에 ..

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

지난 포스트였던 Javascript Iterator에서 잠깐 언급했었던 async-await에 관해 이야기해 보도록 하자. 시작하기에 앞서 이 포스트에서는 async-await에 대한 문법을 다루지 않는다. async-wait가 어떤 배경을 가지고, 어떤 방법을 통해 구현이 되어있는지 그 근원에 대한 탐구를 할 생각이다. 따라서 iterator, promise, generator, async-wait, 그리고 Babel에 대한 사전 지식이 필요한 사람들은 아래 링크에 있는 글들을 먼저 읽어보길 바란다.Javascript IteratorES6의 제너레이터를 사용한 비동기 프로그래밍Async Function Async-await? Async-await는 ECMA-262에서 초안으로 처음 등장했으며, ECMA..

Higher-Order Function. 한국어로 고차함수라 부르는 이 함수는 Functional Programming을 할 때 많이 사용 한다. Higher-Order Function(이하 HOF)를 사용하면 보다 유연하고 반복을 줄일 수 있는 코드를 작성할 수 있다. 이번 기회에 간단한 개념 정리와 어떻게 써먹을 수 있을 지 정리해 보도록 하자. HOF?? 컴퓨터 과학(Computer Science)에서 적어도 아래 중 하나 이상을 만족하면 HOF라 할 수 있다.하나 이상의 함수를 인자로 받는다.함수를 결과로 반환한다.쉽게 말하면, 함수를 다루는 함수라고 말할 수 있겠다. 말로 설명하는 것보다 간단한 예제 코드를 보도록 하자. twice() 는 함수를 인자로 받아 2번 반복해주는 HOF이다. 이 함수..

ECMA2015 문법이 추가되면서 javascript는 큰 변화를 겪어가는 중이다. 개발하는데 정말 유용한 개념들이 되었는데, 한꺼번에 많은 스펙들이 추가되면서 생각보다 조명받지 못한 개념들도 많다. 그 중에서 우리가 많이 사용하지만, 또 간과하기 쉬운 개념인 Iterator(반복자)에 대해 알아보도록 하자. for-of Iterator에 대해 이야기 하자마자 갑자기 for-of가 나온 것인지 의아할 것이다. 하지만for-of 가 그 무엇보다 Iterator와 매우 밀접한 연관을 지닌 문법인데 이제부터 차근차근 알아가 보도록 하자.for-of 가 생긴 배경에 대해 알아보기 위해서 약간 과거로 거슬러 올라가보도록 하자. ES5 시절, 자바스크립트에서 object 를 순회하는 방법은 한가지 뿐이었다. 바로 ..

나는 개발할 때 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나 탐..

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

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