전체태그 보기

#react native (32개의 포스트)

qksud14
React Native Navigation vs React Navigation React Native에서는 React처럼 Route를 활용해서 화면을 이동시켜주는게 아니라 Navigation을 사용해서 화면을 전환시켜준다. 많이 쓰이는 라이브러리는 React Native Navigation(RNN) 과 React Navigation(RN) 두 가지가 있다...
max9106
push notification 스크린샷 2019-09-30 오후 11.17.39.png 로컬 서버를 인터넷에 노출시키는 역할인 ngrok를 설치해준다. npm i -g ngrok push notification 서버를 위해 express, es6 문법을 서버에서 사용하기 위해 esm push 알람을 진행하기 위한 expo-server-s...
[공개SW컨트리뷰톤] 3주차 회고
sonypark

[공개SW컨트리뷰톤] 3주차 회고

2019년 9월 29일4개의 댓글
공개SW 컨트리뷰톤 회고 공개SW 컨트리뷰톤을 시작한 지 3주가 지났다. 그 동안 컨트리뷰톤을 진행하며 배운점과 느낀점을 정리해보았다. 지원 동기 올해 6월에 진행된 '2019 오픈소스 개발자 이야기' 행사에 참석한 후 '공개SW 컨트리뷰톤'에 대해 알게되었다. 오픈 소스에 기여하고 싶은 마음을 갖고 있었는데 '공개SW 컨트리뷰톤'이 오픈 ...
max9106
WebView란 쉽게 말해서 이미 존재하는 웹 페이지를 앱으로 옮기는 것이다. WebView 사용전 준비 WebView를 사용하기 위해서는 WebView를 import해주어야한다. 원래는 리액트 네이티브 core에 있었지만, 리액트 네이티브가 core에서 빼버렸기 때문에 설치를 해주어야한다. 프로젝트 디렉토리로 가서 아래의 명령어 두 가지를 ...
max9106
Style 리액트 네이티브에서 스타일을 적용할때는 자바스크립트를 사용한다. 모든 core 컴포넌트는 style이라는 prop를 가지고 있다. 작성방법은 css와 유사하며 camel case로 작성한다(ex: backgroundColor) 배열로 스타일을 적용해 줄 수 도 있다. LotsOfStyles라는 컴포넌트의 Text 컴포넌트에서 스타일을 적용하...
max9106
State란? 데이터를 컨트롤하는 방법에는 두 가지가 있다. 하나는 앞서 말한 props이고 다른 하나가 state이다. prop와 달리 state는 변화하는 데이터를 다룰때 사용해야 한다. State 사용방법 생성자에 state를 초기화 해주고, 변화가 생길때마다, setState를 불러 업데이트 해주어야한다. props 와 State...
max9106
Props란? properties의 약어이며, 컴포넌트를 생성할 때, 파라미터를 받아서 생성하는 경우가 많은데, 이렇게 받아온 데이터를 사용하는 것을 말한다. 변동되지 않는 데이터를 다룰 때 사용한다. 부모에 의해 설정되며, 컴포넌트가 살아있는 동안만 유지된다. 리액트 네이티브 제공 컴포넌트 기본 리액트 네이티브 컴포넌트인 image로 예시를 들...
max9106
Hello world로 리액트 네이티브 맛보기 기본적인 구성을 살펴보기 위하여, Hello world를 띄워보도록 하겠다. 부분을 살펴보겠다. 이것은 JSX 형식이다. 자바스크립트 내에 xml을 포함시키는 형식이다. 일반적인 web에서의 div span 대신 리액트 네이티브에서는 View Text 를 사용한다. Text는 텍스트를 built-in 하는...
max9106
시뮬레이터에서 관리자 모드 - cmd + D (ios) 나 cmd + M (android) 키를 눌러주면 관리자 모드로 접속할 수 있다. 실제 휴대폰에서 관리자 모드 - 휴대폰을 흔들어 주면 관리자 모드로 접속할 수 있다. 스크린샷 2019-09-17 오전 2.04.16.png Reloading 코드에 변화가 생겼을 시...
max9106
시뮬레이터에서 관리자 모드 - 최신 버전의 Xcode가 있어야한다. - ctrl + cmd + z나 cmd + d 키를 눌러주면 관리자 모드로 들어간다.(관리자 모드에서 디버깅에 유용한 기능들을 제공해준다.) 실제 휴대폰에서 관리자 모드 - 폰을 흔들어주면 관리자 모드로 들어간다. 개발 중 red box 에러 expo를 통해 reac...
max9106
React Native workflow 리액트 네이티브 소스 - Page render - 리액트 컴포넌트 DOM에 마운팅 - 브릿지 - 리액트 컴포넌트 랜더링(ios인 경우 Objc api / android인 경우 java api) - 해당 플랫폼의 process React.js인 경우, 브라우저 DOM에 랜더링하지만, React Native는 브릿지를 ...
max9106
Expo tool을 사용한 두 가지 workflow 스크린샷 2019-09-13 오전 11.52.22.png Managed workflow managed 방식은 expo가 앱을 만들 때, 복잡한 과정들을 expo가 관리해주는 방식이다. X-code가 Android Studio를 사용할 필요가 없다. App.json을 통해 자바...
geonhwi

IMMERSIVE #19 - React Native

2019년 9월 14일0개의 댓글
React-Native / Nomad Coder
max9106
리액트 네이티브 개발 방법 리액트 네이티브는 아래와 같이 2가지 개발 방법이있다. 1. Expo CLI 2. React Native CLI React Native CLI란? 직접 네이티브로 어플리케이션을 개발할 수 있다. native file들을 직접 다룰 수 있다. React Native CLI의 장점 - 필요한 기능이 있는 경우, ...
max9106
리액트 네이티브 개발 방법 리액트 네이티브는 아래와 같이 2가지 개발 방법이있다. 1. Expo CLI 2. React Native CLI Expo란? 쉽게 말해, 리엑트 네이티브로 하는 개발을 쉽게 할 수 있게 해주는 것이다. 리엑트 네이티브를 위한 set-up이 미리 구성되어있다. native 파일들을 사용자에게서 숨겨놓고, 알아서 관리해주는...
max9106
리액트 네이티브란? 리액트의 접근방법을 모바일로 확장한 Facebook의 오픈소스 프로젝트이다. javascript로 코딩한 React의 컴포넌트는 React Native 플랫폼을 거쳐 IOS, Android Native 코드로 각각 변환된다. react native.png 리액트 네이티브가 하는 일은 자바스크립트를 사용하여 ios 또는 android...
honeysuckle
React를 사용한 웹개발 경험이 있으면, React Native를 이용한 앱개발을 고려하게 됩니다. React Native를 이용하여 앱을 개발시 미리 알았더라면 하는 내용입니다. 1. React로 웹 개발해 봤으면 바로 시작 할 수 있습니까? React로 웹을 만들어 봤으면 동일한 구조로 진행 할 수는 있습니다. div는 View로 바꾸고, sp...
Expo SDK v33.0.0
changhoi

Expo SDK v33.0.0

2019년 6월 18일0개의 댓글
Expo SDK v33.0.0 업데이트 지난 6월 6일에는 새로운 Expo SDK가 릴리즈 됐다. 가장 첫 문장이 웹을 지원하는(지금은 베타 버전) SDK라는 것이다. 되게 좋을듯. 또 TypeScript 정의, React Native 0.59.8을 기반으로 한다는 점 (Hooks를 지원함, 그리고 글에는 없지만 아마 이전 SDK가 react-redux ...
[React Native] 인스타그램 UI 만들기 #4
anpigon
안녕하세요. 안피곤입니다. 리액트 네이티브(React Native)로 인스타그램 UI를 구현하는 네 번째 강의입니다. 이번에는 프로필 화면을 구현합니다. 이 포스팅은 아래 무료 동영상 강의를 참고하여 작성하였습니다.   상단바 수정하기 탭 화면마다 상단바가 다르기 때문에 수정해야합니다. 현재는 모든 탭 화면에서 같은 상단바가 보입니다...
celloa
개발 장비 * LG gram 15Z990-HA70K (16GB 메모리, 512GB SSD) * Window 10 Pro * 사용 IDE 및 언어 * vscode * android studio * node.js * java 8 & openJDK * cmder * postman * 프로젝트 생성 틈틈이 react-native 에 프로젝트 세팅에 ...