peter 님의 블로그

React Native 프로젝트에서 환경별 변수 관리를 효율적으로 하기 위해 react-native-config를 사용하여 .env 파일 기반의 환경 설정을 적용하는 방법을 아래와 같이 정리했습니다. 프로젝트 환경: React Native 0.76.1  1. 라이브러리 설치먼저, 아래 명령어를 통해 라이브러리를 설치합니다.npm install react-native-config 2. 환경 변수 파일 생성프로젝트 루트 디렉토리에 환경 변수 파일을 생성합니다. 환경에 따라 여러 .env 파일로 나누어 관리할 수 있습니다.기본 .env 파일ENV=DEFAULTAPP_API_URL=http://default.krAPP_API_FILE_PATH=/files 개발용 .env.dev 파일ENV=DEVAPP_API_U..

오늘은 React Native를 활용해 react-native-reanimated-carousel 라이브러리로 캐러셀을 구현하고, 이를 커스텀 페이지네이션으로 개선하는 방법을 소개합니다.캐러셀은 여러 화면을 스크롤로 전환할 수 있는 인기 있는 UI 요소로, 제품 갤러리, 문제 풀이 앱 등에서 자주 사용됩니다. 이번 글에서는 캐러셀 구성 과정과 커스텀 페이지네이션 추가 방법을 단계별로 살펴보겠습니다. 1. 캐러셀 사용 시 발생할 수 있는 에러공식 문서를 참고해 react-native-reanimated-carousel을 구현하다 보면 아래와 같은 에러가 발생할 수 있습니다.Warning: TypeError: Cannot read property 'Basic' of undefined This error i..

목차1. 패키지 설치2. 코드 예제  react-native-reanimated-carousel 이란?react-native-reanimated-carousel은 React Native에서 고성능 애니메이션 슬라이더를 구현할 수 있는 라이브러리입니다. React Native Reanimated의 강력한 애니메이션 기능을 활용해 부드럽고 자연스러운 전환을 제공합니다. 특히 프레임 드롭 없이 안정적인 슬라이더를 구현할 수 있어 사용자 경험을 크게 향상시킵니다. 1. 패키지 설치1-1. 패키지 설치를 합니다.npm install react-native-reanimated-carousel react-native-reanimated react-native-gesture-handler 1-2. babel.confi..

목차1. 경고 메시지의 원인2. 경고 메시지 숨기기  React Native로 애플리케이션을 개발하며 react-native-reanimated-carousel을 사용해 슬라이더를 구현할 때, 아래와 같은 경고 메시지가 나타날 수 있습니다.  ... [Reanimated] Reading from `value` during component render. Please ensure that you do not access the `value` property or use `get` method of a shared value while React is rendering a component.If you don't want to see this message, you can disable the `strict..

목차1. 문제 원인2. 해결 방법3. 권장 사항 React Native에서 FlatList를 사용해 목록을 구현하던 중 아래와 같은 에러를 만난 경험이 있으신가요? VirtualizedLists should never be nested inside plain ScrollViews with the same orientation because it can break windowing and other functionality - use another VirtualizedList-backed container instead. [Component Stack] 이 오류는 VirtualizedList와 관련된 기본적인 사용 규칙을 위반했을 때 발생합니다. 아래에서 이 문제의 원인과 해결 방법을 단계별로 알아보겠습니..

목차1. 이미지를 한 곳에서 관리하는 이유2. 이미지 관리의 문제점3. 이미지를 한 곳에서 관리하는 방법4. 장점5. 예제6. 결론  React Native 버전: 0.76.1 React Native 프로젝트에서 이미지 관리는 UI 개발의 중요한 부분입니다. 다양한 화면에서 이미지를 사용하는 경우, 비효율적으로 관리하면 유지보수가 어려워지고 프로젝트의 복잡성이 증가할 수 있습니다. 이번 글에서는 이미지를 효율적으로 관리하는 방법과 그 장점을 소개합니다. 1. 이미지를 한 곳에서 관리하는 이유React Native 프로젝트에서는 보통 컴포넌트 내에서 직접 이미지를 불러오는 방식을 사용합니다. 하지만 이런 방식은 다음과 같은 문제를 야기합니다:중복 코드 증가: 동일한 이미지를 사용하는 경우, 여러 컴포넌트에..

목차1. 폰트 파일 추가2. 폰트 스타일 적용  - React Native(버전 0.76.1 기준)에서 커스텀 폰트를 추가하고 사용하는 방법을 소개합니다.- 앱의 디자인에 맞는 커스텀 폰트를 사용하면 텍스트 스타일을 더욱 다양하게 표현할 수 있습니다. 1. 폰트 파일 추가1-1. 폴더 생성 및 폰트 파일 복사- 프로젝트 디렉토리에서 src/assets/fonts 폴더를 생성합니다.- 원하는 폰트 파일(예: MyFont.ttf)을 해당 폴더에 복사합니다.이 예제에서는, 학교 안심 지우개 폰트와 에스 코어 드림 폰트를 사용했습니다. 1-2. react-native.config.js 파일 생성- 프로젝트 루트 디렉토리에 react-native.config.js 파일을 생성하고, 아래 내용을 작성합니다:modu..

목차1. 필요한 라이브러리 설치2. 환경 설정 및 코드 작성   이번 글에서는 react-native-svg-transformer 라이브러리를 사용하여 SVG 파일을 사용하는 방법을 단계별로 안내합니다. 1. 필요한 라이브러리 설치React Native에서 SVG 파일을 사용하려면 react-native-svg와 react-native-svg-transformer 라이브러리가 필요합니다.아래 명령어를 사용하여 두 라이브러리를 설치합니다. npm install react-native-svgnpm install --save-dev react-native-svg-transformer 2. 환경 설정 및 코드 작성2-1. 환경 설정설치 후, metro.config.js 파일을 수정해야 합니다. metro.con..

목차1. Header 숨기기 코드 작성2. 동작확인  React Native 프로젝트(버전 0.76.1)에서 React Navigation을 사용하여 특정 화면에서 Header를 숨기고, 다른 화면에서는 표시하는 방법을 알아보겠습니다. 이번 예제에서는 앱 진입 시 Home 화면에서 Header를 숨기고, 이후 Detail 화면에서는 Header가 나타나도록 설정합니다.  1. Header 숨기기 코드 작성- React Navigation의 Stack.Navigator에서 각 화면(Screen)의 options 속성을 사용해 Header의 표시 여부를 조정할 수 있습니다.- Home 화면에서는 headerShown: false로 설정하여 Header를 숨기고, 다른 화면은 기본 설정을 유지합니다.- 다음은..

목차1. 라이브러리 설치2. 작동 확인3. React Navigation 라우트 설정  사용된 버전React Native: 0.76.11. React Navigation 설치React Native에서 화면 간 전환을 쉽게 구현하려면 React Navigation 라이브러리를 사용하는 것이 가장 간단하고 효율적입니다. 아래는 React Navigation을 설치하는 과정입니다.1-1. React Navigation 설치- 먼저 React Navigation 패키지를 설치합니다.npm install @react-navigation/native1-2. 추가 종속성 설치- React Navigation은 추가적인 종속성을 필요로 합니다. 다음 명령어를 실행하여 필요한 패키지를 설치합니다.npm install r..