vite react-ts에서 emotion css prop 쓰기

vite.config.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
plugins: [
react({
jsxImportSource: '@emotion/react',
babel: {
plugins: ['@emotion/babel-plugin'],
},
}),
],
});
tsconfig.json
1
2
3
4
5
6
{
"compilerOptions": {
// ...
"jsxImportSource": "@emotion/react"
}
}

참고

innerText vs textContent

  • textContext는 script, style 요소를 포함
  • innerText는 사람이 읽을 수 있는 요소만

innerText의 CSS 고려로 인해, innerText 값을 읽으면 최신 계산값을 반영하기 위해 리플로우가 발생합니다. (리플로우 계산은 비싸므로 가능하면 피해야 합니다)

  • 라고한다. 아직 무슨 느낌인지 잘 모르겠다.

참고

js void operator, no-floating-promises

  • void ; 주어진 표현식을 평가하고 undefined를 반환합니다.

프로미스 다룰 때 주의할 점

  • no-floating-promises라는 룰이 있는데, 프로미스를 핸들하라는 것이다
  • 무시하고 싶은 경우에 void를 붙여줄 수 있는데,
  • 이 경우 내부에서 throw하는 에러를 외부에서 받지 못한다 (= catch에 안걸린다)
example.ts
1
2
3
4
5
6
7
8
9
10
const f = async () => {
// ...
throw Error('에러 발생');
};

try {
void f();
} catch (error) {
console.log(error); // not work!
}

참고

1K 1천 1.1천 같이 숫자를 포맷하기

1천, 1만, 1.1만

  • 숫자 표기가 길어질 때가 있다. 짧게 단위를 붙여서 표기해보자
example.ts
1
2
3
4
5
6
7
const compactNumberFormatter = new Intl.NumberFormat('ko', {
notation: 'compact',
});

function compactNumber(number: number): string {
return compactNumberFormatter.format(number);
}

참고

input director

  • 키마 하나로 다른컴 제어하기
  • 키마를 똑같이 움직이는(미러) 것도 가능

참고