리액트 네이티브 카카오 로그인 라이브러리를 사용하려면 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..
1. 채널(채팅방) 생성 파이어베이스 데이터베이스 -서버를 구축하지 않고 파이어베이스의 데이터베이스 활용. -파이어베이스에서 제공하는 파이어스토어는 NoSQL 문서 중심 데이터베이스로써, SQL 데이터베이스와 달리 테이블이나 행이 없고 컬렉션(collections), 문서(document), 필드(field)로 구성됨. -컬렉션과 문서는 항상 유일한 ID를 가지고 있어야함. 이번 프로젝트에서는 channels라는 ID를 가진 하나의 컬렉션을 만들고 생성되는 채팅방을 channels 컬렉션에 문서로 저장 예정. 파이어베이스 데이터베이스 규칙 수정 ChannelCreation.js KeyboardAwareScrollView 컴포넌트 : Input 컴포넌트를 사용할 때 자동으로 스크롤 위치를 이동하여 키보드가..
대부분의 애플리케이션은 데이터에 접근할 수 있는 유효한 사용자라는 것을 증명해야 하며, 인증 후 서비스를 이용할 수 있는 화면이 렌더링, 로그아웃 등으로 인증 상태를 해제하면 다시 인증을 위한 화면으로 이동함. 1. MainStack 내비게이션 const MainStack = () => { const theme = useContext(ThemeContext); return( ); }; export default MainStack; MainStack 내비게이션은 채널 목록 화면, 프로필 화면으로 구성된 MainTab 내비게이션을 첫 번째 화면으로 가짐. 실행 화면 2. MainTab 내비게이션 MainTab 내비게이션을 구성하는 채널 목록 화면 ChannelList.js, 프로필 화면 Profile.js ..
💡구현 목표 로그인/회원가입 : 이메일, 비밀번호를 이용한 로그인 및 회원가입 프로필 : 내 정보 확인 및 변경 채널 생성, 목록 조회 채널 : 실시간으로 메시지를 주고받는 독립된 공간 1. 프로젝트 준비 프로젝트 생성 expo init react-native-simple-chat//프로젝트 생성 npm install @react-navigation/native//리액트 내비게이션 설치 설치한 라이브러리 expo-image-picker : 기기 사진, 영상을 가져오는 기능 moment : 시간을 다양한 형태로 변경하는 등 시간과 관련된 많은 기능 제공 react-native-keyboard-aware-scroll-view : 키보드가 화면을 가리며 생기는 불편함 해결 react-native-gifted-..
일반적으로 모바일 애플리케이션은 하나의 화면이 아닌, 다양한 화면이 상황에 맞게 전환되면서 나타남. => 내비게이션(navigation)은 모바일 애플리케이션에서 가장 중요한 기능 중 하나임!! => 리액트 네이티브에서는 내비게이션을 지원하지 않는다. 외부 라이브러리를 이용해야 한다. 🤍리액트 내비게이션 리액트 네이티브 애플리케이션의 내비게이션을 쉽고 간단하게 관리할 수 있도록 도와줌 지원하는 내비게이션 종류 : 스택(stack) 내비게이션, 탭(tab) 내비게이션, 드로어(drawer) 내비게이션 구조 : NavigationContainer, Navigator, Screen 컴포넌트 Screen 컴포넌트 : 화면으로 사용되는 컴포넌트로, name과 component 속성을 지정해야함. name은 화면 ..
🤍Context API란 데이터를 전역적으로 관리하고 사용할 수 있도록 하는 기능 🤍전역 상태 관리 일반적인 리액트 네이티브(React-Native) 애플리케이션의 데이터는 부모 컴포넌트에서 자식 컴포넌트로 전달됨. 예를 들어, 어떤 데이터를 App 컴포넌트에서 관리할 경우, App 컴포넌트로부터 데이터를 필요로 하는 컴포넌트까지 props를 통해 값을 전달해 사용함. -> 하지만 props를 사용하는 방법은 번거로움. (관리하는 상태가 추가, 변경될 경우 과정에 속한 모든 컴포넌트를 찾아 수정해야함.) 이때, Context API를 생성하면 중간 과정에 있는 컴포넌트들을 거치지 않고 한 번에 원하는 데이터를 바로 받아와서 사용할 수 있다. 🤍Context API 실습 expo init react-nat..
🤍리액트 네이티브 훅(React Native Hooks)이란? 리액트 16.8 버전에서 새롭게 추가된 기능 이전에는 컴포넌트 상태 관리, 생명 주기에 따른 특정 작업 시 클래스형 컴포넌트를 사용해야 했음. Hooks는 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 연동할 수 있게 해주는 함수 Hooks 목적 useState 상태 유지, 변경 useEffect 이벤트 처리 useContext 정보 공유 useReducer 상태 유지 및 변경(Redux) useCallback 콜백 함수 캐시 useMemo 데이터, 값 캐시 useRef 특정 컴포넌트 선택 🤍리액트 네이티브 훅(React Native Hooks) 실습 expo init react-native-ho..