react native 리액트 네이티브 스터디

react native는

react로 android와 ios로 동시에 native코드를 만들어주는 언어를 말한다

기존에 webview형식의 아이오닉과 phonegap과 비교되는 부분이다

개발환경

-nodejs

-npm을 통해서 설치를 하기 때문에 nodejs 설치를 기본적으로 해야 한다

https://facebook.github.io/react-native/docs/getting-started.html

리액트 네이티브 관련 정리 사이트(영문)

getting started로 테스트 진행하면 됨

getting started 방식은 두가지

1. expo를 이용해서 하는 방식(이 포스팅에서 활용한 방식)

2. 네이티브 code로 하는방식(이 포스팅에 기록하지 않음)

create-react-native-app 으로 프로젝트 생성시에 

npm-cli.js관련 오류나면

npm update후에 다시 진행하면 정상적으로 됨

만들어진 프로젝트에서 npm start를 하면 QR code가 뜨고 되고

expo.io에서 계정 생성후 스마트폰에서 expo관련 앱을 설치하고 앱에서 QR code를 찍으면 해당 페이지가 뜨게 된다

expo의 역할

-js파일로 빌드(리액트 네이티브 코드를 js파일로 변환)

-js파일을 웹페이지에 보여주는 역할(웹서버 역할)

리액트 네이티브 앱을 만들기 위해서 알아야 할 점

-반응형 웹관련

-css3 flex box layout로 검색해서 flex layout에 대해서 알아야 한다

정식명칭 css3 flexible box layout 

한글번역

:https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Flexbox%EC%9D%98_%EA%B8%B0%EB%B3%B8_%EA%B0%9C%EB%85%90

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout

영어

:https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox

https://developer.mozilla.org/en-US/docs/Web/CSS/flex

*****쉽게 리액트 네이트브 앱을 실행할수 있는 방법(웹IDE로 리액티 네이티브 앱을 만들어 보기)

https://snack.expo.io에서 접속하면 웹 IDE가 생성되고 

run on device를 클릭하면 QR code가 뜨고

스마트폰에서 expo앱에서 QR code를 찍으면 실행된다

https://expo.io/snacks/@kimjaeeon

expo -> device 

https://docs.expo.io/versions/v27.0.0/introduction/project-lifecycle

무료 강의(영어)

https://academy.nomadcoders.co/courses/

https://programmers.co.kr/learn

리액트 네이티브 구조(한글 초보자용)

https://g6ling.gitbooks.io/react-native-tutorial-korean/content/chapter1.html

스위퍼 샘플소스

https://github.com/leecade/react-native-swiper

리액트 네이티브 한글 번역

https://seongbin9786.github.io/2018/02/10/%EB%A6%AC%EC%95%A1%ED%8A%B8%20%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0%207%20(SPA%201)/

리액트 네이티브 코드 재사용법

https://github.com/seongbin9786/reusable-react-code-examples

리액트 네이티브 기본 설명

https://github.com/seongbin9786/react-basic

react native를 사용한 초간단 커뮤니티 앱 제작

https://www.slideshare.net/taggon/react-native

https://velopert.com/3631

리액트 라이프사이클

react native app.js components 관련으로 구글 검색

부트스트랩처럼 UI객체들을 쉽게 편하게 쓸수 있는 모음

https://react-native-training.github.io/react-native-elements/docs/card.html

라이더스앱 IOS 개발기

http://woowabros.github.io/experience/2018/05/19/build-app-by-react-native.html

리액트 패턴 정리사이트

https://reactpatterns.com/

import, export 관련 내용

https://github.com/seongbin9786/es6-modules

리덕스 관련 정리

https://docs.google.com/document/d/1XSKQ7F9KtgVbJj3YM9KhieHLKrS92hD79pixNJM0mR8/edit?usp=sharing

IOS스크린샷 생성툴

https://app.shotbot.io/#/project

naivecoin 변역사이트

https://newpouy.github.io/

goalPlan 1인개발 관련 히스토리 정리

https://m.blog.naver.com/PostView.nhn?blogId=hidejj79&logNo=221256652881&proxyReferer=http%3A%2F%2Fm.facebook.com

리액트에서 주로 사용하는 디자인 패턴

https://krasimir.gitbooks.io/react-in-patterns/content/

React.js관련

https://velopert.com/reactjs-tutorials

세미나 정리

https://trello.com/b/XNk2ruv5/%EC%A2%8B%EC%95%98%EC%9D%84%EA%B1%B8-%EB%A6%AC%EC%95%A1%ED%8A%B8