<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 크로스 플랫폼 개발은 너무 신선한 환경이였고, 핫 리로딩 또한 개발속도를 높혀주는데 크게 도움을 주었습니다.