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

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

react navigation v6를 기반으로 작성되었습니다 필요성 React Native가 일반 React와 다른 특징 중에 하나는 Navigation이다. React Navigation에서 stack Navigation을 설정하면 기본값으로 상단 상태바가 생성된다 상단 상태바에서 현재 Screen을 확인할 수도 있고, 이전 스크린으로 되돌아갈 수도 있다. 이러한 상태바도 옵션으로 꾸미고 변경할 수 있지만 최근에는 앱에서 각자 상태바를 customize해서 쓰는 경우가 많기 때문에 Navigation에서 기본 제공하는 상태바를 없애고 싶다!! 어떻게 없앨 수 있을까... 해결 : headerShown React Navigation 공식문서가 상당히 방대해서 해당하는 옵션 부분을 겨우 찾았네... 상태바..

필요성 변수값이 A일 때는 a라는 스타일링을 보여주고, 변수값이 B일 때는 b라는 스타일링을 보여주는 것 조건문에 따라서 CSS 스타일링을 바꾸고 싶은 건 당연한 거 아니냐구 기본 중의 기본이라고..... 에러 tailwindCSS 공식문서에 가보면 아래와 같이 변수값을 활용해서 conditionally 다른 css를 적용할 수 있다고 나와있다. 그런데 안된다............ 해결 : template string을 사용 ES6의 주요 기능인 템플릿 문자열(template string)을 이용해야 하면 성공이다. 템플릿 문자열이란 문자열안에 변수를 넣을 때 보다 직관적이고 읽기 쉽게 도와주는 기능으로 backtick 사이에 문자열을 넣고, 그 속에 변수를 넣고 싶을 때는 ${} 사이에 변수를 넣을 수..

Annotations의 개념 FusionChart 공식 홈페이지에서는 Annotation을 차트 위에 그리는 사용자 정의의 객체나 도형으로 정의하고 있다. 차트 위에서 추가적인 선이나 다양한 모양의 선, 혹은 이미지를 추가해서 더 차트를 효과적으로 표현할 수 있게 하는 것이다. Annotation을 통해서 툴팁을 보조하거나 대체할 수도 있다. FusionChart의 툴팁 또한 HTML을 통해서 상당히 자유롭게 custom 할 수 있지만, 가끔 차트마다 반드시 나타나는 툴팁 형식이 고정되어 있는 경우가 있다. 이럴 때 Annotation을 통하면 더 자유롭게 툴팁을 만들 수 있다. 툴팁이 될 Annotation 만들기 위의 이미지에서 툴팁은 크게 4가지 부분으로 구성된다. lable이 들어갈 네모, 화살표..

필요성 Alarm이라는 컴포넌트를 만드는데, Alarm의 props 값을 받아서 Alarm 내의 state 초기값으로 설정하고 싶다. 이렇게 하면 될까? // pushAlarmStatus : props const [alarmStatus, setAlarmStatus] = useState(pushAlarmStatus); const Alarm = ({ pushAlarmStatus }: Props) => { const [alarmStatus, setAlarmStatus] = useState(pushAlarmStatus); console.log(alarmName, 'status:', alarmStatus); console.log(alarmName, 'status:', pushAlarmStatus); return ..