어쩌다가 도입하게 되었는지? 최근 AWS 프론트엔드 모임에서 Storybook에 대한 소개 발표를 들었다. 해당 기술을 현재 프로젝트에 도입하게 된다면 매우 실용적으로 활용할 수 있다는 생각이 들어서 대표님께 강력 어필을 하고, 결국 '당장 도입!!' 이라는 결과를 얻을 수 있었다. Storybook 도입 여정 Storybook 설치 공식 문서 https://storybook.js.org/docs/react/get-started/install Install Storybook Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, ..

🤔 내가 하고 싶은 것 기존에 매우 길었던 public path를 좀 더 단순화하여 나타내고 싶었다. 파일을 빌드할 때에도 콘솔에 다음과 같은 메세지가 나타났다. files in the public directory are served at the root path. Instead of /public/json/KoreaRegion/SigunguJSON.ts, use /json/KoreaRegion/SigunguJSON.ts. 기존의 public path import { IMetroCityTypes } from "../../../public/json/KoreaRegion/MetroCitiesJSON"; 변경하고 싶은 public path import { IMetroCityTypes } from "/json..

마이그레이션 하는 방법 dependencies 설치 아래의 라이브러리를 설치하자. Vite @vitejs/plugin-react vite-tsconfig-paths vite-plugin-svgr npm install --save-dev vite @vitejs/plugin-react vite-tsconfig-paths vite-plugin-svgr vite-tsconfig-paths 설치하는 이유 Vite에 tsconfig 파일에서 절대 경로를 해결하는 방법을 알려주기 위해 vite-tsconfig-paths가 필요하다. 이렇게 하면 다음과 같이 모듈을 가져올 수 있다. // before import MyButton from '../../../components' // after import MyButto..

오늘은 React Vite TypeScript 환경에서 SPA 프로젝트 세팅하는 방법에 대한 이야기를 해보려고 한다. (feat. chatGBT) 내가 하고 싶은 것 현재 레거시 프로젝트는 Creat-React-App 으로 SPA 프로젝트가 만들어져 있다. CRA는 번들러로 Webpack 을 사용하기 때문에 빌드 시 속도가 상대적으로 esbuild 보다 느리다. 그렇기 때문에 React Vite 환경에서 SPA 프로젝트로 마이그레이션을 시도하였다. (이참에 JavaScript 도 TypeScript로 마이그레이션!) 방법 React Vite로 SPA를 만드는 경우가 많지 않나 보다... 구글링을 해도 내가 원하는 코드를 찾기가 어려웠다 ^_ㅜ chatGBT에게 물어봤더니 아주 친절하게 답변을 해주었다. ..