[Front-end]Elice個人プロジェクト第1週振り返り(AI Track)

プロジェクトを始めて初めて聞いたのは「本当に何も知らない」という考えです.
Elice AIトラック3期から2ヶ月も経っていません.
最初の1ヶ月はFront-endコースでhtml、css、reactを学びました.
来月はBack-endコースで、SQLとDBのすべての内容を説明します.
この方面の巨大な成果はまずプログラミングという過程によって実現された.
フロント、Backという言葉を理解しました.
(私=白紙装備専門職)
パズルパズルのように、一部の知識を一つのプロジェクトに溶け込むのは難しい.

🐇📢 今からプロジェクトを始めましょう

なんだ.
なんだ.
なに???
Front-endとBack-endで選択できる寛大さを与えてくれました.真実のFrontを先に見たいので、職業心理テストの項目を選びました.
そうですね.習った以上、何かできるでしょう.
最初は、あなたがたくさん手伝ってくれると思っていました.
ワイヤフレームをあげましたから、作ってください.
ええと、一ヶ月後、私の反応は泳げない人にとってプールです.
何も思い出せない.
だからブログを書いて記録すべきだと思います.

Day-1(ローカルサーバ配備)

Vscodeを使用してローカルサーバを構築しました.npx create react -app .の対応するフォルダに反応器がインストールされています.
Eliceが提供したGit Labは私の反応環境に関連しています.react-route-domを使うべきでしたが、最近@6バージョンが出て命令語が変わりました.
カイドウバージョンを削除し、react-route-dom @5を使用してバージョンをダウングレードしました.
React Routerによるページ間移動

の反応経路を見つけるのは難しいので、ちゃんと復習しておらず、必要な機能だけです.

はこのように実現したことを喜んでいます.

Home、QuestionPage、ResultPageコンポーネントをトピック別に分割

これが正しい素子かどうかはわかりませんが、たくさん分けられています.

コメントリンク
1. 反応ルータの使用方法(historyなど)

Day-2(HomePage'/'必須機能)

필수入力フォームを実装し、

名を入力できます.

性別選択入力フォームを実現します.

の名前または性別が入力または選択されていない場合は、「チェックの開始」ボタンを無効にする必要があります.

UserStateを使用して、名前と性別の値を作成して保存するOnChangeイベントハンドル.
ボタンにdisalbed値disabled={!name || !gender}を加えると、nameと性別値が空でない場合、ボタンが動作します.
コメントリンク
1. 複数のUserStateを使用する場合
2. ラジオボタンの実装
3. レスポンス入力ステータスの管理

Day-3(ExPage、AxiosでAPI GETを取得)

このプロジェクトは職業網の進路心理検査APIを使用している.
useEffectを使用してAxios GetでAPIを受信します.
ExPageであるため,[0]個のインデックス値のみを取得するハードコーディングポリシーを用いた.
async waitを用いて非同期処理を行った.

    useEffect(() => {
        console.log("loading");
        async function loadQuestion() {
        try {
            const response = await axios.get(`https://www.career.go.kr/inspct/URL`);
    
            setExData(response.data.RESULT[0]);
            
        } catch (e) {
            console.log('Error');
        }
    
        } loadQuestion();
      }, []);

最初は、親が必ずデータを置いて、すべてのデータが移動されると思っていたのでアプリ.jsに打つ.
参考appとしてjsは、クエリー呼び出しに関連するコードまたはデータ管理ステータスを含めることを推奨しません.コールを問い合わせるたびに、アプリケーション全体が再レンダリングされます.
クエリ呼び出しの部分はQuestionPageです.jsに移動してください.
いいアドバイスをもらいました.
だから実際に質問するQuestionPagejsでapi getを移動しました.

Day-4(QuestionPage, Pagination )

実は今からDayには意味がない
QuestionPageですjsを実現するためにもがいているだけだ.
一番悩んだのは、28個のロードされたデータの問題を1ページ5個、合計6ページ実現することです.
あちこち探していたら、ReactPaginationライブラリを見つけました.
ユーチューブ動画を見ると、実現できます.
これが事件の起因だ.
実現しましたが、ReactPaginationの情報は思ったより少なく、コード自体が複雑になり始めました.私が作ったのですが、理解できないほどでした.
しかし、一つずつ解決しましょう.

1.重複データが正しい

ソリューション[ {1: '1'} ]は,慣習に従ってオブジェクトを配列に入れるだけで,結果が繰り返される.

私はただ答えの値を相手に打っただけで、結局繰り返しませんでした.

2.jsonオブジェクトで良好なarrayを回転させます。長さ値の出力が正しくありません。

なぜこのような試練が私にとってグーグルなのか.array.lengthからObject.arry.lengthで帰ったそうです.
これは良い解決策です.
参考資料
{} .length:Objectを追加します。keys(オブジェクト名)。length

3.ページング番号の消去

ReactPaginationで対応するクラス値を指定し、cssで「None」と表示します.
styled-componentではできないことを遅く知った、app.検索して数時間後に、cssだけで実現しても戻ってくることがわかりました.あ….勉強する

現在解決すべき問題

[次へ]ボタンは、ページ内のすべての問題が続くまで無効になります。

現在はdisabled={Object.keys(saveData).length % 5 !== 0}という値が増加しており、5の倍数でしかできなくなり、0のときでも5にページをめくったときに仕事ができるようになっています、問題

Nextボタンをクリックすると既存のラジオボタンチェックが初期化されます

前のボタンをクリックすると、既存のラジオボタンが保持されます...(それは可能でしょうか)

保存したデータをPostリクエストとして使用して結果リクエスト値を取得する必要があります...

Progressbarを100%に設定する必要があります

現在の進捗状況

ふり返る

今週は忙しくて、とても困難で、とても苦痛です.
もう一つの心で小さなものを作り、小さな成果をよく噛みます.
アリス・レイザーの同僚たちに話をしたり、質問したり、答えたりする過程を経て、みんな努力してきたので、自分は諦めずに今まで歩んできたと思います.
1週間のプロジェクトを完成させる希望だけを抱いている.
しかし、私はやはり後悔しない個人プロジェクトをしたいです.
そして今は開発者になりたいだけです.
一週間後にまた来ます.
ハッピーコーディング
(質問のアドバイスを残してください、愛しています)