어서와, 개발은 처음이지?

(2020.07.09) 이 글은 react navigation v3, v4 환경에서 실행 확인한 글입니다. 이전에 react-native-navigation 사용법을 포스팅 한 적이 있는데, react-navigation이 react-native-navigation보다 설치도 간편하고, 사용하기 편리하고, 무엇보다 성능이 좋아져서 최근에 자주 사용하고 있습니다. 이번 글에서는 react-navigation을 사용하여 아래 구조를 구현해보겠습니다. (세부 기능 설명이 아닌 예제 위주로 작성하였습니다.) - 시작화면(로그인) -> 메인화면(탭 네비게이터)로 이동- 탭 네비게이터 내에서 화면 이동- 탭 네비게이터에서 시작화면으로 이동 0. Repo 풀 코드는 Github에서 확인하실 수 있습니다.- react..

이전 글에서 자바스크립트의 컴파일레이션 과정에 대해 알아보았습니다. 컴파일레이션은 스코프를 좀 더 쉽게 이해할 수 있는 초석으로, 이어서 스코프에 대한 글을 작성하는게 순서상 맞지만, 스코프를 나가면 호이스팅을, 호이스팅을 나가면 클로저로 계속 이어지기 때문에 js의 내장타입과 네이티브를 간단하게 소개하고 넘어가도록 하겠습니다. 1. 내장타입 우선 자바스크립트에는 내장타입라고 불리는 7가지 자료형이 존재합니다. 1. null 2. undefined 3. boolean 4. number 5. string 6. symbol (es6부터 추가됨) 7. object 이들 중 object를 제외한 모든 값은 변경 불가능한 값(불변값, immutable - 참조와 값의 개념에서의 불변으로, 현 토픽에서는 이해하지 ..

이 글은React Native Firebase 푸시 알림(push notification), background listener - 1.Android 세팅React Native Firebase 푸시 알림(push notification), background listener - 2.firebase 리스너 구현React Native Firebase 푸시 알림(push notification), background listener - 3.서버 구현(현재글)로 구성되어 있습니다. 이번 글에서는 node 서버단에서 firebase에 메세지 전송을 요청할 수 있도록 구현하고, 메세지가 잘 도착하는지 확인해보는 작업을 해보겠습니다. 1. 프로젝트 생성 우선 프로젝트를 생성하고, express.js와 firebase..

이 글은React Native Firebase 푸시 알림(push notification), background listener - 1.Android 세팅React Native Firebase 푸시 알림(push notification), background listener - 2.firebase 리스너 구현(현재글)React Native Firebase 푸시 알림(push notification), background listener - 3.서버 구현로 구성되어 있습니다. 지난 글에 이어, 앱에서 notification을 receive할 수 있도록 코드를 구현해보겠습니다.기타 UI가 필요하지 않으므로 React Native의 기본 파일인 App.js에 구현하도록 합니다. 1. Permission 및 T..

이 글은 React Native Firebase 푸시 알림(push notification), background listener - 1.Android 세팅(현재글) React Native Firebase 푸시 알림(push notification), background listener - 2.firebase 리스너 구현 React Native Firebase 푸시 알림(push notification), background listener - 3.서버 구현로 구성되어 있습니다. 최근에 제품에 푸쉬 알림 기능을 넣어야 했는데, 개인적인 생각으로는 푸쉬 알림이 navigation 처럼 범용적인 기능임에도 한글로 된 자료를 찾기 힘들어서 오랜만에 React Native에 관한 글을 작성하게 됐습니다. pus..

React Native에서 Animated를 사용하여 컴포넌트에 움직임을 넣거나 색상, 투명도 등이 변경되도록 애니메이션을 만들 수 있습니다. Animated는 State나 변수 등을 직접 제어하지 않고, Animated 객체로 생성된 value를 제어하는 것으로 애니메이션을 만듭니다. 애니메이션을 실행하면 시간에 따라 value가 변하는데, 이때 rerender는 이루어지지 않으며 실시간으로 반영됩니다. (rerender와 연관이 없으므로 케이스에 따라 shouldComponentUpdate를 false로 해놓는 것도 좋습니다.) import React, {Component} from 'react'; import {View, Animated} from 'react-native'; type Props =..

이 글은 6.React Native Navigation 기초 - 1부 설치하기 6.React Native Navigation 기초 - 2부 화면 등록, 화면 이동(startapp, push, pop) 6.React Native Navigation 기초 - 3부 기능 살펴보기(현재글)로 구성되어 있습니다. (19.08.05)react-navigation 예제가 추가되었습니다. 이번 글에서는 사이드 메뉴인 Drawer와 그를 통제하기 위한 Deeplink, 그리고 다른 주요 기능에 대해 알아보겠습니다. 1.Drawer Drawer은 좌측 또는 우측에 숨어있는 메뉴입니다. 이 메뉴는 Navigation으로 앱을 실행하는 부분에서 설정할 수 있습니다. Navigation.startSingleScreenApp()..

이 글은6.React Native Navigation 기초 - 1부 설치하기6.React Native Navigation 기초 - 2부 화면 등록, 화면 이동(startapp, push, pop)(현재글)6.React Native Navigation 기초 - 3부 기능 살펴보기로 구성되어 있습니다. (19.08.05)react-navigation 예제가 추가되었습니다. 이번 글에서는 React Native Navigation의 화면 등록과 이동 과정에 대해 알아보겠습니다.근데 매번 풀네임으로 쓰기 너무 힘드네요.. React Native Navigation(이하 rnn)으로 칭하겠습니다. 순환신경망 아니쥬~ 1.일단 예제는 rnn의 깃헙에 들어가셔서 클론하면 Wix 형님들이 만들어두신 example을 사..

이 글은6.React Native Navigation 기초 - 1부 설치하기(현재글)6.React Native Navigation 기초 - 2부 화면 등록, 화면 이동(startapp, push, pop)6.React Native Navigation 기초 - 3부 기능 살펴보기로 구성되어 있습니다. (19.08.05)react-navigation 예제가 추가되었습니다. 우리가 사용하는 일반적인 앱들은 버튼을 누르면 새로운 화면으로 이동하고, 뒤로가기 버튼(혹은 제스처)을 누르면 다시 이전화면으로 이동하는 모습을 볼 수 있습니다. 지난 글에서 3가지 화면(시작 화면, 회원가입 화면, 로그인 화면)을 구현했는데, 그렇다면 리액트 네이티브에서 화면 간 이동이 가능하도록 구현 하려면 어떻게 해야할까요? 바로 N..

이 글은 5.React Native 레이아웃 디자인 - 1부 flex와 width, height 5.React Native 레이아웃 디자인 - 2부 배치(Flex Direction)와 정렬(justify content, align items) 5.React Native 레이아웃 디자인 - 3부 커스텀 버튼 5.React Native 레이아웃 디자인 - 4부 이미지 컴포넌트와 UI 마무리(현재글)로 구성되어있습니다. 바로 이어서 시작하겠습니다. 1.이미지 컴포넌트 이미지 컴포넌트에 이미지를 지정해주기 위해서 source라는 속성을 명시해줘야합니다. source는 {uri : '이미지 주소'}로 외부 주소를 통해 가져오거나 require('로컬경로')를 통해 내부의 이미지를 사용할 수 있습니다. uri와 r..