996週間航海回顧録(クローンプロジェクト)-フェイスブック

Clone Project Start! (プロジェクトのクローン作成)
新しいプロジェクトが始まりました.
クローンプロジェクトを停止したため、私たちのグループはフェイスブックを開始しました.
前回ホームページと詳細ページを担当していたら、今回は会員登録や投稿作成などで仕事をして、良いチームメンバーに出会えて、たくさん勉強になりました.

エレメントフロー

フェイスブックビューに従ってログインページを作成し、会員が参加するモデルウィンドウを使用して実現します.
サーバに渡す値がメールとパスワードのほか、姓、名前、生年月日、性別もあるので、名前とメール、パスワードの入力データはonChangeとsetStateで受信され、生年月日は年、月、日にそれぞれ空の配列を作成し、new Date()を利用してオプションをselectにそれぞれ入れます.性別値は、material-uiのForm Controlを使用して各値をラベルに渡し、axiosにすべてロードしてaxiosをバックエンドに割り当てる形で通信します.

ログインすると、200ステータスコードとjwtトークンが発行され、このトークンがドキュメントに書き込まれます.クッキーストレージ方式を使用しました.

//user.js 로그인
const loginMiddleware = (loginInfo) => {
  return () => {
    apis
      .login(loginInfo)
      .then((res) => {
        console.log(res);
        //인터셉터
      })
      .catch((err) => {
        console.log(err);
         //인터셉터
      });
  };
};
//Cookie.js 쿠키
const setCookie = (name, value, exp = 3) => {
  let date = new Date();
  date.setTime(date.getTime() + exp * 1000 * 60 * 60);
  document.cookie = `${name}=${value}; expires=${date.toUTCString()}; path=/`;
};
// axios.js 리스폰스
instance.interceptors.response.use(
  success => {
    console.log(success);
    const response = success.data;
    console.log(response.token);
    if (response.statusCode === 200 && response.responseMessage === '로그인 성공') {
      let userCookie = success.data.token;
      console.log(userCookie);
      setCookie('user_id', userCookie, 30);
      window.alert('로그인성공');
      history.push('/main');
    }
    //이하생략
  });

今回作った時はちょっと残念でした

今回は会員入口県と後期創作素子の登録を担当し、想像以上に時間をかけてビューを作成しました.反応型で表現できなかったのが残念でした.
以前、プロジェクトでビューを作成したとき、ビューを最小単位素子に渡さずに実装されたため、今回のプロジェクトに適応するのは難しい.

残念ながら、

機能は、alertを介してメッセージを送信するのではなく、サーバが受信したエラーをログインまたはログインコストにキャプチャする機能を実装することができなかった.
問題の解決を試みる:会員入力素子からミドルウェアエラー値を直接取得しようとする(道徳的な理解が欠けて失敗!)
次に、usercallback hookでinputのvalue値を取得し、各チェックに必要なstate値を作成し、変更後のstate値を含めます.

クローンアイテム(フェイスブック)

フェイスブック>>
githubショートカット>>
5週間累計学習時間:682時間30分