テールエンジニアリング💫

ウィンティが主宰した搭乗前の授業が終わると、参加者と指導者の間でコミュニケーションのために準備したパンツに公告が出た.

試合の後、ほかに予定がないので、損をしたと思って、直接申し込んで、合格してくれてありがとう.
このキャンプは関連企業の要望に応じて開発されたプロジェクトで、私は「スローワーク」の新しいサービス計画と開発課題(新しいプラットフォームのカテゴリに基づいて内容を提出し、ユーザーの観感に基づいて推薦/注文プロセスを高める)に参加して後者のチームを担当しました.

未完の計画😵

私たちのチームは、新しいプラットフォームの運営に必要な会員登録、会員登録、会員情報の管理を行うMypageと、Orangeに掲載される情報の通報ページを担当しています.チームは2人の企画者と2人の開発者で構成され、開発者も開発作業が本格的に始まる前に企画に参加することにした.フィグマを使ったワイヤフレームの製作に着手しました.


企画に携わり、開発者として、今後開発を行う際に、企画者とのコミュニケーションが必要な部分についてコメントを残しました.これは、プロジェクトを支援するコーチのアドバイスに基づいて書かれたもので、企画に参加するときの態度や私がすべきことを学び、体験することができます.
しかし、ネットワークビューを基準にワイヤフレームを完了すると、パートナーは突然モバイルビューの開発を要求します...最後に、ワイヤフレームの変更を開始します.

さらに👩🏻‍🤝‍👩🏻

パートナーとのミーティングの後、[ビューを移動](Move View)に変更するほか、変更が必要な事項が多く、会議やワイヤフレームの変更に追われています.この過程で、同じパートナー会社から課題を受けた1組(うちのグループは2組)と一緒にサービスを開発した方が効率的ではないかと思います.だから、私たちのチームと会議をするとき、一つのチームと一緒にプロジェクトをするのはどうですか.何度も会議を経て、私は一緒に行うことに同意しました.👍🏻
私たちのチームにはデザイナーがいないので、デザインを反映するためにワイヤフレームのセットを参考にしました.結果は...

これは以前よりずっときれいになった.👍🏻
1チームと一緒に進めば進度は早くなりますが、時間が過ぎすぎてしまいます….最終発表日まであと3週間半.これ以上先送りできないという不安感に陥り、本格的に開発を開始しました.

初めてのログイン🤯

ログインは初めての実装なので、あちこち検索したり、検証したりすることができます.

// utils/validation/validation.js

const validation = {
  isInput(input) {
    if (!input) {
      return false
    }
    return true
  },
  
  isEmail(input) {
    if (!input) {
      return false
    }
    const emailReg =
      /([\w-.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/
    return emailReg.test(input)
  },

  isPassword(input) {
    if (!input) {
      return false
    }
    if (!this.isOver8(input)) {
      return false
    }
    const passwordReg = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,}$/
    return passwordReg.test(input)
  },

  isOver8(input) {
    return 8 <= input.length
  },

  isNickname(input) {
    if (!input) {
      return false
    }
    return input.length <= 10
  },
}

export default validation

入力があるかどうか、電子メールがフォーマットに合っているかどうか、パスワードがフォーマットに合っているかどうか、8文字より大きいかどうか、ニックネームがフォーマットに合っているかどうかを判断しましょう.
しかし、問題はログイン時にバックエンドにどのように接続するか、つまりログインapiをどのように使用するかです.幸いなことに、同じチームのバックエンド開発者が親切に私の質問に答えてくれて、自分で方法を整理することができました.

postリクエストを送信と、サーバはCookieにトークンを入れる

を送信する.

サーバがユーザ情報を受信するGET要求を送信した場合、またはログインユーザが情報を送信した場合(すなわち、ユーザがログインユーザであることを証明する必要がある場合){withCrementes:true}オプションを一緒に送信->ブラウザに格納されているCookieがバックグラウンドに一緒に移行する

ログイン時にブラウザに記憶するCookie(トークン)は共にスキップされるため、バックグラウンドではログインしたユーザ

であることが提示.

であるため、ログイン時に受信Cookieがブラウザにうまく保存されていれば、以降はログイン時に利用可能なAPI

しか呼び出すことができない.
したがって、ログインコード

    axios
      .post(
        `${process.env.REACT_APP_API_URL}/auth/signin`,
        {
          email: loginData.email, // 사용자가 입력한 이메일
          password: loginData.password, // 사용자가 입력한 비밀번호
        },
      )
      .then((res) => {
        // 로그인이 제대로 이루어졌을 때 실행할 코드
})
      .catch(() => {
        // 에러 발생 시 실행할 코드
      })
  }

これにより、ログイン時にしか呼び出せないapi(ex.mypageでパスワードを変更するapi)

    axios
      .put(
        `${process.env.REACT_APP_API_URL}/user/password`,
        {
          password: passwordData.oldPassword, // 이전 비밀번호
          new_password: passwordData.password, // 바꿀 비밀번호
        },
        { withCredentials: true } // 로그인 시 받아와서 브라우저에 저장한 토큰을 함께 백으로 보내는 코드
      )
      .then(() => {
        // 비밀번호 변경이 제대로 이루어졌을 때 실행할 코드
      })
      .catch(() => {
        // 에러 발생 시 실행할 코드
      })

このようにapiリクエストを発行します.

協力はいつも難しい。💔

正直、私は他の人と一緒にチームを組んで仕事をするのにあまり負担がありません.性格自体が丸いので、中間努力の役も務めます.
しかし、簡単なこととは言えません.なぜなら、世界にはいろいろな人が住んでいるからです.同じ傾向の人と集まって仕事をするわけにはいきません.
今回もプロジェクトの中で一つのチームと協力する過程でコミュニケーションがうまくいかず、DB改正案に矛盾が生じ、数回のテキストコミュニケーションと非対話会議を通じて問題を解決した.
このとき感じたのは、多くの人と一緒に仕事をしているときに、相手が迷惑をかけるのを恐れて言わないよりも、過度なコミュニケーションを取ったほうがいいということです.コミュニケーションが多ければ多いほどいい!
この矛盾を経験した後、

何か役に立つことはないかと聞いて、もっと丁寧に選手たちに注意を注いだ.
これからは多くの人と仕事をして、新しい人に出会ってエネルギー消費が大きいですが、彼らから多くのことを学ぶことができて、今まで試したことのない経験を試してみることができます.今回のプロジェクトであれば、経験のある企画者たちと一緒に仕事をしたり、経験のある女性たちの苦衷や実務者としてのキャリアや力を体験したりして、私より早く開発を始めたチームメンバーから良質な開発知識を得ることができます.

愉快な結末🤗

私は特にこのプロジェクトの成果が好きで、コードも私が今まで書いたコードの中で品質が一番いいです.😂, 何よりも、登録や会員登録などこれまでに実現したことのない機能を実現し、開発力を向上させることができるので、とても嬉しい気持ちで締めくくることができます.😊
この記事にアクセスして読む人がいるかもしれないので、プロジェクト成果物とアドレスをリンクします.