Hello World

장난 삼아 써보던 React를 실무에 적용할까 말까 고민하면서 이것저것 좀 찾아봤다. 찾아보면서 알게 된 의외의 사실은 React의 핵심적인 장점이 성능에 있다는 것이다. React를 Angular랑 비교하면서 단방향이고 UI만 다루기 때문에 심플하다는 이야기를 많이 하지만, 그냥 옛날 방식의 템플릿에 비해 React가 뭐가 더 좋으냐고 물으면 성능 이외의 이유를 대기 어렵다. JSX 문법이 더 낫냐고 하면 그렇지도 않다. 진짜(?) 템플릿 언어들에 비해 JSX 문법이 가독성도 높다고 하기 어렵고 그 외 여러 가지 면에서도 쳐진다.그럼 React가 왜 성능이 좋으냐. 결정적인 이유는 DOM Diff에 있다. 그냥 템플릿 엔진은 state가 바뀌면 전체 엘리먼트를 새로 그려야 하는데 React는 state..

이글은 Todd라는 개발자가 작성한 “Ultimate guide to learning angular js in one day”라는 블로그 글을 번역한 것이다.정말 하루만에 끝낼 순 없지만 -_- 그래도 좋은 시작점이 되리라 생각한다. 다같이 AngularJS에 빠져보자!AngularJS 란?Angular는 자바스크립트로 만든 client 측 MVC/MVVM 프레임워크로 모던 단일 페이지 웹 애플리케이션(혹은 웹사이트) 개발의 정수이다. 그리고 모던 웹을 다루는 새로운 방법이자 HTML5가 가져올 미래를 위한 큰 발판이다. 이 글은 필자가 Angular를 경험해보며 알게 된 것들과 조언, 우수 사례를 바탕으로 작성해본 이름하여 하루만에 끝내는 Angular 강좌다.용어Angular는 새로 등장하는 용어와 ..

크리스 코이어(Chris Coyer)는 최근에 자신의 사이트인 CSS Tricks에 올린 상황별 CSS 중앙정렬 방법을 정리한 글을 통해 CSS를 이용해 뭔가를 가로 및 세로로 중앙정렬하는 방법이 너무나도 많다는 사실을 보여줬습니다. 각 중앙정렬 방법은 모두 저마다 주의할 점이 있지만 그러한 방법들을 조합하면 IE8 및 이후 버전에서도 일관되게 크로스 브라우징을 지원하는 막강한 중앙정렬 기법을 만들어낼 수 있습니다.이제 본격적으로 어떻게 하는지 살펴보겠습니다.블록 만들기응답형 웹사이트를 제작하고 있다면 대부분 요소의 크기를 퍼센트로 지정할 것이며, 여기서는 임의의.container 요소를 만듭니다.123 ...123456.container { width: 70%; height: 70%; margin: 4..

우리는 고객이 무엇에 관심 있어 하고 무엇에 관심 없어하는지, 어떤 것을 보았을 때 클릭해 들어가고 어떤 것을 보았을 때 사이트에서 이탈하는지 궁금해 합니다. 이러한 정보를 얻기 위해 봐야 할 것은 역시 웹서버의 접속 로그입니다.처음에는 매일 생성되는 로그 파일을 일일이 파싱해서 원하는 정보를 DB에 쌓는 방법을 이용했지만, 이러한 방식은 한계가 있었습니다. 저장할 수 있는 데이터의 양에 심각한 제한이 있었고, 따라서 처음에 얻고자 했던 데이터 이상의 것을 새로 추출할 수도 없었습니다.그래서 지금은 웹서버 로그를 하둡(Hadoop) 클러스터에 쌓고 있습니다. Google Analytics 같은 외부 분석툴을 사용하기도 하지만, 아무래도 데이터를 우리 손에 직접 들고 있는 것이 더 유연한 분석을 제공할 수..

파워포인트 설계의 불편한 점 1. 제한된 공간에 페이지 경로, 화면 UI, 디스크립션 등 다양한 내용을 담아야 한다. 그러다 보니 화면이 점점 복잡해진다. 개인적으로는 다음 페이지로 넘기지 않기 위해 최대한 욱여넣었고 폰트 사이즈는 점점 작아졌다. 2. 수정사항이 발생하면 모든 화면을 일일이 수정해야 한다. 페이지가 적으면 크게 문제 되지 않지만, 페이지가 많아지면 메뉴명 하나만 수정해도 모든 페이지를 건드려야 하는 노가다 작업이 빈번히 발생한다. 3. 스토리보드를 받아보는 대표, 클라이언트, 디자이너, 개발자 등이 문서만으로 기획자의 의도를 100% 이해하지 못한다. 그러다 보니 결과물이 눈에 보여지는 디자인 단계와 실제 구현되는 개발 단계에서 미처 예측하지 못했던 이슈들이 발생한다. 위와 같은 이유로..

throttle매 밀리세컨드마다 최대 한 번만 호출될 수 있도록 Throttle된 함수를 만듭니다.– throttle by lodashthrottle – lodash throttle – underscoreDOM API 중 onmousemove, onmouseover, onscroll 같은 이벤트는 1초 안에도 수 십 번씩 과다하게 호출될 수 있다. 이런 이벤트에 무거운 로직을 끼워두면 당연히 웹페이지의 성능이 떨어질 수 밖에 없다. 따라서 로직이 적당히 호출될 수 있도록 조절하는 작업이 필요한데, 이 때 간편하게 사용할 수 있는 것이 _.throttle이다._.throttle은 로직 실행 주기를 만드는 함수라고 이해하면 된다. 밀리세컨드 단위로 시간을 설정하면_.throttle에 넘긴 콜백함수는 설정한 ..

https://brunch.co.kr/@changhwaoh/1

http://es6-features.org/#Lexicalthis

ELKElasticsearch + Logstash + KibanaElasticsearch는 Apache의 Lucene을 바탕으로 개발한 실시간 분산 검색 엔진이며,Logstash는 각종 로그를 가져와 JSON형태로 만들어 Elasticsearch로 전송하고,Kibana는 Elasticsearch에 저장된 Data를 사용자에게 Dashboard 형태로 보여주는 솔루션이다. http://elastic.co 사이트 오픈소스 제품장점Google Analytics(GA)의 데이터로 사이트 접속 통계를 구할 경우 원하는 대로 데이터를 획득하기 어렵다.자체 서버의 모든 로그를 100% 수집할 수 있기 때문에 데이터에 대한 신뢰성이 높다.파라미터 값별로 통계를 볼 수 있기 때문에 정확한 데이터 분석이 가능하다.검색엔진..

http://techhtml.github.io/cors/index.html