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

이번 글에서는 React Navigation, Redux, Typescript을 사용할 수 있도록 React Native 개발 환경을 구축해보겠습니다. 완성된 코드는 github에서 확인하실 수 있습니다.(보일러 플레이트 작업중이라 약간 상이할 수 있습니다. 참고용으로 확인해주세요.) - 차례 0. 들어가기 전에 1. 설치환경 2. 프로젝트 생성 3. react-navigation 환경 구축 4. typescript 환경 구축 5. typescript + jest 6. redux 환경 구축 7. 마치며 0. 들어가기 전에 얼마전에 if kakao dev 컨퍼런스에 다녀왔는데, 대다수 서비스의 front end 스택이 react로 이루어져 있는 것을 알 수 있었습니다. 특히 react와 vue 중 reac..

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

이 글은 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..