11월 첫주차 기록

November 4, 2022 • ☕️ 6 min read

weekly

넘 추웡

배워가기

반응형 디자인의 2가지 스타일

반응형 디자인이란, 하나의 UI가 모든 디바이스 화면에 대응되도록 디자인하는 것이다. 반응형 디자인에도 2가지 스타일이 존재한다.

유연한 칼럼(Fluid Columns): 해상도 변화에 따라 Grid가 유연하게 변화한다.
고정된 박스(Fixed Boxes): 박스 크기는 유지하되 해상도에 따라 박스 위치만 변화한다.

Ref https://hello-woody.tistory.com/8

query-key-factory

react-query를 사용할 때, 항상 그 수많은 key들을 어떻게 관리해야할지 의문이었다. 그런데 query-key를 만들어주는 라이브러리를 알게 되었다. 바로 query-key-factory

createQueryKeyStore 메서드를 사용하여 앱에서 사용하는 query key들을 한데 선언한다.

Copy

import { createQueryKeyStore } from "@lukemorales/query-key-factory";

// if your prefer to declare everything in one file
export const queries = createQueryKeyStore({
  users: {
    all: null,
    detail: (userId: string) => ({
      queryKey: [userId],
      queryFn: () => api.getUser(userId),
    }),
  },
  todos: {
    detail: (todoId: string) => [todoId],
    list: (filters: TodoFilters) => ({
      queryKey: [{ filters }],
      queryFn: (ctx) => api.getTodos({ filters, page: ctx.pageParam }),
      contextQueries: {
        // ...
      },
    }),
  },
});

useQuery를 사용하는 곳에서는 다음과 같이 가져온다.

Copy

import { queries } from "../queries";

export function useUsers() {
  return useQuery({
    ...queries.users.all,
    queryFn: () => api.getUsers(),
  });
}

export function useUserDetail(id: string) {
  return useQuery(queries.users.detail(id));
}

polling과 retrying

자바스크립트로 간단하게 polling과 retrying을 구현할 수 있다.

Copy

const timeout = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

while ((await timeout(500), true)) {
  if (request().ok) {
    break;
  }
}

👩‍🏫 쉼표 연산자 쉼표 연산자는 각각의 피연산자를 왼쪽에서 오른쪽 순서로 평가하고, 마지막 연산자의 값을 반환합니다. 위 예제에서, while (await timeout(500))만 하면 while (undefined)니 루프가 안 돌지만, 쉼표 연산자 우항에 treu 값을 넣으면 while (true)가 돼 무한 반복한다. (Ref)

CSS의 `*=` sign

CSS에서 *= 기호는, 특정 문자열을 포함하고 있는 속성을 가리킨다.

Copy

element[attribute*="includesthis"]

즉 다음 요소에서 a 태그는,

Copy

<a class="someclassicol-hello">Click me and win a free monkey</a>

아래 CSS 셀렉터로 가져올 수 있다.

Copy

a[class*="icol-"]

👩‍🏫 참고

특정 문자열로 시작할 때: ^=

특정 문자열로 끝날 때: $=

이것저것

이벤트 스토밍은 눈에 보이는 그럴싸한 멋진 문서를 만드는 것이 아니라, 머리 속에 있는 도메인 지식을 상향 평준화하는 과정이다.
gitlab CI에서 젠킨스를 trigger하는 과정은 별 게 아니라, curl 명령어를 통해서 젠킨스 서버를 실행시키는 것이었다.

기타

Next.js 13 업그레이드 가이드

pages/에서 app/으로
- app/ 디렉토리는 여전히 nested routes와 layout을 지원한다.
- route segment들을 특별한 page.js 파일을 이용하여 정의할 수 있다.
- 각 route segment의 UI를 만들기 위해 특별한 파일 컨벤션(page.js, layout.js)이 사용된다.
- app/ 디렉토리 안에 컴포넌트, 스타일, 테스트 파일들까지 넣을 수 잇다.
- getServerSideProps, getStaticProps, getStaticPaths 등의 데이터 페칭 함수들은 이제 app 내의 새로운 API로 대체되었다.
- pages/_app.js와 pages/_document.js는 이제 하나의 app/layout.js로 대체되었다.
- pages/_error.js는 더 세분화된 error.js 파일들로 대체된다.
- pages/404.js는 notFound()로 대체되었다.
- pages/api/*는 pages/ 디렉토리 안에 남는다.
<Image /> 컴포넌트의 개선: 클라이언트 자바스크립트 코드를 줄이고, 스타일 방식과 접근성을 개선했으며, 브라우저 네이티브 lazy loading을 지원한다.
<Link /> 컴포넌트의 변화: 이제 더 이상 자식에 <a> 태그를 넣을 필요가 없다.
<Script /> 컴포넌트: pages/와 app/ 디렉토리를 모두 지원하게 되었다.
폰트 최적화: next/font 모듈을 제공하여, 폰트 로딩 속도를 커스텀하게 향상시킬 수 있다.

뭔가 엄청 많이 바뀐 것 같은데, 점진적인 적용이 가능하다고 한다 😎

Ref https://beta.nextjs.org/docs/upgrade-guide

OpenSSL의 크리티컬 이슈 😱

critical 등급의 OpenSSL 보안 취약점이 있었고, 11/1 긴급 패치 업데이트가 이루어졌다고 한다.

Ref https://www.zdnet.com/article/openssl-warns-of-critical-security-vulnerability-with-upcoming-patch/

Turbopack이 정말 Vite 보다 10배 빠른가요?

(Vue.js/Vite 개발자 Evan You의 글이다.)

Turbopack이 공개되면서 “Vite보다 10배 빠름”을 강조하며 많은 곳에서 사용되었다.

Next 13 + Turbopack 이 React HMR에서 0.01초 걸린데 반해, Vite는 0.09초 걸렸다는 벤치마크 결과가 있었다. 그러나 다른 성능에서는 10배 빠른 것은 없고 오직 HMR에서만 그렇게 나왔다.

Vercel이 처음엔 실제 HMR 벤치마크 자료를 첨부하지 않아서 직접 Next 13과 Vite 3.2를 비교해 본 결과, (코드와 방법 모두 공개) 실제로는 Next HMR이 2배 정도 빠르게 나왔다.

하지만 이건 Vite가 Babel을 이용하기 때문에 약간 다르게 나온 결과일 수 있다. 똑같이 Rust로 코딩된 SWC를 이용하면 속도가 거의 비슷하게 나오기 때문이다. (Vite가 SWC를 사용하지 않은 것은 SWC의 크기 문제 때문이다. Vite가 19MB인데, SWC가 58MB이다.)

흥미로운 점은, import 하는 컴포넌트가 많아지면 Next/Turbo는 4배 느려지는데 반해 Vite는 2.4배만 느려진다.

Evan이 벤치마크를 공개하고 나서, Vercel도 블로그에 벤치마크 방법을 공개했다.

결과적으로 Turbopack이 10배 빠르려면