React

개발 배경설명사이드 프로젝트로 데이팅앱을 개발 중.네이티브 앱에 대한 지식은 없어서 익숙한 리액트를 사용하여 React Native으로 하이브리드 앱 선택. 일부 기능 웹뷰를 띄워 앱과 웹뷰 혼합형태로 제작. 처음 사용해보는 RN, 웹소켓 통신 기술 --> 내가 얼마나 빠르게 새로운 기능 구현을 해볼수있을까 셀프 챌린지백엔드와 협력해서 대략 이틀만에 기능 구현(하루당 3시간?정도 소모) 기술 스택App: React Native, Expo, TypeScript, React-native-paper (빠른 생산성을 위해 UI 컴포넌트 직접구현 X)Web: Next v14, React v18, TypeScript 채팅 기능을 위해 소켓서버(redis)을 올리고 클라이언트에서 로그인인증 후 소켓연결.newMess..

Vanilla-extract만든 design system의 번들 사이즈가 너무 커요!CSS-in-TS 와 zero-runtime css 컨셉을 채택한 vanilla-extract css(이하 VE로 줄임!)로 NPM 라이브러리를 만들어 배포하였다. 사내 디자인 시스템을 만든 작업이었다. VE는 제로 런타임을 위해서 빌드 타임에 코드로 정의한 css와 타입정의를 뽑아주게 된다. 이 css와 타입을 라이브러리에 같이 shipping하도록 제작했다. 처음 라이브러리를 만들때에는 없는것보단 낫겠지 하는 심정으로 이것저것 필요해보이는 디자인 토큰과 기능들을 넣었다. 하지만 결론적으로 이런 접근 방식으로 큰 코를 다치게 되는데... 설정 살펴보기어느날 빌드를 하다가 바벨의 불평을 마주치게 되었다.\[BABEL\] ..

리액트로 사내 UI 라이브러리를 제작중에,headless UI 라이브러리의 개념과 적용기, 다른 라이브러리들과 headless 라이브러리들 간의 비교 등에 대해 잘 쓰여진 아티클을 찾아 번역해보았습니다. 저는 자체 UI 라이브러리를 만드는 입장에서, headless 컨셉을 이해하는데 매우 큰 도움이 되었습니다. 모두 도움이 되길 바랍니다!원문: Headless components in React and why I stopped using a UI library for our design system Headless components in React and why I stopped using a UI library for our design systemIn the past five years I’v be..