NGMsoftware

NGMsoftware
로그인 회원가입
  • 매뉴얼
  • 학습
  • 매뉴얼

    학습


    리액트 네이티브 모바일앱 개발 시작! (Hello NGMsoftware!)

    페이지 정보

    본문

    안녕하세요. 엔지엠소프트웨어입니다. 차세대 업무 자동화 RPA 매크로 프로그램을 기획중인데요. Chat GPT 기반 기술 레퍼런스가 많아져서 이제부터 개발하면 1년 후에는 인공지능 RPA 매크로 제작 도구가 나오지 않을까 생각합니다. 그리고, 모바일앱으로 컴퓨터 제어, 반복 업무뿐만 아니라 모바일 환경에서도 동작하는 자동화 기능을 추가해야 할거 같아요. 하지만, 윈도우만큼 자유도가 높지 않기 때문에 어느정도까지 구현이 가능할지는 검증 해봐야 합니다.

    8D9wr7h.png

     

     

    리액트 네이티브로 크로스 플랫폼(aos, ios) 환경에서 앱을 만들고, 테스트하는데 약 3개월정도 걸리지 않을까 생각됩니다. 현재 엔지엠소프트웨어를 운영하면서 투자 유치도 도전하고 있습니다. R&D 예산이 많이 줄어들어서 엔젤 투자를 받기 위해 준비중인데요. 아무래도 사업계획서를 먼저 만들어야겠죠? 투자 유치와 모바일앱을 개발하면서 미리 검증 후 모바일앱에 한계가 있다면 윈도우용 제품만 만들어야 할거 같습니다. 아무튼~ 모바일앱 개발을 위해 기본적인 학습 내용을 틈틈히 작성할 예정인데요. 꼭 업무자동화 RPA가 아니더라도 모바일앱 제작에 관심 있는 분들은 같이 공부하면 좋을듯 합니다^^

    NraWBV7.png

     

     

    이전 시간에 리액트 네이티브 CLI 프로젝트를 만들고, 기본 프로젝트를 안드로이드 가상 디바이스로 실행까지 해봤습니다. 아직, 개발 환경을 갖추지 않은 분들은 아래 글을 참고해서 개발 환경을 셋팅 해주세요. 생각보다 설치해야할 것들이 많아서 비개발자분들은 환경 구성부터 많이 힘들수도 있습니다.

    [ React Native 개발 환경 만들기 ]

     

    개발자라면 vscode는 다룰줄 아실거라 생각합니다. myapp 프로젝트 안에 보면 App.tsx 파일이 있는데요. 이 파일이 앱의 기본 뷰입니다. 쉽게 말해서 안드로이드 앱을 실행했을 때 보여지는 첫 화면이라는 뜻입니다. 그리고, js는 자바스크립트를 말하는데요. ts와 tsx도 같이 사용합니다. ts는 타입스크립트 파일이고, tsx는 React Component와 같이 사용할 때 쓰는 파일입니다. 

    cKFnotD.png

     

     

    tsx는 JSX 문법을 사용할 수 있습니다. 하지만, ts는 오직 타입스크립트만 사용이 가능합니다. 참고로, JSX는 자바스크립트에 XML을 확장한 문법입니다. 자바스크립트에 HTML을 사용할 수 있게 해줍니다. 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아닙니다. 브라우저에서 실행하기 전 바벨을 사용하여 일반 자바스크립트 형태로 변환됩니다. ts도 이와 동일하게 컴파일될 때 자바스크립트로 변환됩니다.

     

    기본적인 내용은 알아봤으므로, App.tsx 파일의 내용을 변경 해봅시다.

    import React from 'react';
    import {Text, View} from 'react-native';
    
    const YourApp = () => {
      return (
        <View
          style={{
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
          }}>
          <Text>Hello NGMsoftware!</Text>
        </View>
      );
    };
    
    export default YourApp;

     

    터미널에서 npx react-native run-android로 앱을 실행하세요. 코드를 변경하고, 저장하면 안드로이드 디바이스에서 자동으로 갱신됩니다.

    28ddrRe.png

     

     

    이제 Hello NGMsoftware를 해봤으니 리액트에서 제공해주는 컴포넌트들을 하나씩 학습해보도록 할께요. 어떤 서비스를 만들어볼지 아직 정하지 않았기 때문에 가능하면 업무 자동화 RPA 와 관련된 제어쪽으로 하나씩 만들어 보도록 하겠습니다. 그전에 각각의 컴포넌트와 서비스들을 학습하면서 어떻게 응용할지를 구상해야 할거 같습니다. 그럼~ 다음 시간에 다시 공부하기로 하고 오늘은 이만 마치도록 할께요^^

     

    개발자에게 후원하기

    MGtdv7r.png

     

    추천, 구독, 홍보 꼭~ 부탁드립니다.

    여러분의 후원이 빠른 귀농을 가능하게 해줍니다~ 답답한 도시를 벗어나 귀농하고 싶은 개발자~

    감사합니다~

    • 네이버 공유하기
    • 페이스북 공유하기
    • 트위터 공유하기
    • 카카오스토리 공유하기
    추천0 비추천0

    댓글목록

    등록된 댓글이 없습니다.