Release NotesExpo SDK 55 릴리즈 노트2026년 2월 25일 · React Native 0.83 · React 19.2Expo SDK 55가 출시되었습니다. 이번 릴리즈에는 React Native 0.83과 React 19.2가 포함되어 있으며, 레거시 아키텍처 지원 종료, AI 도구 확장, 네이티브 UI 개선 등 굵직한 변화가 가득합니다.목차전환 기간 안내 (Expo Go)기본 템플릿 개편레거시 아키텍처 지원 종료Hermes v1 옵트인 지원Hermes 바이트코드 diff 업데이트AI 도구 확장Brownfield 지원 개선Expo Router 네이티브 기능Expo UI (Jetpack Compose / SwiftUI)패키지 버전 체계 변경Expo Modules CoreExpo CLIe..
React Native에서 Cheerio 사용하기: TypeScript 타입 선언 완벽 가이드React Native 프로젝트에서 HTML 파싱을 위해 react-native-cheerio를 사용하다 보면, TypeScript 컴파일 오류가 발생하는 경우가 있습니다. 이는 해당 패키지에 타입 선언이 없기 때문인데, 이 문제를 해결하는 방법을 상세히 알아보겠습니다.문제 상황react-native-cheerio 패키지는 JavaScript로만 작성되어 있어서:TypeScript 타입 선언이 없음@types/react-native-cheerio도 존재하지 않음따라서 TypeScript에서 사용 시 컴파일 오류 발생해결 방법: 직접 타입 선언 파일 생성1. 타입 선언 파일 생성프로젝트 루트에 types/react..
안드로이드에서는 실제 배포된 앱이 아니면 결제가 실제로 이루어지지 않습니다. 📱 안드로이드 IAP 테스트 환경 개발/디버그 모드에서는: - ✅ 결제 UI는 표시됨 - ✅ Google Play 결제 다이얼로그 나타남 - ❌ 실제 결제는 처리되지 않음 - ❌ 서버로 전송할 유효한 receipt 생성 안됨 실제 결제가 되는 경우: 1. Google Play Console에 APK 업로드 2. Internal Testing 또는 Closed Testing 트랙에 배포 3. 테스터 계정으로 Play Store에서 다운로드 4. 그 앱에서 결제 시도 테스트 방법: # 1. 릴리즈 빌드 생성 npx react-native run-android --variant=release # 2. AP..
==================== DEPRECATION NOTICE =====================Calling `pod install` directly is deprecated in React Nativebecause we are moving away from Cocoapods toward alternativesolutions to build the project.* If you are using Expo, please run:`npx expo run:ios`* If you are using the Community CLI, please run:`yarn ios`============================================================= [!] Do not..
⏺ 환경변수 파일들의 상세 설명 📊 환경변수 파일 우선순위 (높은 순서대로) 1. .env.{NODE_ENV}.local (최우선) 2. .env.local 3. .env.{NODE_ENV} 4. .env (기본값) 📁 각 파일의 역할과 사용 시나리오 🔹 .env (기본 환경변수) # 모든 환경에서 공통으로 사용되는 기본값 NODE_ENV=development API_BASE_URL=https://api.myapp.com APP_NAME=MyApp - 용도: 프로젝트 전체 기본 설정 - git: ❌ 커밋하지 않음 (보안 정보 포함 가능) - 예시: API URL, 앱 이름, 기본 포트 등 🔹 .env.local (개인 로컬 설정) # 개발자 A의 개인 설정 API_B..
https://expo.dev/changelog/sdk-54 https://react-native-community.github.io/upgrade-helper/?from=0.79.2&to=0.81.0 https://docs.expo.dev/bare/upgrade/?fromSdk=53&toSdk=54 오늘 Expo SDK 54의 출시를 발표합니다. SDK 54에는 React Native 0.81이 포함되어 있습니다. 베타 테스트에 도움을 주신 모든 분들께 감사드립니다. iOS용 사전 컴파일된 React NativeReact Native 0.81 및 Expo SDK 54부터 iOS용 React Native와 그 의존성들이 소스와 함께 사전 컴파일된 XCFramework 형태로 제공됩니다. [사전 컴파일..
https://reactnative.dev/blog/2025/04/08/react-native-0.79 https://react-native-community.github.io/upgrade-helper/?from=0.77.0&to=0.79.5 https://expo.dev/changelog/sdk-53 앱이 Android 15(API 수준 35) 이상을 타겟팅해야 함상태앱 업데이트를 출시할 수 없게 됩니다(60일 남음).배송된 날짜2025년 7월 2일기한2025년 8월 31일사용자에게 안전한 환경을 제공하기 위해 Google Play의 모든 앱은 대상 API 수준 요구사항을 충족해야 합니다.2025년 8월 31일부터 최신 Android 출시로부터 1년 이내의 대상 API 수준을 타겟팅하지 않는 경우..
Q. Nextjs 14 버전대에서 15 버전대로 업그레이드 되면서 변경된 사항들과 주의해야할 사항들을 알려주세요. 쉽고 자세하게 알려주셔야 합니다. 아마 React 도 18 버전대에서 19 버전대로 업그레이드 된 걸로 아는데요 그것 관련해서도 주의해야할 사항과 변경된 사항들이 무엇인지 쉽고 자세하게 알려주세요. 그리고 Nextjs 에 대해서 그냥 React 와 차이점과 무엇을 중점적으로 봐야하고 다가가야 하는지도 알려주세요. 제가 기존 react 와 react native 개발자인데 nextjs 는 서버사이드쪽 로직이 추가되는 것으로 알고 있는데 어떤 부분이 다른지 어떤 부분 어떤 것을 중점적으로 봐야 잘 적응하고 빠르게 nextjs 로 개발을 할 수 있을지가 알고 싶습니다. Next.js 14에서 ..
⏺ React의 use 함수 기본 개념 use는 React 18에서 소개된 새로운 Hook으로, Promise나 Context와 같은 리소스를 "소비(consume)"하는 데 사용됩니다. 쉽게 말해서 use는 "기다려야 하는 데이터"를 사용할 수 있게 해주는 도구입니다. 일상적인 비유로 이해하기 식당에서 음식을 주문했다고 생각해보세요: - await (일반 JavaScript): 음식이 나올 때까지 자리에 앉아 기다립니다. 다른 일은 전혀 할 수 없습니다. - then() (Promise 체이닝): "음식이 준비되면 저를 불러주세요"라고 말하고 다른 일을 하러 갑니다. - use (React): 음식이 준비될 때까지 다른 것들(UI의 다른 부분)을 먼저 보여주다가, 음식이 준비되면..
https://expo.dev/changelog/sdk-53-beta Expo SDK 53 베타 기간 정보베타 기간베타 기간은 오늘부터 약 2주간 지속됩니다.이 기간 동안 개발자들은 SDK를 테스트하고 새 릴리스가 자신의 시스템과 앱 구성에 문제를 일으키지 않는지 확인할 수 있습니다.베타 기간 동안 지속적으로 수정사항과 개선사항이 릴리스될 예정이며, 일부는 호환성이 깨지는 변경사항(breaking changes)이 포함될 수 있습니다.기술적 세부사항SDK 53 베타는 React Native 0.79.0과 React 19.0.0을 포함합니다.전체 릴리스 노트는 정식 출시 때까지 제공되지 않습니다.릴리스 범위와 호환성이 깨지는 변경사항에 대해 더 알고 싶으면 expo/expo 리포지토리의 변경 로그를 확인할..
https://reactnative.dev/blog/2025/01/21/version-0.77 0.77로 업그레이드기존 프로젝트의 React Native 버전 간 코드 변경 사항을 확인하려면 React Native Upgrade Helper를 사용하세요. 또한, 업그레이드 문서도 참고하시기 바랍니다.새로운 프로젝트 생성하려면:npx @react-native-community/cli@latest init MyProject --version latest 만약 Expo를 사용하고 있다면, React Native 0.77은 Expo SDK 52에서 지원됩니다 (Expo 프로젝트 내에서 React Native를 0.77.0으로 업데이트하는 방법에 대한 안내는 가까운 시일 내에 별도의 Expo 블로그 포스트에서..
git clone nodejs lts 관리자 모드 nodejs command corepack enable프로젝트 디렉토리 가서 yarn set version berry yarn gradle.propertiesorg.gradle.java.home=C:\\Users\\i5\\AppData\\Local\\Programs\\Android Studio\\jbr JAVA_HOMEC:\Users\i5\AppData\Local\Programs\Android Studio\jbr C:\Users\i5\IdeaProjects\MyProject\mobile\myproject\node_modules\react-native\ReactAndroid\cmake-utils fix build failure on windows in ..
https://reactnative.dev/blog/2024/10/23/the-new-architecture-is-herehttps://reactnative.dev/blog/2024/10/23/release-0.76-new-architecture 새로운 아키텍처 - 새로운 네이티브 모듈 => 네이티브 인터페이스에 직접 접근 가능한 네이티브 모듈, 네이티브 컴포넌트 지원 - 새로운 렌더러 - 이벤트 루프 => 웹과 더 유사하게 작동, - 브릿지 제거reactnative.directory새로운 피처 (리액트 18 완벽 지원, 동시성 피처, useLayoutEffect) - Transitions (Urgent updates, Transition updates) - Automtic Batching => conc..
Reusing Logic with Custom Hooks커스텀 훅으로 로직 재사용하기https://youtu.be/y78eaFcoh0g?list=PLjQV3hketAJkh6BEl0n4PDS_2fBd0cS9v https://react-ko.dev/learn/reusing-logic-with-custom-hooks https://react.dev/learn/reusing-logic-with-custom-hooks https://ko.react.dev/learn/reusing-logic-with-custom-hooks
create-expo 명령어 https://docs.expo.dev/more/create-expo/ Ex. 52beta 순수 expo 앱 (2024년 10월 30일 기준 최신 버전 sync with RN 0.76)yarn create expo-app --template default@betayarn create expo-app --template bare-minimum@beta https://reactnative.dev/docs/getting-started-without-a-framework여전히 expo framework 없이 react-native cli 를 사용해서 프로젝트를 생성하고 싶다면 다음과 같이 사용 npx @react-native-community/cli@latest init RN76Sa..
react-query 즉 Tan Query 를 통해 서버 상태를 선언적으로 관리하여 많은 문제 해결을 할 수 있습니다. 아래와 같은 시나리오를 가정해보죠. 현재는 리덕스 툴킷을 사용하여 프론트 측의 전역 상태에 스키마를 정의하고 정규화를 수행하면서 채팅앱을 구현하였습니다.로그인한 내가 있고 나는 프로필 이미지와 성별, 닉네임, 이미지들, 게시물들, 등등의 정보를 가집니다.일대일 채팅방은 채팅방 아이디, 마지막 메시지 타입, 마지막 메시지 내용, 채팅방 참여자 두명의 정보, 읽지 않은 갯수 등의 정보를 가집니다.채팅 메시지는 아이디와 타입, 내용, 보낸사람 아이디, 보낸사람 닉네임, 받는사람 아이디, 받는사람 닉네임, 채팅방 아이디 등의 정보를 가집니다.게시물은 아이디, 제목, 이미지, 작성자, 좋아요 ..
react-query 는 서버 리소스 기준으로 fetching 하고 상태관리 하는 라이브러리라고 보면 되겠죠? 간단하게 사용할 때는 유용할 거 같긴한데 redux, thunk 조합 보다 유연성은 떨어질 거 같은데 또 redux-persist 같은거 사용도 안 될 거 같고, 두개를 동시에도 많이 사용하시나요?저는 개인적으로 그냥 올라운드라 커버 가능한 redux, thunk 조합을 사용하는게 일관되고 유연성이 있어서 더 좋아보이긴 하는데요.. 그럼 redux, thunk 기본 조합에 캐싱? 그런 기능 필요시 그에 맞게 추가해야겠죠? react-query 는 그냥 그 자체만으로 따로 취급해야 하는거겠죠? redux, thunk 방식에 react-query 를 연동한다던가 하는 그런 성격의 것은 아닌거죠?만약..
리액트 props 의 형태에 관한 질문 리액트에서 props 형태는 props 에 a , b, c , d 라는 프로퍼티가 있을 때 가령 b 를 배열, c 를 객체, d 를 깊이가 2 나 3인 객체 라고 하면 d 와 같은 형태는 사용하지 않는게 좋나요? 아니면 2중 3중 깊이의 객체나 배열도 그냥 불변성으로 항상 새로운 걸 만들어 넣는다는 개념으로 사용해도 될까요? 왠만하면 1깊이의 객체까지 한정해서 사용하고 불가피하게 필요할 경우에만 2중 3중 깊이의 객체를 사용할까요? 서버에서 받은 리스트 데이터를 넘겨줄 경우 하위 컴포넌트로 리스트 아이템 컴포넌트가 있을 때 리스트 데이터가 항상 새로운 불변의 객체니깐 하위인 리스트 아이템은 항상 리렌더링 되겠죠? 루프를 돌면서 map 같이 그려주는 경우 key 를 ..
0.73 Hermes를 사용한 디버깅 개선, 안정적인 심볼릭 링크(symlink) 지원, 안드로이드 14 지원 및 새로운 실험적 기능을 추가합니다. 기존 디버깅 기능을 폐지하고, 새 아키텍처의 브릿지리스 모드(Bridgeless Mode)를 출시. 주요사항 디버깅 개선 Metro에서의 안정적인 심볼릭 링크 지원 안드로이드에서의 코틀린 템플릿 안드로이드 14 지원 새 아키텍처 업데이트 폐지된 디버깅 기능 디버깅 개선: Hermes에서의 콘솔 로그 기록: console.log() 로그가 이제 백그라운드에서 캡처됩니다. 앱 초기 로드 로그 관찰이 더 쉬워졌습니다. Flipper, Chrome DevTools 및 새로운 실험적 디버거와 호환됩니다. 업데이트된 디버깅 문서: 최신 정보로 새롭게 단장된 문서. 지원..
https://reactnative.dev/docs/animations#tracking-gestures https://m.blog.naver.com/armigar/221930494683 Animated.Value 를 useRef 사용하여 변수로 잡고 Animated.timing, Animated.spring ... 와 같은 것으로 값을 변경하여 해당 Animated.View 와 같은 것의 style 에 셋팅한 Animated.Value 값을 변화시켜 애니메이션을 통해 움직이게 할 수 있다. 그리고 또한 Animated.View 같은 것은 사용자 제스쳐에도 움직이는데 그것의 이벤트에 Animated.Value 를 셋팅해주면 또한 트래킹이 가능하다. 그래서 스크롤 뷰 페이저 같은걸 구현.