flex-basis

width 랑 비슷한 개념

최초의 박스의 크기를 지정 할 수 있다.

flex-grow

전체 박스의 크기에서 빈 부분을 값을 1을 주면 채울 수 있다. 기본값 0

flex-shrink

동적으로 해당 박스의 크기를 줄일 수 있다. 기본값 1

flex-wrap

박스의 화면을 초과 하면 밑으로 내릴 수 있다.

9월, 개발 세팅 및 코드 분석

22년 9월, 기존 크롬에 배포 된 블록체인 지갑을 리뉴얼 하는 작업을 맡게 되었다.

최초 이 일을 맡게 되었을 당시에 정말 막막했었다. Vue2로 개발되어있던 기존 프로젝트를 수정해야 했었고, 크롬은 Manifest라는 정책을 따르기 때문에 관련해서 또 공부를 했어야 했다.

Manifest v3 이슈가 처음부터 있었고, 리액트로 개발을 주로 하였어서 처음부터 다시 짜는게 어떨까 생각하고, 시도를 해봤지만, 처음 구조부터 다시 짤 자신이 없었다.

SPA 구조를 알았기 때문에, Vue2 문법과 구조를 쉽게 파악 할 수 있었지만, 크롬 개발은 기존 웹개발과 또 다른 영역 같았다.

• 특정한 키를 통해 데이터를 관리하므로, 중복 호출이 될 때, 한번만 호출 하므로 성능에 좋다.

ex) custom hook을 통해, fetch문을 만들어, 사용하게 되면, 사용 될 때 마다 호출을 하기 때문에, 같은 데이터라도 불필요한 호출을 하게 된다.

Query Keys

React Query는 캐싱화된 쿼리들을 쿼리 키로써 관리한다. 복잡한 객체와 복잡하고 많은 문자열들을 배열로 관리하고 있다.

Serializable하므로, 유니크한 쿼리 데이터로 관리된다.

useQuery(['todos'], () => {...})
useQuery(['todos', 5, { preview : true }], () => {...})
useQuery(['todos', { type: 'done'}], () => {...})

• 원하는 요청을 배열로 요청하면, 유니크한 키로써 캐싱화하여 데이터를 관리한다.

활용 예제