<aside> ✅ 프론트엔드 직무를 수행함에있어서 모바일 웹으로 구현해야되는 상황이 있었습니다. 확장성을 고려해 모바일 웹으로 서비스를 제공하는 것 보다 어플리케이션을 개발하여 회사의 재고관리, 기능등록 등 모바일 앱을 통해서 제공이 맞다고 판단하여 React-native 개발을 시작하게 되었습니다.
</aside>
단일 코드베이스로 IOS와 Android 애플레케이션을 동시에 개발할 수 있어, 개발 시간과 비용을 절약할 수 있습니다.
UI를 독립적인, 재사용 가능한 컴포넌트로 구성하여 애플리케이션의 유지보수성과 확장성을 향상시킵니다.
코드를 변경한 후 즉시 결과를 볼 수 있어, 개발 프로세스가 빨라지고 효육적입니다.
필요한 경우 네이티브 코드와 컴포넌트에 접근하여 성능을 최적화 할 수 있습니다.
📦src
┣ 📂Redux
┃ ┣ 📂reducers
┃ ┃ ┣ 📜AsInfoReducers.js
┃ ┃ ┣ 📜InstallInfoReducers.js
┃ ┃ ┣ 📜LocationReducers.js
┃ ┃ ┣ 📜permissionReducers.js
┃ ┃ ┗ 📜userInfoReducers.js
┃ ┣ 📜actions.js
┃ ┣ 📜actionsTypes.js
┃ ┗ 📜store.js
┣ 📂assets
┃ ┣ 📂images
┃ ┃ ┣ 📜icon.png
┃ ┃ ┣ 📜loading.json
┃ ┃ ┣ 📜lottie-line.json
┃ ┃ ┣ 📜lottie_screen.json
┃ ┃ ┣ 📜white-yit-180.png
┃ ┃ ┣ 📜y_marker.png
┃ ┃ ┣ 📜yit_ani_logo.gif
┃ ┃ ┣ 📜yit_elt_logo.png
┃ ┃ ┣ 📜yit_logo.png
┃ ┃ ┗ 📜youngit-white.png
┃ ┣ 📂splash
┃ ┃ ┣ 📜splashScreen.json
┃ ┃ ┗ 📜splashScreen_1.json
┃ ┗ 📜.DS_Store
┣ 📂global
┃ ┗ 📜envVariables.js
┣ 📂routes
┃ ┗ 📜routers.jsx
┣ 📂screens
┃ ┣ 📂Auth
┃ ┃ ┣ 📂components
┃ ┃ ┃ ┗ 📜permissionModal.jsx
┃ ┃ ┗ 📜LoginScreen.jsx
┃ ┣ 📂Home
┃ ┃ ┣ 📂MainComponents
┃ ┃ ┃ ┣ 📜MainMap.js
┃ ┃ ┃ ┣ 📜noticeCard.js
┃ ┃ ┃ ┣ 📜weatherCard.js
┃ ┃ ┃ ┗ 📜youngitScreen.js
┃ ┃ ┣ 📂components
┃ ┃ ┃ ┣ 📜NoticeDetail.js
┃ ┃ ┃ ┣ 📜NoticeList.js
┃ ┃ ┃ ┣ 📜main.js
┃ ┃ ┃ ┗ 📜youngit.js
┃ ┃ ┗ 📜HomeScreen.js
┃ ┣ 📂SplashScreen
┃ ┃ ┗ 📜splashscreen.js
┃ ┣ 📂Task
┃ ┃ ┣ 📂components
┃ ┃ ┃ ┣ 📂AsComponent
┃ ┃ ┃ ┃ ┣ 📜deviceChange.js
┃ ┃ ┃ ┃ ┣ 📜efosChange.js
┃ ┃ ┃ ┃ ┗ 📜normalAs.js
┃ ┃ ┃ ┣ 📂detailComponents
┃ ┃ ┃ ┃ ┣ 📜AsImageModifyScreen.js
┃ ┃ ┃ ┃ ┣ 📜ImageModifyScreen.js
┃ ┃ ┃ ┃ ┗ 📜asProcessingScreen.js
┃ ┃ ┃ ┣ 📂modal
┃ ┃ ┃ ┃ ┣ 📜asDeviceModal.js
┃ ┃ ┃ ┃ ┣ 📜asSolutionModal.js
┃ ┃ ┃ ┃ ┣ 📜installCompleteInfoModal.js
┃ ┃ ┃ ┃ ┣ 📜installCustomerModal.js
┃ ┃ ┃ ┃ ┗ 📜installDeviceModal.js
┃ ┃ ┃ ┣ 📜InstallAsList.js
┃ ┃ ┃ ┣ 📜InstallStatus.js
┃ ┃ ┃ ┣ 📜asCompleteScreen.js
┃ ┃ ┃ ┣ 📜install.jsx
┃ ┃ ┃ ┗ 📜taskMain.jsx
┃ ┃ ┣ 📂css
┃ ┃ ┃ ┗ 📜TaskScreenCss.js
┃ ┃ ┣ 📂images
┃ ┃ ┃ ┣ 📜alrightImage.png
┃ ┃ ┃ ┣ 📜asComplete.png
┃ ┃ ┃ ┣ 📜install.png
┃ ┃ ┃ ┣ 📜repair.png
┃ ┃ ┃ ┣ 📜status.png
┃ ┃ ┃ ┗ 📜unRightImage.png
┃ ┃ ┗ 📜TaskScreen.jsx
┃ ┗ 📂Total
┃ ┃ ┣ 📂components
┃ ┃ ┃ ┣ 📂images
┃ ┃ ┃ ┃ ┣ 📜materials.png
┃ ┃ ┃ ┃ ┣ 📜monitor.png
┃ ┃ ┃ ┃ ┗ 📜support-agent.png
┃ ┃ ┃ ┣ 📂materialManageComponents
┃ ┃ ┃ ┃ ┣ 📜materialApplication.js
┃ ┃ ┃ ┃ ┗ 📜materialMangement.js
┃ ┃ ┃ ┣ 📂settingsConfigComponents
┃ ┃ ┃ ┃ ┣ 📜agreeListModal.jsx
┃ ┃ ┃ ┃ ┣ 📜agreePrivateModal.jsx
┃ ┃ ┃ ┃ ┣ 📜businessInfomation.jsx
┃ ┃ ┃ ┃ ┣ 📜serviceAgree.jsx
┃ ┃ ┃ ┃ ┣ 📜settingsConfig.js
┃ ┃ ┃ ┃ ┗ 📜versionInfo.jsx
┃ ┃ ┃ ┣ 📜TotalMain.jsx
┃ ┃ ┃ ┣ 📜supportKakaoTalkScreen.js
┃ ┃ ┃ ┗ 📜userDetail.jsx
┃ ┃ ┗ 📜TotalScreen.jsx
┣ 📂utils
┃ ┣ 📜axiosWithAuth.jsx
┃ ┣ 📜checkPermission.js
┃ ┗ 📜requestPermission.js
┗ 📜.DS_Store
Screen Page 단위로 컴포넌트를 생성하였습니다. util 및 global로 사용되는 변수들은 공용으로 사용하고 Redux를 이용해 전역상태관리를 하였습니다.
단일 코드베이스를 이용해 IOS / Android 크로스 플랫폼 개발은 너무 신선한 환경이였고, 핫 리로딩 또한 개발속도를 높혀주는데 크게 도움을 주었습니다.