React Native/React Native 강좌 (8) 썸네일형 리스트형 React Native 강좌 - 6강 카카오 로그인 실습하기 (4) 이제 드디어 화면을 구성해 볼 시간입니다!! 화면을 구성하기 위해 전 시간 생성했던 src/scene 폴더로 이동합니다. auth 폴더를 새로 생성합니다. index.ts 파일을 안에 새로 생성합니다 export { LoadingScreen } from './loading.component'; 이는 C언어의 헤더파일 같은 역할을 수행합니다. 이번에는 같은 폴더 내 loading.component.tsx 파일을 생성합니다. import React, {useState} from 'react'; import { ImageBackground, StyleSheet, View, Linking, } from 'react-native'; import { Input, InputElement, InputProps, But.. React Native 강좌 - 5강 카카오 로그인 실습하기 (3) 이제 실제 화면들을 구성해 볼 시간입니다. 먼저 관리를 용이하게 하기 위해 폴더를 여러개 생성합니다! 저는 src 폴더 안에 파일마다 용도를 나눠서 저장하도록 하겠습니다 먼저 프로젝트 폴더에 src 폴더를 생성합니다. 그리고 src 폴더 안에 각각 폴더들을 생성합니다. assets 폴더 : 앱에 사용할 이미지 파일등을 저장하는 폴더 component 폴더 : 각종 컴포넌트를 저장하는 폴더 navigation 폴더 : react-navigation 에서 사용할 네비게이터 파일들을 저장 scene : 화면을 표현하는 파일 저장 각각 네개의 폴더를 새로 생성합니다. 그리고 새로운 파일을 src 폴더에 바로 생성합니다. app.component.tsx import React from 'react'; import.. React Native 강좌 - 4강 카카오 로그인 실습하기 (2) 카카오 로그인을 하기 전에 먼저 두가지의 모듈에 대해서 소개하려고 합니다 첫번째로 React-native 에서 화면전환을 할 수 있게 도와주는 모듈인 React-navigation 입니다. https://reactnavigation.org/ React Navigation | React Navigation Description will go into a meta tag in reactnavigation.org 위 사이트에서 공식문서와 실제 사용방법에 대해서 알 수 있습니다. 이번 포스트에서는 제가 사용할 기능들에 대해서 간단히 설명해 드릴겁니다. 두번째는 UI Kitten 입니다. https://akveo.github.io/react-native-ui-kitten/ UI Kitten - React Nati.. React Native 강좌 - 외전 남의 프로젝트 실행해 보기 초보분들이라면 먼저 다른 프로젝트를 실행해보는것도 좋은 방법입니다. 제가 만들다 만 습작같은 것을 소개해보겠습니다. Typescript를 사용했고 Kitten UI와 React Navigation을 사용했습니다. Git 저장소 주소를 올려드립니다. https://github.com/rhqjatjr0093/ScreenGolf-Owner- rhqjatjr0093/ScreenGolf-Owner- 스크린 골프 앱 . Contribute to rhqjatjr0093/ScreenGolf-Owner- development by creating an account on GitHub. github.com git 이용법은 다들 아시리라고 생각하고 넘어가겠습니다. 먼저 한글이 포함되지 않은 경로에 파일을 다운로드 혹은 cl.. React Native 강좌 - 3강 카카오 로그인 실습하기 (1) 지난시간 저희는 카카오 아이디를 이용하여 API 를 사용하기 위한 설정을 마무리 했습니다. 눈여겨 보신 분들은 눈치를 채셨겠지만 카카오 API 설정문서는 React Native에 대한 설명문서를 제공하지 않고 단지 자바스크립트에 대한 문서와 SDK만을 제공하고 있는데요. React Native가 JS 파일로 작동하지만 이러한 방식으로 는 어플리케이션에 카카오 API를 사용할 수 없습니다. 따라서 이번 시간에는 추가적인 npm 모듈을 사용하는 방법 그 중에서도 npm 모듈 설치 후 링크 이외에 설정이 필요한 모듈에 대해서 설명하려고 합니다. React native 가 0.60 버전으로 업데이트되면서 과거 manually linking 하는 과정은 모두 필요 없어졌습니다. 하지만 이런 수동 과정이 없어졌다고.. React Native 강좌 - 2강 카카오 API 설정하기 서론에서 이야기 했지만 사설 로그인 서버를 운용하는것이 최선의 방식입니다. 하지만 저희는 초보이고 서버에 대해서 모르기 때문에 카카오에서 제공하는 API를 사용하도록 하겠습니다. 카카오 API를 사용하기 위해선 카카오 계정이 필요합니다. 이는 대부분 유저 분들이 갖고 계신 걸로 알고 진행하도록 하겠습니다 https://developers.kakao.com/features/kakao Kakao Developers_ 더 나은 세상을 꿈꾸고 그것을 현실로 만드는 이를 위하여 카카오에서 앱 개발 플랫폼 서비스를 시작합니다. developers.kakao.com 위 카카오 API 사이트로 이동하여 로그인 합니다. 로그인 하게 되면 내 애플리케이션이라는 항목을 확인하실 수 있습니다 (저는 이미 두개를 만들어서 존재.. React Native 강좌 - 1강 실행환경 조성하기 안녕하세요 대부분 잘 알고 계시는 React Native 강좌를 시작해보려고 합니다. 대부분 인터넷에 있는 글은 영상을 기반으로 해서 짧은 시간에 배워보려고 하시는 분들께 정보를 제공하고자 합니다 먼저 실행 환경을 조성해 보려고 합니다 1) 실행 환경 - OS : Window 10 - React Native 환경 2) 설치과정 2-1) Choco 패키지 관리자 윈도우에서는 리눅스나 우분투와 다르게 apt 같은 패키지 관리자가 존재하지 않습니다. 따라서 다음 단계에서 Python, Node.js 등을 편리하게 설치하기 위해서는 Choco 패키지 관리자를 설치해야 편리하게 진행 할 수 있습니다 Choco : https://chocolatey.org/ Chocolatey - The package manager.. React Native 강좌 - 시작하기 React Native를 공부하면서 다른 분들과 공유하기 위해 강좌를 쓰려고 합니다. 기본적인 지식을 가지고 있는 분들이 읽으면 좋을 것 같고 다른 강좌와 다른 점을 ct Native를 공부하면서 다른 분들과 공유하기 위해 강좌를 쓰려고 합니다. 기본적인 지식을 가지고 있는 분들이 읽으면 좋을 것 같고 다른 강좌와 다른점은 화면 순서대로 진행 해 보려고 합니다 로그인 화면 - 메인화면 - 알림, 푸쉬알림 등의 순서로 진행 해 보려고 하며 동시에 Django 서버 강좌도 병행하여 진행 해보려고 하니 많은 도움이 되었으면 좋겠습니다. 이전 1 다음
