😁현재 리터당 기름비와 연비를 통해 주유 예상 금액과 주유량을 계산해주는 앱😁
배포: 배포 전
- 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