📈 Wanted_pre_onboarding-1st_calculate_project

Intro.

👫配備アドレス

http://exchangerating.s3-website.ap-northeast-2.amazonaws.com/

🧨githubアドレス

https://github.com/quack777/Wanted_pre_onboarding-1st_calculate_project

📃プロジェクト構造

├─ public
│     index.html
│
├─ src
│  └─ api
│  │   client.js
│  │
│  ├─ coponents
│  │     ├─ CalculateFirst
│  │     │      CalculateFirst.css
│  │     │      CalculateFirst/js
│  │     └─ CalculateSecond
│  │            CalculateRateBox.css
│  │            CalculateRateBox.js
│  │            CalculateSecond.js
│  │            CalculateSecondForm.css
│  │            CalculateSecondForm.js
│  │            CalculateSecondTemplate.css
│  │            CalculateSecondTemplate.js
│  │
│  ├─ pages\Main
│  │     MainPage.css
│  │     MainPage.js
│  │
│  ├─ styles
│  │    common.css
│  │    reset.css
│  │
│  ├─ utils
│  │     format.test.js
│  │     GetApi.js
│  │     GetExchangeRateByUSD.js
│  │     setMonthconvert.js
│  │     SetNumberFormat.js
│  └─ config.js
│     index.js
│     Router.js
└─

✔チャレンジ実施リスト

最初の計算機

を選択して国/地域を受け入れると、為替レートが変わります.

送金を入力し、Submitをクリックして送金を計算し、画面に表示します.

2 2 2番目の計算機

送金国を選択でき、その送金国の受入国為替レート比率

を得ることができる.

🎞ビデオの実装

Ready.

まず、Freeon Boddingをする過程で、最初の課題だったので緊張していて、一人でコードを作るのではなく、隊員たちと一緒に協力していて、ワクワクしていました.最初の課題を読んで思ったほど難しくはありませんでしたが、中にはいじめやすい部分もありました.私はもう一人のメンバーと最初の計算機の制作をしました.指導者は課題を説明する時、それぞれの異なる機能を開発しないで、力を合わせて一緒に行うように教えてくれたので、他のメンバーはコードを書きます.私は共有の画面を見て、コードをチェックして、論理を考えて、修正する必要があるところがあれば、教えてあげます.よくコラボレーションを行うときは、それぞれの機能や部分によって割り当てられていて、初めて1つの計算機を使って、2人で力を合わせて行うので、ちょっと気まずいです.
コードが開始される前に、CRAが作成したプロジェクトをアーキテクチャとし、git commitメッセージを一定の場所に統合します.協力するときは、これらの基本的な事項を決めるべきだと気づきました.そうすれば、進行するときにもっと簡単になります.人によって考え方は異なりますが、commitメッセージやプロジェクトの構造を異なる方法で作成すると、他の人のコードを受け取ると理解しにくくなります.

Start.

💨コールAPI

為替レート情報  https://currencylayer.com/  利用する無料サービスをリアルタイムで導入する.

APIを最初に呼び出すときは、2番目の計算機を考慮せず、1番目の計算機コンポーネントにマウントするときにAPIを呼び出し、為替レートを抽出してstateに値を保存して使用します.

    useEffect(()=>{
        setClick(false)
        client.get(process.env.REACT_APP_API_URL,{params: {access_key: process.env.REACT_APP_API_KEY}})
                .then((res)=>setExchangeRate(res.data.quotes))
                .catch((err)=>console.dir(err))
    },[userChoice,money]) //사용자가 값을 바꿀때마다 리렌더링

その後2番目の計算機が完了し、グループ会議APIを重ねてAPIフォルダを作成し、関数(getapiOfExchangeRate)を作成し、インポートして各コンポーネントで使用します.
そして、if文が入っているのは無料のプランで、state値が200であっても通常の値が届かないことが多いので、if文を使ってデータを取得します.成功した値が真の場合にのみ値を保存するように設定します.

getApiOfExchangeRate("USD", countrys.map(e => e.engName).join(","))
            .then((res) => {
                if (res.data.success === true) {
                    console.log(res.data.quotes)
                    setExchangeRate(res.data.quotes);
                    setApiSuccess(true);
                }
            })
            .catch((err) => console.dir(err))

💌 為替レート

APIを呼び出す為替レートをexchangeRate state値に格納し、値を正しく保存できない場合、exchangeRateオブジェクトにキー値を読み込めないエラーが発生し、APIで正しく保存した場合にのみ正常に動作し、&演算子が使用されます.
n/a.為替レート
userChoice<=state初期値(KRW):ドロップダウン・メニューをクリックして値を保存
このステータスを使用して必要な為替レートを抽出
入金金額
フォームが発行されるたびに、入力にsendMoney(送金金額)state値として値を保存し、為替レート計算を乗算します.

환율: {apiSuccess && SetNumberFormat(exchangeRate[`USD${userChoice}`])} {userChoice}/USD
{isSubmit? <div className='first-res'>수취금액은 {apiSuccess && SetNumberFormat(sendMoney*exchangeRate[`USD${userChoice}`])} {userChoice}입니다</div> : ''}

送金額
送信金額alertウィンドウに制限

if (tmpMoney >=0 && tmpMoney <= 10000){
            setIsSubmit(true);
        }else{
            alert("송금액이 바르지 않습니다")
            setIsSubmit(false)
        }

🤿 1234 => 1,234.00

の小数点のみを表示する2番目の数字=>toFixedメソッド

を使用します.

数字3桁単位プラスカンマ=>正規表現の使用 4行

function SetNumberFormat(cost) {
  if (cost !== undefined) {
    let tmpCost = cost.toFixed(2);
    return tmpCost.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  } else {
    return false;
  }
}

2番目の計算機の為替レートを計算するLogic

🧨問題が発生

2 2 2番目の計算機は、1番目の計算機とは異なり、ドル(ドルex.USDKRW,USDJPY)が基準とならない値を生成します.
-この問題は、APIを呼び出すときにPARMASを使用して値を指定することができ、ドルではなく他の国の為替レートにつながる可能性があります.
無料の計画を使っているので、私たちはそうすることはできません.
=>ということで、無料プランで持ってくるUSD~値を利用して、他の国が基準(EX.KRWUSD,JPYRW)の場合でも計算できる方法を思いつきました.

🎇問題を解決する
ドロップダウン・メニューとタブを使用してドル以外の為替レートを計算

上記の方法を考え出した後、API(無料プラン)を利用して為替レートを求める場合、CASEは全部で3種類に分けることができます.
CASE 1)プルダウンメニューがドルの場合
CASE 2)ドロップダウンメニューはドルではなく、他の国/地域およびタブでドルを選択します.
CASE 3)ドロップダウンメニューがドルではなく、他の国/地域とタブのドルであれば、他の国/地域ではありません.

🍳配置

私たちは配置を担当しています.他のチームはnetlifyに配置すると、API呼び出しに問題が発生すると言っています.awss 3に配置したほうがいいです.slackにメッセージがあるので、AWS s 3 bucketを使用して配置します.
配置コメントリンク
このリンクを参照して配置しました.AWS 3を使用して他のプロジェクトを行う際に一度試したことがあり、AWS CLIを使用してユーザーを追加し、パッケージ化した.jsonにコマンドを簡単に追加できます.

Finish.

やっぱり一人でチームを組むより効果的今回は第1段階の最終段階でリーダーを務め、まだ多くの不足点がありますが、私たちはもっと努力して、私たちのチームにもっと良い協力を生むべきです.完成した後、配置を成功させ、課題を提出することができて、とても嬉しいです.ずっと協力して配布してから一番嬉しかったです.完成した達成感はいつよりも私にとても良い感じを与えて、私を前進させます.企業課題は初めてですし、最初の課題だからかもしれませんが、少しでも実力を上げていればできると思います.残りの時間の中で、チームの任務を実行する時、努力してみんなを率いて良い結果を得ることを望んでいます.

残念なことに。

ユニットテストにjestを使用しようとしましたが、できませんでした.=>春節連休ジョークを習う