우리가 사용하는 앱들은 클릭이나 스크롤, 드래그 등을 통한 인터렉티브한 화면 이동을 지원한다. React Navigation를 이용하여 화면 이동을 구현해보자. Stack Navigation 적용하기 native용 react-navigation을 설치 해준다. $ yarn add @react-navigation/native $ yarn add @react-navigation/native-stack $ yarn add react-native-screens react-native-safe-area-context 앱과 웹의 화면 전환 차이점 중 하나는 앱은 화면을 단순히 이동하는 것이 아니라 새로운 화면을 스택으로 쌓는다는 점이다. 따라서 뒤로가기 버튼을 클릭하면 전 화면으로 이동한다. 유튜브 앱도 뒤로 가기..

보기 좋은 떡이 먹기도 좋다고, React-Native-Paper을 이용해 앱을 예쁘게 꾸며주고 로그인 화면을 만들어보자. React-Native-Paper 적용 Home · React Native Paper Material design for React Native callstack.github.io React-Native-Paper는 리액트 네이티브용 디자인 라이브러리다. paper에 있는 예쁜 컴포넌트들을 사용해 헬스 어플을 좀 세련되게 만들어 보자. 위의 사이트에 들어가면 친절하게 어떻게 설치하고 사용하는지가 나와 있다. 아래의 명령어를 이용해 paper을 설치하자. $ yarn add react-native-paper 아이디와 비밀번호를 입력하는 인풋필드는 TextInput 컴포넌트를 로그인 버..

앱을 만들기 위한 개발 환경 세팅을 해보자. 안드로이드 개발을 위한 코틀린이나 ios 개발을 위한 swift 등 새로운 언어를 배우기엔 지금 시간 여유가 없어서 네이티브 앱은 부담스럽고, 자바스크립트나 리액트 개발 경험이 있으니 리액트 네이티브로 개발 하기로 결정했다. 리액트 네이티브는 하나의 언어로 ios, 안드로이드 모두 개발 가능하기 때문에 많이들 사용한다. 찾아보니 Expo와 React Native CLI 두가지로 개발을 하는데 Expo는 간단하고 빠른 앱 개발을 지원하지만 그만큼 여러 제약이 존재한다. 앱 개발이 처음이니 우선 Expo로 리액트 네이티브와 앱 개발에 익숙해진 뒤, CLI로 개발을 하자 그럼 Expo로 리액트 네이티브 개발 환경을 세팅해보자. 공식문서를 따라했고 정말 간단했다. S..

최고의 개발 공부는 직접 무언갈 만들어 보는 것이라 한다. 단순히 공부만 하는 것보다 직접 만드는 것이 효율도 좋지만 무엇보다 훨씬 훨씬 재밌다! 그래서 간단한 앱을 하나 만들어야겠다 생각했고, 지금 가장 필요한 헬스 기록 앱을 만들기로 했다. 만들고 싶은 기능은 헬스 기록을 일별 그래프로 보여주기 특정 시간 내에 헬스 기록이 없으면, 푸쉬알림 보내기 어제보다 조금하면 더 하라고 얼려주기 요런 기능들을 넣어 어떻게든 헬스를 더 하게끔 만들고 싶다. 지금껏 수많은 시도들을 했지만, 매번 꾸준히 하지 못한채 실패했다. 돌이켜보니 이주를 넘은적이 한번도 없다 ㅎㅎ.. 이 앱을 통해 이번에는 다르기를 기원한다.