풀스택을꿈꾸는개발자

Hermes는 react native 앱을 빠르게 실행 시켜주는 facebook에서 개발한 javascript 엔진입니다.주요 특징으로는 빠른 시작 시간, 효율적인 메모리 사용, 작은 패키지 크기가 있습니다.이런 특징을 갖게 된 계기는 크게 세가지로 볼 수 있다.  1. Javascript 코드를 바이트코드로 사전 컴파일 2. 모바일 환경에 최적화된 가비지 컬렉션 3. JSI(Javascript Interface)와의 통합  **** 알아두면 좋은것! ***Hermes는 react native 0.7이후 버전부터는 디폴트로 사용하게 되었습니다. JavascriptCore Engine을 사용할 때에 비해서 앱 크기, 메모리 사용량등 크게 개선 되었습니다. ***0.7이전에는 왜 디폴트롤 사용되지 않았는가*..

react-native 이론 2024. 10. 17. 15:58

React Native 앱의 빌드 과정은 다음과 같습니다:  1. JavaScript 번들링: Metro 번들러를 사용하여 JavaScript 코드를 하나의 파일로 번들링합니다. 2. 네이티브 코드 컴파일: iOS의 경우 Xcode, Android의 경우 Gradle을 사용하여 네이티브 코드를 컴파일합니다. 3. 리소스 복사: 이미지, 폰트 등의 리소스 파일을 앱 번들로 복사합니다. 4. JavaScript 번들 주입: 컴파일된 네이티브 앱에 JavaScript 번들을 주입합니다. 5. 최종 앱 생성: 플랫폼별 실행 파일(.ipa 또는 .apk)을 생성합니다. 이 과정을 통해 JavaScript로 작성된 코드가 네이티브 앱으로 변환됩니다.

react-native 이론 2024. 10. 17. 14:31

React Native는 플랫폼에 구애받지 않는 솔루션으로, 특정 플랫폼에 종속되지 않고 여러 운영 체제에서 동일하게 사용할 수 있습니다. React Native 개발자들은 JavaScript 코드를 사용하여 단일 네이티브 코드베이스를 작성한 다음, React 트리를 네이티브 인프라가 해석할 수 있도록 변환합니다. 2013년에 React Native는 웹 기반 기술인 React를 네이티브 플랫폼의 독점 스택과 통합하려 했습니다. 당시 이 두 기술은 자주 분리되어 있었고 반복 개발 속도가 느렸습니다. 2015년에 이르러 두 개의 스레드를 만들고 Bridge를 통해 이들을 연결하여 표준 형식으로 통신하게 하는 아이디어가 제시되었습니다. 이러한 접근 방식으로 React Native는 다음과 같은 이점을 제공합..

react-native 이론 2024. 10. 17. 14:29

화면이 포커스 되었을때 실행해야 되는 함수를 useEffect(() => { if (isFocused) {//do something } }, [isFocused]);이런식으로 실행하는 사람들이 분명있을 것이다.react native에는 useFocusEffect라는 훅이 있다. 공식문서에서도 이것을 사용하는것을 권장한다. https://reactnavigation.org/docs/use-focus-effect/ useFocusEffect | React NavigationSometimes we want to run side-effects when a screen is focused. A side effect may involve things like adding an event listener, fetch..

react-native 2024. 9. 4. 11:54

react-native 프로젝트를 접하다보면 code-push라는 것을 활용하여 라이브 업데이트 하는 것을 확인할 수 있다.하지만 매우 아쉽게도 code-push는 2025년 03월까지만 운영된다고 한다.https://learn.microsoft.com/ko-kr/appcenter/distribution/codepush/ 카핏앱을 디벨롭하면서 수명이 얼마 남지않는 라이브 업데이트 기능을 붙이고 싶지 않아 대체제 찾던 와중https://expo.dev/blog/how-to-replace-app-center-and-codepush이런 글을 보게된다. 카핏앱에서는 code_push가 아닌 expo_update를 적용했다.테스트 해본 결과 정상적으로 작동하는 것을 확인.https://docs.expo.dev/ ..

react-native 2024. 8. 30. 19:17

아래처럼 화면위에 카메라 화면을 띄워야할때가 있다. 그런 경우 일반적으로는 react-native-vision-camera를 사용한다.https://github.com/mrousavy/react-native-vision-camera GitHub - mrousavy/react-native-vision-camera: 📸 A powerful, high-performance React Native Camera library.📸 A powerful, high-performance React Native Camera library. - mrousavy/react-native-vision-cameragithub.com해당 라이브러리는 카메라에서 받은 정보를 아래 사진처럼 띄워주는 것이 가능하게 해준다.뿐만 아니라..

react-native 2024. 8. 30. 18:23

개발중인 앱에 모든 버튼에 애니메이션이 들어가다보니 코드 줄이 길어지는겠구나 라고 생각이 들어 효과를 공통으로 빼놓았습니다. {children} 이런식으로 컴포넌트를 관리하면 훨씬 편해집니다.모달도 동일합니다.Modal isVisible={isVisible} onSwipeComplete={() => setIsVisible(false)} ....등등>{children} 이런식으로 공통컴포넌트를 만들어 코드 줄이 확연히 줄어들고 코드 읽을때도 편해집니다.

react-native 2024. 8. 30. 17:49

1에서 말씀드렸듯 카핏앱에는 모든 버튼에 애니메이션이 있습니다. 공통적인 부분이라고하면 PressIn 할때 눌리는 효과를 주어야하며 PressOut할때는 다시 원래대로 크기가 돌아오는 효과를 주어야합니다.말로 이해하기 어렵다면 '토스'앱을 참고하시면 좋을껏 같습니다. transform: [{scale: value}]를 통해 버튼이 작아지고 커지는 효과를 주었습니다.누를때는 value가 작아지게 떌떄는 value가 원래대로 돌아오게 설계했습니다.단순히 value가 작아지면 뚝뚝 끊기는 느낌이 있습니다.그래서 reanimated Timming을 사용했습니다. duration을 통해 애니메이션이 좀 자연스럽게 줄어들게 변경했습니다.https://docs.swmansion.com/react-native-rean..

react-native 2024. 8. 30. 17:42