8월 3주차 기록

배워가기

webpack config의 resolve.alias

• 모듈을 해석하는 방식을 지정한다.
• import나 require로 간단히 특정 모듈의 별칭을 만들 수 있다. 예를 들어, 일반적으로 사용되는 src/ 폴더의 별칭을 지정할 수 있다.

const path = require('path');

module.exports = {
  //...
  resolve: {
    alias: {
      Utilities: path.resolve(__dirname, 'src/utilities/'),
      Templates: path.resolve(__dirname, 'src/templates/'),
    },
  },
};

이제 import 구문에서 절대경로를 사용할 수 있다

// AS-IS
import Utility from '../../utilities/utility';
// TO-BE
import Utility from 'Utilities/utility';

Ref https://webpack.kr/configuration/resolve/

signal

• 반응형 시스템에서 가장 기본적인 타입으로, getter/setter/값으로 구성된다.

• Observable, Atom, Subject 또는 Ref라고도 한다

  Copy

  const [count, setCount] = createSignal(0);
  
  console.log(count()); // 0
  setCount(5);
  console.log(count()); // 5

• signal의 핵심은 event emitter로, 주요 차이점은 구독을 관리하는 방법이다.

• Reaction

  • 구독을 관리하는 방법
  • effect, autoruns, watches, computed라고도 불린다.
  • reaction은 signal을 관찰(observe)하고 값이 업데이트될 때마다 signal을 다시 실행한다.

• Derivation

  • 데이터를 다른 방식으로 표현하고 여러 reaction에 같은 signal을 사용하고 싶을 때 사용
  • memo, computed, pure computed라고도 불린다.
  • 공통적인 처리 및 캐싱 등에 사용할 수 있다.

Ref https://junghan92.medium.com/번역-자바스크립트-signal의-진화-4bd6a991d2f

peerDependencies의 ||

peerDependencies: {
  "react": "^16 || ^17 || ^18"
}

• ||는 OR 조건을 나타낸다.
• "react": "^16 || ^17 || ^18"는 패키지가 React 16, 17, 18 버전 모두와 호환됨을 의미한다.

window.location.replace

window.location.replace는 입력된 경로의 형식에 따라 상대경로, 절대경로를 구분하여 인식한다.

예를 들어 현재 경로가 localhost:3000/depth1/depth2일 때,

window.location.replace('www.naver.com')은 상대경로로 인식해서 localhost:3000/depth1/www.naver.com으로 이동한다. 즉 depth2만 replace된다.

반면 window.location.replace('https://www.naver.com')은 절대경로로 인식해서 https://www.naver.com로 이동한다.

👩‍🏫 절대경로를 원한다면 프로토콜을 빼먹지 말자.

이것저것 모음집

• jest 의 arrayContaining 구문 - 왼쪽 배열에, 오른쪽 배열의 요소를 모두 가지고 있는지 확인한다.
  Copy

  expect(['🔵', '🔴']).toEqual(expect.arrayContaining(['🔵', '🔴'])); // pass ✅
  expect(['🔵', '🔴', '🟢']).toEqual(expect.arrayContaining(['🔵', '🔴'])); // pass ✅
  expect(['🔵']).toEqual(expect.arrayContaining(['🔵', '🔴'])); // fail ❌

기타공유

앱에 Flutter/React Native 통합하기

• Flutter: https://docs.flutter.dev/add-to-app
• React Native: https://reactnative.dev/docs/integration-with-existing-apps

에어비앤비가 React v16 -> v18로 업그레이드한 방법

• Module Aliasing을 이용해서 react의 다른 버전 디펜던시를 설정해줬다.

  Copy

  // package.json
  "react-18": "npm:react@18"

  global alias를 통해 모든 로직을 중앙으로 집중시켰다.

• React 16과 18 대응을 위한 두 개의 쿠버네티스 환경을 만들어 environment targeting을 했다.

• 폭 넓은 테스트를 통해 안정성을 유지했다.

  • (이 과정에서 Enzyme과 React Testing Library의 조합 때문에 고생했다 😂)

• 점진적 rollout으로 마참내 React 18 도입에 성공했다.

이제 React 19 나오면 어쩌냐? 🤷

Ref https://medium.com/airbnb-engineering/how-airbnb-smoothly-upgrades-react-b1d772a565fd

마무리

주 3일제 너무 좋다…

집청소 싹 하고 하고 싶은 개발, 공부, 독서 다 하고 수영장&찜질방도 갔다가 친구들이랑도 대차게 놀아버렸다.

이제 어떻게 출근하냐…

아무튼 대한 독립 만세 🇰🇷🙌