ziglog

Search by

Home
8월 1주차 기록

8월 1주차 기록

August 6, 2022 • ☕️☕️ 9 min read

weekly

합주는 즐거워

배워가기

craco

Create React App Configuration Override 의 약자로, 말 그대로 CRA에서 config를 덮어쓸 때 사용한다. 비슷한 툴로는 react-app-rewired가 있다.

최근에는 사용률 측면에서 craco가 react-app-rewired를 따라잡고 있는데, 그 이유는 CRA 2.0 버전부터 “lightly” 하게만 관리한다고 선언했기 때문이 아닌가 싶다.

craco를 만든 이유를 읽어보면 관련 내용이 나온다. webpack이 너무 어렵기 때문에 만들었다고 한다… 😂 react-app-rewired를 쓰고 있었는데, 더 이상의 패키지 업데이트를 중단하겠다고 해서 탄생한 게 CRACO다!

react-app-rewired 는 CRA 2.0버전부터는 “lightly”하게 지원한다. react-app-rewired README를 보면 다음과 같이 적혀있다. “As of Create React App 2.0 this repo is “lightly” maintained mostly by the community at this point.” 패키지를 lightly하게 관리한다는 것은, 문맥상 오픈소스를 관리하는 메인테이너가 직접 코드를 수정하지 않고 커뮤니티의 풀 리퀘스트가 있을 때 approve & merge 해주는 정도라고 생각할 수 있다. 질문과 별개로 저는 craco, react-app-rewired 등 고민했었는데 결국

craco, react-app-rewired와 비슷한 도구로, patch-package라는 것도 있다. patch-package는 직접 node_modules을 수정하고 동료 개발자들이 install할 때 변경사항을 동일하게 반영시켜준다. craco, react-app-rewired 같은 config-override 패키지에 비해 다음과 같은 장점이 있다.

react-scripts를 직접 수정할 수 있다.
CRA의 메이저 버전이 바뀌었을 때 업데이트를 기다릴 필요가 없다. (종속성 제거)
package.json의 명령어를 react-scripts로 유지할 수 있다.
소스 코드를 직접 수정하기 때문에 불필요한 추상화를 걷어낼 수 있다.
패키지를 직접 까보면서 작업하다보니 소스 코드에 대한 이해도가 높아진다.
react-scripts 말고도 다른 패키지에도 적용이 가능합니다.

Next.js 이것저것

Next.js 에서 HTML을 변경하기 위해서는 Custom Document를 이용해야 한다.
- https://nextjs.org/docs/advanced-features/custom-document
Next.js 10.2 버전부터는 web font 최적화를 내장시켜 FCP 및 LCP를 개선했다.
- https://nextjs.org/docs/basic-features/font-optimization

의존성

한 클래스가 다른 클래스에게 메시지를 보내면(클래스의 객체의 메서드를 호출하면), 두 클래스 사이에 의존성이 존재한다고 표현한다.
의존성을 컴파일타임 의존성과 런타임 의존성으로 구분해서 생각해볼 수 있다. 코드 상에서 보이는 컴파일타임 의존성과, 실행 시점에 보이는 런타임 의존성은 서로 상이할 수 있는데, 서로 다르면 다를수록 이해하기 어려운 코드가 된다.
의존성을 낮추어 재사용성과 유연성을 높이면, 이해하기 어려운 코드가 된다. 반대로 의존성을 높이고 유연성을 낮추면, 이해하고 디버깅하기는 쉬워지지만 확장가능성이 낮아진다.

AbortController

AbortController는 비동기 요청을 중단할 수 있는 인터페이스를 제공한다.

AbortController.signal : 새로운 AbortController 객체 인터페이스를 생성한다.
AbortController.abort() : 비동기 요청이 완료되기 전에 취소한다.
abort 이벤트에 대해 리스터를 등록할 수 있다.

SSG vs SSR vs ISR

SSG(Server-Side-Generation / Static-Site-Generation): 빌드 타임에 HTML을 각 페이지별로 생성하고 해당 페이지로 요청이 올 경우 이미 생성된 HTML 문서를 반환한다.
SSR(Server-Side-Rendering): 요청이 올 때마다 해당하는 HTML 문서를 그때그때 생성하여 반환한다.

SSG는 빠른 퍼포먼스가 필요할 때, 정적인 컨텐츠를 렌더링할 때 적합한 방식이라 할 수 있고, SSR은 항상 최신 상태를 유지해야하는 동적인 컨텐츠를 렌더링할 때 적합하다고 할 수 있다.

SSG는 응답 속도가 매우 빠르다는 이점이 있다. 그렇다면 컨텐츠의 최신화 빈도가 크지는 않지만 완전히 정적인 데이터라고 볼 수는 없는 데이터를 다룰 때, SSG를 사용할 수는 없을까?

Next.js SSG는 컨텐츠를 얼마 주기로 다시 빌드하는지를 체크하는 기능이 있다. 특히 데이터의 변경이 자주 일어나지 않는 곳은, cdn까지 붙이면 전달속도를 훨씬 향상시킬 수 있다.

ISR(Incremental Static Regeneration): 정적인 페이지가 빌드된 후에도 전체 사이트를 재빌드할 필요 없이 업데이트할 수 있도록 해주는 기능이다. getStaticProps에 revalidate prop을 넣으면 되는데, revalidate 값에 해당하는 초단위 시간이 지나면 Next.js는 우선 캐시된 상태의 현재 페이지를 보여주면서 백그라운드에서는 재빌드를 진행하고, 이것이 성공하면 업데이트된 페이지를 보여준다.

void 0

void 0은 void(0) => undefined 값을 반환한다.

undefined 값을 직접 사용하지 않고 void 0을 사용하는 이유는 무엇일까?

자바스크립트의 초창기 시절 undefined는 writable한 전역 변수였다. (즉, undefined에 값을 할당할 수 있었다) 이때 값이 할당된 undefined로 인한 버그를 막기 위해 void 0 이라는 코드를 사용하게된 것이다. (최신 브라우저에서는 undefined에 값을 할당할 수 없다.)

타입스크립트 튜플(tuple)

타입스크립트의 튜플은 참 신기해요 🐳

tuple은 자바스크립트에는 없는, 타입스크립트만의 문법이다. 배열 타입을 보다 특수한 형태로 사용할 때 tuple을 사용한다.

튜플에서는 명시적으로 지정된 형식에 따라 아이템 순서를 설정한다.

Copy

let myInfo: [string, number] = ["지그", 26];
myInfo = [26, "지그"]; // 🚨 Error

튜플에서는 순서와 길이가 보장된다.

Copy

myInfo[0]; // "지그"
myInfo[1]; // 26
myInfo[2]; // 🚨 Error

인덱스 타입도 불변이며, 컴파일러가 그 정확한 값을 기억하고 있다.

즉 아래 코드는,

Copy

const days = ["sun", "mon", "tue", "wed", "thu", "fri", "sat"] as const;

아래와 같은 형태로도 작성할 수 있다.

Copy

{
  0: 'sun',
  1: 'mon',
  2: 'tue',
  3: 'wed',
  4: 'thu',
  5: 'fri',
  6: 'sat',
  readonly length: 7,
}

일반적인 배열과 튜플은 타입이 추론되는 방식이 서로 다른다.

Copy

const daysArray = ["sun", "mon", "tue", "wed", "thu", "fri", "sat"];
type daysArrayTytpe = typeof daysArray; // string[]

Copy

const daysTuple = ["sun", "mon", "tue", "wed", "thu", "fri", "sat"] as const;
type daysTupleType = typeof daysTuple; // readonly ["sun", "mon", "tue", "wed", "thu", "fri", "sat"]

튜플은 불변 구조이기 때문에 readonly 키워드를 명시적으로 수식한다. 튜플은 적은 양의 연결된 데이터, 또는 고정된 데이터 타입을 위한 패턴으로 사용할 수 있다.

Ref https://yamoo9.gitbook.io/typescript/types/tuple https://blog.cometkim.kr/posts/typescript-tuples/

npm 워크스페이스와 모노레포 명령어

패키지를 링크로 만들 때 - npm link
워크스페이스로 링크를 자동화할 때 - npm workspace
워크스페이스로 의존성을 하나로 관리할 수 있다.
각 npm 프로젝트의 의존성과 스크립트를 한 곳에서 관리할 수 있게끔 해준다.
🤔 서로다른 npm 프로젝트에서, 같은 의존성의 다른 버전을 사용한다면?
- 워크스페이스 간에 불러오기 - require(workspace-a)
- npm 스크립트 실행 - npm start -w workspace-a

Ref https://jeonghwan-kim.github.io/2022/07/31/npm-workspace https://d2.naver.com/helloworld/0923884

eslint로 대체 룰 사용하기

Copy

// plugins/eslint/index.js
module.exports.rules = {
  // ...
  "no-window-open": {
    create: (context) => {
      return {
        MemberExpression(node) {
          const { object, property } = node;
          console.log(object.name);
          if (object.name === "window" && property.name === "open") {
            context.report({
              node,
              message:
                "window.open() 대신 Link utils의 openWindow()를 사용해주세요.",
            });
          }
        },
      };
    },
  },
};

여기서 MemberExpression 클래스는, 필드 또는 속성에 대한 액세스를 나타낸다.

이것저것

<th>의 기본 font-weight은 700이다.
데이터 클렌징(cleansing) - 데이터 전처리 과정의 하나로 다양한 이유로 오염된 데이터를 처리하는 과정
ARIA role=“separator” 지정 시, aria-orientation의 기본값은 horizontal이다. (divider에 적용할 수 있다.)
정규식으로 rgba 값 뽑아내기 - color.replace(/,\s+/g, ',').match(/^rgba?$(\d+),+(\d+),+(\d+),?([.\d]+)?$$/i)
lint-staged eslist —cache - 커밋을 할 때 린트가 너무 오래돌아서 불편함이 있다. 이때 --cache 옵션을 추가하면 변경된 파일에 대해서만 린트 실행해준다 (Ref)
cross-env - 서로 다른 OS 간에 환경변수를 넣어줄 때 사용하는 라이브러리로, Kent C. Dodds가 만들었다.
Gitlab 코드 리뷰할 때 package.json에 있는 패키지를 클릭하면 패키지 사이트로 이동한다!
!default - 자바스크립트의 default parameter 처럼 scss에서 기본값을 넣어주는 플래그
클래스 컴포넌트에서 getter를 적절히 사용해서 변수의 최신화된 값을 가져올 수 있다.
배치 애플리케이션이란? - 정해진 시간마다 데이터 가공이 필요한 경우 사용한다. (Ref)
React.isValidElement(object) - 객체가 React 엘리먼트인지 확인한다. true 또는 false를 반환한다.
URL.toString() 메서드 (Ref)
정규식에서, new RegExp()로 쓰면 호출될 때마다 새로 컴파일되는 반면에 //로 쓰면 딱 한번 컴파일 되서 성능이 더 좋다. (Ref)

기타

Docusaurus 2.0 발표

이 친구는 정말 fancy해질 것만 같다… Meta Open Source라고 한다. 메타 오픈소스가 뭐지? 더 엄청난 오픈소스인가? 하고 생각했는데, 페이스북의 그 메타였다 😅

다음과 같은 기능들이 추가되었다고 한다.

React를 클라이언트에서도 사용할 수 있게 되었다. SPA가 가능해졌다.
커뮤니티의 plugin들이 추가되었다.
theme 설정이 더욱 유연해졌다.
스냅샷에 기반한 문서 버저닝은 더욱 이해하기 쉬워졌다.
기타 등등

npm downloads에서도 Docusaurus 2.0을 쓴다고 한다!

Ref https://docusaurus.io/blog/2022/08/01/announcing-docusaurus-2.0

모든 걸 다 해주는(?) 자바스크립트 런타임, Bun

C++, Rust가 아닌 시스템 하드웨어에서 읽을 수 있는 저수준 프로그래밍 언어인 Zig로 작성되어있어 더 빠르게 동작할 수 있는 것으로 보입니다.

우와! Zig가 여기서 쓰였다니, 반갑당

아무튼 간에, Node나 Deno보다 훨씬 빠르다고 한다!

Ref https://techblog.gccompany.co.kr/한bun-써보는-거-어때-fa3cb32ac76f

HypeScript

Typescript type으로 만든 zero runtime Typescript type checker로, Typescript의 type이 튜링 완전하다는 사실 (최소한 2.2버전은 튜링 완전)에서 출발한 프로젝트다. (코드를 실행하지 않고 그저 코드를 문자열로 전달하면 즉시 에러를 확인할 수 있다)

완전히 흥미 위주인 프로젝트지만, 튜링 완전하다는 것의 의미와 그 구현법들을 통해 더 다양한 타입스크립트의 활용을 기대해볼 수 있다.

Hype라고 하니 뉴진스의 Hype boy만 떠오르는 나는… 개노답이다 😩

Ref https://github.com/ronami/HypeScript