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는 새로 등장하는 용어와 ..

자바스크립트 라이브러리인 React.js 를 처음 시작하는 분들을 위한 내용이며, 간략한 소개와 사용 사례 및 학습할 수 있는 사이트를 알려 드립니다. 깊이 있는 정보는 이미 많은 자료가 있어서 참고할 수 있는 사이트 공유 정도로 생각하시면 될 거 같습니다. 1. React 소개페이스북과 인스타그램에서 사용자 경험을 향상하기 위해 만든 라이브러리입니다. 이벤트 요청 시 서버에서 코드를 받아 다시 렌더링해야 되는 문제를 해결하기 위해 만들어졌습니다. 프레임워크가 아니다.사용자 인터페이스 라이브러리입니다. UI 컴포넌트를 만드는 일만 하며 캡슐화를 잘 시켜줘서 재상용 성이 높습니다. 한가지 일만하여 단순하고 여러 자바스크립트 프레임워크나 라이브러리와 함께 사용할 수 있습니다. 그래서 React를 사용하기 위..

React.JS is a Javascript library for building user interfaces. It’s fast, easy to learn and fun to work with.After reading this article, which Medium claims will take you 8 minutes, you should be able to start coding React apps given that you’re comfortable with Javascript.ComponentsReact is built around components, not templates. You create a component by calling the createClass method on the R..

원문: https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6Flux를 더 혼란스럽게 만드는 것은 Flux 그 자체보다는 Flux와 Flux에서 영감을 받아 만들어진 Redux간의 차이점이다. 이 글에서는 이 둘의 차이점에 관해 설명할 것이다.Flux에 대한 이전 글을 읽지 않았다면 읽을 것을 추천한다. 왜 Flux를 바꿔야하나?Redux는 Flux가 해결하는 문제점에다가 추가적인 문제점을 더 해결할 수 있다.Flux와 같이 Redux도 애플리케이션의 상태를 더욱 예측 가능하게 만들어준다. 만약에 상태를 변경하고 싶다면 액션을 발생시켜야 한다. 상태를 저장하고 있는 스토어(store)는 접근자(getter)만 있고 설정자(setter)는 없으므로..

Um Entwicklern die Arbeit mit ReactJS in WebStorm zu erleichtern, hat das WebStorm-Team eine Liste der wichtigsten Tools zusammengestellt. In einem Blogposterläutert Ekaterina Prigara, wie die verschiedenen Werkzeuge dabei helfen können, besseren Code zu schreiben. Der Fokus liegt dabei auf Linting – der Qualitätsanalyse von Code – , Refactoring, also der Strukturverbesserung von Quelltexten, un..

자바스크립트는 타입이 느슨한 언어이기 때문에 문법 오류가 아닌 대부분의 오류는 런타임에 발생한다. 즉, 실행해보기 전에는 문제를 발견하기 어렵다. 반면 C, Java와 같이 타입이 강한 컴파일 언어에서는 함수나 메소드에 인수 선언과 타입이 다른 변수나 값을 전달하면 컴파일 에러가 발생하기 때문에 런타임 에러보다 발견하기 쉬운 편이다.자바스크립트의 이런 약점을 보완해주는 도구는 많다. 이 글에서는 React 자체에 포함된 타입 검사 기능을 사용하는 방법부터 Jest와 같은 테스트 러너(test runner), Flow와 같은 정적 타입 검사기를 어떻게 사용하는지 간략하게 다룬다.이 글에 등장하는 코드 일부는 ECMASScript 6 (또는 ECMAScript 2015)의 기능을 사용하므로 관련 지식이 필요..

1. JSXTransformerJSXTransformer 내부에서 사용되는 Esprima-FB 파서는 기존 Esprima 파서를 확장(JSX 명세) 구현한 버전이다.현재 버전은 15001.1001.0-dev-harmony-fb 이며, 분석된 내용은 13001.1001.0-dev-harmony-fb 버전을 따른다.JSXTransformer CDN생성된 Parse 트리 구조는 모질라의 Parser AST 인터페이스 명세를 따르고 있다.(or 구현되어있다)Program Interface 명세소스상의 parser 옵션 수정하여, (파서를 통해)수집된 토큰을 반환받을 수 있다.function getAstForSource(source, options) { if (_astCache[source] && !options..

원문: https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6Flux를 더 혼란스럽게 만드는 것은 Flux 그 자체보다는 Flux와 Flux에서 영감을 받아 만들어진 Redux간의 차이점이다. 이 글에서는 이 둘의 차이점에 관해 설명할 것이다.Flux에 대한 이전 글을 읽지 않았다면 읽을 것을 추천한다. 왜 Flux를 바꿔야하나?Redux는 Flux가 해결하는 문제점에다가 추가적인 문제점을 더 해결할 수 있다.Flux와 같이 Redux도 애플리케이션의 상태를 더욱 예측 가능하게 만들어준다. 만약에 상태를 변경하고 싶다면 액션을 발생시켜야 한다. 상태를 저장하고 있는 스토어(store)는 접근자(getter)만 있고 설정자(setter)는 없으므로..