5월 첫주차 기록

신나는 수영 🏊‍♀️

배워가기

자바스크립트 Record와 Tuple(stage2)

RFC stage2에 자바스크립트의 Record와 Tuple이 올라와 있다. 이는 Immutable한 객체 관리를 언어에 내장하자는 제안이다.

• a Record value is completely immutable and will not change over time
• a Tuple value is completely immutable and will not change over time

ECMAScript 2023에 올라간 Array.prototype.toReserved(), Array.prottype.toSorted() 등은 Record와 Tuple의 하위 제안으로 탄생했다.

Ref

• 관련 발표영상 (JSConf Korea 2022 - The Next Exciting JavaScript Feature: Records & Tuples)
• 튜토리얼
• 플레이그라운드

react-router-dom의 <Route> 하위의 라우팅 동작들

react-router-dom에서 <Route> 하위에 있는 라우팅 동작들은 부모에 대해 상대적으로 동작한다

<Route path={'/self-service'} component={SelfServiceDashboardGateway} />가 있을 때, 그 안에서 동작하는 history 객체의 경우

• /self-service/a 에서 history.push('b') 을 하면 /self-service/b으로 이동한다.
• /self-service/a 에서 history.push('/self-service/b') 을 해도 /self-service/b으로 이동한다.

useEffectOnce

useEffectOnce는 mounting 시에만 한번만 동작하도록 useEffect를 wrapping한 hook이다.

const useEffectOnce = (effect: EffectCallback) => {
  useEffect(effect, []);
};

react-use 라이브러리에서 제공한다.

모니터링 시스템과 도구

• 모니터링 시스템

  • 어떤 서비스 혹은 시스템으로부터 시계열 데이터를 수집하는 시스템
  • 시계열 데이터 - CPU, 메모리 사용량 등에 대한 수치 데이터와 사용자의 활동을 기록하는 로그 데이터

• 데이터 수집 및 시각화 도구

  • Prometheus
    • 시계열 수치(float) 데이터를 저장하는 DB
  • Loki
    • 시계열 로그(string) 데이터를 저장하는 DB
  • Grafana
    • Prometheus와 Loki의 데이터를 시각화해주는 프로그램
    • 쿼리로 동작
      • Prometheus - PromQL
      • Loki - LogQL

Ref https://rulyox.blog/2021-10-24-Prometheus-Loki-Grafana를-이용한-모니터링-시스템-구축/

<time> 태그

시간의 특정 지점 또는 구간을 나타낸다. datetime 특성의 값을 지정해 보다 적절한 검색 결과나, 알림 같은 특정 기능을 구현할 때 사용할 수 있다.

<p>
  The Cure will be celebrating their 40th anniversary on
  <time datetime="2018-07-07">July 7</time> in London's Hyde Park.
</p>

Next.js useFileSystemPublicRoutes

next.config.js에서 다음과 같이 설정하면,

module.exports = {
  useFileSystemPublicRoutes: false,
};

프로젝트가 커스텀 서버를 사용하는 경우, next.js가 pages 하위의 파일들을 특정한 pathname으로 연결해주는 기본동작을 없앤다.

Ref https://nextjs.org/docs/advanced-features/custom-server

이것저것

• vscode의 Inlay Hints를 사용하면 암시적 반환 형식에 대한 타입힌트를 볼 수 있다. 이외에도 변수 , 속성 선언, Enum 등등 다양한 값들에 대한 Inlay Hints를 설정할 수 있다.
• Go vs Golang - 둘 다 Go 언어를 가리키는 같은 말이다. Golang은 Go 사이트가 golang.org이었던 것에서 유래되었다. (공식문서 FAQ)

기타공유

전처리기 없이도 CSS 네스팅을?

.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

크로미움 112 버전부터 지원한다.

(크롬도 버전 업데이트 할 때마다 신규 기능 release note를 내놓는구나!) (당연히 그래야 하겠지만…)

Ref https://web.dev/web-platform-04-2023/

nestia e2e 자동생성 기능 릴리즈

Nestia는 ‘Nest.js Helper Libraries’라고 되어있다. 이름 귀엽당. Nest에서 제공하는 건가?

npx nestia e2e 명령어 하나로 테스트코드를 짜준다니. 완전 코파일럿이네

Ref https://nestia.io/docs/sdk/e2e/

마무리

수영을 다니기 시작했다!

아침 6시반에 일어나 7시부터 후딱 운동하는 게 몸도 안 풀리고 힘들 줄 알았는데, 물속에서 하는 운동이라 그런지 의외로 또 부담이 없어서 좋다. 초급반으로 들어가 발차기만 주구장창 하며 레인 삥삥 도는데, 숨이 너무 차다. 완전 운동 제대로잖아!!

새벽부터 활기찬 느낌과 수영장의 냄새마저도 좋아서 수영 가기 전날 밤부터 설렌다. 두 번 밖에 안 갔지만 몸도 건강해지고 배도 쏙 들어간 느낌이다. 처음으로 제대로 즐기는 운동을 찾았어 🏊‍♀️ 어푸어푸