주말에 잠깐 시간내서 통관번호를 사용해서 택배를 조회하는 어플을 만들어 보았다. 몇년전에 안드로이드 스튜디오를 사용해서 꾸역꾸역 만들던 때와는 달리 요즘에는 빨리빨리 만들 수 있어서 좋았다. 제작기를 작성하긴 하는데, 사실 공식 문서만 보고 개발환경을 잘 설치하고 react를 어느정도 사용할 줄 안다면 단순한 웹 통신과 뷰만 있다고 하면 쉽게 제작할 수 있어서 간단히 설명만 할려고 한다.
기술스택
기술스택이라 하기에도 민망하다. React Native를 사용해서 만들어 보았다. 이미 React를 다룰 줄은 알기도 하고, 크로스 플랫폼이 가능해서 사용하기로 했다. 또한 Typescript를 사용해서 타입에 안정성을 주기로 했다. 하지만 막상 다 만들고 보니 별로 사용하지는 않았다는 게 함정...
개발환경은 M1 Pro 맥북이다.
초기설정
초기 설정은 아래의 공식 문서를 참고해서 설정했다. 딱히 문제가 생기지도 않고 설명대로 하니 초기설정이 잘 이루어졌다.
https://reactnative.dev/docs/environment-setup
Setting up the development environment · React Native
This page will help you install and build your first React Native app.
reactnative.dev
https://reactnative.dev/docs/typescript
Using TypeScript · React Native
TypeScript is a language which extends JavaScript by adding type definitions. New React Native projects target TypeScript by default, but also support JavaScript and Flow.
reactnative.dev
API 설정
API는 현재 새 Key 발급이 막혀 있다. 혹시나 해서 예전에 발급받은 기록이 있나 싶어서 확인해보니 다행히 존재했다. 서버에서 데이터를 받아오는 로직은 Hook으로 분리하여 Loading 상태를 분리할 수 있게 하였다. 데이터를 불러올 때는 익숙한 axios를 Promise 패턴으로 작성했다.
스크린 전환
놀랍게도 RN은 아직 Beta버전이며(!) 공식적으로 스크린 전환을 지원하지 않는다! SPA를 여기까지는 끌고 올 필요는 없을거 같은데... 하지만 공식문서를 검색해보니 라이브러리 설치로 적용이 가능했다. 해당 공식 문서를 사용해서 스크린 전환을 구현했다.
https://reactnative.dev/docs/navigation
Navigating Between Screens · React Native
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
reactnative.dev
SVG 사용하기
디자인을 하다보니 SVG를 사용할 일이 있어서 찾아보니 역시 누군가가 만들어 둔 라이브러리가 있었다. react-native-svg만 사용하게 되면 앱 내부에 있는 파일을 사용하기 못해서 transformer 라이브러리까지 사용해야 한다. 두개를 사용하면 간단히 svg를 사용할 수 있다.
https://www.npmjs.com/package/react-native-svg
react-native-svg
SVG library for react-native. Latest version: 13.9.0, last published: a month ago. Start using react-native-svg in your project by running `npm i react-native-svg`. There are 1450 other projects in the npm registry using react-native-svg.
www.npmjs.com
https://www.npmjs.com/package/react-native-svg-transformer
react-native-svg-transformer
SVG transformer for react-native. Latest version: 1.0.0, last published: a year ago. Start using react-native-svg-transformer in your project by running `npm i react-native-svg-transformer`. There are 107 other projects in the npm registry using react-nati
www.npmjs.com
기타 문제 해결
API에서 html 코드가 나오는 경우가 있었다. 이를 decode하기 위해서 아래 라이브러리를 사용했다.
https://www.npmjs.com/package/he
he
A robust HTML entities encoder/decoder with full Unicode support.. Latest version: 1.2.0, last published: 5 years ago. Start using he in your project by running `npm i he`. There are 1712 other projects in the npm registry using he.
www.npmjs.com
date 타입이 YYYYMMDDHHMMSS 타입으로 나와서 보기 힘들었다. dayjs를 사용해서 날짜 형식을 쉽게 쓰기 위해서 아래 라이브러리를 사용했다.
https://www.npmjs.com/package/dayjs
dayjs
2KB immutable date time library alternative to Moment.js with the same modern API . Latest version: 1.11.7, last published: 5 months ago. Start using dayjs in your project by running `npm i dayjs`. There are 11471 other projects in the npm registry using d
www.npmjs.com
dotenv로 코드의 중요한 값들을 가릴 수 있다. 아래의 라이브러리를 사용했다.
https://www.npmjs.com/package/react-native-dotenv
react-native-dotenv
Load environment variables using import statements.. Latest version: 3.4.8, last published: 2 months ago. Start using react-native-dotenv in your project by running `npm i react-native-dotenv`. There are 68 other projects in the npm registry using react-na
www.npmjs.com
완성본
스토어에 업로드하게 되면 나중에 링크를 올릴 예정이다.
https://play.google.com/store/apps/details?id=com.watchcustomclearance
통관검색기 - Google Play 앱
통관부호로 택배를 조회하는 앱입니다.
play.google.com
앱의 플로우는 다음과 같다.
- 통관부호 검색
- 해당 통관부호로 산 물품 리스트
- 해당 물품의 정보
- 해당 물품의 현재 위치(상태)
https://github.com/tre2man/watch-custom-clearance/tree/master
GitHub - tre2man/watch-custom-clearance: 통관조회 앱
통관조회 앱. Contribute to tre2man/watch-custom-clearance development by creating an account on GitHub.
github.com
'메이킹 > 메이킹 프로젝트' 카테고리의 다른 글
| 슬랙 점심 추천기 만들기 (0) | 2022.11.14 |
|---|---|
| 카카오톡 학식봇 AWS Lambda로 전환하기 (0) | 2022.09.12 |
| 아두이노 프로를 사용한 스탠드 작동부 제작 (0) | 2020.04.21 |
| 원격 컨트롤 및 알람 기능이 있는 스위치 제작 - 1 (0) | 2020.04.07 |
| 서보모터를 이용한 간단한 로봇 팔 제작기 (0) | 2020.03.04 |