Day 17

フロントエンドだけでなく、バックエンドも理解しなければなりません.
簡単に言えば、フロントエンドコンピュータ、バックエンドコンピュータ、データベース内のコンピュータを考慮して、その動作構造と原理を理解することが望ましい.

Webサービス構造

サービスには3台のコンピュータ(プログラム)と、それらを表示するためのコンピュータ(brでユーザー、ブラウザの略称を表す):フロントエンド、バックエンド、DataBase

これまでは糸開発によって運行されていたが,導入後はクラウドやコンピュータを用いてそこで糸開発を行うことができる.(サーバを開きます.これはfront-endです)

私たちが使っているバックエンドapiはもう別のコンピュータで糸devを開いています.

データベースは既に存在します
これが別のパソコン/雲の巨大なアクセルのようなものだと思ったらいいです.

今まで、私たちがここでやってきたのはfront-endで、私たちは今ユーザーのパソコンにfront-endを置いて糸の開発をしてテストしています(私しか見えません)
では、誰もが接続できるように配置する必要があります.
すでに配備されていると思ってください.

ブラウザでは、接続に成功するとfront-endがHTML、CSS、JSをロードし、ブラウザで描画します(データは空です).

また、Back-EndからuseQueryなどのapiを取得して空白データを埋め込むには、back-endにデータがありません

Back-endからDataBaseに必要なデータをインポート/保存し、ブラウザで描画してサイト全体を完了します.

これらの過程を実行する過程で、一部の友达は相応の役割を果たした.
ブラウザ機能を実行するapollo-client;
バックエンドのapollo-severに送信し、
バックエンドからデータベースに送信されるORM/ODM
どうして1つではなく2つあるのですか?
ORMとODMは名前だけでなく用途も異なります

SQLとNoSQL

テーブル、<-リレーショナル・データベース、SQL、RDB用
Oracle、mySQL、Postgresなど.
<-NOSQL(sqlだけでなく)ファイル封筒を格納するためのもの(collection)
代表的にMongoDB、Firebase
だからなぜORM/ODMなの?
ORMはSQLの友達をつなぐキャラクターです.
ODMはNoSQL接続を担当する友人(Object Document Model)
これまでSQLはデフォルトであり、他のパフォーマンスが必要な場合はNoSQLの追加を検討してきました.
!!繰り返し強調!!!繰り返し強調!!!繰り返し強調!!!繰り返し強調!!!繰り返し強調!!!繰り返し強調!!
front-endこれを知っていますか?
もちろん、青少年の場合、それを知らない可能性がありますが、時間が経つにつれて、front-endまでの深さではますますはっきりしなくなります.front-endまでの深さでは、両方ともできます.そして、プロセス全体を理解しなければなりません.それを行うには、ログインやアップロードなどのバックエンドの知識が必要です.これらのプロセスを理解する必要があります.

データベース#データベース#

データベースを目で見てみましょう.一度ダイバーをつけると見えます.
https://dbeaver.io/

コンセント部分をクリックして現在使用しているDBを選択
現在使用中のゾウのシェイプPostgreSQLを使用

プリファレンスウィンドウが表示されます
ポートとは、糸が開発した3000ポートのこと.PostgreSQLデフォルトでは5432ポートが使用されています
ホストはIPアドレスを表し、使用するデータベース(PostgreSQLが敷かれたプログラム/クラウド/コンピュータ)のアドレスをホストに格納します.
パスワードが掛かっていたら入れます.
その後test connectionをクリックすると接続が確認できます.

実際に中身が見えます.これは、表示中のツール、管理ツールにすぎず、単独で変更することはできません.(デバッガ)


データベースの実践
バックエンドapiの作成
まず、空のDBにテーブルを作成します.
VSコードにclass backendを作成し、indexを作成します.jsで始まる.
JavaScriptが動いている場所はどこですか?
実際、HTML、CSS、JSはブラウザで実行されています.
これだけ使用されているjavaスクリプトブラウザでしか使用できませんか??
ウィンドウを開き、オペレーティングシステムで->ノードを実行します.js
非ブラウザでJavaScriptを実行できます(Node.jsをブラウザと見なすことを推奨します)
Node.jsを設定します.
端末からclass backendに移動
square init以降の問題はEnterを検索するだけでdispold設定のpackageに設定されます.json転送
後続パッケージ.jsonのスクリプトセクションの変更

それから糸の開発をしますか?

ブラウザでなくても開けられる???
再インデックス.jsに戻ってapiを作成する前に、データベース内のデータを格納するための空間、テーブルを作成する必要があります.その後columnを別々に作成して空きスペースを作成します.後でAPIを作成して保存する必要があります
APOLLOクライアントを使用してブラウザからバックエンドコンピュータに接続するなど、バックエンドからデータベースへの接続にはORMが必要ですが、ORMdpssequrize、typeORMなどもあります.
ここではtypeORMを使用します.

yarn add -D typescript

(npmが遅いので線で)
これでnode modulesが埋められます
タイプスクリプトがインストールされましたtsに変換
tsconfig.jsonファイルを作成します.

Next.jsではインストールするだけでいいですが、手動で入力する必要があります.
タイプスクリプトのdogsにはtsconfigに関する部分があります.
https://www.typescriptlang.org/docs/handbook/tsconfig-json.html

次のアドバイスがあります.
https://www.npmjs.com/package/@tsconfig/recommended

このようにして例が現れた.これはtsconfigですtsを入れます.
実行はnodeではなくts-nodeです.だから.
ts-node、ts-node-devをインストールする必要があります.(導入用、開発用)

yarn add -D ts-node
yarn add -D ts-node-dev

取り付けができたら梱包します.jsonに「dev」セクションをts-node-devindexに変換します.tsに変更します.
あとはORMを敷きます.

yarn add typeorm

typeormの役割は、ここでデータベースを使用するかどうかによって、データベースを開くのではなく、対応するライブラリをインストールする必要がありますが、ライブラリはmysqlです.

yarn add mysql

この設定は完了しました
class backendフォルダのBoard mysql.tsを作成して文章を埋め込む

typeformからBasentityをインポートする必要があります
だから記入したものを表に変えるように要求すべきです.

実行クラスは、既存のJavaScriptとは異なる必要があります.
typeormのEntity機能(関数)を実行する必要があります.異なる操作をどのように実行するかは、@Entity()に遭遇することから始まります.次にクラスをentity機能に入れ、JavaScriptとは異なる方法で実行します.
リクエストは、このクラスをmysqlテーブルに変換します.
@columnこれをcolumnに変えさせてください
!昔の赤い糸.
tsconfigのcompilerOptionで
「実験Decorators」:trueの追加
writer,title,年齢は年齢です!:代替手順(必ずデータを表示してください!)
後で接続する必要があります
type, database, username, password, host, port
充填後
どこで参照を書きますか.mysql.これは、tsが終了したすべてのファイルを参照することを意味する.

entities:[__dirname + "/*.mysql.ts"]

logging : true

日記を見るか見ないかを決めるという意味です.
synchronize: true
同期を有効にするかどうか
どうして成功したか知ってるの?
を選択します.
.catch(()=>{})を実行する必要があります.
成功したら、失敗したら、catch

import { createConnection } from "typeorm";

createConnection({
  type: "mysql",
  database: "mysql",
  username: "root",
  password: "codecamp",
  host: "34.64.207.239",
  port: 3313,
  entities: [__dirname + "/*.mysql.ts"],
  logging: true,
  synchronize: true,
})
  .then(() => {
    //연결 성공시 실생하기!!
    console.log("연결완료!");
  })

  .catch((error) => {
    // 연결 실패시 실행하기
    console.log(error);
  });

今、糸devを実行すると、作成通りになります...必ず成功しなければならない.
しかし、エラーが発生します.
https://velog.io/@john_with_smile/x-Unable-to-compile-TypeScript-Cannot-find-name-dirname
簡単に言えば、タイプを指定します.

その後糸devの場合、接続が完了するにつれて、このように織りが完了します.
以前はバックエンドの開発時に入力していましたが...表示

ディビバーに行ってみると、実際に空いているテーブルを作ったことがわかります!
!!Node modulesにはGitにアップロードするコンテンツがたくさんあります
.gitignoreファイルを作成し/node modulesに挿入
追加した場合は、個別にアップロードされません