기름값 계산기

🌟소개

😁현재 리터당 기름비와 연비를 통해 주유 예상 금액과 주유량을 계산해주는 앱😁

배포: 배포 전

❗ What I Earned

TypeScript 기본적인 사용 및 이해
공공API(현재 유가) 사용 및 이해
Expo와 React Native의 관계 이해
ReactNative Event
ReactNative Components 이해
ReactNative Navigation (화면이동)
ReactNative env 적용
ReactNative StyleSheet
ReactNative Animation

🌟 주요 기능 및 화면

첫 화면

앱 로딩 후 첫 화면에서는 유류 가격 메뉴에 대한 직접입력 Input만 활성화 되어 있고, 로딩 버튼이 활성화 되어 있다.
유류 가격 배열에 값이 없다면 계산하기 버튼을 비활성화 하고 로딩 버튼이 나타날 수 있게 함.
운행할 거리, 차량 평균 연비 Input에는 숫자만 입력이 가능하도록 keyboard type 설정과 정규식을 활용함

첫 화면(로딩 버튼 실행)

공공 API와 fecth메서드를 활용해서 현재 날짜 기준 평균 유가 가격을 받아옴.
유류 종류를 선택하거나 직접입력 Input에 가격을 직접 입력하고, 운행거리, 평균 연비 Input에 값이 있다면 계산하기 버튼이 활성화 됨.
navigation을 활용하여계산하기 버튼을 누르면 결과 화면으로 이동함.

결과 화면

첫 화면에서 입력한 내용들을 props로 넘겨준 후 계산된 내용을 표시함.
결과 화면으로 넘어오고 예상 주유량, 예상 주유 금액이 표시 될 때 react animate를 활용해서 fadeIn animation으로 표시
다시 계산하기 버튼 실행 시 navigator를 활용해 첫 화면으로 돌아감.

앱 실행 화면

💻 프로젝트 실행 방법

1.gitignore 파일

/* .env 파일 */
API_URL = http://www.opinet.co.kr/api/avgAllPrice.do?out=json&code=발급API키

root Dir: npm i
root Dir: npm start or expo start