[TIL]9月13日:最初

33733 ワード
ネットワーク TIL テキストリンク
今まではNOTIONで今日からNOTIONよりも文章を共有しやすいBELLOGに記録してきました👨🏻‍💻 毎日の勉強を記録するTIL(Today I Learned)を書きたいので、ついでにまとめておきます.
シナリオに書いたJunglog
9月13日今日からTIL(Today I Learned)スタート!

Webの操作手順


ユーザーがWebサイトを要求すると、サーバが応答し、Webブラウザで応答結果を表示できます.Webブラウザは、要求をサーバに送信し、応答するhtmlファイルを描画します.
より多くの場合、サーバはhtmlファイルだけでなくjson形式のデータを受信します.そのため、例えばInstagramでは、写真やいいねボタンをクリックするたびに更新すると、ユーザーUX(ユーザー体験)が悪くなります.従って,jsonやxml形式でapi通信を行い,最近はjsonを用いる傾向が多い.

ログインフォームの作成

<h1>로그인 페이지</h1>
<form action="" method="post">
    <p>ID: <input type="text" name="id" /></p>
    <p>PW: <input type="password" name="password" /></p>
    <button type="submit">Submit</button>
</form>
formはinputラベルに少ない値を含み、要求をサーバに送信することができます.formのactionはsubmit時に特定のurlで要求される属性です.方法はhttpmethodが多く、htmlにはgetとpostの2種類があります.getをurlに使用しますか?id=xx&password=pw 123のようにpasswordが露出するのは安全性上危険なので、ログイン機能はpostを使用します.

cssの適用


cssには3つの適用方法がある.
1.外部cssファイルの読み込み方法(外部スタイルシート)
2.htmlのheadラベルの間にstyleというラベルを作成してcss(内部スタイルシート)を適用する方法
3.タグのstyleプロパティ(インラインスタイル)の使用方法
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <!--외부 스타일시트-->
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    
    <!--내부 스타일시트-->
    <style>
    .test {
        background-color: black;
        color: white;
    }
    </style>
</head>
<body>
  <!--내부 스타일시트-->
  <div class="test">안녕하세요.</div>
  
  <!--인라인스타일-->
  <div style="color:green;">반갑습니다.</div>
</body>
</html>

Bootstrapライブラリ


cssを1つずつ実装するには多くの時間がかかるため、実装されたcssを呼び出すことができる.Bootstrapサイトに入ると、いろいろな例やドキュメントが見られるので参考になります.
Bootstrapリンク

JavaScriptの適用

  • 内部JavaScriptコード
    • <html>
<head>
    <meta charset="UTF-8">
    <title>JavaScript Apply</title>
    <script>
    	function hey() {
            alert('안녕하세요');
        }
    </script>
</head>
<body>
<button onclick="hey()" type="button">버튼</button>
</body>
</html>
  • 外部JavaScriptファイル
    example.js(ファイルパス:/statc/example.js)
    • <script>
	function hi() {
    	alert('안녕');
	}
</script>
    <html>
<head>
    <meta charset="UTF-8">
    <title>JavaScript Apply</title>
    <script src="/static/example.js"></script>
</head>
<body>
    <button onclick="hi()" type="button">버튼</button>
</body>
</html>

    jQuery


    HTMLの要素はJavascriptで操作できます.
    しかし,Javascriptのみを使用するためコードが複雑でブラウザ間の互換性を考慮する必要があるため,jQueryというライブラリが出現した.
    たとえば、id属性値が「element」のタグが表示されない場合.
    <script>
    document.getElementById('element').style.display = 'none';
</script>
    これらのJavaScriptコードを
    <script>
    $('#element').hide();
</script>
    こんなに簡単に書けます.
    jQueryファイルを使用する前に、jQuery CDNをインポートする必要があります.
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    HTTP method-GET


    GETは、データ照会を要求するために使用される.
    他にもPOST、DELETE、PUT、PATCHがありますが、今はGETを記録します.
    https://movie.naver.com/movie/bi/mi/basic.naver?code=185614
    ?「上海日報」を例にとると、前の部分はサーバーアドレス、後の部分は映画番号と言える.
    サーバアドレス:https://movie.naver.com/movie/bi/mi/basic.naver?code=185614
    映画情報:code=185614

    GETでデータを渡す方法


    https://search.naver.com/search.naver?ie=utf8&query=sparta
    ie=utf 8勘定科目の勘定科目と勘定科目の勘定科目のエンコーディング情報
    query=spartaААААА
    「コード」名義で映画番号を交換するのは!
    フロントエンド開発者とバックエンド開発者の約束といえる.

    Ajax


    Ajaxベーススケルトン
    <script>
    $.ajax({
      type: "GET",
      url: "여기에URL을입력",
      data: {},
      success: function(response){
        console.log(response)
      }
    })
</script>
    type:「GET」GETリクエスト
    url:リクエストurl
    data:要求時に行データを空に保持する
    ≪成功｜Succeeded｜ldap≫:成功した場合、応答変数値にサーバーの結果値を含めることで関数を実行します.
    Ajax例
    ソウル市スモッグ公共データ
    共通データでは、RealtimeCityAir勘定科目のMSRSTR NM、RealtimeCityAir勘定科目のIDEX MVLを繰り返し入力して、微細塵の値が70未満の球の例を出力します.
    <script>
    $.ajax({
      type: "GET",
      url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
      data: {},
      success: function(response){
        let rows = response['RealtimeCityAir']['row']
        for(let i = 0; i < rows.length; i++){
            let gu_name = rows[i]['MSRSTE_NM']
            let gu_mise = rows[i]['IDEX_MVL']
            if(gu_mise < 70){
            console.log(gu_name, gu_mise)
            }
        }
      }
    })
</script>
    出力結果
    中区
    龍山区
    城北区-99
    道峰区
    江北区
    芦原区-99
    江南区-99
    瑞草区

    img srcをjQueryに変更

    <img id="img-cat" />
    imgラベルのsrcを変更します.
    <script>
    $('#img-cat').attr('src', '이미지 경로');
</script>
    上記のコードに示すようにattrを使用して変更できます.
    例
    リフレッシュするたびに変更されるjson
    上のリンクからurlという名前のキーを取得し、ボタンをクリックするとimgラベルのsrcに適用します.
    <div>
    <button onclick="q1()">고양이를 보자</button>
    <div>
        <img id="img-cat" src="" />
    </div>
</div>
    <script>
    function q1() {
        $.ajax({
            type: "GET",
            url: "https://api.thecatapi.com/v1/images/search",
            data: {},
            success: function (response) {
                $('#names-q1').empty()
                let imgUrl = response[0]['url'];
                $('#img-cat').attr('src', imgUrl);
            }
        })
    }
</script>
    attrを使用してimgタグのsrc属性値を変更できます.


    MongoDB & Robo 3T


    MongoDB



    🌱 MongoDBって何ですか?
    MongoDB Webサイトでは、MongoDBを「必要なクエリーとインデックスを使用して、必要なレベルの拡張性と柔軟性を提供するドキュメント・データベース」と定義しています.
  • MongoDBは、柔軟なJSON類似ドキュメントにデータを格納します.つまり、フィールドはドキュメントによって異なる場合があり、データ構造は時間とともに変化する場合があります.
  • ドキュメントモデルは、アプリケーションコード内のオブジェクトにマッピングされ、データの使用が容易になります.
  • は、一時的なクエリー、インデックス、およびリアルタイムの集約機能を備えた強力なデータアクセスおよび分析方法を提供します.
  • MongoDBは、カーネルに導入されたデータベースで、可用性、水平拡張性、地理的な分散が極めて高く、使いやすいです.
    • MongoDBは典型的なNoSQLの1つであり、データベースはリレーショナル・データベース(RDBMS)とNot Only SQLに分けられる.
    この両者の違いは個人ゲームサイトに記載されており,リンクを共有している.
    RDBMS vs NoSQL

    Robo 3T



    🌱 Robo 3 Tとは?
    Robo 3 Tはインストール型オープンソースモンゴルDB管理ツールです.
    MongoDBのみを使用する場合はコマンドラインインタフェース(CLI)環境で使用する必要があり、Robo 3 Tを使用する場合はグラフィックユーザインタフェース(GUI)として使用することができる.
    Mac環境でrobo 3 tをインストールすると、実行エラーが発生する可能性があります.この場合、右クリックして正常に実行できることを確認してください.
    linuxパフォーマンス分析ツール
    Android開発のベストプラクティス