목록Javascript (110)

내맘대로 개발일지

[RN] Storybook 연결하기

📱테스트 환경"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 에 넣어놓고사용하면된다. 해당 컴포넌트들은 기본예제로 같이 생..
Javascript/React-Native 2025. 7. 9. 16:27
[RN] gorhom 바텀시트 사용하기

📱테스트 환경"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..
Javascript/React-Native 2025. 6. 23. 15:09
[RN] 권한받아오기 - 카메라 / 갤러리 / 위치 / 연락처

📱테스트 환경"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..
Javascript/React-Native 2025. 6. 16. 17:12
[RN] i18next react-i18next 사용하는 방법

📱테스트 환경"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 로 전역 관리 필요 *..
Javascript/React-Native 2025. 6. 16. 17:07
[RN] react native - fontSize / width / height 반응형

📱테스트 환경"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..
Javascript/React-Native 2025. 6. 16. 17:01
[RN] react-native-web 사용 후기 나는 비추

📱테스트 환경"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 플랫폼별로 스타일 따로 적용해주다보니가독성만 엄청 떨어지고 ..
Javascript/React-Native 2025. 4. 17. 15:49
이전 Prev 1 2 3 4 ··· 19 Next 다음