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

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

// theme.ts export const theme = { colors: { 'subway-line-1': '#0d3692', 'subway-line-2': '#33a23d', 'subway-line-3': '#fe5d10', 'subway-line-4': '#00a2d1', 'subway-line-5': '#8b50a4', 'subway-line-6': '#c55c1d', 'subway-line-7': '#54640d', 'subway-line-8': '#f14c82', 'subway-line-9': '#aa9872', }, }; import React from 'react'; import {ThemeProvider} from '@emotion/react'; import {NavigationCont..

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

도서 을 읽고 도움이 될 만한 부분을 기록합니다 atom으로 상태 만들기 import {atom} from 'recoil'; export interface User { id: number; username: string; displayName: string; } interface AuthState { user: User | null; } // 타입스크립트 환경에서 recoil을 사용할 때에는 atom의 generic으로 관리 export const authState = atom({ key: 'authState', default: { user: null, }, }); 상태를 관리하는 user-defined hooks 만들기 현재의 user 상태를 불러오는 hooks인 useUser() import {use..

babel-plugin-root-import를 설치한다 npm install babel-plugin-root-import src 디렉토리를 생성하고 App.js (혹은 App.tsx)를 src 폴더로 이동시킨다 babel.config.js 파일을 열고 아래와 같이 수정한다 module.exports = { presets: ['module:metro-react-native-babel-preset'], plugins: [ [ 'babel-plugin-root-import', { rootPathPrefix: '~', rootPathSuffix: 'src', }, ], ], }; tsconfig.json 파일을 열고 baseUrl과 paths를 추가한다 { "compilerOptions": { "allowJs"..