개발여행

Vite를 사용하지 않고 React만 단독으로 빌드하면 별도의 과정없이 svg를 컴포넌트로 사용할 수 있다.하지만 Vite를 함께 사용하는 경우 라이브러리를 추가로 설치해야한다. 그마저도 public 디렉토리에 저장한 svg를 사용하기 쉽지않고 src에 저장해야 간편하게(?) 쓸 수 있다. 우선 `vite-plugin-svgr`이라는 라이브러리를 설치해야 한다. 원하는 패키지 관리자로 설치하자.# npmnpm install --save-dev vite-plugin-svgr# yarnyarn add -D vite-plugin-svgr# pnpmpnpm add -D vite-plugin-svgr 아래의 라이브러리 페이지에서 사용법을 설명하고 있는데 이대로 사용한다면 svg를 사용할 순 있지만 props는 전..

// 1const backgroundColor = `bg-${isOn ? "blue-500" : "gray-700"}`;// 2const backgroundColor = `${isOn ? "bg-blue-500" : "bg-gray-700"}`; 테일윈드 CSS로 스타일을 적용할 때 동적으로 스타일을 할당해야 한다면 첫번째 방법이 아닌 두번째 방법처럼 클래스 명을 온전히 적어주어야 한다. 프로젝트를 빌드할 때 테일윈드 라이브러리에서 클래스명에 따라 CSS 파일을 생성하는데 첫번째 방법처럼 스타일 클래스명을 동적으로 작성할 경우 라이브러리에서 사용할 수 없는 클래스명으로 판단해서 CSS 파일에 해당 색상이 포함되지 않게 된다.

interface MyClassData { value: number; ... } class MyClass { ... getValue() { return this.value; } } class MyClassArray extends Array { constructor(myClassDatas: MyClassData[]) { const myClassArray = myClassDatas.map((data) => new MyClass(data)); super(...myClassArray); Object.setPrototypeOf(this, MyClassArray.prototype); } getValues(): number[] { return this.map((myClass: MyClass) => myClass.ge..