3분만에 앱 만들기? 그게 가능해?(상편)

2020. 5. 21. 12:20인공지능,프로그래밍

반응형

유튜브를 보다가 3분만에 앱 만들기라는 제목이 보여 클릭하였다. 

영상 길이만 12분이 넘는 걸보니 정말 3분만은 아닌가 보다. 

하지만 그래도 그렇게 쉽게 만들 수 있다니 따라해 보기로 하였다.

 

원리는 간단했다. 

React Native 라는 것을 사용하는 것인데, 정말 복사해서 붙여넣기만으로 앱을 만들 수 있었다. 

물론 복사하고 붙여넣는 것도 쉽지는 않았다. 

 

우선 React Native 페이지를 구글에 검색해서 처음 나오는 페이지로 가면 예제들이 나온다. 

아래 이미지를 클릭하면 해당 페이지로 이동

 

그리고 인스톨 방법은 검은색 상자안의 글을 복사해서 붙여놓으면 된다. 

그러면 아래와 같이 설치가 되었다는 메시지를 볼 수 있다. 

참고로 현재 구름 IDE를 사용중이다. 

구름 IDE에 대한 부분은 추후 따로 포스팅할 예정이다. 

그 다음으로 할 일은 코드를 수정하는 것이다. 

이 역시 예제를 그대로 복사해서 넣기로 간단하게 해결된다고 해서 해 보았다. 

 

예제 코드는 아래와 같다. 

import * as React from 'react';

import { WebView } from 'react-native-webview';

export default class App extends React.Component {

    render( {

         return <WebView source={{ uri: 'https://expo.io' }} style={{ marginTop: 20 }} />;

     }

}

 

위 코드의 링크 부분을 수정하면 내가 원하는 사이트로 이동하는 웹앱을 만들 수 있다. 

 

위 링크를 아래와 같이 수정해 보았다.

 

 

import * as React from 'react';

import { WebView } from 'react-native-webview';

export default class App extends React.Component {

    render( {

         return <WebView source={{ uri: 'https://www.daum.net' }} style={{ marginTop: 20 }} />;

     }

}

 

주소 부분만 바꾸어서 내가 원하는 웹 주소로 바로 가는 웹앱을 만들 수가 있는 것이다.

이 경우에는 '다음' 사이트 주소를 입력했으므로 해당 앱은 다음 사이트를 열어주는 앱이 만들어질 것이다. 

그리고 실행을 해 보았다.

그런데 앱은 안 만들어지고 아래와 같이 QR 코드가 나왔다. 

 

이 코드는 Expo 앱을 설치하고 찍었을 때 실행 화면을 미리 보여주는 코드라고 한다. 

 

그래서 휴대폰(안드로이드, 아이폰도 된다고 한다.)에 Expo 앱을 설치하고

아래 QR 코드를 카메라로 찍어 보았다. 

그랬더니 다음 사이트를 열어주는 앱이 실행되는 것을 확인할 수 있었다. 

 

 

이렇게 한번만 실행하면 앱이 만들어지나 했는데.....

그런데 그게 끝이 아니었다. 

그럼 진짜 앱은 어떻게 만드는 것일까?

 

(하편)에서 계속됩니다.

반응형