5월 2주차 기록

May 13, 2023 • ☕️ 5 min read

weekly

사랑니 아프다 🦷

배워가기

tabindex

tabindex="1" (양의 정수)
- 문서 안에서 가장 먼저 초점을 받는다.
tabindex="0"
- 키보드 초점을 받을 수 없는 요소도 초점을 받을 수 있도록 만들어준다.
- 예시 div, span
tabindex="-1" (음의 정수)
- 키보드 초점을 받을 수 있는 요소도 초점을 받을 수 없도록 한다.

CSS font-size: larger

CSS의 font-size에는 larger 옵션이 있다. (large 아님)

Copy

/* <relative-size> values */
font-size: smaller;
font-size: larger;

CSS font-size의 relative-size(smaller, larger)를 사용하면 상위 요소(부모)의 font-size에 비례해서 폰트 사이즈가 조정된다.

`window.open(url, target, windowFeatures)`

세 번째 인자인 windowFeatures에는 name-value 쌍의, 콤마로 구분된 이루어진 feature들을 인자로 넘길 수 있다 이 feature들은 윈도우의 기본 사이즈나 위치, 최소한의 팝업을 열 것인지 여부 등을 나타낸다.

ex) popup, width, height, left, top, noopener, noreferrer

Ref https://developer.mozilla.org/en-US/docs/Web/API/Window/open

TRP(Transparent Reactive Programming)

별도의 코드 변경 없이 반응형 프로그래밍이 이루어지는 방식
스트림과 오퍼레이터 대신 자동으로 추적 계산이 가능한 데이터를 기반으로 이루어져 있으며, 데이터의 변경 사항을 전파하여 파생된 값을 형성하고 궁극적으로 부수 효과도 일으킨다.
MobX, Vue.js, SolidJS, Svelte가 TRP를 사용 중이다.
TRP는 Observable(옵저버블)과 Reaction(반응)으로 구성된다.

파라미터화 테스트하기

테스트에서 each() 를 사용하여 파라미터화 테스트를 할 수 있다

Copy

import { areAnagrams } from "./";

test.each([
  ["cat", "bike", false],
  ["car", "arc", true],
  ["cat", "dog", false],
  ["cat", "act", true],
])("areAnagrams(%s, %s) returns %s", (first, second, expected) => {
  expect(areAnagrams(first, second)).toBe(expected);
});

Ref https://www.daleseo.com/jest-each/

복잡한 조건문을 쉽게 만들어주는 라이브러리

ts-pattern

타입 추론으로 exhaustive pattern matching을 해준다.
패턴 매칭을 통해 복잡한 조건들을 하나의 단축 표현으로 작성할 수 있게끔 해준다.
패턴 매칭: 함수형 프로그래밍에서 사용되는 방법으로, 선언적인 방식으로 값들의 구조를 검사한다.

Copy

import { match, P } from 'ts-pattern';

type Data =
  | { type: 'text'; content: string }
  | { type: 'img'; src: string };

type Result =
  | { type: 'ok'; data: Data }
  | { type: 'error'; error: Error };

const result: Result = ...;

const html = match(result)
  .with({ type: 'error' }, () => `<p>Oups! An error occured</p>`)
  .with({ type: 'ok', data: { type: 'text' } }, (res) => `<p>${res.data.content}</p>`)
  .with({ type: 'ok', data: { type: 'img', src: P.select() } }, (src) => `<img src=${src} />`)
  .exhaustive();

lodash에 ts-pattern과 비슷한 _.cond() 메서드

pairs들을 돌며 truthy한 값을 반환하는 첫 번째 예측문에 해당하는 함수를 실행시킨다. 예측문-함수 쌍은 this 바인딩과 생성된 함수의 인자들로 호출된다.

Copy

var func = _.cond([
  [_.matches({ a: 1 }), _.constant("matches A")],
  [_.conforms({ b: _.isNumber }), _.constant("matches B")],
  [_.stubTrue, _.constant("no match")],
]);

func({ a: 1, b: 2 });
// => 'matches A'

func({ a: 0, b: 1 });
// => 'matches B'

func({ a: "1", b: "2" });
// => 'no match'

Ref

C++의 가위규칙 (Scissors rule)

public 파트를 위에 먼저 작성하고, private 파트를 아래 작성한다.
인스턴스 변수도 맨 아래 작성한다.

✂️ 왜 가위 규칙일까?? 가위를 사용해서 싹-둑 코드를 자를 수 있을 정도로 변수의 범위를 정확하게 나타낼 수 있기 때문에 그렇게 이름 붙었다. 가위 규칙을 따르면 변수의 범위도 코드 블록을 기준으로 나누어져서, 그 블록 안에서만 접근할 수 있게 된다. (당연히 언어 스펙에 있는 공식 명칭 같은 것은 아니고 그냥 개발자들 쓰는 표현이다.)

walkObject 함수

객체를 순회하면서 객체의 모든 프로퍼티에 대해서 콜백함수를 실행하는 함수이다.

코드 출처는 챗GPT, 실제 예시는 vanillaExtract의 walkObject 에서 찾아볼 수 있다

Copy

function walkObject(obj, callback) {
  for (var key in obj) {
    if (obj.hasOwnProperty(key)) {
      var value = obj[key];
      if (typeof value === "object") {
        walkObject(value, callback);
      } else {
        callback(value, key, obj);
      }
    }
  }
}

이것저것

Sanity Test (새너티 테스트): 개발팀 혹은 개발자가 테스트 주체가 되어 테스트 케이스 없이 주요한 단위 모듈이나 시스템 모듈을 테스트하는 기법
CSS inset - position: absolute 인 요소의 top, right, bottom, left 프로퍼티