青-10日目

1.投稿生成モード
投稿を個別にページングするのではなく、モードウィンドウとして作成することで、投稿を作成できます.

潮流
1.画像入力の取得
2.画像プレビュー+投稿内容の作成
3.投稿の作成ボタンをクリック

画像処理手順は登録会員と同じです.
1.ユーザが画像をアップロードする
2.multipart/form-dataフォーマットの画像転送
3.multerを使用して、サーバー側publicフォルダに画像を保存します.
4.保存した画像の名前を配列として返す
5.クライアントにイメージ名でプレビューを表示する

また、파일 탐색기を使用して画像を受信してもよいし、drag/dropを使用して画像を受信してもよい.
また、[閉じる](Close)ボタンをクリックすることなく、モデル領域以外の領域をクリックしたときにモデルウィンドウを閉じることもできます.

drag/dropを参照

「モデル領域の外側をクリックする」を参照してください。

2.最新の投稿を読み込むGETの/post?lastId=0から最新の投稿のロードを要求されました.
次に、コンポーネントPostCardを作成し、grid-boxを使用して1行に3つの投稿を配置します.

最新投稿データフォーマット

[
  // 게시글 하나
  {
    // 게시글 식별자
    _id,
    // 게시글 내용
    content,
    // 게시글의 이미지들
    Images: [
      "이미지이름",
      // ...
    ]
    // 게시글 작성자
    User: {
      // 게시글 작성자의 식별자
      _id,
      // 게시글 작성자의 이름
      name,
      // 게시글 작성자의 프로필 이미지
      Image: {
    	// 게시글 작성자의 프로필 이미지의 식별자
        _id,
    	// 게시글 작성자의 프로필 이미지의 이름
        name
      },
    },
    // 게시글 좋아요 누른 사람들
    Likers: [
      { _id },
      // ...
    ],
    // 게시글 댓글들
    Comments: [
      { _id },
      // ...
    ]
  },
  // ...반복
]

上記の形式でデータを受信し、reduxのstoreに格納します.
最小の情報のみを取得してみます.LikersまたはCommentsが投稿の詳細モードに含まれていない場合は、詳細は必要ありません.数だけ必要なので、数に必要な情報JOINだけが必要です.

lastIdは、ロードされた投稿の最後の投稿の識別子であり、この値に基づいて30の投稿をロードするように設計されています.

3.特定の投稿の読み込み
投稿の詳細を表示するときに、新しいページではなくモードを使用します.
現在、出版物に関連するコンポーネント構造は、PostPage.jsxで最新の出版物を要求し、PostCard.jsxに配布する.
最初に、PostCardで特定の投稿にモードウィンドウを追加し、クリック時にモードウィンドウを開くようにしました.考えてみれば、各PostCardにモードウィンドウを配置するよりも、その親コンポーネントPostPageに特定の投稿の識別子のみを受信し、モードウィンドウを開くほうが効果的である.招いた方法で実現した.
の最後の部分
1.トラブルシューティング-Ref転送
モードの場合は、1つの構成部品として作成し、別の構成部品に使用します.
この時点で問題が発生したのは、モデル以外の領域をクリックしたためかもしれませんが、PostPageを構成部品に転送すると、PostCardがrefに転送され、refが正しく登録されていません.
コンソールウィンドウのコンポーネントでpropsを使用すると、問題の原因を特定し、refを使用して解決する警告ウィンドウが表示されます.

forwardRef

2.潜在的な問題を疑う-LastId
私たちはまだ多くの投稿を作成していません.また、投稿の詳細を表示することから実装を開始します.lastIdを使用した無限スクロールが正常に動作しているかどうかはまだ見られません.そのため、現在実装中の機能のみを実装し、正常に動作しているかどうかをテストします.