12월 2주차 기록

December 10, 2022 • ☕️ 7 min read

weekly

올해 아직 남았다

배워가기

react-query에서 stale의 의미

react-query에서 별 다른 설정이 없으면, 캐시된 데이터는 바로 stale(=신선하지 않다고)하다고 판단한다. 그래서 1초 전에 fetching한 데이터라도 devtools에서는 해당 쿼리가 stale한 상태라고 판단하게 된다.

데이터를 불러오자마자 stale 상태가 되지만, 곧바로 refetch를 수행하는 것은 아니다. 여전히 캐시에서 데이터를 불러올 수 있으며, 특정 상황에서만 백그라운드에서 refetch가 수행된다.

staleTime config를 추가하면, 데이터를 fetching하자마자 해당 시간동안 fresh한 상태가 된다.

Ref

react-query의 `invalidateQueries` vs `removeQueries`

invalidateQueries: 쿼리를 무효화한다.
- 쿼리가 무효화되지만, 그 다음 refetch나 리렌더링이 일어나기 전까지는 기존의 데이터가 UI에 노출될 수 있다.
- refetch 시에 기존 캐시의 유효성에 따라 캐시값을 사용할지 판단하는 용도로 사용되기 때문에, 캐싱된 데이터를 stale한 상태로 유지한다.
removeQueries: 캐시 삭제 + 쿼리 자체를 삭제
- 캐시와 쿼리가 모두 무효화되기 때문에, 쿼리로 불러온 데이터 캐시도 완전히 제거한다.
- invalidateQueries와는 달리, stale한 캐시 데이터를 저장하지 않는다.
- keepPreviousData 옵션이 false라면, UI에서 데이터가 즉각적으로 사라진다.

keepPreviousData 옵션

이전 fetch 데이터를 화면에 유지시킬 것인지를 결정한다.

true라면 invalidateQueries 혹은 removeQueries를 호출하더라도, refetch 전까지는 기존의 데이터가 보일 수 있다.

npm vs yarn

npm에서 yarn으로 넘어가고 싶은데… 넘어가는 것에 대한 타당한 근거를 마련해보자.

1️⃣ packages 병렬 설치

npm에서는 여러 패키지를 설치할 때, 패키지가 완전히 설치 될 때까지 기다린 후 다른 패키지를 설치한다. 즉, 작업은 패키지별로 순차적으로 실행된다.

하지만 yarn은 이러한 작업을 병렬로 설치하므로 퍼포먼스와 속도가 증가한다.

ex) React를 설치했을 때, npm은 3.572초, yarn은 1.44초가 소요된다.

추가로,` caret(^)이 붙은 패키지 버전을 관리하는 방식의 차이?

2️⃣ 자동 lock 파일 생성

npm과 yarn 모두 패키지에서 프로젝트의 종속성과 버전 번호를 추적한다.

종속성이 추가되면 yarn은 yarn.lock 파일을 자동으로 추가한다. npm은 npm shrinkwrap 명령어로 lock 파일을 생성한다. 차이점은 npm이 기본적으로 lock 파일을 생성하지 않을 때, yarn은 항상 yarn.lock 파일을 생성하고 업데이트한다는 것이다.

yarn install 명령어를 실행하면 lockfile에 명시된 패키지의 정확한 버전을 설치하기 때문에 프로젝트를 개발하는 모든 구성원이 동일한 패키지 버전을 사용할 수 있다.

하지만 npm은 lockfile을 자동으로 생성하지 않기 때문에, ^(caret)이 붙은 패키지의 경우 서로 다른 버전이 설치돼버릴 수도 있다.

예) ^3.1.4는 >= 3.1.4 ~ < 4.0.0을 의미한다.

npm v5.0은 lock.json 파일로 명명된 새로운 패키지와 함께 제공되며 npm-lapwrap 시스템을 완전히 폐기했다. 이것은 설치 과정과 성능을 효율적으로 향상시켰지만, 아직 yarn의 속도 수준에는 도달하지 못했다.

3️⃣ 보안

npm은 다른 패키지를 즉시 포함시킬 수 있는 코드를 자동으로 실행하므로, 보안 시스템에 여러 가지 취약성이 발생한다. 반면에, yarn은 yarn.lock 또는 package.json 파일에 있는 파일만 설치한다. 따라서 yarn이 npm 패키지보다 보안이 강화된 것으로 간주된다.

음~ yarn을 안 쓸 이유가 없잖아?

Ref

이것저것

Antd는 V5를 출시하면서 CSS-in-JS를 도입했다. 기존 CSS-in-JS가 가지고 있던 딜레마(css가 삽입되었는지 여부를 판단하기 위해 css가 변경될 때마다 해시 값을 만드는 것)를 해결하기 위해 “컴포넌트 레벨” CSS-in-JS를 도입했다. 모든 antd component에 같은 해시 값을 부여하고, 현재 버전과 테마 변수(theme variables)에 대해서만 해시를 다시 계산하는 방식으로 성능을 개선했다. (Ref)
여러 요소를 한번에 바꿀 때 대/소문자를 기억해서 대/소문자에 맞게 변환해주는 익스텐션 - multi-cursor-case-preserve 굉장히 유용하다!
html kbd
- 사용자의 입력(키보드 입력, 음성 입력)을 나타낸다.
- 스타일링은 따로 해줘야한다.
Copy
```
<p>Please press <kbd>Ctrl</kbd></p>
```
react-hook-form의 controller 이벤트인 onChange는 undefined 값을 허용하지 않는다. undefined를 넣으면 자동으로 defaultValues 값이 반영된다.
next/router는 replace 시 내부적으로 context의 상태를 변경하기 때문에 page rerender가 일어난다 (shallow 옵션을 켜도 마찬가지)
react-router-dom 6.4 버전부터 useSearchParams 에서 functional update를 지원한다 (Ref) - 이는 queryParam을 set하는 동작이 하나의 사이클에서 두 번이상 동작할 때, 서로의 변경점을 기반으로 반영할 수 없었던 문제를 해결해준다.
styled-component로 React 컴포넌트를 감싸고 스타일 컴포넌트에서만 사용되는 props를 넘기면 ‘Unknown Prop Warning’이 발생한다. 이는 스타일 컴포넌트가 모든 props를 자식 컴포넌트에 넘겨서 발생하는 문제로, withConfig 메서드로 해당 prop만 빼고 자식 컴포넌트에 넘기거나 props 앞에 $ prefix를 붙여서 해결할 수 있다. (cf. ver 5.1부터 도입된 transient props)
react로 개발할때, 변경을 트리거하는게 effect인지 event인지 명확히 구분하자

기타

vscode sticky scroll

vscode 익스텐션인데, 스크롤을 내려도 상단의 클래스 이름이나 함수명을 sticky하게 고정시켜준다. 이런 게 있었으면 좋겠다고 생각은 했는데, 막상 모든 것들이 sticky하게 걸리면 더 혼란스러울 것 같기도? 🤔

Ref

eslint 환경의 변화 목표 10가지

eslint가 2013년에 첫 릴리즈 된 후 개발 환경이 계속 고수되어 유지보수가 되어 왔는데, 향후 10년을 위해서는 환경의 변경이 필요할 것이라는 내용과 그 것을 위한 목표 10가지에 대해 설명 하는 글이다.

완전히 새로운 코드베이스
ESM 타입 체킹 지원
모든 런타임 환경 지원
모든 언어 지원
새로운 public API
Rust 기반으로 교체
모든 코드를 비동기로
플러그인 형식의 소스 코드 포맷터
결과 리포트
자동 수정을 위한 AST 구조 변형

Ref https://github.com/eslint/eslint/discussions/16557

구글, 모바일 이어 PC에도 연속 스크롤 기능 도입

오… 개인적으로 연속 스크롤을 아주 선호하지는 않는 입장으로서 맞는 선택지인진 모르겠다 🤔 연속 스크롤에 대한 니즈가 그렇게 컸다니

Ref https://www.itworld.co.kr/news/268185#csidxc049eca5dfbf1e3a77f06c7b719d839

vite 4.0 출시

개발 단계에서 사용할 수 있는 SWC 기반의 플러그인
- Babel을 SWC로 대체하는 플러그인(@vitejs/plugin-react-swc)이 나왔다.
브라우저 호환성
- ES2020 호환성을 맞추기 위해 모던 브라우저는 safari14를 타겟으로 한다.
CSS를 string으로 import하기
- vite 4.0에서는 css default export 대신 ? 인라인 쿼리 suffix를 사용하여 css 스타일의 중복 로드를 방지한다. (ex. import stuff from './global.css?inline'))
환경변수
- vite 4.0에서는 dotenv 16 버전과 dotenv-expand 9 버전을 사용한다.
패키지 사이즈 축소