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

도서 을 읽고 도움이 될 만한 부분을 기록합니다 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 공식문서가 상당히 방대해서 해당하는 옵션 부분을 겨우 찾았네... 상태바..

TypeScript 에러 발생 Styled-Component를 활용해서 배경이미지 레이어 컴포넌트를 생성하고, 이를 스크린에 적용하려고 하는데 알 수 없는 에러가 발생했다. import React from 'react'; import Styled from 'styled-components/native'; const ImageBackground = Styled.ImageBackground` height: 100%; weight: 100%; `; const Background = () => { return ( ); }; export default Background; 빠른 수정을 사용할 수 없음.... 당황스러움 문제 해결 : props 추가 배경이미지 컴포넌트가 특정한 props를 받는 것은 아니지만 아래..

필요성 리액트 네이티브에서 이미지를 배경으로 만들고 싶을 때가 종종 있다. 이미지를 배경으로 사용하고 싶을 때에는 를 활용하면 되는데 styled-component를 함께 활용할 때는 아래와 같이 사용하면 된다. 주의해야 할 점은 height와 weight를 반드시 적어줘야 이미지가 보인다 import React from 'react'; import Styled from 'styled-components/native'; const ImageBackground = Styled.ImageBackground` flex: 1; height: 100%; weight: 100%; opacity: 0.8; `; const Background = (props: any) => { return ( ); }; export ..

에러 발생 react-native를 처음에 시작하고 나서 가장 당황스러웠던 에러고, 처음에 잘 모르는데 고생을 너무 했다. react-native-vector-icons 를 설치하고 나서 아이콘의 이미지가 나타나지 않았을 때 이 유형의 에러를 처음 보게 되었는데, 이미지나 아이콘을 불러올 때는 공통적으로 유사한 에러가 발생한다. 에러 해결 VScode와 같은 에디터에서 ios 폴더 > [프로젝트명] 폴더 > Info.plist 파일을 연다. 내부에 아래와 같은 내용을 와 를 붙여넣기 한 이후 저장한다. UIAppFonts AntDesign.ttf Entypo.ttf EvilIcons.ttf Feather.ttf FontAwesome.ttf FontAwesome5_Brands.ttf FontAwesome5..