🖥 PCビューを使用して作成されたWebサイトのモバイルビュー開発アウトソーシング📱

初めて書いた回顧録...うん.
このように書くのは正しいですか...

発端

最終話の1週間前、ネット開発サークルのグループからメッセージが来ました.
アウトソーシング開発した研究室サイトのモバイルWebフロントの内容を探しています.
金額も提示された本格的なアウトソーシング.

展開

終講をしていないのに、これをすると言ったのは、きっと気が狂っているに違いない.
私の実力で何のアウトソーシングだ?でも.

キー機能とコンテンツが実装されました.

pcビューが作成され、移動ビュー

のみが追加されました.
この条件は本当に珍しいと思います(最も重要なのは試験の復習をしたくないことです)
最終的には野心的に挑戦します...

ピンチ

やっぱり気が狂ってますね…^^
これまでは、プロジェクトが大きくても小さくても、最初から開発に携わっていて、似たようなカレーで勉強しているサークルのメンバーと一緒にやっていたので、コードの構成や進度が自然にわかりました.
しかし、これは、、、他の開発者の手を経たプロジェクトであり、コードスタイルも非常によく知られていません.

今.この長い---コードはページごとに並べられています...あんな...
指数は私が想像していたより多く、コードも私が想像していたよりずっと長く、雑然としています.😇
こうして、2週間にわたる独自の挑戦が始まった.

絶頂

本プロジェクトにおいて、技術面で最も考慮されるのは2つの側面である.

📱 はんのうがた📱

油管クローンコード項目には反応型が記載されているので、それほど難しくはない.

@media (max-width: 430px) {}

全体的にstyled-componentを使用してスタイルを適用しているので、cssスタイルを変更する場合は、サークルで学んだmidiaクエリーを使用しています
しかし現在本プロジェクトは,移動ビューを全く考慮せずに開発されたウェブサイトであり,移動ビューを実現するために,戻り部分のコンポーネントに触れる必要がある場合がある.
それで

useStateを使用してビューサイズをステータス管理する

本来できることは、

//모바일 여부 감지
  const [isMobile, setIsMobile] = useState(false)
  const resizingHandler = () => {
    if (window.innerWidth <= 430) {
      setIsMobile(true)
    } else {
      setIsMobile(false)
    }
  }
  useEffect(() => {
    if (window.innerWidth <= 430) {
      setIsMobile(true)
    }

    window.addEventListener('resize', resizingHandler)
    return () => {
      window.removeEventListener('resize', resizingHandler)
    }
  }, [])

ソース:https://darrengwon.tistory.com/720
このコードが含まれている限り、isMobileを使用して、モバイルビューであるかどうかを識別することができる.次のように応用されています

ex1. PCビューと移動ビューでメニュータイトルが全く異なる必要がある場合、

//위쪽에 모바일용 메뉴바와 pc용 메뉴바를 따로 구현
return (
    <div style={{ height: '70px', margin: '0px' }}>
      {isMobile ? menuBarMobile : menuBar}
    </div>
  )

ex2.

、ビューサイズに応じて特定のエレメントにのみ付与するスタイルを変更する必要がある場合はstyle

// <Paragraph /> 는 외부라이브러리에서 가져온 컴포넌트
<Paragraph
style={
  isMobile
  ? { display: 'flex', flexDirection: 'column' }
: { display: 'flex', flexDirection: 'row' }
}
  >

🍔 「移動」ドロップダウン・メニュー🍔

もともとそうだった.
1.各ページにアクセスできるボタン
2.漢英変換ボタン(stateで管理、ページ変更で管理)
簡単なPCメニューバーがあります.

このようにメニューバーを移動させるコンポーネントを単独で作成し,左のハンバーガーボタンを押すだけでMenu Slideがポップアップできることを簡単に実現した.
でも….

このうち2つのページは、各ページ内にこのようにページを変更するボタンの形式がある.
これらのボタンを移動ビューに入れることができないため、移動メニューの形式を以下のような縦長の形式に変更します.

ボタンを押すと、そのページに入ることができる詳細ページがガチャガチャ出てきます.中には選択できる形式もあります.どこでよく見た記憶を参考にしたデザインです

<SlideItem onClick={() => history.push(`/main/${change}`)}>
  {change == 'kor' ? '홈' : 'Home'}
</SlideItem>

<SlideItem
onClick={() => {
  setIsOpenProgram(false)
  setIsOpenLab(isOpenLab => !isOpenLab)
}}
  >
    {change == 'kor' ? '소개' : 'About'}
</SlideItem>

<ul className={isOpenLab ? 'show-program' : 'hide-program'}>
  <DetailSlideItem
	onClick={() => history.push(`/lab/${change}`)
	setIsOpen(false)}}
  >
    {change == 'kor' ? '연구소 소개' : 'Lab'}
</DetailSlideItem>

//후략

でも本当に大きな問題があります
既存のpcビューで、ホームページ、紹介、番組紹介、研究所のメッセージページに入る場合はreact-routerを使用して移動し、その内部の詳細ページはステータス管理で下の内容を管理し、ボタンで内容を変更できるようにします.
すなわち、「研究院概要」ページに移動するには、「概要」ページアドレス/lab/korに移動し、以下の内容を管理するDetailコンポーネントに状態を渡して、ビューを浮遊させる8｣8
最終的には、pcビューでは関係ありませんが、移動ビューで作成したメニューバーを通過するには

react-routerにページを移動し、コンポーネントのステータスを管理します。

やらなければならない.
幸いなことに、世界には私と同じように悩んでいる人がたくさんいます.
https://velog.io/@dhlee91/this.props.history.push%EB%A1%9C-props-%EB%84%98%EA%B2%A8%EC%A3%BC%EA%B8%B0

<SlideItem onClick={() => history.push(`/main/${change}`)}>
  {change == 'kor' ? '홈' : 'Home'}
</SlideItem>

このように使用されるhistory.push().

<DetailSlideItem
onClick={() => {
  history.push({
    pathname: `/lab/${change}`,
    state: { detail: 1 },
  })
  setIsOpen(false)
}}
  >
    {change == 'kor' ? '연구소 소개' : 'Lab'}
</DetailSlideItem>

これによりstate:でdetailという変数を渡すことができます
[受信]ページで、

import { useHistory, useLocation } from 'react-router-dom'

//중략

  const location = useLocation(1)
  console.log(location.state)

//중략
 <DetailPage
num={
  isMobile
  ? location.state === undefined
  	? 1 : location.state.detail
  : numState
}
lang={lang}
/>

このように

location.state.detail

届く数字に近づく

の最後の部分

まず印象的な苦労?銀は2種類あるようです.
逆に学んだことを利用して、スタイルを変えて、別の移動素子を作って、それを見せて......これらの仕事の繰り返しなので、やりやすいです.
それ以外に学んだこと

css backgroundプロパティ
https://ofcourse.kr/css-course/background-%EC%86%8D%EC%84%B1

html/css自動改行
https://mouselish.com/165

こう書いて振り返りますよね...と思いましたが、これは私が復習のために書いたので、フォーマットに関係があります...ないでしょう…?
ずっと勉強の内容を短く記録していましたが、私の物語を含む長文をこんなにたくさん書いたのはちょっと気まずいです.この文章を単独で削除したいだけです...もう一つブログを書きますか?(私も字を書きたいですㅠㅠ)
いずれにしても、非常に無謀に挑戦するプロジェクトですが、多くのことを学びました.
正解のない項目の中で、私は誰にも聞かず、自分で問題を探して解決する過程が想像以上に面白くて、私を喜ばせました.
機会があれば、このプロジェクトを再構築したいです.コードも整理しましたが、、、🥺)