이 시점은 UIWebView가 deprecated 되는 상황이다. 하지만, 이 리뷰를 남기는 것은, 개발자 결제를 하지 않고, 개발을 하려고하니, WebKit   프레임 워크를 사용할 수 없었던 것 같다. 프로젝트 일정은 다가오고, 개발자 계정은 클라이언트님과 일정이 맞지 않아 개발을 먼저 하려고 하니, 사용해야 했다. 다분히 내 메모 용임을 밝혀 둔다.

.. 참고 자료.

https://usinuniverse.github.io/2018/06/18/uiwebview.html

1. 웹뷰 추가.

사실 webview는 코드가 네 줄에, 컨트롤에 웹뷰를 만들고, 아웃렛만 연결하면 거의 끝난다.

class ViewController: UIViewController {    

    @IBOutlet var wv: UIWebView!

    override func viewDidLoad() {

        super.viewDidLoad()

        // Do any additional setup after loading the view.

        let url = URL(string:"http://naver.com")

        let req = URLRequest( url: url! )

        wv.loadRequest(req)        

    }

}

2. 웹뷰에서 자바스크립트 호출하기.

이 것은 매우 간단하다. 아래 코드를 버튼이나 필요한 시점에 넣으면 실행이 된다.

self.wv.stringByEvaluatingJavaScript(from: "alert('ok?');");

3. javascript에서 웹앱(switf 코드 호출하기).

스키마를 사용해서, 앱에 데이터를 전달하는 수단으로 스키마를 사용하고 있다. 스키마는 앱간의 데이터 전송이나, 앱을 동작시키는 기능까지 하는 방법이다. 따라서 OS레벨까지 동작할 가능성이 크다. 응답도 느리고, 호출순서와 응답순서가 다를 수 있다. 호출을 순차적으로 하나씩 해야 한다.

   1) info.plist 에 스키마 등록
      아래와 같이 URL 스키마를 등록하도록 하자. (해당 스키마로 앱이 켜지며 호출된다.).

   2) 스키마를 받아 처리하는 코드.

AppDelegate 파일에 아래와 같은 메소드를 추가합니다. 이미 같은 application 메소드가 정의되어 있지만, iOS는 같은 이름이라도, 응답에 사용되는 파라메타가 틀리면 다른 메소드로 인식하기 때문에, 긴장하지 않아도 된다.

    func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {        

        if url.host == "doSomething" {

            print("do something")

        }

        return true

    }

3) html에서 스키마를 불러 주는 메소드.

document.location = "testwebapp://doSomething";

* 매우 간단하다.

android webview, javascript 통신

1. 브릿지 만들기.

별것은 없다. 실제 안드로이드와 연동동작을 할 클래스들을 따로 모아두었다 생각하면된다. 다만 클래스 중 javascript에서 호출될 메소드는 @JavascriptInterface 어노테이션을 붙혀주면된다. 아래는 예제 소스다. (로그를 적어주는 메소드).

public class AndroidBridge {

    private String TAG = "AndroidBridge";

    // 로그를 띄우는 메소드 입니다.
    @JavascriptInterface
    public void call_log( final String _message ){

        Log.d(TAG, _message);

    }


}

2. 브릿지 셋팅하기.

MainActivity 클래스,  onCreate 메소드 적당한 곳에, 적당히 셋팅해 주면된다. (그냥 클래스를 생성하고, 셋팅하는 것 뿐이다.)

AndroidBridge ab = new AndroidBridge(wv, MainActivity.this );
wv.addJavascriptInterface( ab, "Android" );

셋팅하는 addJavascriptInterface 메소드의 첫 인자는 브릿지 클래스를 바탕으로 생성한 객체, 2번째는 javascript의 어떤 객체속에 인터페이스 메소드들을 넣어줄까를 결정하는 값이다. 아래 호출 부분을 보면 쉽게 이해가 가리라 생각된다.

3. javascript 호출부분.

그냥 호출하면된다. 아래와 같이.

<javascript>

   window.Android.call_log('원하는 메시지');

</javascript>

4. 안드로이드 에서 javascript로 메시지 보내기.

웹의 a 태그 href 에서 javascript를 실행할 때, <a href="javascript:alert('안녕');"> 등의 방법으로 간단히 자바 스크립트를 실행할 수 있을 것이다. 똑 같이  webview.loadUrl("javascript:alert('안녕');") 이라고 전달해 준다면, 똑 같은 동작을 한다.
다만, Webview와 Android는 비동기 상태 이므로 쓰레드로 넣어전달해 주어야 한다.

주의 할점. Handler를 넣으려고 하면, 자동완성 순서상,  import java.util.logging.Handler 가 등록되며, 되지 않을 수 있다. 꼭, import android.os.Handler를 포함시키자.

javascript 속 메소드를 호출하는 코드가 있는, 클래스에 아래와 같이 Handler를 추가해 주도록 합니다.

final public Handler handler = new Handler();

그리고 적당한 곳에 아래와 같이 자바 스크립트 함수를 호출하면됩니다.

handler.post(new Runnable() {
    @Override
    public void run() {
        mAppView.loadUrl("javascript:alert('안녕')");
    }
});

5. 전체 소스

>> MainActivity.java

import android.app.Activity;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
import android.webkit.WebChromeClient;
import android.webkit.WebView;

public class MainActivity extends AppCompatActivity {

    private WebView wv;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
//        Toolbar toolbar = findViewById(R.id.toolbar);
//        setSupportActionBar(toolbar);



        // 웹뷰 컨트롤러를 가지고 옵니다.
        wv=(WebView)findViewById(R.id.activity_main_webview);



        // 웹뷰에 자바 스크립트를 사용할 수 있게 허용.
        wv.getSettings().setJavaScriptEnabled(true);

        // 각종 알림 및 요청을 받게되는 WebViewClient를 설정합니다. (직접만든 웹뷰 클라이언트를 상속한 클래스 설정)
        wv.setWebViewClient(new CustomWebViewClient());

        // 크롬 핸들러 설정. 이 핸들러는 자바 스크립트 대화상자, favicon, 제목과 진행상황 처리에 사용하기 위해.
        // WebChromeClient를 구현한 것 입니다.
        wv.setWebChromeClient( new WebChromeClient());



        // 웹뷰에 첫 주소를 연결하도록 합니다.
        String first_addr = getString(R.string.first_addr);
        wv.loadUrl(first_addr);



//        FloatingActionButton fab = findViewById(R.id.fab);
//        fab.setOnClickListener(new View.OnClickListener() {
//            @Override
//            public void onClick(View view) {
//                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
//                        .setAction("Action", null).show();
//            }
//        });



        // Javascript 브릿지를 사용하도록 합니다.
        AndroidBridge ab = new AndroidBridge(wv, MainActivity.this );
        wv.addJavascriptInterface( ab, "Android" );


    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);




        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

>> AndroidBridge.java

import android.util.Log;
import android.webkit.JavascriptInterface;
import android.webkit.WebView;

import android.os.Handler;


public class AndroidBridge {

    private String TAG = "AndroidBridge";
    final public Handler handler = new Handler();

    // 새성시 내부적으로 사용할 코드들을 저장합니다.
    private WebView mAppView;
    private MainActivity mContext;

    // 기본 생성자 입니다.
    public AndroidBridge(WebView _mAppView, MainActivity _mContext)
    {

        // 입력받은 값들을 저장하도록 합니다.
        mAppView = _mAppView;
        mContext = _mContext;

    }

    // 로그를 띄우는 메소드 입니다.
    @JavascriptInterface
    public void call_log( final String _message ){

        Log.d(TAG, _message);

        handler.post(new Runnable() {
            @Override
            public void run() {
                mAppView.loadUrl("javascript:alert('["+ _message +"] 라고 로그를 남겼습니다.')");
            }
        });



    }


}

>> 웹페이지 파일.

그럼.. 이만..

웹뷰는 여러가지 이유로 사용되지만, 최근에는 웹앱을 제작하기 위해 많이 사용하게 되는 것 같다.
나도 웹앱을 만들기 위해 웹뷰를 사용할 일이 있어 관련 문서를 찾아 보았는데, 예전보다 많은 부분이 편리해진것 같다.

1. 참고문서.
   안드로이드 웹뷰 띄우기https://pizzaplanet.tistory.com/entry/%EC%95%88%EB%93%9C%EB%A1%9C%EC%9D%B4%EB%93%9C-%EC%9B%B9%EB%B7%B0-%EB%9D%84%EC%9A%B0%EA%B8%B0

   clearTextTrafficPermitted 속성 (웹접속 권한 관련). : https://nobase-dev.tistory.com/81

   웹뷰 클라이언트 (WebViewClient) - 아래 문서 중 어느 것이 나 봐도 좋다.
   https://baeksupervisor.tistory.com/103   
   https://blog.naver.com/jolangma/150106605897

   웹크롬 클라이언트(.WebChromeClient )로 각종 웹뷰 콜백 받기.
   http://ankyu.entersoft.kr/Lecture/android/webview_03.asp .

   웹뷰에서, window.localStorage 사용하기.
   http://charlie0301.blogspot.com/2015/09/windowlocalstorage-android-webview.html .

2. 프로젝트를 생성.

   우리는 웹앱을 위한 웹뷰를 사용할 것 이므로, Basic Activity를 사용해, 프로젝트를 생성합니다.

3. ui 편집.

   웹앱을 만들 것이므로, 전체 화면에 webview가 꽉찬 형태의 ui가 필요합니다. 그래서 레이아웃의 수정이 필요한데, content_main.xml 파일을 열어 약간의 수정을 해 보도록 하자.

먼저 <TextView
          ~~~~~~~~
          ~~~~~~~~ />
부분을 지우자. 그리고 이부분을 웹뷰로 대체 하도록 하자.
   

<WebView
        android:id="@+id/activity_main_webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="0dp"
        tools:layout_editor_absoluteX="8dp"
        tools:layout_editor_absoluteY="8dp"  />

MainActivity.java 파일에서 툴바 관련 소스를 2개 정도 주석 처리 합니다. (툴바를 호출하는 구문임)

Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolBar);

4. 권한 부여.

   웹뷰로 인터넷에 접속하려면, 권한을 줘야 하는데, 이 것은 activity_main.xml 파일을 수정함으로써 가능하다.

   <application>~~</application> 바로 아래, 아래와 같이 퍼미션을 주어 인터넷 권한 부여를 하도록 하자. 예전에는 인터넷 권한만 필요했던것 같은데, 지금은 몇가지 권한이 더 요구된다, 이 글을 보시는 분들은 구 버전을 사용해 모든 권한이 필요 없을 수 있으므로, 하나씩 단계별로 권한을 적용해 보도록 하자.

   <!-- 인터넷 권한 부여 (net::ERR_CACHE_MISS) -->
   <uses-permission android:name="android.permission.INTERNET" />

   <!-- 코드상 텍스트를 입력해 접속 가능한 url 입력 가능하게 하기. (net::ERR_CLEARTEXT_NOT_PERMITTED) -->
    <manifest ...>
         ...
         <application
                    ...
                    android:usesCleartextTraffic="true"

   이 상황에서 에뮬레이터를 동작해 보면 크게 무리없이 동작을 한다는 것을 알 수 있다.

5. 웹페이지 연결.

   MainActivity.java 파일을 열어, 아래와 같이 수정합니다.

   웹뷰 컨트롤을 저장할 변수 선언 (MainActivity 클래스).

   WebView wv;

   onCreate 메소드 속 리턴 바로 위에 아래와 같이 추가하자.

   // 웹뷰 컨트롤러를 가지고 옵니다.
   wv=(WebView)findViewById(R.id.activity_main_webview);

   // 웹뷰에 데이터가 로드 될 수 있도록 합니다.
   wv.loadUrl("http://naver.com");

   *이렇게 한뒤 안드로이드를 실행해 보면, 브라우저에서 창을 띄우게 된다. 그래서 웹뷰 클라이언트를 이용해 웹부안에서 페이지가 표시되도록 웹뷰 클라이언트 객체를 사용해야 한다. 다음 단원을 참고해 웹뷰 클라이언트를 셋팅하도록 하자.

6. 웹뷰 클라이언트 클래스 생성.

   MainActivity.java 파일이 있는 패키지에, WebViewClient 클래스를 상속한 클래스를 만들어 추가하도록 합니다.

   그리고, 몇줄을 Activity에 몇 줄의 설정을 더 추가합니다. 붉은 색이 추가된 것들

   // 웹뷰 컨트롤러를 가지고 옵니다.
   wv=(WebView)findViewById(R.id.activity_main_webview);


   // 웹뷰에 자바 스크립트를 사용할 수 있게 허용.
   wv.getSettings().setJavaScriptEnabled(true);

   // 각종 알림 및 요청을 받게되는 WebViewClient를 설정합니다. (직접만든 웹뷰 클라이언트를 상속한 클래스 설정)
   wv.setWebViewClient(new CustomWebViewClient());

   // 웹뷰에 첫 주소를 연결하도록 합니다.
   wv.loadUrl("http://naver.com");

   * 여기까지 하고 웹뷰를 실행해 보면, 아래와 같이 페이지가 호출됩니다.

7. 툴바 제거.

   우리가 원하는 것은 전체 화면의 웹뷰 입니다. 그래야, 웹으로 전체를 다 꾸밀 수 있고, iOS에서 역시 웹소스를 그대로 사용할 수 있습니다. 그럼 툴바를 제거해 보도록 하겠습니다.

   1) activity_main.xml 파일 속, andrioid.support.design.widget.AppBarLayout 태그를 <!-- --> 를 이용해 주석 처리해 주도록 합니다.

   2) MainActivity 파일 속, 앱바 및 툴바 관련 코드를 모두 주석 처리를 해 줍니다.

       Toolbar toolbar = findViewByID(R.id.toolbar);
       setSupportActionBar(toolbar);

8. 플로팅 액션 버튼 제거.

  여기까지 작업된 화면을 보면, 전체적으로 괜찮지만, 오른쪽 하단에, 플로팅 액션 버튼이 있다. 물론 사용을 하면 편하지만, 나는 웹앱을 만들 목적 이므로, iOS와 함께 사용하려면, 웹으로 다 구현해야 한다. (그래야, iOS에서도 같은 표시가 될 것 이므로).

   activity_main.xml 파일속 <android.support.design.widget.FloatingActionButton> 태그를 지워 줍니다.

그리고, 아래의 플로팅 액션 버튼 관련 코드를 주석 처리 해 주도록 합니다.

   FloatingActionButton fab = findViewById(R.id.fab);
   fab.setOnClickListener((view)->{
      Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
         . setAction("Action", null).show();
   });

여기까지 되었다면, 웹앱을 작업하는 데 무난 할 것 이다.

9. 추가.

각종 콜백을 받으려면, 웹뷰 크롬을 설정해 주어야 합니다. 지금은 예시로 아래 처럼 해 두지만, WebChromeClient를 상속한 서브클래스를 만들어 두면, 웹뷰의 다운로드 프로그래스등의 이벤트를 받을 수 있습니다. (상단의 웹크롬 클라이언트(.WebChromeClient )로 각종 웹뷰 콜백 받기 문서참조). 그리고 WebChromeClient를 설정해 주지 않는다면, Alert이 뜨지 않습니다. 참고해 주세요.

wv.setWebViewClient(new CustomWebViewClient());
wv.setWebChromeClient( new WebChromeClient());

10 추가, 웹뷰에서 window.localStorage 사용하기.

당연한 이야기 겠지만, 파일 읽고 쓰는 퍼미션이 있어야 할 것 이다.

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"></uses-permission>

그리고 아래는 안드로이드에 추가해야할 소스

WebSettings settings = webview.getSettings();
settings.setJavaScriptEnabled(true);
settings.setDomStorageEnabled(true);
settings.setDatabaseEnabled(true);

File dir = getCacheDir();
if (!dir.exists()) {
    dir.mkdirs();
}
settings.setAppCachePath(dir.getPath());
settings.setAppCacheEnabled(true);

* 혼동하지 말 것.

   안드로이드  에뮬레이터 에서 http://localhost 로 주소를 주면, 당연히 오류가 난다. 가상이지만, 하나의 피씨로 ip를 할당 받아 사용한다. 그러므로, http://localhost 해 봐야 연결되지 않는다. 당연한 이야기 같지만, 잘 혼동하므로, 주의 하자.

   아래는 각 운영 체제별 커맨드 명령.

   MAC : ifconfig
   Windows : ipconfig

   미묘(?)한 차이가 있으므로, 잘 구분해서 IP 를 확인하도록 하자.

윈도우는 여러가지 면에 편한 것이, 그냥 설치만 하면, 한 번에 몽고DB가 설치된다.

하지만, Mac환경에서는 다운로드 후 설정을 약간 해 줘야 한다.

1. 설치 준비 및 다운로드

다운로드 사이트 : https://www.mongodb.com/download-center#community

참고문서 (읽어보고 폴더명 몇가지만 참고했습니다. readme 문서만 봐도 충분) : https://velog.io/@rohkorea86/MongoDB%EC%84%A4%EC%B9%98-%EB%A7%A5MAC%EC%97%90%EC%84%9C-%EB%AA%BD%EA%B3%A0%EB%94%94%EB%B9%84-%EC%84%A4%EC%B9%98

위 사이트에 가서, 알맞은 환경을 선택한 뒤 다운로드 받으면 된다. 몽고 DB를 다운로드 받으면, 압축이 풀리지 않은 상태로 다운로드가 되는 데, 다운로드 한뒤 더블클릭을 하면 압축이 풀어 지고, 별도의 설치과정은 필요하지 않다.

그럼에도 이 문서를 만들게 된 것은 약간의 설치 과정이 필요하기 때문이다.

이 문서는 다운로드된 파일들 속 README.txt 파일의 내용을 참고해 작성되었다.

2. 설치파일 이동 및 패스 걸기.

몽고 DB를 이동 시킬 위치 : /usr/local/mongodb

원칙적으로 어떤 폴더로 이동 시켜도 상관은 없다. 대체로 설치파일들은 /usr/local 폴더로 이동시키므로, 나도 여기에 폴더를 만들고 이동 시켰을 뿐이다.

다운로드 파일속에 /bin 폴더속에 실제 몽고DB의 유틸리티 파일들이 들어 있다. 이 파일들만 여기에 옮겨도 좋고, 다운받은 구조 그대로 /usr/local/mongodb 속으로 옮겨도 상관이 없다.
이 문서는 /usr/local/mongodb 폴더속으로 이동을 완료하였다.

이렇게 생성하고 이 폴더에서 몽고DB를 실행하면 사실상 설치는 끝이다. 하지만, 작업이 불편할 것 이므로, 패스를 걸어 주자.
자신의 홈 디렉터리 (cd ~로 이동할 수 있는 폴더)로 이동한 뒤, shift + command + .을 동시에 눌러 감춰진 파일들이 표시되도록 하면, .bash_profile 파일이 있을 것 입니다. (없으면 만들어 주면됩니다.) 이것을 편집기를 이용해 열어 줍니다.

가장 아랫줄에, export PATH=$PATH:/usr/local/mongodb/bin 라고 추가한뒤 파일을 지정합니다. (이 때 sudo 권한을 요구할 수도 있삽니다.)

터미널을 닫고 다시 연뒤 몽고db 헬프를 사용해 보도록 합니다.

$ mongod -help

몽고db 사용 설명이 표시된다면, 패스가 잘 설정된 것 입니다.

3. 실행 폴더 만들기. (/data/db)

이 부분은 readme 파일에 설명이 들어 있지 않지만, 하지 않으면, 몽고db를 실행해도, shutting down with code:100 이라는 메세지를 내며 실행되지 않습니다.

먼저 폴더를 만들어 줍니다.
$ sudo mkdir -p /data/db

그리고, 권한을 줘야 하는데, 먼저 자신의 유저명을 확인합니다.

$ whoami

이렇게 해서 알게된 자신의 계정 이름을 확인해, 아래 명령어를 적절하게 써 넣어 줍니다.

$ sudo chown username /data/db

4. 몽고 db 실행.

$ mongod

이 한 줄로 몽고 DB 실행은 끝 입니다.
mongod 는 데이터 베이스 이고, mongo 는 mongo db에 실제 커맨드를 날리며 실행해 보는 javasciprt sehll 입니다. 혼동하지 않도록 합니다. 여기서 몽고 db 실행이 되지 않는다면, 4번 과정이 잘 되었는지 확인해 보세요.

실행 후 웹 브라우저를 열어. http://localhost:27017 이라 입력하면, 아래와 같은 메시지를 볼 수 있습니다.

5. compass 설치

$ install_compass

이렇게 한 줄 입력하면, compass 다운로드를 시작한다.  그리고 설치 까지 마무리 된다.

6. 권한을 가진 유저만 사용할 수 있도록 설정.

   처음 몽고DB를 설치하면, 누구나 DB에 접근해, 작업이 가능하다. 테스트는 문제가 없지만, 실사용에서는 권한별 사용이 가능하도록, 설정을 하고 사용해야 한다.

   1) 권한가진 접속자만 허용하기 전, 계정 추가. (변경후에 사용할 관리자 계정을 하나 추가하도록 하자.).

   터미널을 열어 mongo 콘솔로 접속하자.

   $ mongo

   터미널 프롬프트가 > 로 바뀌면 콘솔로 접속한 상태. 2줄을 입력해 관리자를 추가하자.

   > use admin
   > db.createUser({ user:'이름', pwd: '비밀번호', role:['root']})

   2) 권한 가진 접속자만 접속 허용.

   주로 vim을 사용할텐데, 어떤 에디터든 상관이 없습니다. /usr/local/etc/mongod.conf 파일을 열어(없으면 생성), 아래 2줄을 추가하고 종료합니다.

    security:
      authorization: enabled

   3) 몽고DB 재시작

   $ mongod start

   4) 몽고 콘솔로 접속.

   mongo admin -u 이름 -p 비밀번호

   5) 만약 관리자 접속이 잘 먹히지 않은 경우, mongod -auth 로 시작하면된다.

   $ mongod -auth

맥에서 코르도바 iOS 플랫폼 구축하기

코르도바는 모든 플랫폼에서 동작하는 앱을 만들어주는 개발언어 이å므로, 각 개발을 원하는 플랫폼을 따로 구축해 주어야 합니다.
안드로이드는 설치중 여러가지 문제가 발생해 (주로, 안드로이드 스튜디오 관련) 애를 먹었었습니다. 하지만 맥에서 Xcode를 설정하는 것이라 쉽게 일이 마무리 되었습니다.

공식문서 : https://cordova.apache.org/docs/en/9.x/guide/platforms/ios/index.html

1. 선행작업.
   실행을 위해서는 아래 2가지 작업이 선행되어야 한다.
   코르도바 설치 : https://nicgoon.tistory.com/186
   첫앱생성 : https://nicgoon.tistory.com/187

2. Xcode 설치 작업.
   공식문서를 읽어 보면, 2가지 Xcode 설치 방법이 존재하는데 저는 그냥 앱스토어에서 Xcode를 다운로드 받아 Xcode를 설치했습니다.

3. 명령어 라인 개발자 도구 설치.

아래 처럼 입력하면 개발자 도구가 뜨는 데, xcode는 설치되어 있으므로, 설치 버튼을 눌러 줍니다.

$ xcode-select --install

4. iOS 플랫폼 설치.

$ sudo cordova platform add ios

5. 시물레이터 배치.

플랫 폼을 생성했다면, xcode로 프로젝트를 실행하여, 시물레이터 설정을 해 줍니다. 이 도식은 공식문서의 이미지를 참고 하면 좋으며, 실행은 아래 처럼 그냥 하면됩니다.

$ open ./platforms/ios/앱이름.xcworkspace

6. 에뮬레이터 실행.

$ sudo cordova emulate ios

잘된다면 개발환경 설정이 완료된 것 이다.

맥에서 코르도바 안드로이드 플랫폼 구축하기.

코르도바는 모든 플랫폼에서 동작하는 앱을 만들어주는 개발언어 이므로, 각 개발을 원하는 플랫폼을 따로 구축해 주어야 한다.

공식문서 : https://cordova.apache.org/docs/ko/9.x/guide/platforms/android/index.html

1. 선행작업.
   실행을 위해서는 아래 2가지 작업이 선행되어야 한다.
   코르도바 설치 : https://nicgoon.tistory.com/186
   첫앱생성 : https://nicgoon.tistory.com/187

2. java 설치.
   환경 변수 문제로 인해 코르도바 트러블이 생길 수 있다. 최신 버전인 java 11 버전을 설치한다면, 코르도바는 java가 설치되지 않은 것으로 인식한다. 당연히 문제가 발생한다. 그러므로, 8 버전을 설치한다. (한국 번역본은 보지 않도록 한다.)

설치공식사이트 : https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

3. 안드로이드 스튜디오를 설치하면 Gradel이 자동으로 설치된다 하지만, 이 버전이 매우 낮다. 코르도바는 5.x때의 gradle을 사용하므로, 직접 설치를 해 주어야 한다.

설치메뉴얼 : https://gradle.org/install/

여기서 우리는 installing manually 항목대로 설치를 할 것 이다.
다운로드 페이지에서  binary-only나 complete를 다운로드 받으면된다. 맥 같은 경우 다운로드를 받으면, 바로 압축이 풀어 지므로, 그대로 지정한 폴더로 복사하면된겠다.

복사할 위치 : /opt/gradle

설치메뉴얼 처럼 한 번에 폴더가 생성되지 않는다, 대체로 아래처럼 입력하면 무난하다. (그냥 파인더로 생성해도 상관없습니다.)

$ sudo mkdir /opt
$ sudo mkdir /opt/gradle

그냥 파인터를 이용해 데이터를 복제하자.

환경변수는 아래와 같이 등록합니다.

$ export PATH=$PATH:/opt/gradle/gradle-5.3.1/bin

위의 방법이 메뉴얼에 나와 있는 방법인데, 터미널을 다시켜면 환경변수가 지워졌습니다.
이것을 해결하기 위해, 유저 홈디렉토리 (cd ~로 이동할 수있는), 폴더를 파인더로 찾아가 Shift + command + . 을 동시에 눌러 감춰진 파일들이 표시되도록 하였습니다.
여기서 .bash_profile 파일을 편집기(저는 vs code를 이용했습니다.)를 열어 위의 패스를 걸어 줍니다.

4. 안드로이드 스튜디오, 설치.
   안드로이드 설치하는 아래 사이트에 가면 자동으로 시작이된다.
   https://developer.android.com/studio/install?hl=ko

   안드로이드 스듀이로를 열어 tools > SDK Manager를 열어 다음 사항을 확인해 줍니다.
   1) Android Platform SDK 안드로이드 버전을 확인합니다.
   2) Android SDK build-tools 19 이상 혹은 최상위 버전.
   3) 안드로이드 SDK가 설치된 경로, (이것을 알아야 패스를 거어 줄수 있습니다.) 

   환경변수 설정해 주기.
   이것을 해 줘야 코르도바에서 안드로이드 관련 소스들을 찾을 수 있다. gradle 환경 변수를 설정했던 요령으로, 안드로이드를 위한 환경변수를 같은 파일에 추가해 줍니다.

   export ANDROID_HOME=안드로이드 sdk
   export PATH=$PATH:안드로이드 sdk/platform-tools:안드로이드 sdk/tools

5. 플랫폼 추가.

프로젝트를 생성해, 해당 폴더로 이동합니다.

$ sudo cordova create hello com.exaple.hello helloworld
$ cd hello

플랫폼을 추가해 줍니다.

$ sudo cordova platform add android

 추가된 플랫폼을 확인해 줍니다.

$ cordova platform ls

6. 빌드

모든 플랫폼 빌드.
$ sudo cordova build

안드로이드만 빌드.
$ sudo cordova build android

7. 테스트

$ sudo cordova emulate android

빌드 자체는 정말 잘된다 문제는 설정이 까다롭다는 것인데, 다행이 오류 코드를 자 뱉어 주므로, 이를 해결해 나가면 크게 문제가 없다.

8. 테스트가 되지 않을 때,

$ adb kill-server
$ adb start-server

위 두 명령을 차례로 쓴다면, adb가 차례로 재 시작된다. 그리고, 아래 명령을 통해 확인해 보면, 장치가 인증되지 않았다고 나올 것이다.
개발자 모드를 활성화 한 뒤, usb를 뺏다 꽂으면 문제가 해결이 된다.

$ adb devices

맥에서 코르도바 IDE를 설치.

1. Visual Studio Code 설치.

코르도바 사용을 위해 먼저 비주얼 스튜디오 코드를 다운로드 해 설치한다.
다운로드 주소 : code.visualstudio.com

황당하지만 맥용은 따로 설치할 필요없이 다운로드하면 설치가 끝이다. 그냥 애플리케이션 폴더로 이동해 사용하면 될 듯 하다.

2. 코르도바 프로젝트 설정.

코르도 바는 멀티 플랫폼 환경이므로, 프로젝트가 하나 생성되고, 그 속에 설정된 플랫폼들의 빌드 파일을 만들어 주는 식으로 개발을 할 수 있다. 터미널을 열고, 아래와 같이 입력하면 프로젝트가 만들어 진다.

당연한 이야기 지만, 터미널이 열려 있는 폴더 하위에 코르도바 프로젝트가 생성되므로, 주의가 필요하다. 윈도우 같은 IDE 같은 프로젝트 생성에 익숙하다면, 쉽게 실수 할 수 있다. 먼저 원하는 위치로 폴더 이동이 필요하다.

cordova create hello com.exaple.hello helloworld

권한 없음 오류가 날 경우는 아래와 같이 입력한다.

sudo cordova create hello com.exaple.hello helloworld

입력 옵션은 차례로 [프로젝트폴더명] [고유한도메인명] [프로젝트명]이다.

생성후 cd hello를 해 하위 폴더로 이동하고, ls 명령을 이용해 폴더를 확인해 보면 프로젝트가 생성되어 있는 것을 확인할 수 있다.

맥에서 코르도바 환경설정.

* 코르도바 설치를 위해 먼저, 코르도바 사이트로가 메뉴얼을 읽는 것이 좋다.  코르도바는 npm을 통해 설치가 되므로 항상 최신버전이다. 그래서 항상 사이트에 가서 이슈를 확인하고 버전을 확인해야 한다.
코르도바 사이트 : cordova.apache.org

1. nodejs 설치.
   노드 js 사이트 : nodejs.org
   버전 : 10.15.3 LTS
   설치 방법 : 사이트에 가서 그냥 다운로드 받고 설치하면된다. 크게 이슈가 될만 한 것이 없다.

설치버전 확인하기 : node -v

2. 콘솔을 이용해, 코르도바를 설치해 주도록 합니다.

$ npm install -g cordova

위와 같이 입력했는데, 설치가 되지 않고 오류가 날 수 있다. 권한 오류 인데 이럴때는 아래와 같이 코드를 입력해 주도록 하자.

$ sudo npm install -g cordova

그럼 패스워드를 입력하고, 설치가 진행된다.

1. 콜백속에서 오류. (앱이 그대로 다운된다.)

express 서버는 간단한 오류에서는 멈추지 않고, 해당 웹요청만 오류 이전까지 실행되고 멈춘다.

하지만, 콜백속에 오류가 나는 경우, 앱 전체가 다운되어 다시 기동해야한다.

2. 몽고db _id

몽고 db의 _id는 ObjectID() 라는 메소드를 사용해 호출한다. 주의 할점은 문자열 길이가 원래 정해진 12자리와 틀리다면, 오류가 나며, db는 주로 콜백속에서 사용되므로, 앱의 다운을 불러온다.

try catch 속에서 입력 값을 꼭 먼저 조사해야 한다. 당연히 유저가 마음대로 넣는 다면, 몽고 db 다운의 원인이 된다.

사무적으로 번역할 일이 많아 우리말을 자동으로, 번역해주는 툴을 만들었습니다.

한글을 써 놓으면, 영어, 일본어 등의 언어가 자동으로 추루룩 번여이 됩니다.

구글 API는 100만자당 2만원 정도 비용이 들고, 파파고는 무료라 파파고를 쓰게 되었습니다.

어쨌든 툴을 만들고, 2일 째 쓰고 있는데, 번역을 시켜봤더니 재미있는 (IT 하시는 분들이 보면) 오류가 나와서, 글을 쓰게 되네요.

오늘 파파고가 뭘 틀렸냐면, "에셋 번들 리스트 읽기 실패"라고 한국어로 썼더니, 태국어로, "การอ่าน74.125.226.212"라는 번역 결과를 주었습니다.

추측컨데, 검색엔진을 통해, 모든 태국 사이트들의 정보를 수집하고 분석하고 있을 거라 봅니다.

네트워크 오류가 발생했을 때, 파파고가, "74.125.226.212" 라는 서버 주소에서 네트워크 오류가 났다는 메시지를 본적이 있고, 그 기억했었던것 같아요.

그래서 한국어로, 네트워크 오류 상황이 났다는 것을 인지 하고, 오류가 났을 때, 74.125.226.212 주소가 그 상황에 쓰는 단어로 알고 있는 것 같습니다.

정확하게는 74.125.226.212 주소가 네트워 오류 라는 단어라고, 생각 하고 있는 것 같아요.

뭐 그냥 아침 부터 웃었습니다.