분류 전체보기 7

React Native 성능 최적화 전략(1)

단계별 성능 최적화 계획1. 메모리 누수 방지1.1 메모리 누수가 발생하는 일반적인 원인const BadExample = () => { useEffect(() => { const interval = setInterval(() => { fetchData(); }, 1000); // 메모리 누수 발생! cleanup 함수 없음 }, []);};1.2 메모리 누수 해결 방법const GoodExample = () => { useEffect(() => { const interval = setInterval(() => { fetchData(); }, 1000); return () => { clearInterval(interval); ..

react-native 2025.02.24

react-native Ios gesture-handler 빌드 오류

현재 react-native 0.77.0 기준으로 react-native-gesture-handler 를 ios에 설치하고 빌드할때 오류가 발생한다. 해당 오류의 원인이 무엇인지 파악하지는 못하였지만 아래와 같이 해결하였다. 파일명 : /node_modules/react-native-gesture-handler/apple/RNGestureHandlerModule.mm#import #import  해당하는 import를 주석처리하고 if (dynamic_pointer_cast(shadowNode)) { return jsi::Value(true); } if (dynamic_pointer_cast(shadowNode)) { return js..

react-native 2025.02.24

React-native FlatList 에서 getItemLayout 이란?

getItemLayout에 대해 gpt에게 물어보니 다음과 같이 답변해주었습니다.getItemLayout은 FlatList가 각 아이템의 크기와 위치를 미리 알 수 있도록 하여 스크롤 성능을 개선합니다. 이 prop을 사용하면 FlatList가 불필요한 크기 계산을 줄이고 렌더링 효율성을 높일 수 있습니다.보통 getItemLayout을 포함한 FlatList는 아래와 같이 작성됩니다.const getItemLayout = (data, index) => ({ length: ITEM_HEIGHT, // 아이템 높이 offset: ITEM_HEIGHT * index, // 오프셋 index, // 인덱스});이때 아이템의 높이값을 우선적으로 제시하여 최적화된 렌더링에 도움을 준다고 알려져 있는데요. 이..

react-native 2025.02.23

React Native에서 FlatList 성능 최적화: 5가지 실용적인 방법

React Native에서 FlatList는 대량의 데이터를 효율적으로 렌더링하는 데 필수적인 컴포넌트입니다. 하지만 잘못 사용하면 스크롤 성능 저하나 메모리 사용량 증가와 같은 문제가 발생할 수 있습니다. 이 글에서는 FlatList의 성능을 최적화하는 다섯 가지 실용적인 방법을 자세히 설명하겠습니다. 각 방법은 실제 프로젝트에서 성능 문제를 해결하는 데 유용하며, 특히 대량의 데이터를 다룰 때 효과적입니다. 1. shouldComponentUpdate를 사용해 불필요한 렌더링 방지방법 설명shouldComponentUpdate는 컴포넌트가 렌더링되어야 하는지 여부를 결정하는 생명주기 메서드입니다. 이를 활용하면 불필요한 렌더링을 방지할 수 있어 성능을 개선할 수 있습니다. FlatList에서 각 아이..

react-native 2025.02.23

m1 react-native 설치 및 설정을 로제타(rosetta)없이 해보자!

0- xcode는 앱스토어에서 다운받는것이 가장 안정적인 것 같습니다! xcode는 설치하는데까지 상당히 오랜시간이 걸리기 때문에 아래 과정을 시도하기전 반드시 다운로드를 눌러놓을 것을 권장 드립니다! (android studio 도 마찬가지입니다!) 1- brew 설치 /bin/bash -c "$(curl -fsSL []())" 위의 명령어로 설치 및 vi ~/.zshrc 에 접속 아래 코드를 맨아래에 추가(brew 탐지를 위해) eval $(/opt/homebrew/bin/brew shellenv) 위의 과정을 마친 후 brew —version 으로 확인! (꼭 터미널 껏다켜서 확인 및 터미널 여러번 껏다키면서 잘적용되었는지 확인) 혹시라도 권한이 없다고 하면 sudo chown -R $(whoami..

카테고리 없음 2023.01.04

세안 및 로션바르는 팁(여드름 피부 개선, 좁쌀 여드름 박멸, 울긋불긋한 피부 개선을 위한 팁)

가장 중요한 건 손을 깨끗이 해야한다는 점이다. -세안 폼클렌징 및 각종 세안 제품을 손에 짜거나 덜어내어 얼굴에 비비고 물로 행구면 끝? 굉장히 잘못된 생각이다. 일단 여러가지 생각해볼 필요가 있다. 세안이라는 것은 얼굴을 씻는 행위, 즉 깨끗하게 만들기 위해 하는 행위이다. 그런데 맨손으로 치킨을 뜯어먹고, 혹은 먼지가 덕지덕지붙은, 세균이 득실득실한 손에 폼클렌징을 짜는 행위. 이자체가 잘못되었다. 결론부터 말하자면 비누로 손을 꼭 씼어야한다. 세안의 기초는 폼클렌징 및 각종 비누류를 얼굴에 잘펴발라 꼼꼼히 씻는 것이 아닌, 손을 깨끗이 하여 깨끗한 손으로 얼굴을 씻어내는 것이다. 간혹 샤워중이라 굳이 손을 비누로 씻지않아도 된다는 사람도 있을 것이다. 우리의 얼굴 피부가 굉장히 약하다는 것을 인지..

피부관련 팁 2021.06.03

[react-native] Task :app:mergeDebugNativeLibs FAILED 에러,오류 해결

오류내용 요약 Task :app:mergeDebugNativeLibs FAILED 전체 로그 > Task :app:mergeDebugNativeLibs FAILED FAILURE: Build failed with an exception. error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup FAILURE: Build failed with an exception. 해결방법 생각보다 너무 간단했다. 이걸 누르고 잠시 기다리면 빌드 성공이라고 뜰것이다. 그럼 다시 react-native run-android로 ..

react-native 2021.04.01