WannaBeDeveloper

지금까지 다룬 리액트 앱들은 데이터를 브라우저에서 수집해 브라우저의 저장소에 저장했다. 리액트는 view 계층이기에 브라우저에서 모든 것을 처리해야 하기 때문이다. 하지만 대부분의 앱은 실제로는 백엔드 계층이 필요하다. 즉, 서버를 염두에 두고 구조를 잡아야 한다. 리액트를 isomorphic하게 렌더링한다는 것은 브라우저가 아닌 플랫폼에서 리액트를 렌더링한다는 것을 의미한다. 이는 UI를 서버에서 렌더링하고 브라우저에 보내 표시한다는 뜻이다. 서버 렌더링의 강점을 살리면 애플리케이션의 성능, 이식성, 보안을 향상시킬 수 있다. 1. isomorphism과 universalism 비교 isomorphic과 universal이라는 용어는 클라이언트와 서버 양쪽에서 작동하는 애플리케이션을 의미한다. isom..

단일 페이지 앱에서는 한 페이지 안에서 모든 일이 벌어지기 때문에 브라우저 방문 기록, 책갈피, 이전 페이지, 다음 페이지 등의 기능은 적절한 routing 솔루션이 없으면 제대로 작동하지 않는다. routing이란 클라이언트의 요청을 처리할 endpoint를 찾는 과정이다. endpoint는 브라우저의 위치, 방문 기록 객체와 함께 작동해 요청받은 content를 식별한다. javascript는 이렇게 식별한 content를 가져와서 적절히 UI를 렌더링할 수 있다. react router는 리액트 앱을 위한 routing 솔루션이다. 1. router 사용하기 router를 사용하면 웹사이트의 각 section에 대한 경로를 설정할 수 있다. 각 경로는 브라우저의 주소창에 넣을 수 있는 endpoin..

1. 스냅샷 테스팅 UI 개발에 TDD를 적용하기가 어렵고 때로는 비실용적이다. UI가 자주 바뀌면 UI 테스트를 유지보수하는데 시간이 오래 걸릴 수 있기 때문이다. 또한 이미 프로덕션 환경에서 작동 중인 UI component에 대한 테스트를 작성해야 하는 경우도 자주 있다. 스냅샷 테스팅을 사용하면 UI component에 원치 않는 변화가 생기지 않았음을 확신할 수 있는 테스트를 빠르게 진행할 수 있다. 제스트는 렌더링한 UI의 스냅샷을 저장할 수 있고 나중에 진행하는 테스트에서 SUT가 렌더링한 결과를 스냅샷과 비교해 소스 코드 변경이 UI에 변화를 주지 않았음을 빠르게 확인하면서도 UI 테스트 구현의 어려움을 덜 수 있다. 스냅샷 테스팅은 처음 테스트를 실행할 때 DOM의 스냅샷을 저장하고 그 ..

1. ESLint 대부분의 프로그래밍 언어는 코드 실행 전 컴파일해서 코드 작성 규칙을 지켰는지 확인하는 반면, javascript는 컴파일러를 사용하지 않아 코드를 작성한 뒤 브라우저에서 직접 프로그램을 실행해야 오류가 있는지 확인할 수 있다. 그러나 이를 보완하기 위해 javascript에는 코드 분석을 해주는 많은 도구들이 있다. javascript를 분석하는 과정을 hinting 또는 linting이라고 하는데, JSHint와 JSLint는 원래 javascript를 분석하고 형식에 대한 제안을 제공하는 도구였다. ESLint는 최신 javascript 문법을 지원하는 코드 linter다. 여기에 플러그인을 추가할 수 있어 ESLint의 기능을 확장하기 위해 플러그인을 만들어서 공유하거나 다른 사..

1. store를 명시적으로 전달하기 store를 UI와 통합하는 가장 논리적인 방법은 store를 component tree의 프로퍼티로 명시적으로 UI에 전달하는 것이다. 이 접근 방식은 단순하며 내포된 component가 몇 개 안 되는 작은 앱에서 아주 잘 동작한다. // Aoo을 렌더링할 때 store를 프로퍼티로 전달하고 // store가 변경될 때마다 render 함수가 호출된다. import React from 'react' import ReactDOM from 'react-dom' import App from './components/App' import storeFactory from './store' const store = storeFactory() const render = () ..

Redux는 Flux와 유사하나 약간의 차이가 존재한다. Flux에 있는 action을 받아서 적절한 store에 보내는 dispatcher가 없다. 대신 애플리케이션 상태를 불변 객체 하나로 표현했다. Redux는 reducer를 가지고 있다. reducer는 현재 상태와 action에 따라 새로운 상태를 반환하는 함수다. 즉, '(상태, action) => 새 상태'라고 할 수 있다. 1. 상태 Redux에는 상태를 한 장소에 저장해야 한다는 규칙이 있다. 상태 데이터를 여러 component가 나눠 가지는 것은 작동을 잘 되지만 크기가 커짐에 따라 애플리케이션 전체 상태를 결정하기 어려울 수 있고, 각 component가 setState를 호출해서 자신의 상태를 변경하기 때문에 왜 갱신이 이루어졌는..

1. 리액트 밖에서 상태 관리하기 애플리케이션의 규모가 커질 경우 상태 데이터를 UI로부터 분리해서 상태만 처리하는 계층을 만드는 것이 더 나을 수도 있다. 상태를 리액트 밖에서 관리할 경우 클래스 component를 상태가 없는 함수형 component로 바꿀 수 있어 보다 더 나은 함수형 애플리케이션이 될 수 있다. 하나의 예시로 앞에서 다뤘던 시계를 log에 출력했던 startTicking 함수를 수정해 브라우저에 표시한다. // 기존의 startTicking 함수 const startTicking = (() => setInterval( compose( clear, getCurrentTime, abstractClockTime, convertToCivilianTime, doubleDigits, for..

1. Fetch를 사용해 요청하기 Fetch는 WHATWG 그룹에서 만든 폴리필로 promise를 사용해 API 호출을 쉽게 해준다. 여기서는 리액트와 함께 잘 작동하는 isomorphic-fetch를 다룬다. // isomorphic-fetch 설치 npm install isomorphic-fetch --save component 생애주기 함수는 여러 javascript를 통합할 수 있는 지점을 제공한다. API를 호출할 경우, component는 요청을 보내고 응답이 올 때까지의 대기 시간을 처리할 수 있어야 한다. 이러한 시간 지연 문제는 응답의 상태를 도입함으로써 해결할 수 있다. import { Component } from 'react' import { render } from 'react-d..

1. 마운팅 생애주기 component 생애주기는 component가 마운트되거나 갱신될 때 호출되는 일련의 method로 이루어진다. 이런 method는 component가 UI에 렌더링되기 전이나 후에 호출된다. render method 자체도 component 생애주기의 일부다. 마운팅 생애주기와 갱신 생애주기가 있다. 마운팅 생애주기는 component가 마운트되거나 언마운트되면 호출되는 method다. 최초 상태를 설정하거나, API를 호출하거나, 타이머를 시작 또는 종료하거나, 서드파티 라이브러리를 초기화하는 등의 작업에 이런 method를 사용할 수 있다. React.createClass를 사용하는 경우 getDefaultProps가 먼저 호출되어 component의 프로퍼티를 얻고, 그 후..

1. 프로퍼티 검증 javascript는 type 검증이 느슨한 언어이기 때문에 변수값의 데이터 type이 바뀔 수 있다. 이로 인해 애플리케이션을 디버깅할 때 시간이 아주 오래 걸릴 수 있다. 리액트 component는 프로퍼티 type을 지정하고 검증하는 방법을 제공한다. 이를 통해 디버깅 시간을 크게 줄일 수 있고, 프로퍼티에 잘못된 type의 값을 지정하면 경고가 표시되기 때문에 버그를 쉽게 찾을 수 있다. 리액트에는 자동 프로퍼티 검증 기능이 있다. 이 검증 기능은 React.ProtoTypes를 통해 구현할 수 있다. // prop-types 모듈 설치 npm install prop-types --save 타입 검증기 Arrays React.ProtoTypes.array Boolean Reac..