ziglog

Search by

Home
9월 2-3주차 기록

9월 2-3주차 기록

September 21, 2024 • ☕️ 7 min read

weekly

배워가기

postgresql 데이터 dump 및 restore

DB 접속

Copy

psql -h (호스트) -p (포트) -U (계정명) -d (DB명)

Dump

Copy

# 스키마만 Dump
pg_dump --no-security-labels --no-owner --schema-only -f schema.sql
* 제외할 스키마가 있다면 exclude-schema=public 를 통해 필터 가능
    
# 데이터만 디렉터리 (pg_dump 자체 포멧) 포멧으로 덤프:
pg_dump --verbose --data-only --format=d -f data

Restore

Copy


# 특정 스키마만 데이터로부터 복원
pg_restore --verbose --no-privileges --schema=seller data
    
# 특정 스키마들을 제외하고 복원
pg_restore --verbose --no-privileges --exclude-schema=public --exclude-schema=seller data

Ref

[PostgreSQL] pg_dump 명령어 및 옵션 - https://m.blog.naver.com/anytimedebug/221222479261
[PostgreSQL] pg_restore 명령어 및 옵션 - https://m.blog.naver.com/anytimedebug/221223099597

@module-federation/enhanced

webpack 기본 module federation에 몇 가지 유용한 기능을 추가했다.
타입 .d.ts 파일을 생성하여 리모트 모듈도 타이핑이 가능하다.

Ref https://www.npmjs.com/package/@module-federation/enhanced

react-query에서 파생 데이터 관리하는 방법

Copy

select: (data: TData) => unknown

query 함수에서 반환받은 데이터를 변형하거나 부분적으로 사용할 때 사용하는 옵션. 반환된 데이터는 변경하지만, query 캐시에 저장된 값은 바뀌지 않는다.

Copy

const { data } = useQuery('todos', fetchTodos, {
    select: (data) => data.filter(todo => todo.completed),
});

Ref https://tanstack.com/query/v4/docs/framework/react/reference/useQuery

ResizeObserver의 property

ResizeObserver는 HTML 요소의 크기 변화를 감지한다.

다음은 ResizeObserver의 property 및 지원 범위다.

borderBoxSize, contentBoxSize
- 지원범위: 크롬 84+, 사파리 15.4+
- 개선된 구현
contentRect
- 지원범위: 크롬 64+, 사파리 13.1+
- 미래에 deprecated 될 수 있으나, 현재 하위호환을 위해 스펙에 남아있음

Copy

const resizeObserver = new ResizeObserver((entries) => {
  for (const entry of entries) {
    if (entry.contentBoxSize) {
      const contentBoxSize = entry.contentBoxSize[0];
      h1Elem.style.fontSize = `${Math.max(
        1.5,
        contentBoxSize.inlineSize / 200,
      )}rem`;
      pElem.style.fontSize = `${Math.max(
        1,
        contentBoxSize.inlineSize / 600,
      )}rem`;
    } else {
      h1Elem.style.fontSize = `${Math.max(
        1.5,
        entry.contentRect.width / 200,
      )}rem`;
      pElem.style.fontSize = `${Math.max(1, entry.contentRect.width / 600)}rem`;
    }
  }

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

React Server Component

React Server Component는 서버 없이 빌드타임에 실행할 수 있다. filesystem이나 정적 콘텐츠를 받아오는 경우, 웹 서버가 필요하지 않다.

이를 통해 client에서 실행되는 코드들을 줄일 수 있으며, 번들 사이즈와 초기 로딩 시간을 줄일 수 있다.

Ref

WeakRef

‘약한 객체 참조’라는 뜻의 WeakRef

‘참조가 약하다’라는 의미는, 참조 카운터를 증가시키지 않는다는 뜻이다. 따라서 GC에 영향을 주지 않는다.

deref()를 사용하면 WeakRef로 참조하고 있는 타겟 객체를 반환한다.

단 이미 가비지 컬렉팅되었다면, undefined를 반환한다.

Copy

const ref = new WeakRef(객체);

function getObj() {
  const obj = ref.deref();

  if (obj === undefined) {
    console.log("obj 사라짐");
  }
  return obj;
}

일반적인 객체 참조와 달리, WeakRef로 참조된 객체는 더 이상 사용되지 않는 경우 가비지 컬렉터에 의해 자동으로 제거될 수 있다..

WeakRef의 주요 사용 사례

캐싱: 메모리를 절약하면서 특정 데이터를 필요할 때만 유지하려는 경우 유용하다. 캐시된 객체가 메모리에서 제거되더라도 애플리케이션이 정상적으로 작동할 수 있는 경우 WeakRef를 사용하면 적합하다.
무거운 객체의 참조 관리: 크고 복잡한 객체를 다루는 애플리케이션에서, 해당 객체가 자주 사용되지 않는 경우 WeakRef로 참조하여 메모리 사용량을 줄일 수 있다.
메모리 관리가 중요한 상황: 일반적인 강한 참조를 사용하면 참조가 유지되는 동안 객체가 메모리에 남아 있다. 하지만, WeakRef는 가비지 컬렉터가 메모리 해제를 더 적극적으로 할 수 있게 도와주므로 메모리 관리가 중요한 상황에서 사용할 수 있다.

자바스크립트에서 객체의 garbage collecting을 직접 할 수 있게 해주는 일종의 도구인 것 같다!

Ref https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakRef

이것저것 모음집

JSDoc
- @since - 추가된 버전 명시 (e.g. @since 1.2.3)
- @version - 해당 모듈의 버전 명시 (e.g. @version 1.0.0)

기타공유

타입스크립트스럽게 성능과 생산성 두 마리 토끼 모두 잡기

요즘 JavaScript의 Proxy를 이용한 개발 개선 작업들이 많이 보이는 것 같다.

그리고 서버 API를 클라이언트에 자동으로 타입 맞춰 변환해주는 과정을 자동화하는 작업들도…

우리 프로덕트에 맞게끔 컴파일 타임과 런타임 모두 안정성을 보장하며 코드를 생성할 수 있는 방안을 같이 고민해보는 것도 좋을 것 같다.

Ref https://tech.devsisters.com/posts/typescript-ish-way-to-improve-performance/

Tbs Grid

“Grid 스크롤에서 viewport에 row는 걸치는 경우는 무용하다” 라는 가정을 과감하게 넣어 수많은 엣지케이스를 제거하고 매우 깔끔한 고성능 고확장성 그리드 구현체로 나아갈 수 있을 만한 오픈소스

Ref https://tobesimple.net/

TypeScript 5.6

nullish/truthy 체킹을 허용하지 않게 되었다.

Copy

if (/0x[0-9a-f]/) {
//  ~~~~~~~~~~~~
// error: This kind of expression is always truthy.
}

if (x => 0) {
//  ~~~~~~
// error: This kind of expression is always truthy.
}

(근데 원래 해주지 않았나…? 🤔)

iterator helper method 등장

이제 모든 제너레이터는 map과 take 메서드를 포함한 객체를 반환한다.

Copy

function* positiveIntegers() {
    let i = 1;
    while (true) {
        yield i;
        i++;
    }
}

const evenNumbers = positiveIntegers().map(x => x * 2);

// Output:
//    2
//    4
//    6
//    8
//   10
for (const value of evenNumbers.take(5)) {
    console.log(value);
}