3월 1주차 기록

March 4, 2023 • ☕️ 5 min read

weekly

가끔은 등산을 ⛰️

배워가기

Turborepo란?

JS/TS 코드 베이스의 모노레포를 위한 고성능 빌드 시스템으로, 모노레포 환경에서 개발자가 조금 더 쉽고 빠르게 개발할 수 있도록 빌드 도구를 제공한다. Vercel이 인수했다.

다음을 특장점으로 갖는다. (총 9개지만 생략)

Incremental builds
- 빌드는 딱 한 번만 하는 것을 목표로, 작업 진행을 캐싱해 이미 계산된 내용은 건너 뛴다.
Content-aware hashing
- 타임스탬프가 아닌 콘텐츠를 인식하는 방식으로 해싱을 지원한다. 이를 통해 모든 파일을 다시 빌드하는 것이 아니라 변경된 파일만 빌드한다.
Parallel execution
- 모든 코어를 사용하는 병렬 실행을 목표로 최대한 병렬적으로 작업을 수행한다.
Task Pipelines
- 태스크 간의 연결을 정의해서 빌드를 언제 어떻게 실행할지 판단해 최적화할 수 있다.
Zero Runtime Overhead
- 런타임 코드와 소스 맵을 다루지 않는다.
JSON configuration
- 별도의 코드 작업 없이 JSON 설정이면 충분하다.
Profile in browser
- 빌드 과정을 시각화해서 병목 지점을 쉽게 찾을 수도 있다.

주요 웹 브라우저 url 최대 길이 제한

브라우저	최대 URL 길이 제한
Internet Explorer	2,083 characters
Microsoft Edge	8,192 characters
Firefox	65,536 characters
Chrome	2,083 characters
Safari	80,000 characters

CSS 파싱은 HTML 파싱을 막는다?

styleSheet의 경우 embedded나 inline 스타일과는 다르게 백그라운드에서 완전히 다운받을 수 있어 DOM 파싱을 중단시키지는 않는다. 다만 styleSheet도 딱 한번만 CSSOM 트리를 수정한다. 그리고 수정된 CSSOM 트리를 통해 Render Tree가 업데이트된다.

CSS가 Render-Blocking 자원이라고 불리는 이유다. 스타일 요소를 읽는 동안에는 Render Tree 구성이 중지된다. 하지만 Render Tree의 구성을 멈출 뿐, DOM 파싱은 멈추지 않는다.

DOM 파싱이 종료되어 DOM Tree가 완성되었다고 하더라도, CSSOM 트리가 아직 완성되지 않았다면면 Render Tree를 구성하지 않는다.

즉, CSS는 파서-블로킹이 아니라 렌더-블로킹 자원이다!

Ref https://sangmin802.github.io/Study/Think/browser-parser-blocking/ -

Nest.js View Entity

데이터베이스 view와 매핑되는 클래스다.

@ViewEntity의 옵션
- name - view의 이름으로, 명시하지 않으면 엔티티 클래스 이름으로 생성된다.
- database - 선택된 DB 서버의 데이터베이스 네임
- schema - 스키마 이름
- expression - 필수 항목으로, view의 정의
Copy
```
@ViewEntity({
    expression: `
        SELECT "post"."id" AS "id", "post"."name" AS "name", "category"."name" AS "categoryName"
        FROM "post" "post"
        LEFT JOIN "category" "category" ON "post"."categoryId" = "category"."id"
    `
})
```
- dependsOn - 현재 view가 의존하고 있는 다른 view의 목록. 다른 view를 definition에 사용한다면, dependsOn에 추가하여 올바른 순서로 마이그레이션되게끔 해야 한다.

이것저것

numeric separators: 육안으로 한 눈에 분간하기 어려운 숫자를 끊어서 표기하기 위해서 underscore를 활용할 수 있다.
- 1_000_000_000_000 처럼 천의 자리 기준으로 끊어 읽을 수도 있고 소수점, 십진수가 아닌 이/팔진수 등등에서도 유용하게 사용할 수 있다.
git pull --tags - 원격 저장소에서 tag 를 pull 해오기
ChatGPT Prompt를 모아놓은 awesome-chatgpt-prompts

기타공유

비주얼 디자인 가이드

링크에 유용한 팁들이 많이 있다! 주로 디자이너를 위한 것이지만, 프론트엔드 개발자로서 같이 알고 있어도 좋을 듯 하다. 😎

완전 검은색/흰색 대신 검은색/흰색에 가까운 색 사용하기
중요한 요소들에 대비가 높은 색상 사용하기
시각적 정렬은 수학적 정렬과 다를 수 있다.
큰 텍스트에는 자간(letter-spacing)과 줄간격(line-height) 줄이기
레이아웃은 수학적으로 계산되어야 한다.
요소들은 시각적 무게의 순서에 따라 나열하기
가로 그리드를 사용한다면, 12개의 열 사용하기
가까운 요소일수록 더 밝은 색상 사용하기
외부 패딩은 내부 패딩보다 같거나 더 크게 설정하기
텍스트 한 줄은 70자(영어 기준) 내외로 사용하기
버튼에서 가로 패딩은 세로 패딩보다 2배로 설정

등등 재밌는 팁들이 있다

Ref https://anthonyhobday.com/sideprojects/saferules/

NextUI

vercel에서 관리하는 React용 UI Library다.

Ref https://nextui.org/

msw 메이저 1.0 버전

대단히 달라진 건 없는 듯하다.

Ref https://www.npmjs.com/package/msw

JSVerbalExpressions

쉽게 만드는 JS 정규표현식 빌더

Copy

// Create an example of how to test for correctly formed URLs
const tester = VerEx()
  .startOfLine()
  .then("http")
  .maybe("s")
  .then("://")
  .maybe("www.")
  .anythingBut(" ")
  .endOfLine();

// Create an example URL
const testMe = "https://www.google.com";

// Use RegExp object's native test() function
if (tester.test(testMe)) {
  alert("We have a correct URL"); // This output will fire
} else {
  alert("The URL is incorrect");
}

console.log(tester);