Recoil이란 React의 전역 상태관리 라이브러리다. 기존 React스러운 상태관리는 단방향으로 이루어져 드릴링을 통해 자식에게 상태를 내려보내줘야 했고 이 때문에 자식요소들 간의 상태공유가 어려웠고, 프로젝트의 규모가 커질수록 드릴링이 깊어지게 되면서 단순히 상태 전달만 하는 불필요한 코드가 발생하고 어디에서 상태가 관리되고 있는지 추적하는데 어려움이 생겼다. 때문에 store개념을 두고 한 곳에서 상태관리가 이루어지는 대안이 생겼고 뒤늦게 React는 상태관리를 위한 contextApi를 제공했다. 하지만 늘 이글의 주제가 Recoil이듯이 contextApi가 만족스럽지는 못했다. 를 앱 최상단에 래핑 해주게 되는데 context를 구독하는 컴포넌트들에게 변화가 감지되면 알려주는 역할이다. 하지..
이슈 MUI사용 중 chip을 사용할 일이 생겼다. 수많은 옵션을 구현하기 적합하다고 판단해서 chip를 선택했지만 체크박스나 라디오박스처럼 클릭 시 색상이 변한다던지 구분이 되어야하는데 의외로 지원 안 해준다. 정작 clickable 메서드는 만들어 놓고 지원 안 하는 건 무슨 심보일까. https://mui.com/material-ui/react-chip/ React Chip component - Material UI Chips are compact elements that represent an input, attribute, or action. mui.com 나같이 생각한 사람들 에이 설마 하고 찾아보는데 없다. 나 같은 기능을 원하는 인간들이 종종 보이는데 원하는 답변은 안 나온다. 작성 기간을..
Lottie란 애니메이션을 JSON으로 변환한 파일이다. 디자이너는 Lottie를 통해 애니메이션을 이미지처럼 간단하게 옮길 수 있고 크기를 늘리거나 줄여도 해상도가 변하지 않는 장점이 있다. 개발 측면에서 Lottie란 Adobe 에프터이펙트로 만든 애니메이션 이미지를 가벼운 json 확장자로 export 하여 간단하게 웹 또는 앱(ReactNative)에서 애니메이션 구현을 가능하게 하는 라이브러리다. 결국 귀찮게 애니메이션을 구해오지 않아도 되고 무거운 파일크기를 신경 쓰지 않아도 된다. 또, 오픈소스처럼 무료로 공유되는 생태계가 점차 커지고 있어 디자이너가 없거나 예산 규모가 작은 개발팀에게 단비 같은 존재다. 설치 yarn add react-lottie yarn add -D @types/reac..
어쩌다가 AWS 비용이 겁나서 그냥 집에서 남아도는 구형피시로 NAS 겸 API서버를 돌리고 있는데 그럴싸한 모니터링 프로그램이 있으면 좋겠다는 생각이 들었다. 백엔드서버는 그냥 Node.js를 사용하고 서버 자체에서 API서버를 만들고 불필요한 DB연동은 다 빼버렸다. 인터벌을 줘서 일정 시간마다 DB로 쏘고 DB값을 가져다 쓸까 하다가 어차피 혼자 볼 건데 불필요하게 쌓일 거라 생각했다. 하드웨어 개조 시작 주목적은 온도체크 목적이다. 무슨 뜬금없는 소리냐 싶겠지만 커스텀케이스를 만든다고 공간확보가 필요했다. 그래서 CPU에 쿨러도 떼버렸다. (이때 멈췄어야 했다. 뭐든 필요해서 존재하는 거였다.) 그래서 안정성 검증을 빙자한 보험성 온도체크 모니터링이 필요했다. 소프트웨어 개발 Ubuntu에도 Se..
바텀시트란 이 처럼 바닥에서 위로 올라오는 화면을 바텀시트(Bottom Sheet)라고 한다. 본 글에서는 바텀시트를 구현하기위해 라이브러리를 사용할 것이다. 라이브러리 설치 먼저 아래 라이브러리를 설치해주자. yarn add @gorhom/bottom-sheet@^4 공식문서에 따르면 아래 종속된 패키지도 설치해야 한다고 한다. yarn add react-native-reanimated react-native-gesture-handler 이후 babel.config.js파일에 플러그인 맨 뒤에 추가해 준다. 이제 아래 두 태그를 최상단에 넣고 내부에 바텀시트를 선언해주고 사용해주면 된다. 공식문서의 예제에 뒤에 오버레이 스크린의 순서만 살짝 바꿔 자연스럽게 만들어준 코드는 아래와 같다. import R..
