TIL - 2022/05/22

redux

• 리덕스 불러올 때 로직이 많은 것들은 리소스가 많이 들 수 있어서 항상 selector로 가져오지 말고 props로 데이터를 가져올 수 있다면 그렇게한다.
  • (리스트 아이템 100개 이상 되는 경우 - react의 memo로 감싸주고 사용하면 re-render가 되진 않는다.)

// 아래처럼 사용 (X)
const allTodoData = useAppSelector((state) => state.todolist.list)

// 아래처럼 사용해야 캐싱이 된다.
const allTodoData = useAppSelector(getTodoList)

• react-query

  • useInfiniteQuery
    • 파라미터 값만 변경하여 동일한 useQuery를 무한정 호출할 때 사용
    • pageParam: pageParam은 useInfiniteQuery가 현재 어떤 페이지에 있는지를 확인할 수 있는 파라미터 값

    const res = useInfiniteQuery(
        ['infinitePerson'], 
        ({ pageParam = 5 }) => axios.get('http://localhost:8080/person', {
        params: {
            id: pageParam
        }
    }));

  • react-query 키에 함수 같은거 집어 넣지 말기

CSS

• all 속성: 요소의 unicode-bidi (en-US), direction (en-US), CSS 사용자 지정 속성을 제외한 모든 속성을 초기화

• inline 컨텐츠 안에 block/flow 컨텐츠를 넣지 않기

  • <a>, <span> 태그 등에 <p>나 <div>등을 넣지 않아야 한다.
  • <span> 으로 뭘 감싸지 말자!

• CSS 파일 소문자로 시작하기

JS

• Victory.js: 차트 라이브러리
• bignumber.js: 숫자 계산은 순수 자바스크립트로 하지 않음

0.1 + 0.2 = 0.300000004 // ???

• 함수 테스트코드

const getPlus = (a, b) => {
  return a + b 
}

// index.spec.ts
import { getPluis } from './index'

it('plus'), () => {
   expect(getPlus(1, 2)).toBe(3) 
   expect(getPlus(3, 5)).toBe(8) 
})

// package.json
"scripts": {
    "test": "jest"
},

yatn test