정처기 끝났으니까 다시 시작.... 카카오랑 조금 다르기도 하고 버전 올라가면서 조금 수정된 부분이 있어서 겨우겨우 성공.. 리액트는 많아도 리액트네이티브+스프링부트+네이버 로그인 참고 소스는 지인짜 찾기 힘들어서 겨우겨우 했다ㅠㅠ 1. ⭐️Frontend 1. 네이버 개발자센터 등록 설명 생략 2. 리액트네이티브 네이버 로그인 라이브러리 설치 npm install @react-native-seoul/naver-login --save // RN version >= 0.6.0부터 Auto Linking 적용, // ios 경우 추가적으로 Cocoapods 설치 필요 cd ios && pod install https://github.com/crossplatformkorea/react-native-naver-..

💡구현 목표 - 커스텀 공통 네비게이션헤더 컴포넌트를 생성하고 각 화면에서 타이틀, 아이콘이 다르게 렌더링되도록 하기 자식 컴포넌트로 아래 인자들을 prop로 전달하고 오른쪽 아이콘을 렌더링시킬지, 왼쪽 아이콘을 렌더링 시킬지 혹은 둘다 렌더링 시킬지 아래와 같이 조건문으로 분기 처리 전체 소스 import React from "react"; import {View, TouchableOpacity, StyleSheet} from "react-native"; import {useNavigation} from "@react-navigation/native"; import Icon from "react-native-vector-icons/Ionicons" import { defaultFontText as Te..

React Native FlatList 컴포넌트란 - 많은 양의 스크롤이 필요한 리스트 아이템을 보여줄 때 사용하는 리액트 네이티브 컴포넌트 - 데이터가 화면을 벗어났을 때 Scroll을 생성하여 벗어난 부분을 볼 수 있게 해주는 와 달리 FlatList는 더 많은 기능이 있다. - 데이터 길이가 가변적이고 데이터 양을 예측할 수 없는 경우 사용하기 적절하다. FlatList 사용법 - data, renderItem 두 가지 prop만 이해하면 된다. data는 리스트 소스를 담는 prop, renderItem은 data로 받은 소스들 그 각각의 item을 랜더시켜주는 콜백함수이다. - keyExtractor는 각각의 item에 고유의 키를 부여하는 역할을 수행한다. 나는 이번 프로젝트 UI중 여러 목록..

블로그에 글을 적지 않았던 동안 expo -> React Native 빌드 환경을 세팅하고 아예 리액트 네이티브로 개발할 준비를 했다. 리액트 네이티브 커스텀 폰트 적용 방법 리액트 네이티브에서 외부 폰트를 적용하려면 2가지 방법이 있는데 나는 직접 폰트 파일을 추가하고 설정하는 방법을 택했다. 1. 사용할 폰트 파일 다운 ios 폴더에 fonts 라는 폴더를 만들고 다운받은 ttf 파일을 넣어준다. 2. ios 폴더 경로에 [project name].xcodeproj 혹은 [project name].xcworkspace 를 통해 xcode를 실행한다. 3. 프로젝트 우클릭 후 Add Files to [프로젝트 이름] 을 클릭한다. 4. 아까 폰트 파일을 넣어두었던 ios/fonts 폴더를 선택하고 아래..

백엔드 작업이 미뤄지고 있어서 프론트를 맡은 나는 화면 먼저 만드는 중~~ 🎨화면 설계도 구현 목표 광고 배너 이미지 슬라이더 만들기 React-native-image-slider-box 라이브러리 사용 1. 라이브러리 설치 npm install react-native-image-slider-box 2. 아직 DB에 이미지 데이터가 없어서 샘플 이미지를 assets/ 경로에 저장 후 불러왔다. const images = [ require('../../assets/banner/banner_sample1.png'), require('../../assets/banner/banner_sample2.png'), require('../../assets/banner/banner_sample3.png'), ]; 3. ..

리액트 네이티브 프로젝트 진행 중 갑자기 마주한 에러... 해결하는 데 이틀이나 걸린 에러... 해결 방법은 간단했다. 💡에러 원인 에러에 대한 정보가 많이 안 나와서 정확하게 이해는 못했지만 스택오버플로우 번역기를 돌려가면서 확인한 결과,, 대충 리액트 버전이 올라가면서 PropType 모듈을 지원 안 한다는 것 같음. 💡해결 방법 그래서 새로운 prop-types 모듈을 설치하고 node_modules/react-native/index.js 경로에 있는 파일 내용을 바꿔주어야 한다. 1. 모듈 설치 npm install deprecated-react-native-prop-types 2. node_modules/react-native/index.js 내용 수정 기존 코드 내용 // Deprecated ..

리액트 네이티브 카카오 로그인 라이브러리를 사용하려면 sdk가 필요한데 내가 개발하고 있는 Expo 환경에서는 이 방식이 불가능하다. 대신 webview 라이브러리를 사용해서 소셜 로그인 구현이 가능하다. 📌React-native-webview npm install react-native-webview //웹뷰 설치 리액트 네이티브 웹뷰는 말 그대로 web 화면을 띄우는 데 사용하는 라이브러리이다. 웹뷰를 사용해서 소셜 로그인을 구현할 때에는 웹 개발 시 REST API로 동작했던 방식 그대로 리액트 네이티브에 적용해 주면 된다. 나는 이번 프로젝트에서 카카오 / 네이버 / 깃허브 로그인을 사용하기로 했다. 1. 카카오 앱키 발급 카카오 개발자 센터에서 애플리케이션을 등록하고 이중 REST API 키를 ..

리액트 네이티브(React-Native) 앱 만들기 프로젝트 🛠️개발 환경 프론트는 RN , 백은 Spring으로 구현 예정 FrontEnd BackEnd Tool 📁프로젝트 구조 잡기 일단은 구조만... 개발하면서 수정 예정 src ├── App.js ├── Theme.js // 프로젝트에서 사용할 색상 정의 ├── components // 컴포넌트 파일 관리 │ ├── Input.js │ ├── Button.js │ ├── CommentForm.js // 댓글 입력 form │ ├── CommentList.js // 댓글 리스트 │ ├── CommentItem.js // 댓글 한개 │ ├── CustomFont.js //폰트 설정 │ ├── Detail.js // 스터디 세부 정보 │ ├── Stud..