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

✔️ 필요성 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 ..

✔️ 필요성 그 전까지 갑자기 잘되다가 시뮬레이터에 다음과 같은 문제가 생겼다. 정말 갑자기..? 보통 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

✔️ 문제상황 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를 고정값으로 설정하면, 화면 사이즈에 따라서 굴곡의 비율이 달라질 수 있다. 이런 문제 또한 전체 스크린 사이즈를 받아서 그 일부 비율로 설정해주면 해결할..

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..

React Native로 프로젝트를 만들 때 초기에 셋팅해야하는 것들이 있는데, 할 때마다 새로 찾아보기가 귀찮아서 한 번에 정리해놓고 할 때마다 복사해서 쓰려고 한다 npx react-native init [프로젝트명] --template react-native-template-typescript cd [프로젝트명] yarn add @react-navigation/native yarn add @react-native-screens react-native-safe-area-context yarn add @react-navigation/native-stack @react-navigation/bottom-tabs yarn add react-native-vector-icons @types/react-nativ..

도서 을 읽고 도움이 될 만한 부분을 기록합니다 atom으로 상태 만들기 export interface Post { id: number; title: string; body: string; } import {atom} from 'recoil'; import {Post} from '../api/types'; interface PostsState { loading: boolean; data: Post[] | null; error: Error | null; } export const postsState = atom({ key: 'postsState', default: { loading: false, data: null, error: null, }, }); REST API 호출 import axios from ..