4월 첫주차 기록

배워가기

gRPC와 tRPC

• gRPC: 구글이 최초로 개발한 오픈 소스 원격 프로시저 호출 시스템이다. 전송을 위해 HTTP/2를, 인터페이스 정의 언어로 프로토콜 버퍼를 사용하며 인증, 양방향 스트리밍 및 흐름 제어, 차단 및 비차단 바인딩, 취소 및 타임아웃 등의 기능을 제공한다.
• tRPC: 풀 스택 애플리케이션에서 타입스크립트로 완전한 타입 세이프 API를 만들 수 있다. 서버 애플리케이션이 타입 세이프 함수(예: user 만들기, 식별자별 user 가져오기, 모든 user 가져오기 등과 같은 CRUD 연산)가 포함된 타입 세이프 라우터를 생성하면 클라이언트 애플리케이션은 추론된 타입 세이프 라우터에서 이러한 함수를 직접 호출할 수 있다. 내부적으로는 클라이언트와 서버 간의 통신에 여전히 HTTP가 사용된다.

🤔 그럼, RPC란? “Remote Procedure Call”의 약자로, 하나의 컴퓨터(서버)에서 다른 컴퓨터(클라이언트)로 함수를 호출하는 방식이다. 전통적인 HTTP/REST API에서는, URL을 호출하고 응답을 받아왔다면, RPC에서는 함수를 호출하고 응답을 받아온다.

Copy

// HTTP/REST
const res = await fetch('/api/users/1');
const user = await res.json();
// RPC
const user = await api.users.getById({ id: 1 });

Ref

• https://velog.io/@superlipbalm/full-stack-typescript-with-trpc-and-react
• https://trpc.io/docs/concepts

react-testing-library의 prettyDOM과 DEBUG_PRINT_LIMIT

• prettyDOM - 노드의 DOM 트리를 읽을 수 있는 형태로 포맷팅해주는 헬퍼 함수로, 테스트 디버깅 시 유용하다.
• DEBUG_PRINT_LIMIT - DOM의 크기가 매우 커질 수 있음에 대비하여, 출력될 DOM 컨텐츠의 양을 제한한다.

Ref https://testing-library.com/docs/dom-testing-library/api-debugging/

sass에서 함수 사용하기

scss 또는 sass 모듈에서 함수를 정의하여 사용할 수 있다.

@function fibonacci($n) {
  $sequence: 0 1;
  @for $_ from 1 through $n {
    $new: nth($sequence, length($sequence)) + nth($sequence, length($sequence) - 1);
    $sequence: append($sequence, $new);
  }
  @return nth($sequence, length($sequence));
}

.sidebar {
  float: left;
  margin-left: fibonacci(4) * 1px;
}

Ref https://sass-lang.com/documentation/at-rules/function/

문서에서 특정 문자열을 포함하는 class를 가진 요소들 추출하기

• document.querySelectorAll('[class*=str]') - value에 str이 포함되는 요소
• document.querySelectorAll('[class$=str]') - str로 끝나는 요소
• document.querySelectorAll('[class^=str]') - str로 시작하는 요소

cf) querySelector에만 사용 가능하고, getElementsBy~ 에는 사용 불가하다

Ref

• https://threadbuilder.wordpress.com/2020/08/02/queryselector-wildcard-옵션으로-찾기/
• https://stackoverflow.com/questions/8714090/how-to-do-a-wildcard-element-name-match-with-queryselector-or-queryselector

pnpm workspace에서 cli

• -filter, -F 옵션으로 pnpm 명령어를 수행할 대상 워크스페이스를 지정할 수 있다.

  • ex) pnpm --filter '@self/shared' run tsc*
  • @self/shared 워크스페이스의 package.json 에 등록된 tsc 명령어를 실행

• 필터는 와일드카드 문자를 사용한 glob 패턴으로 지정할수 있습니다.

  • ex) pnpm --filter '@self/*' run tsc
  • @self/로 시작하는 이름의 워크스페이스의 package.json에 등록된 tsc 명령어를 실행

• 프로젝트 루트에 있는 워크스페이스를 워크스페이스 루트라고 부른다. 루트의 package.json을 대상으로 pnpm 명령어를 실행하려면 --workspace-root 옵션을 사용한다.

  • ex) pnpm --workspace-root add react
  • 워크스페이스 루트에 react 패키지를 설치

eslint workingDirectories

eslint가 사용하는 working directories가 어떻게 계산되는지 명시한다. eslint는 설정파일(eslintrc, eslintignore)를 working directory에서 상대적인 경로로 찾기 때문에, 이를 정확하게 설정하는 것이 중요하다. 만약 eslint를 터미널에서 실행한다면 터미널의 working directory를 하위 폴더로 이동시켜야 한다. .eslintrc* 파일은 부모 디렉토리 기준으로 탐색하는 반면, .eslintignore 파일은 현재 working directory에만 유효하다는 것을 알아두자. 설정에 다음 값들이 사용될 수 있다.

• [{ "mode": "location" }] (@since 2.0.0) - eslint가 workspace 폴더 위치나 파일 위치(workspace 폴더가 열려있지 않을 때)를 working directory로 사용하게끔 한다. 이것은 기본 설정이며, 구 버전(1.9.x)의 eslint extension에서 사용하는 방식이다.
• [{ "mode": "auto" }] (@since 2.0.0) - eslint가 working directory를 package.json, eslint.config.js, eslintignore, 그리고 .eslintrc* 파일이 위치한 곳 기준으로 실행되게 하는 방식이다. 이것은 여러 경우에 대응할 수 있지만 예측하지 못한 결과로 이어지기도 한다.

Ref

• https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

tsc --build 옵션

프로젝트 레퍼런스에서 지정한 이 프로젝트와 프로젝트의 모든 의존성을 빌드 합니다.

…뭔소리야?

모노레포와 같은 구조에서, 상위 경로의 tsconfig 파일에 references 속성으로 특정 워크스페이스를 명시했다면, 해당 tsconfig로 빌드를 수행할 수 있다.

모든 이미지를 <figure> 태그로 감싸야할까?

정답은, 아니다! 🙅‍♀️

<figure> 태그는 독립적인(self-contained) 이미지를 나타낼 때 사용한다.

부가적인 요소로 사용한 경우 <figure> 태그를 사용하는 것은 적절하지 않다.

Ref https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure

이것저것 모음집

• blender - 3D 컴퓨터 그래픽 제작 소프트웨어(Ref)
• fselect - 파일 찾기를 sql-like query로 수행할 수 있도록 해준다. 위험할 수 있지만, 편하다.(Ref)

기타공유

마무리

평일 내내 평화롭게 혼자 시간 잘 보내고 주말에 급발진 해버리기~

매년 피는 벚꽃이지만 볼때마다 항상 예쁘다.

올해는 소중한 팀원들과 벚꽃 한 컷, 그리고 짝꿍과는 조금 특별하게 러닝하며 벚꽃 찰칵 📷