6월 4주차 기록

뜨거운 여름 🌞 더 뜨거운 시간들

배워가기

webpack-dev-middleware

• 웹팩으로 빌드한 정적파일을 처리하는 익스프레스 스타일 미들웨어
• webpack-dev-server도 익스프레스와 이 미들웨어를 사용한다

const webpack = require("webpack");
const middleware = require("webpack-dev-middleware");

// 웹팩 옵션을 webpack() 함수 인자로 넘겨 compiler를 얻는다
const compiler = webpack(
  // webpack options
  require("./webpack.config.js")
);

// webpack-dev-middleware에 컴파일러를 절달하고 이걸 익스프레스 미들웨어로 설정한다.
app.use(
  middleware(compiler, {
    // webpack-dev-middleware options
  })
);

• 사용하는 경우
  • 유저 에이전트에 따라 정적 파일을 제공할 경우
  • 웹서버 코드와 함께 있을 경우 Ref
• https://jeonghwan-kim.github.io/dev/2020/07/18/webpack-dev-middleware.html
• https://github.com/webpack/webpack-dev-middleware

타입스크립트 Extract

Extract<Type, Union>;

type T0 = Extract<"a" | "b" | "c", "a" | "f">;
// type T0 = "a"

enum에서 특정 key들만 가져오고 싶을 때도 사용할 수 있다.

Ref https://www.typescriptlang.org/docs/handbook/utility-types.html

React.FC<Props> 쓰는 이유

• 함수를 타이핑해준다. 특히, 컴포넌트의 리턴 타입을 명시해준다. (ReactElement | null)
• 몇몇 정적 프로퍼티에 대한 타입을 체크해준다.

type FC<P = {}> = FunctionComponent<P>;

interface FunctionComponent<P = {}> {
  (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null;
  propTypes?: WeakValidationMap<P> | undefined;
  contextTypes?: ValidationMap<any> | undefined;
  defaultProps?: Partial<P> | undefined;
  displayName?: string | undefined;
}

• 제네릭 타입 P 를 기반으로 propTypes와 defaultProps 의 타입을 정의해준다.

🙃 물론 React.FC의 단점들도 있으니 알아서 선택해서 쓰도록 하자 Ref https://juhanajauhiainen.com/posts/should-you-use-reactfc-to-type-your-components

디렉토리 wildcard에서 * vs **

• * - 현재 디렉토리의 파일과 디렉토리에만 매칭됨
• ** - 현재 디렉토리와 모든 서브디렉토리의 파일과 디렉토리에 매칭됨

Ref https://github.com/mrmlnc/fast-glob#pattern-syntax

하나의 input은 여러 개 label

하나의 input은 여러 label을 가질 수 있다.

<label for="fname">First name</label>
<label for="fname">Enter your info</label>
<label for="fname">Why not a third label</label>
<input type="text" id="fname" name="fname" />

Ref https://stackoverflow.com/questions/2829936/can-an-input-field-have-two-labels

체크박스로 input 마스킹 on/off 하기

보안도 유지하면서 사용자에게 패스워드를 볼 수 있는 옵션을 제공할 수 있다.

<label for="password">Choose a password</label>
<input type="password" id="password" name="password" />
<label><input type="checkbox" id="showPassword" />show password</label>

noop 함수

‘아무것도 실행하지 않는다’는 no operation 의 약자로, 보통 콜백 함수의 백업으로 사용된다.

() => undefined 와 같은데 굳이(?) noop 이라고 쓰는 이유는 가독성 향상을 위한 것이다 👻

function noop() {}

const calculateSum = addFunction || noop;

타입스크립트로 배열의 Falsy 값 걸러내기

타입스크립트에서 Array.filter(Boolean)을 실행시켜도 타입에서 falsy한 값이 제거되지 않는다.

type NullableUser = undefined | User;
const nonNullableUsers = User배열.filter(Boolean); // NullableUser로 처리됨

왜냐하면 이전 버전 호환성을 위해서 이를 유지하고 있다고 한다.

🤔 그냥 semver update 처리하면 되지 않나? -> typescript는 semver를 따르지 않는다.

수직 중앙 정렬 후에도 “글자가 위로 쏠려보여요” 디자인 피드백 받는 이유

한글은 처음부터 수직 중앙 정렬이 아니기 때문이다.

TextMetrics 인터페이스 canvas에서 텍스트 조각의 크기를 표현한다. 이를 측정해서 텍스트를 재배치해주는 방법이 있다.

이것저것

• split 함수를 사용할 때, 여러 separator가 필요하면 정규식을 쓰자 (e.g. value.split(/\r\n|\n|,/))
• next.js 12.3.x 에서 미들웨어의 존재는 16kb 이상의 request body의 요청을 먹어버린다. (12.3.3 부터 해결되었다. - 출처)
• input type=checkbox인 엘리먼트의 checked 와 indeterminate 둘다 true이면 indeterminate 로 표현한다. (indeterminate 가 우선한다.)

기타공유

(이번 주는 노는 주인가 보다 😎)

마무리

금요일엔 전사행사, 토요일엔 파크뮤직 페스티벌… 🎊

무더위 속에 참으로 알차게도 놀았던 시간들이다.

이제 다시 에너지 충전해서 일해야지

더웠던 시간들만큼 뜨거운 나이니까 💪

근데 진짜 너무너무 덥다…