[アプリケーション開発]-クラス(Native、Hybrid、Cross-Platform)、React Native、JS


📕 最初のログ


[ログの内容]
  • アプリケーションの基本動作構成
  • React Native
  • アプリケーションの開発によく使用されるJavascript
  • 💡 アプリケーションサービス



    アプリケーション・サービスの作成
    これは、クライアントとサーバが作成される必要があることを意味します.
    簡単に言えば
    クライアントはユーザが見た画面である.
    サーバはデータが必要な場所です.
    これも必要なデータを要求するときに応答する場所です.
    アプリケーション、すなわち、クライアントに必要なデータがあるたびに、サーバに要求を発行し、応答データを受信してユーザに表示する.
  • を整理して、ユーザーが見ているアプリケーション画面を作成します.
    サーバを1台作成すれば、必要なデータを要求できます.
  • 💡 アプリを作るなら?


    アプリケーション開発の代表的なものは「アンドロイド」と「iOS」です.

    AndroidはJavaとKotlin言語で開発できます.
    iOSはSWIFT技術で開発できる.
  • ですが、それぞれ異なる技術で開発するのではなく、両方の技術を開発することができます.
    以下に説明する反応活性はその1つである.
  • 💡 アプリケーション開発タイプ


    まず、アプリケーション開発の種類を見てみましょう.
    AndroidとiOSのネイティブアプリをそれぞれ開発!
    Webサイトを作成し、ハウジングを追加して、簡単に導入できるハイブリッドアプリケーション!
    最後に、以上の2つの方法を組み合わせたプラットフォーム間アプリケーション!
  • 反応はもともとプラットフォーム間応用である.
  • 🔍 ネイティブアプリケーション


    AndroidやiOSなどの特定のプラットフォーム用に作成されたアプリケーション
    長所
  • Android、iOSそれぞれのモバイルオペレーティングシステム(OS)が提供するツールと言語により、最大限に機能するため、より高速で安定したダイナミックな効果を実現しやすくなります.
  • 短所
  • は、他の方式に比べて、より高い技術力を必要とし、異なるモバイルオペレーティングシステム(OS)に基づいてアプリケーションを開発する必要があるため、開発時間とコストが高い.
  • 🔍 ハイブリッドアプリケーション


    ネイティブアプリケーションとWebアプリケーションの機能を組み合わせます(Webアプリケーション:一般的なWebブラウザで使用することを指します).
    長所
  • は、単一のコードに基づいてiOSまたはAndroid上で同じページを使用できるため、開発コストと時間が比較的低い.すべてのプラットフォームは一貫したユーザー体験を提供し、アプリケーション容量も比較的軽い.
  • 短所
  • グラフィック密集型アプリケーションは性能が悪く、オリジナルアプリケーションに比べてダイナミック要素を実現するのは難しい.ネットワーク環境やWebサイトの容量によっては、速度が遅くなる可能性があります.
  • 🔍 プラットフォーム間アプリケーション


    2つ以上のプラットフォームで稼働するアプリケーションを作成しているといえる.
  • iOSまたはAndroidの2つのアプリケーションストアで
  • を使用できる開発言語とフレームワーク
    長所
  • コードを1つ作成するだけで、2つのプラットフォームで使用できるため、時間を大幅に短縮できます.反応開発者であれば、反応本を通じてモバイルアプリケーションを迅速に開発することもできます.別のコードで書かれているので、メンテナンスも簡単です.
  • 短所
  • 本機ではないので、性能を100%向上させることができず、切り替えが必要です.
  • 💡 はんのうこゆう



    反応本機はプラットフォーム間アプリケーション開発言語の一つである.
    私たちはFacebookで作成し、サポートを提供しています.
    ユーザインタフェース(UI)の作成に特化した応答応答.これはjsライブラリ/フレームワークに基づいてアプリケーションを作成する技術です.(js=javascript略)

    ここでは、本機が常に最新バージョンのJavaScript構文(ES 6)を使用していることに注意してください。

  • 反応本の動作原理は、反応本が仮想DOMによってDOMを操作しない以外は、反応本と実質的に同じである.
  • シリアル、非同期、バッチブリッジを介してネイティブプラットフォームと通信し、ターミナルデバイス(解析開発者が作成したjavascript)上でバックグラウンドプロセスを直接実行します.
  • 💡 アプリケーションの開発に使用される一般的なJavascript


    🔍 矢印関数-ARROw Function(関数が短い!)

  • 以前は、関数キーを使用して関数を宣言していました.
    矢印関数(Arrow Function)構文で宣言することもできます.
  • [기존 방식]
    let a = function() {
    console.log("function");
    }
    a();
    
    [최신 방식]
    let a = () => {
    console.log("arrow function");
    }
    a();

    🔍 構造化されていない割当て(ディックシーケンスキーと値をすばやくポップアップ!)

  • バイナリファイルから値を取り出して変数に入れると、割り当てなしでバイナリファイルのキー値に従って変数を使用できます.
  • //객체
    let blog = {
    owner : "ho",
    url : "ho.tistory.com",
    getPost() {
    console.log("문법 정리");
    }
    };
    //기존 할당 방식
    let owner = blog.owner
    let getPost = blog.getPost()
    
    //비구조 할당 방식
    let { owner, getPost } = blog;
    
    //각각 blog 객체의 owner , getPost() 의 데이터가 할당
    //blog의 키 값과 이름이 같아야한다.
    //(예 - owner가 아니라 owner2를 넣으면 아무것도 안 들어온다.)
    
    ** 많이 사용할 방식**
    //함수에서 비구조 할당 방식으로 전달된 딕셔너리 값 꺼내기
    let blogFunction = ({owner,url,getPost}) => {
    console.log(owner)
    console.log(url)
    console.log(getPost())
    }
    blogFunction(blog)
    

    🔍 テキスト-テキスト(自由に改行!)

  • の最新方式では、キーボード上の感嘆符の横にあるキーbacktic(`)は、+記号を必要とせずに文字列の処理を簡略化することができる.
    またbacktic(`)では複数行の改行も自由に使用できます.
  • const id = "myId" ;
    const url = `http://ho.tistory.com/login/${id}` ;
    const message = "줄바꿈을 하려면 \n이 기호를 써야 했지만"
    const message = ` 백틱은 줄바꿈도 
    마음대로 사용이 가능합니다. `
    

    🔍 オブジェクト文字(ディックシリーズを短く作ってみよう!)

  • 以前は、オブジェクトを作成するときに、フィールド名と置換する変数名が同じ場合に、次のコードが記述されていました.
  • [기존 방식]
    var name = "ho";
    var job = "developer";
    var user = {
    name: name,
    job: job
    }
    console.log(user);
    //{name: "ho", job: "developer"}
    
  • は、最新の方法で作成を簡略化しました.
  • [최신 방식]
    var name = "ho";
    var job = "developer";
    var user = {
    name,
    job
    }
    console.log(user);
    //{name: "ho", job: "developer"}
  • キー:値形式で、変数名を記入するだけで変数名と同じフィールドを作成し、変数値を代入します.
  • 🔍 map(文を繰り返す別の方法)

  • mapはfor反復文とは異なり,リストの長さ値を知らなくてもよいが,forとは逆にリストのいくつかの値の順序を教えてくれる.
  • //for문
    let numbers = [1,2,3,4,5,6,7];
    for(let i=0; i<numbers.length; i++){
    console.log(numbers[i]);
    }
    
    //map
    let numbers = [1,2,3,4,5,6,7];
    numbers.map((value,i) => {
    console.log(value,i)
    })
    //numbers.map((value,i) => 는 numbers.map(function(value,i) 와 같다.
    //1 0
    //2 1
    //3 2
    //4 3
    //5 4
    //6 5
    //7 6

    🔍 module system(JavaScriptファイルをモジュール化)

  • exportは、JavaScriptの値、関数、バイナリ(オブジェクト)またはJavaScriptファイル自体を外部にエクスポートするキーワードであり、
  • .
  • importは逆に、JavaScriptファイルにインポートされたキーワードです.
  • 外部へのエクスポートは、外部で使用する準備をし、内部へのインポートは外部へのエクスポートを意味します.
    例えばutil.jsファイルがあると仮定
    //times, plusTwo 함수를 외부로 내보낼 준비를 한다.
    export function times(x) {
    return x * x;
    }
    export function plusTwo(number) {
    return number + 2;
    }
    
    // util.js에서 내보낸 함수들을 사용하는 모습
    import { times, plusTwo } from './util.js';
    console.log(times(2));
    console.log(plusTwo(3));
    export defaultとして宣言された関数の場合:
    // in util.js
    export default function times(x) {
    return x * x;
    }
    // in app.js
    import k from './util.js';
    console.log(k(4)); // returns 16
    
  • このようにexport defaultと宣言された関数は、ファイル内で一意である必要があります.インポート時に異なる名前を使用できます.
  • 감사합니다 😊