Authentication & Authorization 패턴을 위한 Token과 첫 진입을 판단하는 DeviceID 등, 앱이 종료되어도 유지되는 데이터를 관리하기 위해 로컬 스토리지를 사용했다. Expo의 경우, 로컬에 데이터를 저장하는 방식이 두가지 존재하는데, 두 저장 방식을 알아보도록 하자! 📍 Async Storage key-value 기반의 데이터를 암호화하지 않고, 저장하고 불러올 수 있도록 하는 라이브러리이다. 설치 npx expo install @react-native-async-storage/async-storage 사용법 AsyncStorage.setItem() , AsyncStorage.getItem() API를 통해 데이터를 저장, 불러올 수 있다. 비동기적으로 동작하기 때문에 P..
Framework
📍 디버깅이란? 개발 단계에서 발생하는 버그의 원인을 찾아내고 수정하는 작업 📍 Expo 환경에서 디버깅 할 수 있는 방법 앱 시작 후 j 눌러 Chrome DevTools로 디버깅 VS Code 확장을 통한 디버깅 Expo Tools (2024.03.06 기준) Expo SDK 49, 50인 경우 Expo Tools에서 오류 (2024.03.07 기준) 해당 오류 수정 React Native Tools Expo 시작된 터미널에서 shift+m 눌러서 React DevTools로 디버깅 개발자 메뉴 react-native-debugger 설치하여 디버깅 📍 Expo Tools Visual Studio Code에서 Expo 프로젝트를 쉽게 관리하고 디버깅하는 데 도움을 주는 확장 프로그램. Expo Go와..
📍 EXPO React Native 개발을 보다 쉽게 만들어주는 React Native 프레임워크 프로젝트를 설정하고 구성하는 것과 관련한 복잡성을 추상화함으로써 단순화된 개발 경험을 제공 ++ React Native CLI와 차이점 📍 Managed Workflow vs Bare Workflow Managed Workflow Expo가 전적으로 관리하는 개발 환경에서의 작업 방식 개발과 빌드가 훨씬 더 간단해지며, Expo의 많은 기능을 활용할 수 있다. Expo Go 앱을 사용하여 실시간 테스트할 수 있다. Expo 서버를 사용하여 iOS 및 Android 앱을 빌드할 수 있다. Expo SDK를 통해 제공되는 기능만 사용할 수 있다. 네이티브 코드에 접근할 수 없으므로 네이티브 모듈을 직접 추가하거..
📍 React Native Facebook에서 개발한 오픈 소스 모바일 애플리케이션 프레임워크 개발 방식에 따라 React Native CLI, EXPO CLI로 나뉜다. 📍 React Native CLI React Native 앱을 위한 전통적인 방식 프로젝트 구성과 설정에 최대한의 유연성과 제어가 가능하다. 장점 네이티브 모듈을 사용할 수 있고, 다양한 라이브러리를 활용할 수 있다. 앱의 성능, 크기 등을 제어할 수 있도록 빌드 구성을 할 수 있다. 강력한 커뮤니티와 생태계를 가지고 있다. 단점 초기 구성과 설정이 더 많아 까다로울 수 있다. 네이티브 종속성과 빌드 도구를 수동으로 구성해야 한다. (네이티브 지식이 필요) Android 및 iOS에서 앱을 테스트하기 위해 특정 장치가 있어야 한다. (..
Google Play Store 또는 Apple App Store용 앱의 제출 https://appstoreconnect.apple.com https://appstoreconnect.apple.com appstoreconnect.apple.com https://play.google.com/console/u/0/developers/6816120339051254900/app-list Google Play Console 이메일 또는 휴대전화 accounts.google.com EAS - CLI Expo Application Service Expo 와 ReactNative 앱을 위한 클라우드 서비스 EAS Build Google Play Store 또는 Apple App Store용 앱의 제출할 준비가 된 바이..
개발 React Native Expo TypeScript Expo Router * navigation 방법 - : 컴포넌트를 통한 navigation - router.push("/...") : 이벤트 발생시 navigation https://docs.expo.dev/routing/navigating-pages/ Navigate between pages Create links to move between pages. docs.expo.dev https://www.youtube.com/watch?v=yyGS0adZdsU&list=LL&index=8&t=5351s * params 전달 방법 - useGlobalSearchParams() - useLocalSearchParams() https://docs.exp..
📍 웹 브라우저 동작 HTML, CSS로 → 브라우저 Critical Rendering Path를 통한 렌더링 과정 HTML → DOM, CSS → CSSOM DOM: HTML을 브라우저가 해석하기 편한 방식으로 변환한 객체 트리 CSSOM: CSS Object Model Render Tree 생성: 청사진 Layout: Render Tree 기반으로 요소들 배치 결정 Painting Update DOM이 수정되면 Critical Rendering Path 다시 실행 Reflow(다시 Layout), Repaint 는 성능 낮게하는 주범→ DOM을 수정하는 과정 최소화하기 다만, Layout과 Painting은 매우 비싼 과정 → JS가 DOM을 수정하면서 업데이트가 발생 결론 다양한 업데이트 → 동시에..
개발 React Native Expo JavaScript Donut chart https://dev.to/franciscomendes10866/how-to-create-a-donut-chart-using-react-native-svg-30m9 How to Create a Donut Chart using React Native SVG Overview One of the things we all end up needing to do at some point in our career is... dev.to * animation version. https://www.youtube.com/watch?v=x2LtzCxbWI0 Bottom Sheet @gorhom/bottom-sheet@^4 : 많이 쓰이지만, De..
