モバイルWeb開発ログ

7504 ワード
テキストリンク
Tech Stack
Typescript
Next.js
SASS
Redux
2021/11
  • プロジェクト開放と開発環境の構築
  • ディレクトリ構造の設定
    • 2021/12
    開発環境
  • 使用ベリー
    • デザイン
    ホームページ登録ページ/会員入力/身分とパスワード検索ページデータエリア/コミュニティページ(掲示板、コミュニティテーブルコンポーネント)サイドバー検索ページと検索結果ページFAQ投稿リストコンポーネント(使用react-collapse)カスタムチェックボックス構成部品ページ名コンポーネント2022/01
    デザイン
    Datepicker構成部品カスタムドロップダウン・コンポーネントのカスタマイズコミュニティページ(投稿詳細ページ)カスタマーセンターページレイアウト配置
  • Jenkins(隊長賛)👍)
    • デバッグとエラーキャプチャ
  • babel-plugin-inline-react-svg使用中にコンパイルエラーが発生TypeError: Cannot read property 'uid' of undefined理由:inline-react-svgで使用されているモジュールresolveバージョンの更新
    v1.21.0 breaks with next.js, or without graceful-fs upgrade #264
    • To do
  • 再包装レイアウト(nextjs-page-transition試用)
  • 機能実施
    • In Progress
    デザイン
    国内情報ページ
    ニュース/ニュースページ
    データ領域テーブルの変更
    編集ツールバクスター移行
  • Rich Text Editor(react-quillカスタム)
    リファレンス
  • https://codesandbox.io/s/6x93pk4rp3
  • https://medium.com/@mircea.calugaru/react-quill-editor-with-full-toolbar-options-and-custom-buttons-undo-redo-176d79f8d375
  • https://codepen.io/wilfvernon/pen/MWYjKEx
    • 機能実装
    テスト
    Pending

  • ページスワップ(キャッシュユニット+ルーティング)next-page-transitionまたはreact-transition-group네이버 모바일 웹要注意

  • トップレベルのコンポーネントをスクロールします(ページでない場合はwindow.scrollYは使用できません(useRef?)

  • カスタム入力グループ構成部品

  • Customドロップダウン素子(タグではなくスタックに反応素子を移動)
    • |Expandable Collpaseを
  • React-Table|に適用
    Done
    -キャッシュ・ユニットを適用するときに、固定子ラベルのみをスクロール・ロックします.
    解決策
  • selectではなくFramer-Motion-Carousel使用
  • サブタブReact-SlickイベントonTouchMoveにstopPropagationを適用
    <div className="disclosure list" onTouchMove={(e) => e.stopPropagation()}>
  <CoinSmryCard />
  <CoinSmryCard />
  <CoinSmryCard />
  <CoinSmryCard />
  </div>
    CSS設計
    グローバルCSSの適用
    html,
body {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
  /*   전역으로 설정하면 안됨*/
  /*   overflow-x: hidden;*/
}

a {
  color: inherit;
  text-decoration: none;
}

svg {
  position: relative;
  bottom: -0.125rem;
}

img {
  max-width: 100%;
  max-height: 100%;
  image-rendering: -webkit-optimize-contrast;
  transform: translateZ(0);
  backface-visibility: hidden;
}
* {
  box-sizing: border-box;
}
    暗いモードの有効化/無効化(next-theme)
    :root {
  --background: white;
}

:root[data-theme='dark'] {
  background-color: #1f222c;
  color: #ffffff;
}
    • MySQLは価格の最も高い図書の販売店のいくつかのSQL文を探します
    AndroidレイアウトのリニアレイアウトLinearLayout