일단 Doit

React Query는 Ract에서 네트워크 데이터를 처리하며 cache 및 관리까지 지원해주는 라이브러리 입니다. 이전에는 Redux 및 Recoil와 같은 상태 관리 라이브러리에 네트워크 처리를 작성하여 처리하는 경우가 많았지만 React-query를 사용하면 Recoil에서는 상태관리를 하고 React-query에서 제공 하는 훅을 사용하여 데이터를 캐싱 및 관리합니다. 따라서 상태관리와 데이터 처리를 분리함으로써 훨씬 직관적이며 사용법도 쉽고 많은 기능을 제공하기 때문에 개발자도 쉽게 사용할 수 있습니다. Recoil에서 데이터 처리는 아래와 같은 절차가 필요합니다. 1. atom 생성 const todoAtom = atom({ key: '@todo', default: [], }); 2. sele..

React 2023. 3. 1. 21:30

조건부 사용시 가장 주의해야 할 점은 반드시 조건부 Rendering이 발생하는 컴포넌트가 아니 해당 컴포넌트를 사용하는 곳에서 조건부를 결정해야 한다는 것입니다. 말이 어려운데 간단한 샘플을 보겠습니다. 1. 동적 로딩이 불가합니다. - 먼저 동적로딩에 대해 알아봅시다. https://ko.reactjs.org/docs/code-splitting.html 코드 분할 – React A JavaScript library for building user interfaces ko.reactjs.org 해당 컴포넌트를 초기 로딩하지 않고 사용할때 로딩하여 초기 속도를 향상시키는 목적으로 사용합니다. 하지만, 해당 컴포넌트에 대한 조건부 Rendering을 안에 두면 무조건 초기 로딩해야 합니다. const Po..

React 2023. 3. 1. 21:29

javascript에서 object 요소를 가져올때 for in loop를 많이 사용하는데, typescript에서는 해당 문법에서 eslint type 오류가 발생합니다. key, value 타입 정의가 없어서 그런데요, type을 [key:string]:unkown으로 설정하는 방법도 있겠지만, 그보다는, javascript Object 문법을 사용하면 type정의 필요없이 구현이 가능합니다. Object.entries() Object.entries() 메서드는 for...in와 같은 순서로 주어진 객체 자체의 enumerable 속성 [key, value] 쌍의 배열을 반환합니다. Object.assign() Object.assign() 메서드는 출처 객체들의 모든 열거 가능한 자체 속성을 복사해 ..

Typescript 2023. 2. 18. 11:36

React 에서 useState hook 및 Recoil Atom을 사용하여 React state를 관리 할 수 있습니다. https://blog.naver.com/innovatorwhy/222996259195 React Recoil Atom으로 팝업 관리하기 Recoil Atom 공식 문서를 보면 상세하게 알 수 있습니다. 단순하게, Recoil은 상태를 관리하는 라이브러... blog.naver.com 따라서 관리할 때 state 변경(set)이 발생하게 되는데, 그때 사용하는 불변성관리 라이브러리가 immer입니다. recoil을 사용할때 아래와 같은 방법으로 해당 state를 변경할 수 있습니다. const alertAtom = atom({ key: 'common/alert', default: {..

React 2023. 2. 18. 11:35

Typescript 에서 props를 전달 받는 함수를 정의할 때 아래와 같이 사용합니다. export interface IAlert { title?: string; content?: string; showAlert(title: string): void; } 이때 아래와 같은 warning 혹은 error가 발생합니다. 해당내용은 title이랑 변수가 사용되지 않았다는 것인데, interface정의라 사용할 이유가 없으므로, 특정 패턴으로 무시하는 eslint rule을 적용하면 해결 됩니다. eslintrc.js rules: { '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }], ... }

Typescript 2023. 2. 18. 11:33

주로 사용하는 케이스만 작성하였습니다. 테스트 대상 조회 getByTestId : data-testid로 조회 ... // test.ts screen.getByTestId('title') 2. geByText : text로 조회 제목 ... // test.ts screen.getByText('제목') 3. geByRole : role로 조회 제목 ... // test.ts screen.getByRole('제목') 4. getAllByText, getAllByTestId, getAllByRole... : 해당 요소들을 전부 조회 - 결과값은 배열입니다. 제목 두번째 제목 세번째 제목 ... // test.ts screen.getAllByTestId('제목') 데스트 케이스 구현 1. toBeInTheDoc..

React/TDD 2023. 2. 18. 11:32

Styled-components를 사용하면 React에서 쉽게 css를 적용한 component를 생성할 수 있습니다. https://blog.naver.com/innovatorwhy/222962662913 CSS in JS : styled-components https://styled-components.com/ 1. styled-components 사용하기전에 Template Literal에 대해 먼저 알아... blog.naver.com 예를 들어 아래와 같이 Title이란 컴포넌트를 styled-components를 만들었다고 가정한다면, 아래와 같습니다. import styled from 'styled-components'; export const Title = styled.div` line-h..

React 2023. 2. 18. 11:31

Rest API 테스트를 위해서는 jest의 mock Function을 사용합니다. 또한 Rest API는 async로 동작하기 때문에 mockResolvedValue 사용하여 결과값을 의미로 설정합니다. const getTodo = jset.fn(); getTodo.([ { id: 2, title: '할일', subTitle: '부제목', percent: 70 }, { id: 3, title: '할일', subTitle: '부제목', percent: 50 }, ]) Typesciprt에서 위와 같이 사용하면 아래와 같은 오류가 발생합니다. Property 'mockResolvedValue' does not exist on type getTodo가 mock function으로 변경된 것을 인지 하지 못해..

React/TDD 2023. 2. 18. 11:29