내맘대로 개발일지

📱테스트 환경"react": "19.0.0","react-native": "0.79.2"storybook 사용하는 방법을 작성해보도록 하겠다.진짜 ChatGPT 에게 2일을 넘게 물어봤는데 안된다고만하고 그짓말만 쳐서진짜 삽질이란 삽질은 다하고 구글링을 통해 열심히 뒤져서겨우겨우 완성했다 ..나는 CLI 환경에서 개발을 하고있고스토리북은 8.5 버전을 사용했으니 참고 부탁한다. Storybook 8.5Accessibility at your fingertipsstorybook.js.orgnpx storybook@latest init을 해주면 .rnstorybook 을 만들어준다. 하고나면 이런 폴더가 생길건데, 이제 컴포넌트들은 stories 에 넣어놓고사용하면된다. 해당 컴포넌트들은 기본예제로 같이 생..

📱테스트 환경"react": "19.0.0","react-native": "0.79.2"gorhom 이 가장 많은 바텀시트 사용량을 보이길래 이걸로 작업을 진행했다.다른곳에서도 사용하기에 컴포넌트 분리시켜놓고 커스텀가능하게끔 만들어놨다.import React, {forwardRef, useMemo} from 'react';import {default as GorhomBottomSheet} from '@gorhom/bottom-sheet';import {SHADOWS} from '~styles/shadows';export type BottomSheetProps = { children: React.ReactNode; snapPoints?: (string | number)[]; enablePanDown..

📱테스트 환경"react": "19.0.0","react-native": "0.79.2"앱을 만들면 당연히 권한이 필요한 경우가 찾아온다.퍼미션 등록이나 인포등록은 간단하니 해당 내용은 스킵하고JS 코드만 정리하도록 하겠다.// 카메라export const camera = async () => { let permission; if (Platform.OS === 'android') { permission = PERMISSIONS.ANDROID.CAMERA; } else if (Platform.OS === 'ios') { permission = PERMISSIONS.IOS.CAMERA; } else { return; } const status = await check(permis..

📱테스트 환경"react": "19.0.0","react-native": "0.79.2"이번에 새롭게 진행하는 프로젝트가다국어를 지원해줬야 했기 때문에 해당 라이브러리를 사용했는데사용방법이나 설정하는방법이 그리 어려운편은 아니지만 정리해두면 좋을것같아시작한다.// src/locales/i18n.tsimport i18n from 'i18next';import { initReactI18next } from 'react-i18next';import ja from '~locales/ja/ja.json';import ko from '~locales/ko/ko.json';import zh from '~locales/zh/zh.json';/* * 한앱에서 언어를 모두 처리하는경우 recoil 로 전역 관리 필요 *..

📱테스트 환경"react": "19.0.0","react-native": "0.79.2"요즘 너무 바쁘고 정신이 없어서 몇달간 정리를 못했는데 ..이건 내가 React Native 개발을 할때마다 가지고 다니는 resize 함수이다.RN 이 크로스플랫폼을 만들지만 이게 이상하게도넓이 / 높이 / 폰트사이즈가 반응형이 안돼서 너무 불편했다.그렇다고 @media 처럼 할수도 없는 노릇이도 비율로 조정할 수 있게끔 만들어서 사용한다.먼저 width / height 조정 하는 방법이다.export default function responsive(baseDesignElementSize?: ResponsiveInput): number | string { const screenRatio = SCREEN_WIDT..

📱테스트 환경"react": "18.3.1","react-dom": "^18.3.1","react-native": "0.76.1""react-native-web": "^0.19.13"처음 시작은 플러터에서 web 까지 한번에 지원된다고 하니 RN 도 되지않을까 ?싶은 마음에 찾아봤고, 한번에 된다니 너무 혹해서 시작했다.해당 프로젝트 규모도 컸고, 잘 알아보고 진행했어야했는데 이게 패착이였던 것 같다.이미 약 5개월가량 진행해왔고 이제 와서 엎을 수 없어 끝까지 진행하긴 하지만react-native-web 을 사용하려고 하는 사람이 있다면 나는 비추다.이유는 꼭 한번만 읽고 결정하기 바란다.1. Styles 적용Android, IOS, Web 플랫폼별로 스타일 따로 적용해주다보니가독성만 엄청 떨어지고 ..

📱테스트 환경"react": "18.3.0","react-dom": "18.3.0"map 을 사용하다보면Warning: Each child in a list should have a unique "key" prop.이런 경고 에러메시지를 볼 수 있다.해당 코드를 보면 {category && category[2] && category[2].map((v, i) => ( setSelected(prev => (prev === v.no ? null : v.no)) }> {v.name} {i !== category[2].length - 1 && } ..

📱테스트 환경"react": "18.3.1","react-dom": "^18.3.1","react-native": "0.76.1"회사에서 지원받은 맥미니가 용량이 엄청적다 ..256GB 짜리인데 시스템만 절반을 넘게 차지하니까 .. 프로젝트 뭐 설정하고나면용량이 없어서 뭐 추가만 하려고 하면 해당 에러를 만나게 되는데해당 원인은 용량부족이다..해결방법은 아주아주 간단하다.yarn cache celan생각보다 yarn 에서 캐시로 들고있는게 많아서 클린 해주고 진행하면대부분 라이브러리 추가는 문제없이 진행될꺼다.이래도 문제가있다면 이제 저장공간가서 열심히 필요없는걸 지워주도록 하자.

📱테스트 환경"react": "18.3.1","react-dom": "^18.3.1","react-native": "0.76.1"FlatList 를 사용한뒤로 navigation 을 사용할때마다저런 에러가 뜨는데 처음에는 관련있는 에러인지도 몰랐는데UI 업데이트 되면서 충돌에러가 발생하는 것이라고 한다.해결방법은 간단한데 item[rowKey]?.toString() || Math.random().toString() } // 고유 key renderItem={({item}) => ( {renderRow(item)} )} />removeClippedSubviews={false}이거 한줄 추가해주면 해결된다.해당 줄을 추가하면 U..

📱테스트 환경"react": "18.3.1","react-dom": "^18.3.1","react-native": "0.76.1","@react-native-picker/picker": "^2.7.7","react-native-picker-select": "^9.2.0", Android 나 Web 에서는 잘 되는게 Ios 에서만 이상하게눌러도 반응이 없었다.ChatGPT 나 스택오버플로우 깃 이슈 뭐 안본데가 없고 ..안해본게 없었는데 ..나와같은 이슈가 없어서버전도 다운그레이드 해보고 .. 삭제했다 다시깔아보고 ..다 의미없는 짓이였다 ..해결방법은 의외로 간단했는데 setValue && setValue(v)} items={items} placeholder={{label: place..