ziglog

Search by

Home
7월 4주차 기록

7월 4주차 기록

July 23, 2022 • ☕️☕️ 8 min read

weekly

맥북 너 왜그러는데

배워가기

git stash drop 명령어

git stash drop 을 통해 삭제했던 stash 목록을 볼 수 있으며, 복구할 수 있다.

Copy

// stash 삭제한 목록
git fsck --unreachable | grep commit | cut -d ' ' -f3 | xargs git log --merges --no-walk

// stash 복구하기
git update-ref refs/stash < Commit ID > -m "다시 저장할 Stash 이름"

polyfill 주의사항

core-js, babel/polyfil 은 Promise, Set, Map 같은 빌트인 변환 함수를 제공하는데, 이는 global scope를 더럽힌다. 따라서 이 함수들을 스코프로 처리해줄 수 있는 @babel/plugin-transform-runtime 등의 런타임 라이브러리를 사용하는 것이 좋다.

Ref https://tech.kakao.com/2020/12/01/frontend-growth-02/ https://babeljs.io/docs/en/babel-plugin-transform-runtime

eslint 설정으로 import 그룹화하기

eslint import/order 룰을 설정할 때 newlines-between옵션을 통해 import 그룹별로 개행을 추가할 수 있다.

Copy

// .eslintrc.js
"import/order": [
    "error",
    {
      groups: [
        "builtin",
        "external",
        "internal",
        "parent",
        "sibling",
        "index",
      ],
      alphabetize: {
        order: "asc",
      },
      "newlines-between": "always",
    },
  ],

Copy

// import 예시
import { Col, Row } from "antd/lib/grid";
import dayjs from "dayjs";

import PageTitle from "components/Title";
import PATH from "routes/path";

import StatusCard from "./units/StatusCard";

async function의 나쁜 사용 예시

async function 안에서 return await 를 하면 콜스택 안의 함수에서 Promise가 resolved 될 때 까지 대기하므로 추가적인 microtask 비용이 든다.

관련해서 eslint에 no-return-await 룰이 있다.

주의할 점은, 아래 코드도 return await 과 동일하다는 것이다.

Copy

// Bad
async function foo() {
  // 'return await bar();'와 동일하지만, eslint는 이를 잡지 못한다.
  const x = await bar();
  return x;
}

아래처럼 작성해야 한다.

Copy

// Correct
async function foo() {
  return bar();
}

head 명령어

파일의 첫번째 몇줄만 뽑아낼 수 있는 터미널 명령어다. grep 으로 매치된 문자열 중 첫번째 것만 뽑은 싶은 경우에도 활용할 수 있다.

Copy

grep -Eo '(feat|test)' | head -1

Ref https://stackoverflow.com/questions/14093452/grep-only-the-first-match-and-stop

나만 몰랐던 React API

cloneElement(element, config?, …children?)
- element를 기준으로 새로운 React 엘리먼트를 복사해서 반환해준다.
- config에는 key, ref, props가 담긴다.
  - config에 key, ref가 없다면 원본의 key, ref가 그대로 유지된다.
  - props와 원본 element가 가졌던 props가 합쳐진다.
isValidElement(obj)
- 객체가 리액트 엘리먼트인지 확인해서 boolean을 반환해준다.
React.Children
- this.props.children을 다루는 다양한 유틸을 제공한다.
- React.Children.map(children, function)
  - 단, children이 Fragment일 경우, 단일 자식으로 취급되어 순회하지 않는다.
- React.Children.count(children)
  - children에 포함된 컴포넌트 개수를 반환해준다. (와 이런게 있었다니)
- React.Children.only(children)
  - Children이 외동 자식을 갖고있는지 확인하고, 그 자식을 반환해준다. 아니면 오류를 발생시킨다.
- React.Children.toArray(children)
  - children을 key가 할당된 배열로 변환해준다.
  - children을 다시 정렬하거나 일부만 렌더하고 싶을 때 유용하다.

React.FC 전쟁

React.FC , React.VFC 사용을 반대하는 입장의 주장은 다음과 같다.

React.VFC 는 @types/react 16.9.48 에서 추가되었으나, React 18에서 Deprecated 되었다. 또 React.FC는 Create React App Typescript 템플릿에서 삭제되었다. React.FC 는 이 함수가 “react function component”임을 명시할 수 있다는 장점이 있지만, 단점들도 존재한다.

children 을 암시적으로 포함하고 있다. (이 부분은 React 18에서 수정되었다.)
- React 18 기준, children 을 포함시키기 위해 별도의 intersection을 만들어 써야 한다.
제네릭을 지원하지 않는다. 제네릭 컴포넌트를 제한하고 싶다면, eslint와 같은 툴을 사용하는 것이 바람직하다.
“namespace 패턴으로써의 컴포넌트”가 더욱 어색해진다.
defaultProps와 함께 동작하지 않는다.

React.FC를 찬성하는 입장에서는 이를 반박한다.

리턴 타입이 명확히 JSXElement가 되지 않는이상 FC와 VFC는 지켜져야 한다. React.FC를 쓰지 않으면, 의도치 않게 컴포넌트의 리턴 값을 Promise<void> 와 같은 타입으로 반환해버릴 수 있다. FC, VFC는 컴포넌트틀을 예측 가능한 범위로 만드는 것에 대한, React의 가이드다. 그렇기 때문에 props를 제외하고 () => JSXElement 형태의 제약이 존재한다.

리턴타입을 지정하지 않는다면 컴포넌트에서 비즈니스 등을 갖고 있는 특성상 타입 추론에 의존할 때, 다음과 같은 상황이 발생할 수 있다.

Copy

if (!pageRender) return;

return <div>hi</div>;

이런 경우, 잠재적으로 Promise<void> 혹은 void 를 반환하게 되며, 의외로 이런 실수는 자주하는 개발자의 실수 중 하나다. early return이 아니라 React 18의 ErrorBoundary 혹은 Concurrency API 등의 명확한 방법을 사용하지 않는 이상 피할 수 없는 문제다.

또 함수 컴포넌트에 제네릭을 사용하는 것은 컴포넌트 복잡도를 증가시키기 때문에 사용해서는 안 된다.

이것저것

git log --dirstat-by-file : 커밋 로그를 볼 때 해당 커밋에 변경사항이 있는 파일들을 같이 볼 수 있다.
JSX에서 children에 공백으로 구분한 string 변수를 넘기면 공백을 포함하는 단일 string이 아니라 string 배열로 넘어간다

Copy
```
<Component>
  {a} {b}
</Component> // children은 [a, b]
```
특정 데이터와 그 데이터를 변경하는 행위는 같은 클래스 안에 있어야 한다.
vanilla-extract 는 Functional CSS로 재사용 가능한 유틸 클래스들을 생성, 조합하면서 CSS 코드의 중복을 줄여주는 라이브러리다.
tsconfig의 typeRoots - 기본적으로 모든 @types 패키지가 컴파일에 포함된다. 만약 typeRoots 가 명시되어 있으면, typeRoots 에 있는 패키지들만 컴파일에 포함된다. (Ref)

Copy
```
{
  "compilerOptions": {
    "typeRoots": ["./typings", "./vendor/types"]
  }
}
```
웹폰트를 표시하는 <i> 태그의 크기 조절에는 width height 대신 font-size를 쓰자. width height는 이미지 (컨테이너를 가리킨다)의 크기를 조절한다.

React.DetailedHTMLProps

HTMLAttributes 에 ref 와 key 가 추가된 형태다.

Copy

interface ReactHTML {
  a: DetailedHTMLFactory<
    AnchorHTMLAttributes<HTMLAnchorElement>,
    HTMLAnchorElement
  >;
  // ...
  body: DetailedHTMLFactory<HTMLAttributes<HTMLBodyElement>, HTMLBodyElement>;
  br: DetailedHTMLFactory<HTMLAttributes<HTMLBRElement>, HTMLBRElement>;
  button: DetailedHTMLFactory<
    ButtonHTMLAttributes<HTMLButtonElement>,
    HTMLButtonElement
  >;
  // ...
}

font-smooth는 폰트의 anti-aliasing을 조절한다. anti-aliasing이란, 계단처럼 깨져서 렌더리되는 부분을 부드럽게 표현한다는 뜻이다. 해당 스타일을 적용하면, 브라우저에 표현되는 텍스트가 렌더링될 때 부드럽게 표현된다. (Safari 이외의 브라우저에서는 제한적으로 사용된다.)

기타

2022년 프론트엔드 개발 동향

Jamstack의 부상
인기 있는 프론트엔드 프레임워크 - React, Angular, Vue.js
CMS를 위한 헤드리스 아키텍쳐 ‘몸’을 담당하는 백엔드가 ‘머리’를 담당하는 프론트엔드와 분리된 일종의 백엔드 콘텐츠 관리 시스템이다. 비즈니스 로직과 기능은 API로 제공되며, 전문화된 백엔드는 이러한 API를 사용자 플랫폼에 맞는 프론트엔드 채널로 간소화한다. 헤드리스 CMS는 웹 서비스 API를 이용해 백그라운드에서 독립적으로 실행되어 여러 장치에 콘텐츠를 전송하는 중앙화된 콘텐츠 저장소다.
마이크로 프론트엔드 아키텍쳐로의 이동
프로그레시브 웹 앱(PWA)으로 개발하기
GraphQL의 도입
Motion UI로 색다른 사용자 경험 만들기
싱글 페이지 애플리케이션(SPA)
비주얼 앱 개발 툴(로우 코드(Low code)/ 노 코드(No Code))

Ref https://yozm.wishket.com/magazine/detail/1590/?fbclid=IwAR2TnAHW8BaoqzsC93bp5S8mTrq4rAvw17fdecOlzpVnH1QQ3T39NyJO-Fc