Just Codeフルスタックマスターレビュー-2

🎤 いっしょに-お茶!上-調べろ!

1.プロジェクト紹介

🎬 クローンサイト:https://pedia.watcha.com/ko-KR
🎬 映画、書籍、テレビ番組の推薦と評価サービスを提供します.
🎬 鳥の巣鳥の巣Github:https://github.com/wecode-bootcamp-korea/justcode-4-1st-wetchawetcha-front
🗓 進捗:2022.3.28～2022.4.8(12日間)
🙋 参加者:孔敏智(コン・ミンジ)、金英書(キム・ヨンムン、バック)、徐彩媛(ソ・チェウォン、バック)、李義澤(イ・ウィテク、バック)、林京勲(イム・ギョンフン、バック)
🧑‍💻 使用するテクノロジー

Language : JavaScript

Front-end : React JS

Back-end : Node JS

DataBase : MySQL

2.実施機能と作用

デモビデオ:https://www.youtube.com/watch?v=HkkZfwLtfis&t

Main Page

これはページの最初の画面で、内容は揃えられています.各カテゴリにはスライダ機能があり、横にスクロールでき、ポスターをクリックすると各詳細ページに移動します.ホームページでヘッド部分の機能を実現しています.

Header-会員登録と登録

ログイン/会員加入ボタンをクリックすると、各モードウィンドウが表示されます.正規表現を使用して電子メールとパスワードの値をチェックします.条件を満たさないと、Inputの色が変わります.ログイン/会員登録はwebucksを容易に行うことができます.

登録/会員入力ウィンドウ内の会員入力/登録ボタンをクリックすると、各モデルウィンドウに移動します.

// Nav.js
// props를 이용해서 각 컴포넌트에 넘겨주었다.
<Login open={loginOpen} close={closeLogin} openSignUp={openSignUp} />
<SignUp open={signUpOpen} close={closeSignUp} openLogin={openLogin} />
  

モードウィンドウが表示された後にスクロールしない機能を実現し、ウィンドウ環境でマウスをスクロールする際に自分の意思で動作することができるが、macではbody以外の部分がスクロール(ブラウザの影響と推定)し、白い余白を生じる.
https://www.npmjs.com/package/disable-scroll
スクロール機能を完全に阻止するために,このnpmパッケージを用いた.

 const openLogin = () => {
    setLoginOpen(true);
    disableScroll.on();
  };

  const closeLogin = () => {
    setLoginOpen(false);
    disableScroll.off();
  };

Detail Page

詳細ページでは、コメントボタンをクリックしたときに表示されるポップアップメニューを担当します.実現する機能は思ったより多いので、予想以上に時間がかかります.

  useEffect(() => {
    setNum(textValueLength);
  }, [textValueLength]);

  const handleLength = e => {
    if (num > 200) {
      e.target.value = e.target.value.substring(0, 200);
    }
  };

textareaでキーストロークが発生した場合、textValueLengthのtextareaの値.長さを加えた.textValueLengthを更新して最新値を取得する場合、num stateに新しい値を追加して、リアルタイムで変化する文字数を表示できます.ただし、ポップアップメニューを開いてテキスト入力処理を行う前に、初期値が0になるので変更します.

<button

onClick={() => {
  isCommented ? commentModify() : commentAdd();
  setPopupOpen(false);
	}}
>
 {isCommented ? '수정' : '저장'}

</button>

fetchでデータをインポートする場合、データが存在する場合、isCommentedの値を変更して、データが存在する場合/存在しない場合の論理とレンダリングを異なるようにします.

3.記録したいコード

useEffect(() => {
    fetch(`/comment/content?movieId=${props.movieId}`, {
      method: 'GET',
    })
      .then(res => res.json())
      .then(result => {
        if (result.CommentResult.length !== 0) {
          setIsCommented(true);
          setText(result.CommentResult[0].comment);
        } else {
          setIsCommented(false);
        }
      });
  });

コメントpopupが表示されると、保存されたコメントが存在する場合、そのコンテンツをtextareaに事前に配置する機能を実現するのに最も時間がかかる.
comment-oppupの最初のレンダリングでは、データを1回インポートするだけでいいと思いますので、最初は空の配列をdepsに入れました.その結果,コードを一度だけ修正して保存すると,データを正しく取得するエラーが発生する.
それ以外にCommentResultの配列は0で、元の保存したコメントを表示できません.
後でdeps部分を省略して機能を実現しますが、この素子をレンダリングするたびにuserefectを実行する良い方法ではないと思います.textの初期値もインポートしたデータもstring形式なので、これは初期値の問題ではないと思います.
コメントポップアップメニューが「コメントの作成」ボタンをクリックする前にdisplay:noneであるためdepsが空の配列である場合、ポップアップメニューを開くときにページ全体が表示されるのではなく、エラーの原因ですか?という考えが生まれた.
また、問題を一緒に考えていた同期生は、管理popupのstateを入れてどうするかという意見を出して、うまく動いていることを確認しました.popup stateをdepsに入れると、オープン時、クローズ時に合計2回呼び出されるため、propsが受信したpopupRequestは、変更のたびにuserEffectを実行するように変更されます.
今回のプロジェクトでは、データの受信と使用中に最も多くのエラーが発生しました.データやコードの間に密接な有機的なつながりがあるため、プロセス全体を逃すのではなく、各機能の実現に重点を置くべきであるため、プロセスを逃すことによる問題が発生します.また,プロセス中のエラーの解決にも時間がかかるため,今後も大きなプロセスを注意し続けていくことが役に立つかもしれない.

4.隠したいコード

本当に耻ずかしくて申し訳ないハーモニー…!はい、大きな工事を経て、私のコードは二度と残っていません......もともとホームページのCollection部分も私が担当していましたが、他の部分は計画より時間がかかりすぎてスライダ機能のみが実現し、他の機能が実現しました.同時にホームページを統合する必要がある時、担当した部分ができるだけ早く終わった英書が統合を担当した.
当時私のコードは首のデータを使っていなかったので、HTMLとCSSはほとんどすべてで、これはでたらめで、もっと悪いことに、私はかなり時間のかかるスライダ部分を必要としませんでした...!会議の中でははっきり言っていたが、会議の量がますます大きくなってきたので、会議の記録の作成を無視してしまったので、見逃してしまった.Collection Cardでは8本の映画が上映され、4本の映画が上映され、ポスターで各細部ページに接続する機能も実現されていない.
残りのチケットを時間が足りなかったため、Collectionの一部の英書はほぼ最初から再実現した.何も実現していないほうが実現しやすいと思いますが、他人のコードを読んだり、他人のコードを理解したり、他人のコードを修正したりするのはそんなに簡単ではないので、もっと苦労していると思います.本当に申し訳ありません.
私の話にならない結果が他の人のスクリーンに現れたとき、耻ずかしくて、隠したい...!このことをきっかけに、本当にたくさんのことを感じました.まず、会議の記録をより徹底的に記録しましょう.会議中の意見が覚えられると思ってはいけない.第二に、焦れば焦るほど焦らないでください.時間は慌ただしく与えられるわけではありませんが、私や他の人は落書きのコードを修正するのにもっと時間を浪費するかもしれません.これ以上このような過ちを犯すわけにはいかない.😔

5.第1回目のプロジェクトの回顧を完成する

繰り返すことに飽きない人は成功する.
プロジェクトを行っているうちに、よく全面的な勉強を始めたと思います.データストリームの習得が容易になり、学習の過程で、自分が身につけた知識が少しずつつながっていると思います.すぐに理解しなくても、できるだけ知識を身につけて勉強を続ければ、成長し続ける私に出会えると思います.初めて反応に触れた時と全く見当がつかなかった時期に比べて、今は面白くて達成感があり、勉強がとても楽しかったです.これからもっといい姿になることを期待していた私の初めてのプロジェクトの振り返りが終わりました-!🎬