짧은코딩

자주 사용하는 UI를 라이브러리화 하고 있었다.Material-UI(MUI)에서 Tailwind CSS 기반으로 마이그레이션 하는 과정이 있었는데, 이 라이브러리를 사용하는 소비 프로젝트의 설정 복잡도를 "Zero"로 만드는 과정을 기록하고자 한다.1. 도입 배경 및 문제 상황기존의 Tailwind CSS 기반 라이브러리 배포 방식은 사용자에게 과도한 설정을 요구하며, 이는 개발 경험(DX) 저하1.1 기존 방식의 한계소스 코드 제공 방식: 사용자가 tailwind.config.js의 content 배열에 라이브러리 경로를 직접 추가해야 한다.CSS 파일 번들링 방식: 빌드된 CSS 파일을 제공하고 사용자가 이를 import 해야 한다.1.2 결정적 문제점설정 복잡도 증가: tailwind.config...

문제 상황 이번 프로젝트를 하면서 위 사진과 같은 화면을 구현을 했어야 했다. Feature, Changed 등 Type 마다 색을 다르게 지정했어야 했다. 코드는 map 함수로 돌아가고 있고, tailwind.json에 사용해야 하는 색들은 모두 지정되어 있었다. {arry.type} 따라서 나는 이렇게 코드를 줘서 배경색을 지정하려고 했다. 하지만 이 코드는 적용되지 않았다..! 코드가 문제가 있나 싶어서, 개발자 도구에서도 봤었지만 class는 잘 적용됐다. 해결 방법 나는 도저히 이해가 안 되가지고 구글링을 하였다. https://forsaken.tistory.com/entry/tailwind-template-literal-%EC%82%AC%EC%9A%A9-%EC%8B%9C-%EC%8A%A4%ED..

이번에 진행하는 프로젝트는 webpack, npm이 아닌 vite와 yarn berry를 사용하는 과제를 받았다. 이 글에서 설명하는 초기 세팅은 react, ts, vite, yarn berry, tailwind css + twin.macro(emotion js), recoil, react query, jest, cypress를 설치하는 과정이다!(뭔가 엄청 많다..) 먼저 짧은 후기를 적어보자면 vite에 대한 정보가 너무 없어서 좀 힘겨웠다..! Vite + React + yarn berry 적용 yarn create vite 먼저 이 명령어를 입력하고 react, typescript를 각각 선택해줬다. yarn berry 전환 yarn set version berry pnp 모드 적용 먼저 .ya..