이 글은 인프런에서 게재되어있는, 유인동 님의 자바스크립트로 알아보는 함수형 프로그래밍을 수강하면서 정리한 노트입니다. 제가 잘못 이해하거나 정리한 내용이 있다면 댓글로 알려주세요. 확인하는대로 수정하도록 하겠습니다. :) 성공적인 프로그래밍 모든 프로그래밍 패러다임은 성공적인 프로그래밍을 위해 존재한다. 이는 함수형 프로그래밍도 마찬가지이다. 그렇다면 좋은 프로그램이란 무엇일까? 바로 사용성, 성능, 확장성, 기획 변경에 대한 대응력이 좋은 프로그램을 좋은 프로그램이라고 한다. 이러한 좋은 프로그램을 효율적이고 생산적으로 만들어내는 것이 바로 성공적인 프로그래밍이다. 함수형 프로그래밍은 성공적인 프로그래밍을 위해 부수 효과를 미워하고, 조합성을 강조하는 프로그래밍 패러다임이다. 순수 함수를 만든다. 순..

최근 인프런에서 React.js 강의를 찾아볼까 하다가, Javascript 풀스택 로드맵이라는 수강리스트를 발견해서 웹 게임을 만들며 배우는 자바스크립트를 보게 됐다. 기초적인 문법은 건너뛰고 틱택토를 보면서, 바닐라 자바스크립트를 이용해서 틱택토 게임을 작성해본 적이 있었나? 싶었다. 마침 속깊은 자바스크립트 책을 읽으면서 지난 몇 년간 자바스크립트에 대해 제대로 알지도 못하면서, 자바스크립트를 이용해서 먹고살았나하는 생각에 자괴감이 들던 차. 간단하게 jsFiddle에 접속해서, 간단하게 코드를 작성해봤다. 리팩토링을 통해서 중복코드를 함수로 뽑아내고, 변수 선언을 모듈 최상단에 하는 작업을 거치고나니 이해하는데 크게 어려움은 없었다. 다만 개선할만한 포인트가 몇몇개 남아있었다. 크게 대단한 건 아..

폼 베이스 인증에 다이제스트 인증을 적용하기 #1 에서 싱겁게 끝내긴 하지만, 팀장님을 회유하는데 완벽하게 실패해버린 나는 다이제스트 인증을 따로 구현하는 수밖에 없었다. 야! 회사다닐 맛 난다! ^ ㅈ^)(쑻) 일단 가능한지부터 검토하기위해 Basic Authentication을 구현해봤다. 일단 HTTP Authentication, MDN web docs를 참조하여 Basic Authentication에 대한 내용을 파악하도록 하자. 크게 어렵지 않다. 일단 서버에서 인증정보 없이 접근을 시도하는 상대에게 401 에러와 함께, 헤더에 WWW-Authenticate값을 Basic Realm="[Realm]"와 같이 전달하여 Basic Authentication을 사용하고 있음을 알려준다. 401 응답을..

주의: 폼 베이스 인증과 다이제스트 인증을 동시에 적용하는 건 큰 의미는 없다.특히 NGINX 등에서 제공하는 기본 인증방식(BASIC/DIGEST)을 사용할 시, 브라우저에서 제공하는 로그인 창이 출력되지 않게 하려면 사용자가 입력한 ID와 패스워드가 URL에 그대로 노출되게된다. 그러니 이러한 구현사항을 요청받았다면, 천천히 포기할 수 있게끔 설득해보도록 하자. 로그인 창으로 ID와 패스워드를 입력하면, 서버에서 임의의 세션값을 생성하여 사용자를 추적하게끔 설계되어있는 시스템이 있다. 즉, 폼 베이스 인증 방식을 사용하고 있었다. 이 시스템에 보안상의 문제가 있다며, 다이제스트 인증 방식을 사용하게끔 해달라는 요청이 들어왔다. 당장 폼 베이스 인증 방식이라는 말이 떠오르지 않았던 나는 잠시 정신이 아..

최근의 웹 트랜드를 놓고 비교해봤을 때, 우리의 웹 어플리케이션은 살짝 뒤쳐져있다. 10여년간 자바스크립트와 jQuery를 사용해서 만들어놓은 레거시 시스템을 갈아엎기위해, angularJS를 도입하여 신규 웹 어플리케이션을 몇년간 개발하긴 했다. 다만 오랫동안 판매된 장비들의 후방호환성을 지원해야 했기 때문에 여러모로 문제가 많았다. IE8을 지원해야했는데 angularJS는 업데이트를 통해 ‘더 이상 IE8을 지원하지 않겠다’라고 밝혀 업그레이드를 포기해야했고, 장비에서 스트리밍하는 영상의 헤더가 커스터마이징 되어있어 ActiveX를 사용하지 않을 수 없었다. 그러던 와중에 차트를 사용하는 기능을 구현해야했고, 다른 작업을 하는 동안 직장동료가 nWagon을 찾아냈다. 오픈소스 차트 라이브러리, nW..

캔버스 위에 이미지를 표시해주고, 그 위에 여러개의 박스와 라벨을 그려주는 UI를 구현해야 했다. 사용자가 캔버스 내에 사각형 형태의 영역을 지정할 수 있고, 이 영역의 외부는 어둡게 표시를 해줘야 했다. 설명하는 것보다는 구현된 내용을 보여주는게 빠를 듯 하다. 간단하게 설명하면 위와 같은 UI를 만들어야했는데, 네모난 영역의 모서리는 이동 및 크기의 변경이 가능했다. 네모난 영역의 외부를 어둡게 표시하는 것 자체는 큰 문제는 아니었다. fillRect를 이용해서 외부의 영역을 네 개의 구역으로 나눠, (0, 0, 0)에 0.5의 알파값을 주고 그려주면 됐다. context.strokeStyle="rgba(0, 0, 0, 0.5)"; context.fillStyle="rgba(0, 0, 0, 0.5)"..