6월 2주차 기록

배워가기

---

react-query networkMode

네트워크 연결이 끊겼을 때 query와 mutation들이 어떻게 동작할지를 결정한다.

• networkMode: online
  • query와 mutation은 네트워크 연결이 있을 때에만 동작한다. 기본 모드이다.
• networkMode: always
  • 온라인/오프라인 상태와 상관없이 항상 query fetch를 수행한다.
• networkMode: offlineFirst
  • 위 두 개 옵션의 중간점으로, queryFn을 한번 실행하지만, retry는 중단한다.

Ref https://tanstack.com/query/v4/docs/framework/react/guides/network-mode

IME(Input Method Editor; 입력 방식 편집기)

한글, 한자처럼 컴퓨터 자판에 있는 글자보다 수가 더 많은 문자를 계산하거나 조합하여 입력해주는 시스템 소프트웨어

예를 들어, onKeyDown 이벤트 발생 시 해당 이벤트를 OS와 브라우저가 모두 처리하기 때문에 한글 입력 시 중복 이벤트가 발생할 수도 있다. 이때 Keyboard Event의 isComposing 속성으로 현재 입력이 합성 상태인지 아닌지 알 수 있다.

cf) compositionStart, compositionEnd를 이용해서 합성에 대한 이벤트를 처리할 수 있다.

NFC, NFD

• NFC(Normalize Form Canonical Composition)
  • 모든 음절을 정준분해하고 정준결합하는 방식
  • ex) 가 → 가
  • window는 한글을 NFC로 사용
• NFD(Normalize Form Canonical Decomposition)
  • 모든 음절을 정준분해해서 한글 자모 코드를 이용하는 방식
  • ex) 가 → ㄱㅏ
  • MAC은 한글을 NFD로 사용
• 윈도우는 크게 문제가 안되지만, 맥에서 파일이름에 제한을 두고 싶은 경우에 정규화를 생각해야 한다. NFD 방식은 모든 음절이 분해되어 표현되니, NFC를 이용해서 결합한 상태로 파일 이름을 제한해야 한다.

scroll vs getBoundingClientRect vs IntersectionObserver

• scroll- 스크롤 시 짧은 시간 내에 수 백, 수 천의 이벤트가 동기적으로 실행될 수 있어서 성능에 악영향을 줄 수 있다. 그리고 페이지 내에 각 요소가 각기의 목적(광고, 레이지 로딩, 무한 스크롤 등)의 이유로 scroll 이벤트를 리스닝하기 때문에 이에 상응하는 콜백이 무수히 실행될 수 있다. 이는 메인 스레드에 큰 부하를 줄 수 있다.

• getBoundingClientRect - reflow를 발생시킬 수 있다. 본래 브라우저는 최적화를 위해 필요한 여러 작업을 묶어 큐에 쌓아 대기하다가 한 번의 reflow 로 처리한다. 그러나 getBoundingClientRect 호출시 값(top, right 등)을 정확히 읽어들이기 위해 큐를 flush하고 스타일을 적용함으로써 다수의 reflow 를 발생시킬 수 있다.

• Intersection Observer API - 루트 요소와 타겟 요소의 교차점을 관찰한다. 그리고 타겟 요소가 루트 요소와 교차하는지 아닌지를 구별하는 기능을 제공한다. scroll 이벤트와 다르게 교차 시 비동기적으로 실행되며 가시성 구분 시 reflow를 발생시키지 않기 때문에 성능 상 유리하다.

Ref https://velog.io/@elrion018/실무에서-느낀-점을-곁들인-Intersection-Observer-API-정리

react-testing-library의 ‘not wrapped in act’ 에러 원인 및 해결 방법

다음 에러

When testing, code that causes React state updates should be wrapped into act(...):

🤯

1. 비동기 업데이트

컴포넌트가 비동기 API를 호출하고 그 응답값을 state에 저장하는 경우, 컴포넌트 업데이트는 React 콜스택 바깥에서 이루어진다.

-> waitFor 비동기 함수를 사용하여 컴포넌트 업데이트가 완료될 때까지 기다릴 수 있다.

2. Fake Timer

컴포넌트 내부에 setTimeout 또는 setInterval을 사용하는 경우, 테스트 코드에서 타이머 함수를 jest.useFakeTimers()로 mocking하고 jest.advanceTimersByTime(msToRun)으로 실행할 수 있다.

-> 컴포넌트를 업데이트하고 있기 때문에 act()로 감싸주어야 한다.

3. 렌더링/업데이트 전에 테스트가 종료됨

ex) 조건문을 통해 컴포넌트를 렌더링하는 코드에서, 응답으로 컴포넌트가 설정되기 전에 테스트가 종료되는 경우

-> waitFor를 통해 컴포넌트의 렌더링을 기다린다.

Merge Train

여러 MR을 순차적으로 병합하는 기능

🚂 첫 번째 MR 병합 ✅ 성공 🚂 다음 MR을 병합 ✅ 성공 …

왜 필요할까?

CI/CD 파이프라인에서 병합 과정의 안정성을 높일 수 있다.

그리고 각 MR이 병합되기 전에 CI/CD 파이프라인에서 빌드/테스트를 수행해서 실패 및 merge conflict를 방지할 수 있다.

BrowserRouter vs MemoryRouter

• BrowserRouter - 브라우저 빌트인 히스토리 API를 사용 -> 프로덕션 환경에 적합
• MemoryRouter - 내부 Array 사용하여 히스토리를 관리 -> 테스트 환경에 적합
  • initialEntries[] - prop을 확장해서 RTL 렌더링을 하면, 컴포넌트 안에서 useLocation 등 react-router 훅을 일일이 모킹할 필요가 없어진다.
  • initialEntries={["/users/1?test=test"]}와 같이 파라미터들을 테스트 코드 안에서 제어할 수 있기 때문이다.

이것저것 모음집

---

• DAMP 원칙 - Descriptive and Meaningful Phrases의 약자로, 의미있고 설명적인 구문을 사용하라는 원칙. 테스트 코드에는 스마트한 로직보다 직설적인 코드를 작성한다.

기타공유

---

마이크로소프트의 React 탈출기

공용 번들과 파일을 공유하는 다른 컴포넌트 개발에서의 이슈 및 UI 성능 문제로 React를 벗어난다!

React 대신 사용하게 된 웹 UI 2.0마크업 퍼스트 아키텍처는 커다란 코드 번들 문제를 해결해서 크기를 줄인다.

이제 세상은 어떻게 되는 걸까 😲

Ref https://javascript.plainenglish.io/microsoft-is-ditching-react-f8b952b92b9b

마무리

---

인사이드 아웃2 개봉하자마자 보러 갔다왔다.

울라고 만든 영화는 아닐 텐데, 불안이 땜시 혼자 오열한 사람 저요

여운인지 힘든 감정인지 오래오래 남을 것 같다.

Relative Posts: