8월 3주차 기록

August 20, 2022 • ☕️ 4 min read

weekly

우영우가 끝났다

배워가기

Next.js에서 locale 설정

Next.js에서 locale을 설정하는 방법은 2가지가 있다.

첫번째 방법은 아래와 같이 i18n 설정을 next.config.js 파일에 추가하는 방식이다.

Copy

i18n: {
  locales: ['ko'],
  defaultLocale: 'ko',
},

그러나 이 방법을 사용하게 되면 url이 다음과 같이 표시된다.

http://localhost:3000/ko/packages

ko/ 라는 locale 정보가 url에 같이 들어가게 되는데, 국제화를 고려중이지 않는다면 다른 방법을 사용하는 것이 좋다.

그 다른 방법은 아래와 같이 custom document 를 이용하는 방식으로, _document.tsx 파일에 다음과 같이 작성하는 것이다.

Copy

import NextDocument, { Html, Head, Main, NextScript } from "next/document";
import React from "react";

type Props = {};

class Document extends NextDocument<Props> {
  render() {
    return (
      <Html lang="ko">
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

class constructor

Class constructor <React Class component> cannot be invoked without 'new' 문제를 어떻게 해결할까?

React Element는 일반 객체이므로 변수에 저장할 때 observable로 바뀌면 안 된다. (Mobx는 기본적으로 클래스 인스턴스를 제외한 모든 데이터 구조를 재귀적으로 observable로 만든다.)

observable.shallow 는 얕은 복사를 하기 때문에 observable과 다르게 객체 내부 값들까지 observable로 변환하지는 않는다.

Copy

export class ToastStore {
  toasts: ReactElement<Toast>[] = [];

  constructor() {
    makeObservable(this, {
      toasts: observable.shallow,
    });
  }
}

즉, mobx 스토어에 ReactElement를 저장할 땐 observable.shallow 를 써야 한다.

Ref https://github.com/mobxjs/mobx/issues/3503

`.match()` vs `.exec()`

String.prototype.match()와 Regex.prototype.exec()은 동일한 메서드다. 문자열이 정규식과 매치되는 부분을 검색한다.

Copy

str.match(reg);
reg.exec(str);
// 서로 반대

다만 g 플래그에 따라 조금 다른 결과를 반환한다. 정규식에 g 플래그가 포함되어있지 않으면, str.match() 는 RegExp.exec()와 같은 결과를 반환한다. 반환된 배열은 원래 문자열의 값을 가지는 input 속성을 포함한다. 그리고 문자열에서 제로 베이스의 인덱스를 나타내는 index 속성 또한 포함한다.

ref의 두 가지 패턴

ref 객체에는 두 가지 패턴이 있다.

Ref object
- useRef 또는 클래스 컴포넌트에서 createRef 로 생성되는 객체
- .current 프로퍼티를 가지고 있다.
Ref callback
- 어떤 요소에 함수를 넘기고, 그 인스턴스가 생성 또는 파괴될 때 함수가 호출된다. 이때 이 타입은 (instance: T) => void이다.

Ref https://stackoverflow.com/questions/65876809/property-current-does-not-exist-on-type-instance-htmldivelement-null

이것저것

emotion에서 아래와 같은 vendor prefix를 자동으로 넣어준다.

Copy

transition-property: transform;
-webkit-transition-property: -webkit-transform;
transition-timing-function: cubic-bezier(0.08, 0.5, 0.77, 0.94);
-webkit-transition-timing-function: cubic-bezier(0.08, 0.5, 0.77, 0.94);
transition-property: transform;
transition-timing-function: cubic-bezier(0.08, 0.5, 0.77, 0.94);

anchor 태그에는 type이라는 attribute가 이미 있다. 링크 URL의 MIME type을 나타낸다. (링크)
Gitlab CI/CD pipeline에서 include files .gitlab-ci.yml does not have valid YAML syntax! 와 같은 error가 발생한다면 include한, 즉 .gitlab-ci.yml 에 명시한 파일들을 모두 불러올 수 있는지 확인해봐야 한다. node 를 기준으로 yml 파일을 작성했는데 어디서 gradle을 사용하고 있다든가 하는 경우에 해당 에러가 발생할 수 있다.
regression test - 이미 테스트된 프로그램의 테스팅을 반복하는 것으로, 결함 수정 이후 변경의 결과로 새롭게 만들어 지거나, 이전 결함으로 인해 발견되지 않았던 또 다른 결함을 발견하는 테스트
aws cloudfront가 http3를 지원한다. (링크)
overscroll-behavior-y를 사용하면 화면의 터치스크롤 여부를 정할 수 있다. (링크)

ref에 setState를 넣을 수 있다.

Copy

const [divElement, setDivElement] = useState<HTMLElement | null>(null);

<div ref={setDivElement} />;

ol 태그에는 reversed 등 특화된 attribute를 쓸 수 있다
regex.replace() - regex.replace()에서 $1 과 같은 비표준 속성을 쓸 수 있다 (MDN)
컴포넌트의 props 타입을 가져올 때 아래와 같이 작성할 수 있다.

Copy
```
type Props = typeof MyComponent.prototype.props;
```