[TIL] 220201-02

振り返る

今日の挑戦と勉強
チームプロジェクト旺昌、物語の本ch 1-1翻訳!

好奇心や困難な点
開発用語は同じ脈絡ですか?使うかどうかわからないので、翻訳するときはなるべく自然に伝えたいのですが、これは翻訳機が回っているのと違って混乱していて、私は英語があまり分からないので、もっとそう感じています.buildという言葉がたくさん出てきましたが、buildprocessはgueのような文であれば、設定構築過程をどのように説明すればいいのでしょうか.しかし、開発文書を読んでいる人なら、この程度は知っているはずで、まるで私が馬鹿のようです.😂

明日やりたいこと
早起きしてハードスポーツ!ストーリーブックch 1-2翻訳、チームプロジェクト反応-queryアプリケーション、検索機能などの実現など

物語の翻訳部分を分割する
Backjun JavaScriptによる解凍

チームプロジェクト

TOAST UI

福がありますが、とにかく適用!
TOAST UIビューアの適用(+Editor)
TOAST UI Markdown Editorの使用
TOAST UI EDITORを追加して学んだこと
react html parsing
背中を整理しないで^^

// 앱상태(폼, 다크모드, user preference) <-> 서버와 동기화 되는 상태
// 서버상태를 쉽게 관리하게 해주는 것이 react-query

// react-query로 만든 custom hook
// 파일을 따로 분리!
// 컴포넌트 쪼개기, custom hook - 모든걸 커스텀훅 로직으로 만들어야함
// 역할을 잘 나누기 위해서!
// react query에게 적절한 캐시키와 api 함수를 넣어주는 것!
// 로직을 작게 쪼개기 위해서... 보너스로 좋은 점 중 하나임
// 중복의 제거?... 보너스로 좋은 점 중 하나임

// 서버에서 데이터를 가져와서 캐시 상태에 넣어두는 로직
// 상태 로직 / state, redux => 상태 로직
// react-query : 서버와 동기화 되는 상태를 캐시로 관리하는 라이브러리
// api 요청 함수 파일 <-> 요청한 것을 리액트 쿼리라는 상태관리 라이브러리에 넣은 것.
function useNotice(userId) {
  return useQuery('Notice', () =>
    memberApi.getNoticeCounts(userId).then((res) => res.data)
  );
}

// 화면을 보여주는 로직 view
function TopUser({ user }) {
  // 유저가있을때 로그인했을때
  const { data } = useNotice(user?.id);

  return (
    <Link
      className="topUser"
      to={{
        pathname: `/user/info/${user.id}`,
        state: { memberId: user.id },
      }}
    >
      <div className="username">{user.data.name}</div>
      <div className="bot">
        <MdNotifications />
        {data?.count > 0 && <div className="noticeCircle"></div>}
      </div>
    </Link>
  );
}

ありがとうございます🐰😭
02-02
今日は昨日のトムトからキーボードアクセスの歴史を聞きましたこれをpush->Link(a)に変更したり、昨日グローバルに適用されたstyled-resetをキャンセルしたりして、壊れたcss全体を修正したりします.早く終わってから物語の本を訳すべきだったが、もう9時近くになった.
でも編集の問題なのかアナライザをダウンロードする問題なのか...!

<span style="color: #ab4642">ㅇㄹㅇㄹㅇ</span>
| 가나 | 다라 |
| --- | --- |
| 마바 | 사아 |

編集側で効果を確認して記事を登録すると

spanがpタグに変わります

blockquoteはvelogに似たcssを修正しました(でしょ?!)そのTAG自体が変形していますか?こうなりました.

const Content = styled.div`
  ol,
  ul {
    margin-block-start: 1em;
    margin-block-end: 1em;
    padding-inline-start: 30px;
  }
  img {
    width: 100%;
  }
  /* 요기 */
  blockquote {
    margin: 1.2rem 0px;
    border-left: 4px solid #ffe066;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    background: rgb(249, 249, 250);
    padding: 5px 5px 5px 15px;
    color: var(--text1);
  }
...

私は初めてmarkdown editorを使うので、知らないこともあれば、全体の過程を知らないこともあるので、先に退いて今日はreact-query pagerationを作りたいと思って、検索語と自動ログインをつけて食べて、jensang

明日。react markdown codeを適用してハイライト表示しますか?

https://github.com/remarkjs/react-markdown