[앱만들기] 웹개발자가 가장 쉽게 어플만들기② (구름IDE, EXPO feat 조코딩)

 웹 개발자도 쉽게 어플리케이션을 만드는 방법을 찾던 중 조코딩님의 ‘구름 IDE를 이용한  3분 만에 안드로이드와 아이폰 어플 만들기’를 보았고, 이 방법이면 앱 개발자가 아니어도 충분히 훌륭한 앱을 만들 수 있겠다는 생각이 들었습니다. 그리고 조코딩님의 유튜브 찍은 날짜가 1년이 넘어, 영상과 다른 부분이 있어 혼자 시행착오하고 성공한 결과를 정리 및 공유드립니다.

 

 진행할 내용은 구름IDE를 활용한 리액트 네이티브로 웹뷰를 활용해 앱을 만드는 것입니다. 리엑트네이티브가 웹 개발자가 앱을 만듬에 있어 강력한 이유는 우리가 ios를 만들기 위해 swift를 공부 및 알 필요도 없으며 안드로이드 언어 또한 마찬가지입니다. 그러므로 최종 완성은 콘텐츠 영역은 html이며, 앱 배포에 필요한 패키징 처리만 아이폰 안드로이드로 하는 '크로스플랫폼'을 완성하는 것 입니다.

 

 

설치

 

 구름IDE는 도커 관련서비스로 IDE(Integrated Development Environment)에서 알 수 있듯이 코딩을 편하게 할 수 있도록 '통합개발환경'을 제공해줍니다. 그리고 도커관련 서비스란 우리가 설치하려 했던 개발 환경을 미리 다 설치된 개발환경을 제공해줍니다. 

(우리가 필요한 개발환경 : NodeJs, ReactNative, Expo)

 

https://ide.goorm.io/

에서 회원가입 & 로그인 후 대시보드에 들어가 “새 컨테이너 0/5”를 눌러줍니다.

 

 

 

 

빨간색 부분만 작성 및 체크 후 다른 건 건드릴 필요 없이 생성하기 버튼을 클릭 후 컨테이너가 완성되면 실행합니다.

 

 

실행 후 이제부터는 터미널에서 코드를 작성합니다.

 

 

expo install react-native-webview

 

expo에서 제공하는 웹페이지를 앱상에 띄우는 기능을 install 합니다.

 

후에 App.js를 클릭하여 내용을 전체 삭제 후 아래 코드를 복사 후 완성된 웹 url로 설정합니다.

 

 

import * as React from 'react';
import { WebView } from 'react-native-webview';

export default class App extends React.Component {
  render() {
    return <WebView source={{ uri: '원하는url' }} style={{ marginTop: 20 }} />;
  }
}

 

여기까지 진행한 후 우측 상단의 play버튼을 클릭하면

우리가 완성되면 갖게 될 애플리케이션을 미리 확인하고 테스트를 할 수 있습니다.

 

우리의 스마트폰으로 테스트를 위해 준비할 준비물 

아이폰 : App Store - Expo Go
안드로이드 : Play 스토어 - Expo

 

 

안드로이드의 경우 어플에 들어가 Scan Qr Code를 통해 해당 큐알을 찍으면 아래 게이지 바가 진행되며, 아이폰은 카메라로 QR을 찍어 어플에 들어가면 게이지바가 진행됩니다.(반드시 준비물을 먼저 다운로드하여야 합니다.)

 

게이지가 완료되고 다시 한번 QR을 찍으면 정상적으로 어플리케이션의 모습을 미리 보실 수 있습니다.

 

*테스트를 진행 후 AFK를 만들예정이면 .expo폴더를 지워준다.(connect 오류 방지)

 

 

마치며

 

 간단하게 구름IDE를 통해 Node JS React Native Expo 개발환경을 구축 후 테스트 과정까지 진행했습니다. 다음번에는 APK로 만들기를 통해 안드로이드 어플을 만드는 과정을 자세히 적어보겠습니다.(아래링크)

 

안드로이드 APK만들기

[앱만들기] 웹개발자가 가장 쉽게 어플만들기③ (EXPO로 AFK 만들기)