#react-navigation

공적 마스크 안내 – 기술 상세

공적 마스크 구매 요일을 안내하는 모바일 응용프로그램을 구글 플레이에서 다운로드할 수 있습니다.

이미지를 클릭할 수 없는 경우 아래 주소를 주소창에 붙여넣기 하세요.

https://play.google.com/store/apps/details?id=kr.bbon.whendoibuyamask

기술

공적 마스크 안내 모바일 응용 프로그램은 React Native와 expo 프레임워크를 사용하며, 타입스크립트로 작성되었습니다.

프로젝트는 공개되어 있습니다.

전체 코드는 아래 저장소에서 확인하실 수 있습니다.

GitHub: when-do-i-buy-a-mask

링크가 동작하지 않으면 아래 주소를 주소창에 붙여넣기 하세요.

https://github.com/bbonkr/when-do-i-buy-a-mask

미리보기

공적 마스크 구매 요일을 안내하는 모바일 응용프로그램을 구글 플레이에서 다운로드할 수 있습니다.

이미지를 클릭할 수 없는 경우 아래 주소를 주소창에 붙여넣기 하세요.

https://play.google.com/store/apps/details?id=kr.bbon.whendoibuyamask

시작

지난 2019년 11월에 합류했던 팀에서 나온 후 뭔가 현 상황에 도움이 될 수 있는 게 뭐가 있을까 생각하다 기억하기 귀찮은 공적 마스크 구매 요일을 안내하는 간단한 모바일 응용프로그램을 작성했습니다.

설명

공적 마스크 안내 모바일 응용프로그램은 3개의 화면으로 구성되어 있습니다.

오늘

오늘 공적 마스크를 구매할 수 있는 출생연도 끝자리를 안내합니다.

정보

출생연도별 마스크 구입요일을 목록으로 안내합니다.

찾기

개요

하단 탭 네비게이션이 있고, 첫 화면의 버튼을 클릭하면 상세 페이지로 탐색되는 화면을 구성합니다. 상세 페이지로 이동될 때, 하단 탭 네비게이션을 출력하고 싶지 않습니다.

위와 같은 탐색을 구현하기 위해 간략하게 코드를 작성했습니다.

프로젝트 준비

$ expo init react-native-expo-navigation

저는 보통 빈 타입스크립트 프로젝트 템플릿을 사용합니다.

선택사항

버젼제어로 git 을 사용합니다.

$ cd react-native-expo-navigation # 프로젝트 디렉터리로 이동 $ git init # git 로컬 저장소 초기화 $ git remote add origin {저장소 URI} # git 원격 저장소 정보 추가 $ git add --all # 추가된 파일…