| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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
- component
- 2020년
- vite
- compound component
- 디자인 토큰
- c#
- react
- 뇌를자극하는C#
- 24년 계획
- 2023 회고
- front
- 프로그래밍
- javascript
- design token
- 23년 회고
- 다짐
- 개발자
- nextjs
- frontend
- 2024 계획
- style-dictionary
- 2021년
- css framework
- side-project
- webpack to vite
- typescript
- 회고
- design system
- design-system
- Today
- Total
목록front (3)
개탕 IT FACTORY
디자인시스템(3). 디자인 토큰
개요 기존에 Polymorphic 컴포넌트와 Compound 컴포넌트에 대해서 정리해보았다. 디자인 시스템 구축에 꼭 필요한 과정은 아니나 위의 컴포넌트 제작과정을 알게 된다면 더쉽고 빠르게 디자인 시스템을 구축할수있다. 이번엔 디자인시스템의 핵심이라고 할 수 있는 디자인 토큰에 대해서 알아 볼까 한다 . 💡 이 글은 디자이너나 피그마 관련된 설명이 아닌 단순한 디자인 시스템 구축을 위한 개발자를 위한 글임을 참고 바랍니다. 디자인 토큰이란? 디자인 토큰 개념을 대중화 시킨 ‘세일즈포스(Salesforce)’의 Lightning Design System에서 디자인 토큰 개념을 설명하고있다. Design tokens are the visual design atoms of the design system —..
CRA(Create-React-App)은 죽었다
RIP CRA(Create-React-App) CRA(Create-React-App)이 죽었다… 아 죽었다는 표현보단는 deprecated가 맞는 표현 같다 React에서는 새로운 문서 https://react.dev/ 를 공개하고 이전 문서의 지원을 중단했는데 충격적이게도… 새프로젝트 생성부분에 CRA(Create-React-App)부분이 존재하지 않았다 충격 실화! 근데 사실 전부터 이런 이슈는 존재해왔는데 어떤점이 문제였고, 그러면 어떤부분이 바뀌었는지 확인해보자 이후 Create-React-App는 CRA로 표현 💡 들어가기 앞서 이영상을 참고하면 좋을거 같다 https://www.youtube.com/watch?v=M4CLvtCS2YU 성능 이슈 사실 이문제는 전부터 존재하였지만, 새로운 모듈러..
Nextjs13 BoilerPlate제작 (Nextjs13, tailwindCSS, emotion, twin.macro, Jest, React-query) - 이슈사항 추가
개요 프로젝트를 진행할때마다 CRA를 활용한 어플개발을 많이 하였다. 일단 환경 구축등의 시간 단축이 좋다는 이유로 많이 사용하였지만, CRA의 단점은 커스텀이 어렵다는 부분이 있다. 물론 npm run eject을 통해서 webpack설정을 바꿀순 있지만, 기존에 지원하던 좋은 장점을 버리는 거라 추천은 하지 않는다 (사실 직접 webpack으로 골라 만드는게 좋을듯…) 그래서 SSR, SSG의 장점이 가진 Nextjs를 나만의 boilerplate로 제작해볼까 한다. 준비사항 일단 어떤 요소를 넣어야 하는지에 대한 부분이 필요했다. 필수요소 typescript ESLint Prettier React-testing-library, jest styled-components tailwindCSS 데이터페칭..