[TIL]フロントエンドDay 12

📚 学習の内容

1.モジュール

10日目にコンポーネント設計を行う際、実践的なSimple Too Listは、htmlの<script src="">を使用して外部JSファイルをロードし、このときファイル間の依存性を強調する.アプリケーションの場合.jsファイルで、TodoList.jsとTodoForm.jsファイルの関数を使用する場合はappを使用する必要があります.jsファイルのスクリプトを読み込む前に、TodoList.jsとTodoForm.jsを読みます.この点を考慮しない場合、作成htmlは次のエラーに直面します.

しかし、ファイル数が増えるにつれて、ファイル間のスクリプト依存性を理解することが難しくなり、管理が簡単になるモジュールです.

使用方法

他のファイルからexportで導出された変数、関数などは、importコマンドを使用してロードされます.変数または関数は1つ以上で、使用状況に応じてロードするスクリプトを決定できます.
次にその例を示します.

// 파일 안의 모든 정보를 불러올 때
import * from "./src/storage.js"

// 파일 안에 export default로 설정된 함수 또는 변수를 불러올 때
import TodoList from "./src/TodoList.js"

// 파일의 일부를 불러올 때
import { getItem } from "./src/storage.js"

// 파일의 일부를 다른 이름으로 사용할 때
import { getItem as g } from "./src/storage.js"

// export default로 설정된 것과 추가로 다른 일부분을 불러올 때
import TodoList, { util } from "./src/TodoList.js"

2.非同期処理

2-1. 非同期処理バー

あるコードが直ちに処理できない場合、処理が終了する前に次のコードの処理方法を実行する.代表的なものはaddEventListener、setTimeoutなどである.

2-2. コールバック方式

コールバック方式は、非同期処理の結果をコールバック関数に渡して次の操作を行う非同期処理方式である.たとえば、nameを取得してコンソールに出力するためにidを非同期で入力する必要があるとします.

	// id를 입력받아 비동기로 name을 가져오는 함수
	getNameById(id, (name) => {
      console.log(name);
    });

callback方式にはcallback hellという用語が存在するため,非同期データの非同期処理を継続すると毒性が劣る.たとえば、idを使用してnameを検索し、nameを使用してアドレスを検索し、アドレスを使用して郵便番号を検索しますか?

	getNameById(id, (name) => {
      getAddressByName(name, (address) => {
      	getCodeByAddress(address, (code) => {
        	console.log(code);
        });
      });
    });

処理プロセスが増加するにつれて,コードの構造を理解することはますます困難になる.

2-3. Promise

Promiseはチェーン形式で非同期処理を制御できるオブジェクトである.Promiseは非同期処理状態を表すPromiseStatusと処理結果PromiseResultからなる.Statusは、非同期処理が正常に終了したfulfilled、非同期処理が終了していないpending、非正常に終了したrejectedの3種類の1つである.
Promiseオブジェクトでは、thenコマンドを使用して次の操作を指定できます.Promiseオブジェクトを使用して、thenの上のcallbackのコードを次のように記述します.

// 모든 get 함수가 Promise 객체를 return한다고 가정할 때.
	const code = new Promise((resolve, reject) => resolve(getNameById(id)))
        .then((result) => {
          return getAddressByName(result)
        }).then((result) => {
          return getCodeByAddress(result)
        }).then((result) => {
          console.log(result)
        });
    

Promiseの組み込み関数

catchtry-catch構文に似た役割.拒否された状態のPromiseを返すと、catchのコードが実行されます.

finallyPromiseの状態にかかわらず、すべての非同期処理が完了するとfinallyのコードが実行されます.

Promise.allすべての入力のPromiseを順番に実行します.

Promise.raceすべての入力のPromiseを同時に実行します.最初に終了した結果を返します.(拒否または解決)

Promise.anyすべての入力のPromiseを同時に実行します.彼らの中で最初に解決したPromiseの結果を返します.

Promise.allSettled入力したすべてのPromise実行結果を配列に戻します.

Promise.resolvestatusが完了し、入力した値Promiseを返します.

Promise.rejectstatusは拒否され、入力された値Promiseが返されます.

2-4. async, await

asyncとawaitはPromiseを用いた別の非同期処理方式である.

asyncコマンドが関数の名前の前に追加されると、返される値はPromiseに囲まれます.

await命令はasync関数内部でのみ使用可能である.await Promiseがすべて処理されるのを待つため、通常の同期コードと同様に、上から下への順に実行される.

Promiseが拒否された場合、try-catchを使用してエラーを処理できます.

次に、asyncおよびawaitを使用して記述されるコードの例を示す.

  // 모든 get 함수가 Promise 객체를 return한다고 가정할 때.
  const getCodeById = async (id) => {
    const name = await getNameById(id);
    const address = await getAddressByName(name);
    const code = await getCodeByAddress(address);
    return code;
  };

これにより、asyncおよびawaitを用いて、より可読性のある非同期処理コードを記述することができる.

📝 勉強を続ける

非同期処理;関数式プログラミングにおける非同期処理

🤔 に感銘を与える

3週目に入ると、勉強の量と勉強する内容が多くなります.非同期処理は熟知していないし、重要だと思っているので、徹底的に整理する必要があります.関数式プログラミングの授業はまだ総括を聞いていないし、新しい課題も完成していない.来週は悪名高い複製期間だ.今週はできるだけたくさんしなければなりません.

Reference

プログラマフロントエンドプログラムコース