Wanted-preonboarding 1 - 1

ハブリンク
リンクの配置
チームタスクリンク

実装の説明

レート情報を伝えるopen APIを使用して、1번 계산기および2번 계산기を作成します.

1号电卓

ドロップダウン・メニューを選択すると、変更された為替レートが表示されます.Submitボタンをクリックすると、為替レートで計算した入金金額が表示されます.無効な請求書の入力時にエラーメッセージが表示される송금액이 바르지 않습니다

送金額が0未満の場合は

請求書金額が10000を超える場合は

とする.

送金額が入力されていない場合は

である.

デモ

受信国/地域変更エラーメッセージ表示

2号电卓

ドロップダウンメニューに表示される通話は、ドル、CAD、KRW、HKD、JPY、CNYの6種類.ドロップダウン・メニューのいずれかを選択すると、前の選択した国とタブの国の位置が変更されます.ユーザ入力(入力/選択)は、入力するたびに同期して変更されます.日付フォーマットはYYYY-Month-dd形式でなければなりません.(ex: 2022-Jan-01)

デモ

入金国変更入金金額表

に決心させる

昨年下半期にプログラマーの中でカリキュラムを勉強したとき、いくつかの体験がありました.
1.やるべきことではなく、積極的に仕事を探す
2.日常のように記録する
3.新技術スタックへの挑戦
Defcosをするときは上記の3点をきちんと守るのは本当にいいですが、守りにくいです.今回の自由形コースでは、この3つの目標を目指して5週間走ります.

に感銘を与える

2人で1対1でプログラミングして計算機を実現した.それぞれキャラクターを作るのではなく、一人でキャラクターコードを作って、一人でアドバイスをして、だめならキャラクターを変えます.誰かがリアルタイムで私のコードを見ているのが怖いですが、すぐにコミュニケーションを続けて、私は怖くありません.

最初の計算機の実装

私たちは最初の計算機の実現を担当しています.最初の計算機の実装リストは次のとおりですが、ドロップダウンメニューを追加変更するたびに送金額が初期化されます.また、不正な送金金額を入力した場合には、算出した合計金額とともにエラー情報を表示するよりも、合計金額を非表示にしてエラー情報のみを表示する方がユーザUXにおいて好ましい.
最後に,Submitでは送金額の一番前の位置が0の場合,正規表現で消去する機能も追加的に実現した.
非同期API関連の作業をどのように行うかを考慮し,1番計算機と2番計算機は同じAPIと結果値を用い,最上位ではhookで受信することが望ましいと考えた.useAsync hookを作成し、パラメータ値としてコールバック関数を実装し、インストール時にブール関数を実行するかどうかで、結果がより簡潔になります.

const {
    loading,
    error,
    data: currencyInfo,
    execute,
  } = useAsync(getCurrencyApi, true) 

ただし,既存のAPIのrequest limitは250回であるため,共通フォルダに対してmockを行う.jsonファイルを生成したら、関数に変換し、処理結果値は同じです.実際の非同期リクエストでjsonファイルを受信できることを初めて知った.

Jestチャレンジ

Jestでunitテストをしようとしたが、複数の環境設定を行うのに時間がかかり、非常に基礎的なテストしか行われなかった.たとえば、環境設定に関する例では、Jestはcracoで上書きされた絶対パス設定を認識できないため、Jestで個別に設定する必要があります.

// craco.config.js
aliases: {
  '@api': './src/api',
	'@assets': './src/assets',
	'@components': './src/components',
    '@hooks': './src/hooks',
	'@pages': './src/pages',
	'@style': './src/style',
	'@utils': './src/utils',
},

  
// jest.config.js
 moduleDirectories: ['node_modules', '<rootDir>'], // 필수 ⭐️
  moduleNameMapper: {
    '^@components/(.*)': '<rootDir>/src/components/$1',
    '^@api/(.*)': '<rootDir>/src/api/$1',
    '^@assets/(.*)': '<rootDir>/src/assets/$1',
    '^@hooks/(.*)': '<rootDir>/src/hooks/$1',
    '^@pages/(.*)': '<rootDir>/src/pages/$1',
    '^@style/(.*)': '<rootDir>/src/style/$1',
    '^@utils/(.*)': '<rootDir>/src/utils/$1',
  },

初めて組長を務めたが、李徳思やTSがあまり得意ではなかったので少し心配したが、速い学力で5週間は身につけたい.がんばれ!!!