| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 |
- 프로그래밍
- 개발자
- design-system
- design system
- 2024 계획
- design token
- javascript
- typescript
- front
- style-dictionary
- component
- frontend
- 23년 회고
- webpack to vite
- design
- css framework
- react
- nextjs
- side-project
- 24년 계획
- 2023 회고
- 다짐
- 회고
- vite
- c#
- 2021년
- 2020년
- compound component
- 뇌를자극하는C#
- 디자인 토큰
- Today
- Total
목록typescript (2)
개탕 IT FACTORY
Vanilla Extract - 설치 및 구현
서론 사실 나는 CSS-in-JS 라이브러리를 굉장히 좋아한다. (Emotion, styled-componets) 이유중 하나라면 다들 스파게티 코드라고 불리우는 JS 파일내에서 CSS를 처리할수 있으며 (colocation), 동적으로 CSS 처리도쉽기 때문에 좋아하였다. 그런데 최근 React 18에서 Server-component를 지원하기 시작하였고, 기존 CSR → SSR로 판도가 변하면서 많이 달라졌는데 그러면서 기존에 run-time 중에 생성한 CSS-in-JS는 자연스럽게 사용이 어려워졌다. (사실 태생부터 run-time과 함께 만들어지게 되었는데 SSR 지원은 굉장히 어려운 일이 였을 것이다.) 그러다가 대체제로 다양한 선택지가 있었는데 Tailwind는 굉장히 인기가 좋았지만 개인적..
webpack to vite (vite로 마이그레이션)
개요 저번 포스팅에서 CRA는 죽었다(라는 표현보단 deprecated)라는 포스팅을 하였는데 이번에 최근에 각광받고 있고, 빠른 vite로 CRA(create-react-app)을 마이그레이션(migration) 해볼까한다 사실 CRA로 게시되있는 프로젝트를 바꾸는 방법은 두가지인데 Case1. Vite로 새롭게 만들기 사실 가장 원시적인 방법이다. 일단 가장 어려운점은 프로젝트 사이즈가 크지 않은 거라면 상관없지만 프로젝트가 크다면, 관련된 라이브러리 및 연관된 디펜던시등의 설정이 어려움이 있을가능성이 높다 그렇기 때문에 이부분은 PASS Case2. Webpack to Vite 이번 포스팅을 하게 된 계기인데 가장 안정적인 방법이지 않을까 싶다 기존프로젝트를 유지한채로 vite만 갈아 끼우는 방법 ..