개탕 IT FACTORY

개요이번엔 React 템플릿을 만들어볼려고한다.기본적인 구조는 리액트 프로젝트를 따라갈건데 기초 패키지는 정하고 템플릿을 만들예정이다.TanStack Query (데이터 페칭)Zustand (상태 관리)Axios(API통신)React Router V7기본적으로 위 패키지는 기본장착을 할 예정이다스타일 부분은 tailwind, emotion, vanilla-extract 등이 고민되지만 (대세는 tailwind이긴하나…)사실 각 css 프레임워크 별로 나눠서 템플릿을 분기처리할까 생각중이다.또 테스트 라이브러리도 cypress, playwright 고민을 하엿으나, 대세는 playwright라고 하였다.(무엇보다 다양한 언어에 지원되는게 좋았던것같다.)환경구성my-monorepo-template/├── p..

개요점차 기본구성이 완성되고 있다.이번에는 config설정 마지막인 Typescript 설정 부분을 보겠다이부분도 아마 굉장히 쉬울 것이다. 기본 타입 스크립트만 적용할 것이고, 그외에는 오버라이드 구조로 프로젝트에 위임할 예정이다 환경구성my-monorepo-template/ ├── packages/│ ├── eslint-config/│ ├── prettier-config/│ ├── **tsconfig/**│ ├── react-template/│ └── nextjs-template/├── package.json└── pnpm-workspace.yaml기존 구조에서 packages/tsconfing 부분에 넣을예정이다초기설정패키지내부에 폴더랑 파일을 추가해 주도록한다 mkdi..

디자인시스템 구축전 글에서 compound component와 Polymorphic component에 대해서 다뤄봤고,추가적으로 디자인 토큰이 어떤 것인지에 대해서도 알아보았다. 이번에는 디자인시스템 라이브러리 구축을 위한 과정을 한번 다뤄볼까한다. 디자인 시스템 구축 과정사실 Rollup으로 구축할려고했으나 vite의 강세와 더불어 내부로직으로 Rollup 설정이 가능한 vite로 빠르게 구축후 Rollup으로 포팅하는 과정을 할려고한다.고려사항최소한의 번들 사이즈를 유지하게 만든다 (tree shacking 기능이 있는걸 사용한다)storybook을 적극활용하여 컴포넌트를 관리한다Typescript기반으로 개발한다React 개발환경에 맞춰 개발한다 (다른 것들은 추후고려대상)개발 구축빠른 개발환경 ..

개요 저번 포스팅에서 CRA는 죽었다(라는 표현보단 deprecated)라는 포스팅을 하였는데 이번에 최근에 각광받고 있고, 빠른 vite로 CRA(create-react-app)을 마이그레이션(migration) 해볼까한다 사실 CRA로 게시되있는 프로젝트를 바꾸는 방법은 두가지인데 Case1. Vite로 새롭게 만들기 사실 가장 원시적인 방법이다. 일단 가장 어려운점은 프로젝트 사이즈가 크지 않은 거라면 상관없지만 프로젝트가 크다면, 관련된 라이브러리 및 연관된 디펜던시등의 설정이 어려움이 있을가능성이 높다 그렇기 때문에 이부분은 PASS Case2. Webpack to Vite 이번 포스팅을 하게 된 계기인데 가장 안정적인 방법이지 않을까 싶다 기존프로젝트를 유지한채로 vite만 갈아 끼우는 방법 ..