어리둥절 분석가 그리고 개발자

✔️ 필요성 React Native에서 컴포넌트 위에서 도형을 그리고 싶을 때가 있다. 나는 카드 컴포넌트를 사선으로 나누는 대각선(Diagonal Line)을 그리고 싶었다! ✔️ 해결 React Native에서 도형을 그릴 때는 react-native-svg 라이브러리를 이용하면 쉽게 그릴 수 있다. 태그를 활용해서 양쪽 대각선의 위치를 잡아주면 된다. px 단위로 위치를 잡을 수도 있는데 난 %를 활용해서 오른쪽 1/3 지점에서 왼쪽 1/3 지점으로 이어지는 대각선을 그렸다 npm install react-native-svg import React from 'react'; import styled from 'styled-components/native'; import Svg, {Line} from ..

✔️ 필요성 styled-components에서 props를 받아서 그 값에 따라 다르게 컴포넌트를 꾸미는 방법이 있다. 자세한 건 아래 포스팅을 참고! Styled-Components로 React Native Pressable 꾸미기 React Native의 기본 StyleSheet를 활용할 때에는 아래와 같이 이 pressed 되었을 때를 꾸밀 수 있다 [ styles.submit, Platform.OS === 'ios' && pressed && styles.submitPressed, ]} android_ripple={{color: '.. sezzled.tistory.com props 값을 받아서 props 값에 따라 theme에 있는 컬러를 가지고 오고 싶을 때는 어떻게 하나? ✔️ 문제 상황 내가..

✔️ Victory Native 활용 예제 파헤치기 Victory Native 개인적으로 너무 만족스러운 라이브러리이다. 무엇보다 가볍고 사용법이 직관적이고, 기본적으로 제공하는 옵션들도 다양하다. Victory Native로 그린 아래 차트를 어떻게 그렸는지 기록해두고, 내가 라이브러리 사용할 때마다 찾아보려고 한다. ✔️ 전체 코드 import React from 'react'; import {View} from 'react-native'; import styled from 'styled-components/native'; import { VictoryAxis, VictoryBar, VictoryChart, VictoryGroup, VictoryLegend, VictoryLine, VictorySca..

const data = { time: [ '00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', ], value: [ 0.71, 0.52, 0.34, 0.25, 0.34, 0.54, 0.8, 0.77, 1.16, 2.1, 10.47, ] } const groupKeyData = { ...data, groupKey: data.time.map((item, index) => { return Math.floor(index / 3).toString(); }), };

✔️ 필요성 그 전까지 갑자기 잘되다가 시뮬레이터에 다음과 같은 문제가 생겼다. 정말 갑자기..? 보통 RN에러에서 watchman을 건들거나 --reset-cache 하라고 해서 문제가 단번에 해결된 적 별로 없었다. console.error("React Native version mismatch") ✔️ 해결방법 아래와 같이 돌려주니 금방 해결됐다 다행 npx react-native upgrade npm install -g react-native-cli npx pod-install npm run ios

✔️ 필요성 여러가지 차트(Bar, Line, StackedBar)를 하나의 축 위에 겹쳐 그리고 싶을 때가 많다. (복합차트) Victory Native는 복합 차트를 그리는 것이 매우 쉽다. 해당하는 컴포넌트를 그냥 같이 겹쳐 붙이기만 하면 된다. import React from 'react'; import styled from 'styled-components/native'; import { VictoryAxis, VictoryBar, VictoryChart, VictoryLine, } from 'victory-native'; const Container = styled.View` flex: 1; align-items: center; justify-content: center; `; const da..

✔️ 필요성 Bar 차트를 그린다고 하면 모든 Bar가 같은 색상을 가진게 아니라 특정값에 따라 동적으로 차트의 스타일(색깔 등)을 바꾸고 싶을 때가 있다. https://formidable.com/open-source/victory/docs/common-props/#style Victory | Common Props Not every component uses all of these props. These are all common to things like VictoryBar, VictoryScatter, but other components like VictoryStack use only some of them. The props explanations given here are general. E..

✔️ 필요성 React Native에서 막대그래프나 라인그래프 혹은 파이차트 같이 그래프/차트를 표현해야 할 때가 있다. React Native에서는 아직까지 엄청나게 우세한 차트 라이브러리는 없는 것 같았다. 이것 저것 찾아보던 중 Victory-Native라는 라이브러리가 전체적으로 간단하면서도 애니메이션을 잘 보여줘서 모바일 환경에서 적합한 라이브러리라고 생각되어 도전해보았다. 예시에서도 알 수 있듯이 코드가 간단하고 툴팁이나 x축 y축이 기본적으로 귀엽다 ✔️ 설치 설치도 굉장히 쉽다 npm install --save victory-native react-native install react-native-svg npx pod-install ✔️ 기본 예시 Victory Native에서 알려주고 있..

✔️ 필요성 ggplot을 그렸을 때 뒷배경이 어떤 라인도 없이 흰색이었으면 할 때가 있다 ✔️ 활용 예제 data %>% ggplot() + geom_bar(aes(x=type, y=value, stat="identity")) + theme( panel.background = element_rect(fill="white", colour="black"), strip.background = element_rect(fill="white", colour="black"), legend.position = "none" #legend 없애기 )

✔️ 필요성 이런식으로 츄파츕스 같이 생긴 차트를 만들고 싶을 때가 있습니다ㅋㅋㅋㅋ 있었어요 저는... ✔️ 활용 예제 tmp %>% dplyr::select(type, value) %>% ggplot() + geom_point(aes(x=type, y=value)) + geom_segment(aes(x=type, xend=type, y=0.75, yend=value)) + ylim(0.75, 1)