NGMsoftware

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

    학습


    React App 만들기. (Single Page Application)

    페이지 정보

    본문

    안녕하세요. 엔지엠소프트웨어입니다. 안드로이드 또는 iOS 앱을 만드는 가장 쉬운 방법은 React Native를 이용해서 모바일앱을 만드는겁니다. 물론, 플러터를 이용해도 되긴합니다. 간단한 학습용 모바일앱을 만들려면 개발 환경이 필요합니다. 윈도우 환경에서 가장 많이 사용되는 비주얼 스튜디오 코드(Visual Studio Code)를 다운로드 받고 설치하세요.

     

    • 웹 개발 - React 또는 Angular (요즘은 React가 대세로 굳어지는듯...)
    • 모바일앱 개발 - React Native (aos, ios)
    • 백엔드 개발 - nodejs

     

    Visual Studio Code(vscode) 설치가 완료되었으면 실행하세요. 그리고, 프로젝트 폴더를 만들고 터미널을 실행해줍니다.

    LOfgETY.png

     

     

    리액트 네이티브로 모바일앱을 개발할 때 쉽고 빠르게 개발할 수 있는 기본 템플릿을 제공해줍니다. 엑스포(Expo)를 이용해도 되지만, 실제로 프로젝트를 진행하다보면 부족한 부분들이 많고 한계에 부딪히게 됩니다. 그래서 처음부터 네이티브로 개발하는게 좋을겁니다. 그리고, 꾸준히 모바일앱을 개발하려면 네이티브를 어느정도 알아야하기 때문에 이걸로 진행하는게 좋습니다.

    • Expo CLI: 초반 모바일앱 개발에 필요한 모든 기능들이 들어 있습니다. 엑스포가 지원하지 않는 기능들은 구현할 수 없습니다.
    • React Native CLI: 네이티브이므로 모바일앱에서 할 수 있는 모든것들을 만들 수 있습니다. 다만, 추가 라이브러리 설치와 iso를 위한 맥북이 필요합니다.

     

    구글이나 애플 인앱결제나 구글 애드몹 광고등등... 네이티브에서 동작하는 모든것을 만들려면 결국 엑스포는 버리고, 네이티브로 가야 합니다. 참고로, 엑스포는 맥이 없어도 아이폰 앱을 개발할 수 있습니다. 리엑트 네이티브로 앱을 만들면 타입스크립트로 생성됩니다. 그래서, 자바스크립트외에 타입스크립트도 어느정도 학습이 필요합니다. 일반적으로 SPA 웹 개발자라면 nodejs + react + typescript를 주로 사용했을겁니다.

     

    만약, javascript를 사용하고 typescript를 모른다면 엑스포로 먼저 기본적인 개념을 익히고 천천히 타입스크립트를 배우면서 리액트 네이티브로 넘어가도 될듯 합니다. 타입스크립트는 C#과 비슷하므로 C# 또는 Java 개발자라면 쉽게 배울 수 있을겁니다. 아래는 개발 환경을 위해 필요한 프로그램들입니다. 모두 설치해야 모바일앱을 개발할 수 있습니다. 대부분은 여기부터 고생하게 될겁니다.

    • nodejs
    • JDK (Java 17+)
    • Android Studio
    • Android SDK
    • Android Simulator
    • Ruby
    • Xocde
    • iOS Simulator
    • Cocoa Pods

     

    개발 환경이 구성되었으면 Visual Studio Code의 터미널에서 아래 명령으로 샘플 앱을 만드세요.

    npx react-native@latest init my-app

     

    엑스포를 만들려면 아래 명령을 사용하면 됩니다. 리액트 네이티브 공식 사이트에 예제가 있습니다.

    npx create-expo-app my-app

     

    설치하는데 생각보다 오래 걸립니다. 한참 기다리면 설치가 완료 될겁니다.

    MkIhiUo.png

     

     

    설치가 완료되면 아래와 같이 프로젝트 폴더로 이동한 후 앱을 실행 해줍니다.

    cd myapp
    npx react-native start

     

    윈도우용 리액트를 설치하세요.

    npx react-native-windows-init --overwrite

     

    마이크로소프트 엣지 웹브라우저를 실행하고, 아래 명령으로 실행하세요.

    npx react-native run-windows

     

    잠시 기다리면 빌드가 완료됩니다.

    YomDycn.png

     

     

    서버가 실행되고, 애뮬레이터를 선택할 수 있는 옵션이 나옵니다. a를 선택해서 안드로이드앱으로 실행하세요.

    t9qq4NP.png

     

     

    이 테스트에서는 윈도우 환경에서 실행 했습니다.

    CSjT9ZJ.png

     

     

    리액트로 모바일앱 개발 환경을 모두 마쳤습니다. 다음 시간에는 간단한 예제들을 학습하면서 같이 앱을 만들어 보도록 하겠습니다. 그리고, 테스트 및 디버깅은 안드로이드 애뮬레이터를 이용할겁니다. 윈도우 환경이기 때문에 iOS 애뮬레이터를 설치할 수 없어서 테스트는 불가능할거 같습니다. 맥북이 있긴한데... 여기에 개발환경을 다시 구성하고 환경을 셋팅하기엔 너무 번거로운 일이라서요. 언제 시간될 때 다시 알아보도록 하겠습니다^^

     

    개발자에게 후원하기

    MGtdv7r.png

     

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

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

    감사합니다~

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

    댓글목록

    등록된 댓글이 없습니다.