들어가며 React 팀은 작년 11월 React 18을 Alpha에서 Beta로 Release 했다. Beta로 넘어오면서 Production으로 Release가 될 때 까지 새로운 API의 추가는 없다고 밝혔다. 즉, 현재 공지된 기능이 Fix 되었다는 것을 의미한다. 관련된 문서로 아래 링크를 참고하면 된다. https://ko.reactjs.org/blog/2021/06/08/the-plan-for-react-18.html https://github.com/reactwg/react-18/discussions/112 React 팀은 Working Group 이라는 새로운 개념을 도입해 React 개발자와 소통하며 더 개선할 수 있는 부분과 문제점들을 소통하며 피드백을 진행하고 있다. React 팀 내..

Hydrate Hydrate란 수화의 의미를 가지고 있다. 수화란, 우리 몸에 필요한 수분을 보충하는 행위를 뜻한다. React에서는 Server Side 단에서 렌더링 된, 정적 페이지와 번들링된 JS파일을 클라이언트에게 보낸 뒤 클라이언트 단에서 HTML 코드와 JS 코드를 서로 매칭시키는 과정을 Hydrate라 칭하고 있다. SSR의 동작 방식을 참고해보자. [참고 : [Browser] SSR, CSR 그리고 SPA] 동작 방식중 5번 ~ 7번을 보면 JavaScript를 다운로드 후 이전에 받은 HTML DOM 요소 위에서 다시 한번 더 렌더링 하여 각각의 배치에 맞게 JavaScript가 채워지게 되는데 이 때 빈 HTML에 JavaScript를 채워넣는다고 하여 Hydrate라고 하는 것 같다..

들어가기 전 이 글은 GraphQL에 대해서 테스트를 작성하는 것이 아니다. React-Query에 대해서 작성하는 것이다. 모든 코드들은 Typescript로 작성되었으며, 선행 지식이 필요하다. 선행 자료 참고 문서) [TDD/Jest] 모킹하기 Mocking [TDD/Jest] Jest로 Test 코드 작성하기 [React.js] React + Typescript 테스트 코드 작성하기 [React.js] React-Testing-Library 사용하기 [React.js] React Query(useQuery, useMutation) 완성된 코드) y0ngha/react-query-tdd Typescript + React-Query를 사용해 테스트 코드를 작성하는 것은 자료를 찾아도 너무 안나온다. ..

[ 같이 시작하기 : https://github.com/y0ngha/react-calculator/tree/Initial_start ] 테스트 코드 작성 전 참고 문서 Jest Jest-Mock React-Testing-Library TDD를 이용해 코드를 작성할 때에는 항상 지켜야하는 순서가 있다. "요구사항 분석/파악" → "테스트 코드 작성" → "라이브 앱 작성" 위 순서에 맞게 글을 진행해보도록 하겠다. 테스트 가동 # NPM npm test # Yarn yarn test 요구사항 분석/파악 위 링크 되어있는 깃허브를 들어가보면 알겠지만, 이번에 만들 앱은 "계산기"다. 계산기의 요구사항을 분석하고, 파악해보자. 사칙연산이 가능해야함. 숫자는 0~9까지 있음. 'CLEAR' 버튼을 누르게 될 경..

React-Testing-Library(RTL) CRA(create-react-app)에 기본적으로 내포되어 있다. 별도 설치 필요시 아래 명령어로 설치 가능하다. yarn add --dev @testing-library/react Jest와 상호 보완적인 관계다. Jest를 통해 전반적인 기능은 테스트가 가능하나,React 컴포넌트를 렌더링하고 테스트하기 위해서는 몇가지 기능이 더 필요하기 때문이다. (React에서는 Enzyme 말고 RTL을 사용하면 되는 것 같다.) Jest : 자체적인 Test Runner와 Test Util 제공 RTL : Jest + React 컴포넌트 Util 제공 엄밀히 말하자면 RTL이 Jest를 포함하고 있는 구조다. Query Rendering된 DOM Node에 접..

해당 글에는 GraphQL이 나오니 모른다면 이해가 어려울 수 있다. 아래 링크를 통해 먼저 알고 가도록 하자. [ Graph QL ] [ 완성 코드 보러가기 ] [ 참고문서 : React-Query ] → 실제 사용은 되지 않으나 사용법이 매우 유사함. 라이브러리 React.js에서 GraphQL 서버와 통신할 때 주로 사용되는 라이브러리는 크게 3가지가 있다. Relay 퍼포먼스, 네트워크 트래픽 최적화 / 높은 러닝커브 Apollo Client 데이터 캐싱, UI 업데이트 urql 단순성과 확장성에 중점, React에 포커스 되어 있음, Relay, Apllo Client 보다 이후에 나왔음. 위 3개의 라이브러리에 모두 장단점이 있으니 찾아서 사용하면 될텐데, 이 글에서는 Apollo Client..