ReactNative 태그의 최신글

React Native

React Native 카카오 로그인(iOS)

React Native 카카오 로그인 적용하기 kakao developers 애플리케이션 등록하기 🟡 내 애플리케이션 추가하기 kakao developers 홈페이지에 들어가주세요. 회원가입을 완료 한 후 내 애플리케이션 > 애플리케이션 추가하기 버튼을 눌러줍니다. 애플리케이션 등록을 완료해줍니다. 🟡 Bundle Identifier 설정하기 XCode에 설정되어 있는 Bundle Identifier를 확인해주세요. 등록한 애플리케이션에 들어가 내 애플리케이션 > 앱 설정 > 플랫폼 탭에 들어갑니다. 번들 ID를 Bundle Identifier와 똑같이 설정해주세요. 🟡 네이티브 앱 키 발급받기 내 애플리케이션 > 앱 설정 > 앱 키 탭에 들어갑니다. info.plist에 활용됩니다. 네이티브 앱 키를 복사해주세요. 🟡 동의항목 설정하기 내 애플리케이션 > 제품 설정 > 카카오 로그인 > 동의 항목 탭에 들어갑니다. 사용하려는 개인정보의 상태를 사용으로 바꿔주세요. 라이브러리 설치하기 react-native-kakao-login 라이브러리를 사용했습니다. info.plist 수정하기 ios/프로젝트명/info.plist 파일에 아래의 코드를 추가해주세요. 네이티브 앱 키는 1번에서 복사한 키로 대체하세요. AppDelegate.mm 파일 수정하기 ios/AppDelegate.mm 파일에 아래의 코드를 추가해주세요. SwiftBridge 파일 생성하기 XCode에서 ios/프로젝트.xcworkspace 파일을 열어주세요. SwiftBridge.swift 파일을 생성합니다. ⭐️ Swift Bridging Header를 추가하겠냐는 문구가 나오면 꼭 확인을 눌러줍니다. SwiftBridge, [프로젝트명]-Bridging-Header.h 두 개의 파일이 생성됩니다. 예제 코드

2024년 08월 10일 19:08

React Native

React Native 시작하기(iOS)

프로젝트 생성부터 기본 설정까지~! 프로젝트 생성하기 터미널에서 프로젝트를 생성하고자 하는 디렉토리로 들어갑니다. 터미널에서 아래의 명령어를 입력해줍니다. 설치 중간에 CocoaPods를 설치할 것이냐는 질문이 나오는데 iOS를 사용할 예정이라면 꼭 설치해줍니다. 프로젝트 실행하기 프로젝트가 생성되었습니다. VSCode에서 프로젝트에 들어가주세요. 🟢 애뮬레이터에서 실행하기 터미널 창에 아래의 명령어를 입력해 실행해줍니다. 저는 특정 기기의 애뮬레이터를 사용할 예정이기 때문에 아래의 명령어를 입력해 실행합니다. 🟢 디바이스에서 실행하기 디바이스에서 실행하려면 몇 가지 설정을 거쳐야합니다. 먼저 애플 개발자 계정을 생성해주세요. 애플 개발자 계정 생성하기 XCode에서 프로젝트.xcworkspace 파일을 실행합니다. 프로젝트의 Signing & Capability 탭에서 Team 항목 옆에 Add Account... 를 눌러 개발자 계정을 추가합니다. 다음으로 Bundle Identifier 항목의 example을 unique한 값으로 변경해주세요. 설정이 완료되었다면 맥에 유선으로 디바이스를 연결한 후 프로젝트 터미널에서 아래의 명령어를 입력해주세요. 디바이스에서 설정 -> 일반 -> VPN 및 기기 관리 -> 신뢰할 수 있는 개발자 설정 위의 단계를 완료하면 앱이 성공적으로 실행됩니다. 프로젝트 실행 중 만난 에러들 🔴 Could not connect to development server React Native 개발 서버에 연결할 수 없다는 내용입니다. 프로젝트 터미널에 아래의 명령어를 입력해 개발 서버를 다시 실행시켜주세요. 🔴 address already in use :::8081. 이미 8081 포트에 다른 개발 서버가 실행중이라는 것을 뜻합니다. 터미널에 아래의 명령어를 입력해 실행중인 프로세스를 중단시켜주세요.

2024년 08월 08일 18:06

React Native

React Native HealthKit 데이터 불러오기

사용한 라이브러리: react-native-healthkit react native에서 iOS HealthKit 데이터를 불러왔습니다. 🔵 Xcode 설정 먼저 프로젝트의 xcworkspace를 xcode에서 열고 프로젝트의 Signing&Capability 탭에 들어갑니다. Capability 버튼을 눌러줍니다 HealthKit을 추가해줍니다. 🔵 info.plist 설정 프로젝트의 ios/[project name]/info.plist 파일에 들어갑니다. 최상단의 <dict> 태그 안에 필요한 권한들을 적어줍니다. 🔵 라이브러리 설치 프로젝트 터미널에 라이브러리를 설치해줍니다. 🔵 코드 작성 HealthKit 중 필요한 정보들을 요청하고, 불러옵니다. 🔵 권한 허용 함수 실행 시 다음과 같이 접근 권한이 나타납니다.

2024년 08월 07일 15:08

React Native

React Native Xcode 실행시 Hot Reload 방법

내가 바보같이 iOS, macOS를 베타버전으로 업그레이드 하는 바람에 여러 문제로 RN 프로젝트가 디바이스에서 실행이 안되는 이슈 발생 Xcode에서 프로젝트의 xcworkproject 파일을 실행하면 디바이스에서 실행이 된다. 하지만 Hot Reload가 되지 않는 문제가 있었는데, 여러 설정을 변경해 Hot Reload가 가능하게 설정하였다. 🔵 React Native 디버거 설정 VSCode에서 React Native Tools 확장을 설치한다. VSCode의 명령 팔레트(Shift + Cmd + P) 에서 "React Native: Start Packager"를 실행하여 Metro 번들러를 시작한다. 🔵 디버그 설정 파일 추가 프로젝트 루트에 .vscode/launch.json 파일을 생성하고 다음 내용을 추가한다. 🔵 launchReactNative.js 파일 생성 .vscode 디렉토리에 luanchReactNative.js 파일을 생성하고 다음 내용을 추가한다. 🔵 디바이스에서 Reload 실행 반드시 디바이스와 맥이 동일한 네트워크를 공유해야 합니다. 이제 Hot Reload 가능!

2024년 08월 07일 09:36