React Native6 React Native 카카오 로그인 Android 전 포스팅인 카카오 로그인 iOS 편에서 기본 설정은 마쳤으므로 프로젝트 생성 및 라이브러리 설치는 생략되었습니다. 1. 카카오 플랫폼 등록 https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 1-1. 패키지명 등록 프로젝트/android/app/src/main/java/com/프로젝트명/MainActivity.kt 파일 안의 1번째줄 > package com.프로젝트명 패키지명 : com~ 등록 프로젝트/android/app/src/main/AndroidManifest.xml 파일의 use-pe.. 2024. 4. 4. React Native 카카오 로그인 iOS 참고한 라이브러리 : https://github.com/crossplatformkorea/react-native-kakao-login GitHub - crossplatformkorea/react-native-kakao-login: react-native native module for Kakao sign in. react-native native module for Kakao sign in. Contribute to crossplatformkorea/react-native-kakao-login development by creating an account on GitHub. github.com 1. 리액트 네이티브 프로젝트 생성 npx react-native init 프로젝트명 2. 앱 실행 npx re.. 2024. 4. 3. [React Native] ScrollView VS FlatList ScrollView {courseGoals.map((goal) => {goal} )} ScrollView는 전체 UI가 렌더링 될 때마다 안에 있는 항목 전부 렌더링 한다. 목록이 일정 화면을 넘어가 길어질 때, 화면에 보이지 않는 부분도 화면 뒤에서 계속 렌더링 된다. 목록이 길다면, 수천개, 수만개의 목록이 있다면? 성능 문제가 생길 수 밖에 없다. 그래서 분량이 제한된 콘텐츠에는 적합하지만, 길어질 수 있는 동적 목록에는 부적합하다. 사용할 수는 있지만, 동적 목록 리스트에는 성능 저하를 피하기 위해 잘 안 씀 이럴 때 ScrollView 대신에 사용할 수 있는 것이 FlatList이다. FlatList 스크롤을 실현하는 컴포넌트 보이는 항목만 렌더링되며, 화면 밖의 항목은 사용자가 스크롤을 해야 .. 2024. 1. 16. [React Native] IOS & Android 스타일링 차이점, 상속여부 {goal} 위의 코드에 goalItem 스타일을 적용해보았을 때, 안드로이드, ios를 비교해보면 안드로이드에는 적용이 되었지만 ios는 적용이 되지 않은 것을 볼 수 있다. ios에는 테두리를 둥글게 하는 속성이 적용이 되지 않았다. ios에서 기본 네이티브 태그에 둥근 모서리 스타일을 지원하지 않는 것이다. 이러한 경우, View 태그로 태그를 감싸서 View 태그에 지정해주면 된다. {goal} Text 태그에 바로 스타일을 지정하지 않고 View 태그를 감싼 후 View 태그에 스타일을 지정해주었더니 ios에도 둥근 테두리가 적용이 되었다. 하지만 뭔가 다른 점은 .. 이번에는 텍스트 색상이 적용되지 않았다. 그 이유는 웹용 css와 달리 스타일이 연속적으로 적용되지 않기 때문이다. 연속적인 속.. 2024. 1. 15. [React Native] 기본 핵심 컴포넌트, 스타일링 적용 방법, FlexBox 리액트와 리액트 네이티브는 비슷한 듯 다르다. 핵심적으로 알아야할 컴포넌트들 비교하고 스타일링 적용하는 방법을 알아보자 VS 리액트의 태그, 리액트 네이티브의 태그의 용도는 같다. 하지만 주의해야할 점은 안녕하세요 div 태그 내 텍스트 안녕하세요 >> 가능 안녕하세용 View 태그 내 텍스트 안녕하세용 >> 불가능 View 콘텐츠를 담는 상자나 컨테이너 구축에 사용됨. 다른 컴포넌트들을 담을 순 있지만 단순 텍스트를 담을 수 없다. 태그로 감싸주면 활용 가능. View : 컴포넌트를 담고 배치하는 컴포넌트 Text : 텍스트를 표시 Button : 버튼 등 다양한 핵심 컴포넌트들은 공식 홈페이지에서 찾아 활용하는 것을 추천 https://reactnative.dev/docs/components-and-.. 2024. 1. 14. [React Native] 프로젝트 초기 세팅 초기세팅은 React와 React Native가 많이 다르지 않다. React Native 시작하기 겁먹어서 계속 미루고 있었는데 왜 그랬나 싶을 정도로 비슷하고 쉽다. 윈도우 초기세팅 입니다 ~! Node.js 설치 https://nodejs.org/en Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 최신 버전 말고 안정적인 버전으로 설치하는 것을 추천한다. 나는 이미 깔려 있기에 확인만 하고 패스! npx create-expo-app 프로젝트명 https://reactnative.dev/docs/environment-setup Setting up the development envir.. 2024. 1. 13. 이전 1 다음
