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

✔️ 필요성 여러가지 차트(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에서 알려주고 있..

✔️ 문제상황 styled-component 공식문서에서 시키는대로 props에 따라서 스타일링을 다르게 하고 싶은데, 무엇인가 속성이 또 없다고 합니다. 왠지 typescript 때문인 것 같습니다. ✔️ 해결 styled-component 부분에서 generic을 활용해서 style에서 활용하는 props의 type값을 지정해주면 됩니다.

✔️ 문제상황 공식문서에서 시키는대로 theme.ts를 만들고 그걸 활용하려고 하는데 아래와 같이 DefaultTheme 형식에 colors 속성이 없다고 한다. 아...네... 이것이 모두 typescript를 쓴 제 잘못입니다... 애증의 tsc ✔️ 해결하기 root 디렉토리에 styled.d.ts라는 파일을 만들고 theme.ts의 형식을 DefaultTheme이라는 이름으로 지정해준다. typescript에서 지양하는 any를 쓴 건 눈감고 지나가주세요~ // styled.d.ts import 'styled-components'; // styled-components안에 들어있는 DefaultTheme 형식 지정해주기 declare module 'styled-components' { export..

✔️ 필요성 React Native에서 컴포넌트를 이미 만들어둔 다음에, 사용할 때 margin이나 padding만 조금 더 추가해서 쓰고 싶은 적 없으신가요?!! 맨처음부터 확정된 margin을 줘버리면 나중에 위치 레이아웃할 때 싹 다 꼬인다구요! 그러면서도 CSS와 JS를 깔끔하게 분리해서 코드 짜고싶은 마음 저만 있는거 아니죠...? styled-components를 활용하면 가능합니다. ✔️ 참고 styled-components 공식 문서를 보면 나와있긴 합니다만 styled-components: Basics Get Started with styled-components basics. styled-components.com ✔️ 활용 예제 SectionTitle이라고 메뉴의 타이틀을 나타내는 글..

✔️ 필요성 React Native에서 아이콘을 하나 만들어서 쓰는데, 위치에 따라 색깔이 바뀔 수도 있고 크기만 바꿔서 여러군데에서 사용하고 싶을 때가 있습니다. 즉, svg 파일의 크기와 색깔을 자유롭게 스타일링하고 싶습니다. ✔️ React Native에서 svg 파일 불러오도록 설치 필요 React Native에서 svg 파일을 불러와서 사용하기 위해서는 react-native-svg 그리고 react-native-svg-transformer 패키지를 설치해야 합니다. 단순히 설치 이상으로 설정해주어야 하는 것이 있기 때문에 아래 포스팅을 참고해서 설치를 끝내도록 합시다. React Native에서 svg 파일 사용하기 1) xml로 불러오기 React Native에서 svg를 불러올 때에는 re..

React Native에서 스크린의 세로를 꽉 채우는건 flex: 1로 쉽게 할 수 있을 것 같은데, 스크린의 가로를 꽉 채우는게 생각보다 쉽지 않다. 흔히들 먼저 떠올리는 100%를 써봤는데 안된다 이 때는 react-native에서 제공하는 Dimensions를 활용하면 된다 import {Dimensions} from 'react-native'; const fullWidth = Dimensions.get('window').width const fullHeight = Dimensions.get('window').height border-radius를 고정값으로 설정하면, 화면 사이즈에 따라서 굴곡의 비율이 달라질 수 있다. 이런 문제 또한 전체 스크린 사이즈를 받아서 그 일부 비율로 설정해주면 해결할..

React Native의 기본 StyleSheet를 활용할 때에는 아래와 같이 이 pressed 되었을 때를 꾸밀 수 있다 [ styles.submit, Platform.OS === 'ios' && pressed && styles.submitPressed, ]} android_ripple={{color: '#42a5f5'}} onPress={onPress}> 회원가입 const styles = StyleSheet.create({ submit: { marginTop: 24, backgroundColor: '#2196f3', height: 56, borderRadius: 4, alignItems: 'center', justifyContent: 'center', }, submitPressed: { opacit..

1) xml로 불러오기 React Native에서 svg를 불러올 때에는 react-native-svg라는 패키지를 따로 설치해야 한다 npm install react-native-svg npx pod-install 각 상황별로 다양하게 사용하는 법이 패키지의 github에 소개되어 있는데 그 중에서 내가 필요한 부분만 포스팅ㅎㅎ https://github.com/react-native-svg/react-native-svg#use-with-svg-files import React from 'react'; import Styled from 'styled-components/native'; import {SvgXml} from 'react-native-svg'; import {theme} from '~/th..