今日のホットスポットレンダリング

😎 今日の事

like、テストとは異なり、

を修正

delete/posts

put/posts/edit ?? => 河京と相談

郵便カード変更転送

ロードページ

empty page

LoginId転送

が必要

🤔 今日の話題

1.ログインログアウト時のページ更新の問題

ログインログアウトページレンダリングエラーの変更

ログイン後に/beansページにログインし、ログアウト後に別のIDでログインした場合、/beansページはリフレッシュされません.
問題の状況
app.jsでは、userEffectで登録するたびにisLoginステータスをチェックしてLoginを設定します.
したがって,isLoginをpropsとして受信したサブコンポーネントもisLogin状態が変化するたびに再ロードされる.
たとえば、
test 1でログインしてbeansページにアクセスすると、beansページがログアウトしてtest 2でログインすると、beansページが再ロードされ、test 2の好きなソースディレクトリが表示されます.
結果、
しかし、予想とは異なり、beansページは再ロードされず、リフレッシュまたは別のページに入ってから戻るだけで状態が変化します.
私の錯覚.
isLogin状態が変化すると、propsとして受信した下位要素が再レンダリングされます.ただし、サブコンポーネントのstateは変更されていないため、表示されるbeansページは元のままです.
だから解決したのは.
各構成部品にisLoginをpropsとして渡し、状態の変化に応じてuseEffectを実行し、LoginIdに適切な値を要求して状態値を変更し、正しく動作することを確認します.
これは非常に簡単な問題で、reactの基本概念で、多くのstate、propsで実現した後、基本的な部分を逃したようです.

export default function Beans({ loginId }) {
  const [allBeanName, setAllBeanName] = useState([]);

  const [beans, isLoading, setBeans] = useLoading([], getAllBeans, loginId);
  const [openModal, cardBeanInfo, cardPostInfo, beanModal, closeModal] = useBeanModal(beans);
  
  ...}

export function useLoading(inital, httpService, arg) {
  const [data, setData] = useState(inital);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    setIsLoading(true);
    httpService()
      .then((res) => {
        setData(res);
        setIsLoading(false);
      })
      .catch((err) => {
        console.log(err.response);
      });
  }, [arg]);

  return [data, isLoading, setData];
}

2.beansページ4回ネットワーク通信...?

3.会員加入画面実施時に頻繁に通信

会員登録の過程で身分検査を繰り返す段階がある.最終的にはボタンを押して繰り返し判別要求を送信することが実現したが,文字を入力するたびにリアルタイムで判別を繰り返す論理もよいと思う.
しかし,1文字書くごとにサーバリクエストを送信して繰り返し判別するのは効率的ではないようである.
NAVERの場合、onBlurとなったときに一度サーバリクエストを送信することを確認したが、このように一度または少量のサーバリクエストで繰り返し判別する方法もある.
このプロジェクトでは、ログイン部分が私の部分ではないため、自分の意思ではできませんが、次のプロジェクトでは、以下の方法で実施することをお勧めします.

settimeoutで判別する方法があるはずです.すなわち,inputウィンドウはonFocusとなり,ユーザはonkeydownを停止し,1秒後に1回リクエストを送信する.これにより,少ない要求で繰返し判別が可能となる.

ネイバーみたいにonblurになった時に作ったしかし,ユーザはそれを知らずに繰り返し判断を待ち続け,onblurを使用しない可能性がある.

3.rest apiブランチ不要

//TODO 모든 원두 가져오기
export const getAllBeans = async () => {
  const res = await axios.get(`${http}/bean/all-beans`);
  return res.data.beanList;
};

//TODO 필터링 원두 가져오기
export const getFilterBeans = async (data) => {
  const res = await axios.get(`${http}/bean/filter-beans`, { params: { ...data } });
  return res.data;
};

これもバックグラウンドとの会話で出てくるテーマです.
彼は、すべてのインポートとフィルタリングされたインポートのrest apiの端点を分離する必要はなく、分岐を行う必要があり、これはより面倒なタスクだと述べた.
つまり、GETコーヒー豆は/beanであり、paramsでfilterかどうかを判断できるので、端点を区切る必要はありません.

4.rest apiの追加（転送完了）

投稿の削除

Delete/posts
request => body : {data : {postId}}
応答=>成功時204/失敗時400

投稿コメントの作成

POST/posts/comment
request => body : { data: { postId, comment } }
response=>{userId:[userId],commentId:1,comment:[newコンテンツレビュー],createAt:[2010-20-20ポイント分秒]}

投稿コメントの削除

DELETE/posts/comment
request => body : { data: { postId, commentId } }
応答=>成功時204/失敗時400

投稿コメントの変更

PUT/posts/comment
request => body : { data: { postId, commentId, editComment }}
応答=>成功時204/失敗時400

特定の投稿の内容とコメントの取得

GET/posts?post-id=postId
request
response

{
  postCotents: {
    title: 'this is titlethis is titlethis is title',
    imageUrl: '/asset/beans/bean4.jpg',
    beanRatio: {
      자바: 4,
      케냐: 2,
      '탄자니아 킬리만자로 AA': 4,
      '탄자니아 킬리만자로 A': 4,
      '탄자니아 킬리만자로': 4,
    },
    water: 15,
    waterTemp: 80,
    content:
      '게시물 내용 이것은 게시물 내용 이것은 게시물 내용 이것은\n 게시물 내',
    userId: 'meme',
    createAt: '2020-12-20 시분초',
  },
  comments: [
    {
      userId: '작성자id입니다',
      commentId: 1,
      comment: '댓글 내용댓글 내용댓글 내용댓글 내용',
      createAt: '2020-12-20',
    },
    {
      userId: 'userId',
      commentId: 2,
      comment: '댓글 내용댓글 내용댓글 내용댓글 내용',
      createAt: '2020-12-20',
    },
    {
      userId: '작성자임',
      commentId: 3,
      comment: '댓글 내용댓글 내용댓글 내용댓글 내용댓글 내용댓글 내용댓글 내용댓글 내용댓글 내용',
      createAt: '2020-12-20',
    },
    {
      userId: '작성자id입니다',
      commentId: 4,
      comment: '댓글 내용',
      createAt: '2020-12-20',
    },
  ],
};

http=>httpsに変更

http配信で行こうと思っていたのですが、googlechromeの2月の更新コンテンツ(Cookie転送ホットスポット)でhttp配信に切り替わり、複数のCORSエラーになってしまいました
クッキーオプションcorsエラークリア
sameSite:none=>常にCookieを送信できます.CookieオプションではSecureオプションが必要です
Secure:httpプロトコルを使用して通信する場合にのみCookieを送信

app.use(
  cors({
    origin: [
      'https://localhost:3000', 'http://localhost:3000',
      'https://www.beanus.tk', 'http://www.beanus.tk',
      'https://practic.beanus.tk', 'http://practic.beanus.tk'
    ],
    credentials: true,
    methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
  })
);

 sendAccessToken: (res, accessToken) => {
    res.cookie('accessToken', accessToken, {
      httpOnly: true,
      secure: true,
      sameSite: 'None',
      expires: new Date(Date.now() + 1000 * 60 * 60 * 48),
    });
  },

😎 DevLog

基本的な重要性

今日はどのようにプロジェクトに貢献しましたか。

/posts/view/:idルーティングクリア

完了

like/サーバと異なる通信テスト

を完了

ログアウト後のページレンダリングエラー解決

/posts/view/:idのコメント作成、修正、削除機能

を実現
追加

ロードページ

今日のプロジェクトで苦労したことは何ですか。

ログインログアウト時にページリフレッシュの問題があります.test 1でbeansページにログインした後、beansページをログアウトしてtest 2でログインする場合は、test 2の好きなリストのbeansページをマウントする必要がありますが、test 1のリストは依然として存在します.

今日のプロジェクトで残念に思ったことは何ですか。

の反応レンダリングに対する理解が欠けているため、ログインログアウト時に発生したページリフレッシュエラーを解決することも困難である.基本的なコンセプトですが、多くのstate、propsで実現しているので、基本的な部分を見逃しているようです.

明日は何をしてプロジェクトに貢献すればいいですか?

削除投稿サーバ通信テスト

コメント作成、変更、削除サーバ通信テスト

トラブルシューティング

ページルーティング時に複数回GET要求するエラー

navbar cssエラーアシスト

空白ページ

を追加

ページのディスカッション

をロードする必要があります.