week 3コンセプト学習共通

1.Typescript

JavaScriptとType Scriptの違い

1) JavaScript
エンタープライズ言語に基づいて、

ページにインタラクティブコンポーネントを追加

スクリプト言語

クライアント実行

2) TypeScript

普通のJavaScriptにコンパイルされたJavaScriptの親

オブジェクト向けプログラミング言語

クライアント側およびサーバ側で

を実行する.

Type Scriptのメリット

1)高度なコードナビゲーションとデバッグ

コードに目的が示され、rhの目的タイプに適合しない変数または関数にエラーが発生し、エラー

が予め除去する.
2)JavaScript対応

型スクリプトはJavaScript 100%対応

アプリケーションとWebを実現するJavaScriptの同じ用途

3)強力な生態系

ほとんどのライブラリサポートタイプスクリプト

4)漸進的な切り替えが可能

各種編集はタイプスクリプトに関する機能とプラグイン

をサポートする.
5)プロジェクト規模が大きいほど、複雑で、メンテナンスが重要な長期プロジェクトほど、タイプスクリプトの優位性が明らかになる
=>これらの利点のおかげで,最近js陣営にはtsが多く導入されている.

TypeScriptの基礎文法と使い方

1)基本タイプ:Boolean、Number、String、Object、Array、Tuple、Enum、Any、Void、Null、Undefind、Never
2)ジェニーリック:関数のパラメータとしてタイプを使用

function logText(text: T):T {
 return text;
}

logText<string>('aa');
logText<number>(100);

3)類型推定:類型スクリプトがコードを解釈する過程

var a = true;

a = 100; //Error

4)タイプ断言:タイプスクリプトは解釈よりも明確な目的を持ち,開発者は直接コードにタイプを指定することができる.

var a;
a = 10;
a = 'string';
var b = a as string;

参照)
https://www.typescriptlang.org/
https://www.samsungsds.com/kr/insights/TypeScript.html
https://ko.strephonsays.com/javascript-and-vs-typescript-13697#menu-1

2.Javascriptの非同期技術

同期と非同期

同期(Synchronous)

回答待ち(結果待ち)

の利点:単純

欠点:リソース使用効率の低下

非同期

回答を待たない(結果を待たない)

の利点:リソースの効率的な使用

欠点:複雑

ブロックと非ブロックの違い

blocking

同期状態応答待ち

non-blocking

非同期応答を待たない

JavaScriptの非同期処理技術の変化(コールバックからpromise,async-await)

callback

パラメータとして受け入れる関数を呼び出す機能

.

コールバック例

function add5(a, callback) {
  setTimeout(() => callback(a + 5), 100)
// 100ms가 지난 후 함수로 입력받은 callback에 a + 10값을 다시 입력하여 callback함수 호출
}
add5(10, function (res) { // add5가 입력받는 callback함수 정의 부분
  console.log(res)
});

promise

操作終了後に実行される関数を提供するのではなく、Promise独自の方法です.次に()

を呼び出す

承諾特徴

function add10(a) {
  return new Promise(resolve => setTimeout(() => resolve(a + 10), 100));
} //Promise사용 시 작업이 끝났음을 알려주는 resolve를 인자로 받아들임.

add10(10)
  .then(add10)
  .then(add10)
  .then(add10)
  .then((res) => console.log(res))

async-await

Promiseと比較して、

は非同期の状況を記述しやすくなります.

async function f1() {
  const a = await add10(10);
  const b = await add10(a);
  console.log(a, b)
}
f1();

注)https://www.youtube.com/watch?v=sN4E9_u7xQk
https://techlog.io/Javascript/General/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%B9%84%EB%8F%99%EA%B8%B0%ED%86%B5%EC%8B%A0-callback-promise-async-await-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0/

3. CORS

CORSとは?

CORS (Cross-Origin Resource Sharing)

ブラウザが他のソースのリソースを共有する方法

CORSの働き方

1) Simple request

サーバに要求

を直ちに送信する方法

サーバはAPIを要求し、サーバは応答をブラウザ

に送信する.

ブラウザは、動作

を実行するか否かを判断するためにタイトルをチェックする.

2) Preflight request

サーバに代替要求を送信し、セキュリティブランチのディスパッチ後にこの要求を送信する章

.

実際のリソースを要求する前に、OPTIONS方式により実際の要求

を送信するか否かを判定する.

ブラウザは、動作

を実行するか否かを判断するためにタイトルをチェックする.

なぜCORSを使うのですか?

CORSメカニズムは、ブラウザとサーバ間の安全なクロスソース要求とデータ転送をサポートします.

最新のブラウザは、XMLHttpRequestまたはFetchのようなAPIでCORSを使用して、異なるソースからのHTTP要求のリスクを低減する

.
参照)
https://beomy.github.io/tech/browser/cors/
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORc

4. JWT

JWT方式がSessionとCookie方式に取って代わることができるのは何ですか?

JWT (JSON Web Toke)

トークン

は、認証に必要な情報を暗号化する.

長所
1)セッション/Cookieは個別のリポジトリ管理が必要ですが、JWTはリリース後に検証するだけで、追加のリポジトリは必要ありません.
2)高度拡張性

短所
1)セッション/Cookieモードでは,ユーザのすべての情報はサーバのリポジトリに安全に保存されるが,JWTはユーザの重要な情報をPayloadに入れることができない.

5.テストフレーム

テストフレームワークとは?

テストフレームワーク:再利用可能な部分を拡張することで、アプリケーション開発を容易にし、構築された

テストの種類

1)ユニットテスト
独立したテスト

アプリケーションの各モジュール

2)E 2 Eテスト

システムおよびその構築および導入プロセスをテストする

3)集積テスト

モジュールを統合する過程で、

を実行してモジュール間の互換性の問題を発見する

jestとは?

jest

簡単を中心としたFacebookによって開発されたオープンソースJavaScriptテスト

の利点:インストールと使用が容易(追加のインストールを必要とせずにすべてのテストに必要な機能をサポート)

jestのインストール方法

npm install --save-dev jest

テストの実行

npm run test

その他のテストフレームワーク

1) Mocha

柔軟性、拡張性、

Jamineとは異なり、サードパーティのサポート、移動、Spingツール

を使用します.
2) Jasmine
ほとんどのバージョンの

はAngular

をサポートしています

ユーザーとコミュニティによって作成された大量の資料

注)https://velog.io/@sms8377/Testing-%ED%85%8C%EC%8A%A4%ED%8A%B8%EC%9D%98-%EC%A2%85%EB%A5%98-%EB%B0%8F-Jest
https://marcofranssen.nl/jasmine-vs-mocha
https://jonnung.dev/javascript/2018/11/15/tdd-javascript-testing-framework/