10월 3주차 기록

October 21, 2023 • ☕️ 4 min read

weekly

소낙비가 오락가락

배워가기

yarn berry

패키지 1개가 하나의 압축 파일이기 때문에 의존성 파일의 숫자가 적고 크기도 작다
캐싱도 가능하고 버전관리도 가능하다
레포지토리 복제만으로도 의존성 설치가 가능하다
dedupe, constraints 기능을 제공한다.

Ref https://www.youtube.com/watch?v=2IE68SDTYvI

shallow clone

git clone의 shallow 옵션
배포할 브랜치에서 한 개 또는 최대 n개의 커밋과 그 연관 파일을 내려 받는 방법
파일 변경사항을 담은 커밋 객체가 일부분만 복제되기 때문에 업데이트 정보가 유실된다는 단점이 있다
git v2.22.0~ 의 filter spec에서는 수정사항을 담은 커밋 객체는 모두 내려받고 파일은 최신 버전의 커밋에 포함된 것만 내려받을 수 있게끔 하는 기능을 제공한다

Copy

git clone --filter=<filter-spec>

Ref https://www.youtube.com/watch?v=2IE68SDTYvI

nest의 Guard 기능

각 요청(controller)별로 인가를 다르게 설정할 수 있다

Copy

import { Injectable, CanActivate, ExecutionContext } from "@nestjs/common";
import { Observable } from "rxjs";

@Injectable()
export class AuthGuard implements CanActivate {
  canActivate(
    context: ExecutionContext
  ): boolean | Promise<boolean> | Observable<boolean> {
    const request = context.switchToHttp().getRequest();
    return validateRequest(request);
  }
}

package.json의 `devEngines`

해당 패키지가 지원하는 개발환경 목록을 정의할 수 있다

Copy

"devEngines": {
  "node": "16.x || 18.x || 19.x || 20.x"
},

sass 모듈 업데이트 사항

sass 모듈에서 ~ 문자로 import해오는 방식은 deprecated되었다

@import 문을 사용할 때 로더는 첫 번째로 상대경로로 모듈을 검색하고, 발견하지 못한다면 node_modules 안에서 모듈을 찾는다.

이제 @import "~bootstrap"; 이렇게 불러오면 webpack은 node_modules에서 모듈을 찾는다.

Ref https://www.npmjs.com/package/sass-loader#resolving-import-at-rules

lodash-es의 chain

lodash의 esmodule 버전인 lodash-es는 tree-shaking이 가능하다

하지만 lodash-es의 chain 메서드를 쓰는 경우, chain에 뒤이어 나오는 모든 lodash 함수의 import가 필요하다. 따라서 어쩔 수 없이 bundle import를 해줘야 한다(따라서 chain을 사용할 때는 tree-shaking이 되지 않는다)

Copy

import { chain, groupBy, toPairs } from "lodash-es"; // ❌
import _ from "lodash-es"; // ✅

npm watch

파일 변경 시 package.json의 명령어를 실행하도록 직접 구성할 수 있다.

예) tsx 변경을 감지해서 docgen을 실행하고 싶다. (watch.docgen.patterns 경로의 watch.docgen.extensions와 일치하는 확장자 파일에 변경사항이 발생할 경우)

Copy

"scripts": {
  "docgen": "pnpm --filter website docgen",
  "docgen:watch": "npm-watch docgen"
},
"watch": {
  "docgen": {
    "patterns": [
      "packages/blue/src/components",
      "packages/mint/src/components"
    ],
  "extensions": "tsx"
}