7월 3-4주차 기록

July 21, 2024 • ☕️ 6 min read

배워가기

루트 경로에 turbo.json 을 두고, 하위 패키지에 turbo.json 을 또 두고 싶다면?

extends 키워드를 사용하면 된다.

Copy

{
  "extends": ["//"],
}

["//"]와 같이 작성하면, 루트 경로의 털보 설정을 상속받도록 한다.

타입이 공백 구분 리스트로 바뀌었다.
section-* - 같은 유형의 데이터지만 값은 다른 자동완성을 지정할 수 있다.
- e.g. autocomplete="section-buyer name" vs. autocomplete="section-recipient name"

Ref https://sorto.me/docs/Web/HTML/Attributes/autocomplete

FSD(Feature Sliced Design; 기능 분할 설계) 아키텍처

Layers
- 최상위 디렉토리이자 애플리케이션 분해의 첫 단계
- 레이어의 수는 최대 7개로 제한
  - app/ processes(deprecated)/ widgets/ features/ entities/ shared
Slices
- 각 레이어는 애플리케이션 분해의 두 번째 수준인 슬라이스라는 하위 디렉토리를 가진다.
- 슬라이스에서 연결은 특정 비즈니스 엔티티에 관한 것
Segments
- 각 슬라이스를 세그먼트로 구성된다.
- 세그먼트는 목적에 따라 슬라이스 내의 코드를 나누는 데 도움이 된다.
- 일반적으로 사용되는 세그먼트들은 다음과 같다.
  - api/ UI/ mode/ lib/ config/ consts

Ref

모든 객체의 메소드를 작업을 수행하는 command와 데이터를 반환하는 query 2가지로 구분하는 디자인 패턴이다.

Command

Query

CQS 패턴에서 중요한 것은, 하나의 메소드가 command이면서 query 일 수는 없다는 점이다.

CQS 패턴을 사용하면 ‘읽기’와 ‘쓰기’를 분리할 수 있다는 장점이 있다.

하지만 관리해야하는 객체가 많아질 수록 query, command도 많아지기 때문에 중복되는 코드가 발생할 수 있다.

Ref https://medium.com/@su_bak/cqs-command-query-separation-pattern-이란-f701eabf8754

CSS가 nested style rule을 변경함에 따라 sass 작성 방식도 바뀌었다.

순서에 주의해서 작성하자.

[SASS]

Copy

.example {
  color: red;

  a {
    font-weight: bold;
  }

  font-weight: normal;
}

[AS-IS]

Copy

.example {
  color: red;
  font-weight: normal;
}

.example a {
  font-weight: bold;
}

[TO-BE]

Copy

.example {
  color: red;
}

.example a {
  font-weight: bold;
}

.example {
  font-weight: normal;
}

Ref https://sass-lang.com/documentation/breaking-changes/mixed-decls/

VirtualKeyboard API - 태블릿, 모바일 기기, 그리고 기타 키보드 사용이 불가한 디바이스에서 가상 키보드를 활용할 수 있다. (Ref)
pnpm Catalog - monorepo 내 여러 패키지에서 단일 버전을 바라보게 할 수 있다. 버전을 업데이트할 때도 pnpm-workspace.yaml 한 군데만 변경하면 된다.
d3, 그리고 d3-scale - d3-scale은 추상 데이터를 시각적 표현으로 스케일한다. 실질적으로 좌표계에 표시하기 위한 방법(Ref)