8월 5주차 기록

여름 빨리 가버렷

배워가기

정규표현식 Lookahead, Lookbehind

본래 패턴에 맞는 곳을 우선 찾고, 그 다음 추가적으로 해당 Lookaround의 조건이 맞는지 아닌지를 체크

• Lookahead - 꼬리말(suffix)를 확인하는 용도
• Lookbehind - 머리말(prefix)를 확인하는 용도

지원되지 않는 브라우저도 많음에 유의해야 한다 🥲 (특히 사파리 구 버전)

Ref

• https://caniuse.com/js-regexp-lookbehind
• https://elvanov.com/2388

CSS mix-blend-mode

• 어느 요소의 콘텐츠가 자신의 배경 및 부모와 어떻게 혼합되어야 하는지 지정한다.
• 서로 다른 요소(ex.레이어)를 겹쳐서 색상에 대한 효과를 주고 싶을 때 사용하면 좋다.

Ref https://developer.mozilla.org/ko/docs/Web/CSS/mix-blend-mode

Window:unhandledrejection event

• 자바스크립트 Promise의 reject handler가 정의되지 않았을 때 전역 스코프로 퍼지는 이벤트
• 디버깅 및 예상치 못한 상황에서 에러핸들링 fallback을 제공할 때 사용할 수 있다
• event type으로 PromiseRejectionEvent를 받는다

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

bash script에서 배열 다루기

• 배열 선언하는 법
  Copy

  myArray=("cat" "dog" "mouse" "frog")

• 배열 순회하는 법
  Copy

  for str in ${myArray[@]}; do
    echo $str
  done

  • @ 심벌은 배열의 모든 요소를 순회하겠다는 것을 의미한다.

Ref https://www.freecodecamp.org/news/bash-array-how-to-declare-an-array-of-strings-in-a-bash-script/

echo > vs >>

• > - overwrite
• >> - append

Ref https://stackoverflow.com/questions/34191883/what-is-the-difference-between-and-when-using-echo-to-write-to-file?noredirect=1&lq=1

nest.js의 ConfigService

nest.js의 ConfigModule에서 제공하는 ConfigService를 통해서 환경변수에 접근할 수 있다.

사용하고자 하는 서비스나 컨트롤러의 생성자에 ConfigService를 주입하고, get()으로 접근한다.

constructor(private configService: ConfigService) {
  this.dbUser = configService.get<string>('DATABASE_USER');
  this.dbHost = configService.get<string>('database.host');
}

타입스크립트 ...args의 타이핑

type SomeType = "foo" | "bar";

function someFunction<T extends string>(
  ...args: T extends SomeType
    ? [a: T, b: string, c?: boolean]
    : [a: T, c?: boolean]
) {
  const [a, _, c] = typeof args[1] === "string" ? args : [args[0], "", args[1]];
  const customB = typeof args[1] === "string" ? args[1] : "";
  // ...
}

위처럼 함수 ...args를 타이핑하면 호출부에서 함수로 넘기는 인자의 개수를 제한할 수 있다.

someFunction("foo"); // 🚨 Error: Expected 2-3 arguments, but got 1
someFunction("foo", "second param"); // ✅ OK
someFunction("baz"); // ✅ OK

이것저것

이번주는 없네!

기타공유

AI(LLM)들의 MBTI

진짜 와이라노…

Ref https://arxiv.org/pdf/2307.16180v1.pdf

State of CSS 2023

처음 들어보는 프레임워크도 많다.

Ref https://2023.stateofcss.com/en-US/

TypeScript 5.3의 Open-Ended String Completions

interface Options {
  borderColor: "black" | "red" | "green" | "yellow" | "blue" | string;
}

const opts: Options = { borderColor: "red" };

위처럼 borderColor union 마지막에 string이 들어가도, 사용처에서 다음처럼 추론이 가능해질 수도!

Ref

• TypeScript 5.3 Iteration Plan
• https://github.com/microsoft/TypeScript/issues/29729

gothub

gothub… ‘갓’ 스펠링은 다르지만 무게감 있는 이름에 어울리지 않게 너무나 킹받게 깜찍한 로고…

github FE의 순수 golang 포팅 버전이다.

자바스크립트 이제 빠이하는 건가…

Ref https://codeberg.org/gothub/gothub

마무리

슬슬 여름이 가려나 보다!

빨리 좀 가라…

건강검진도 끝났고, 이제 진짜 다시 달릴 일만 남았다 🏃‍♀️