0.導入

最終種目はもうすぐ終わります.
最終プロジェクトが終わった瞬間、最も印象に残った技術は何ですか.
意味がある.

1.私は楽しむ人です。

自分がプロジェクトで紹介したいことを紹介する前に、論語翁野編を紹介したいと思います.
知っている者は良い者のように良い者は良い者のように
「知者は好者に及ばず、好者は楽者に及ばない」という意味です.
技術が重要であることは分かっているが、もっと重要なのは知っていることを超えていることだ.
これは技術原理を体得しながら、楽しむ段階だと思います.
時間が経つにつれて、プログラミングなどのITテクノロジーが
より良い、新しい技術が絶えず現れています.
また,特定の機能を利用するためには,以前に学んだことのない新しい技術を利用する必要がある場合がある.そのたびに、私が心に銘記しなければならない文は上の論語の文です.

2.独自の技術スタックを紹介する

1.地図はほぼ完成

本人が紹介する技術スタックはコカソ地図APIです.
私が今回開発したプロジェクトのテーマは「場所と感情を含む個人日記」です.
このWebアプリケーションでは、日記写真を添付する際に、位置情報を同時に添付する必要があります.
したがって、外部API(特に地図に関連するAPI)をロードする必要がある.
通常、外部APIを使用する場合、使用ガイドが表示されます.
最初に、外部APIを使用するには、熟知したプロセスが必要です.
最初は以下の内容を参考にした.
https://apis.map.kakao.com/web/guide/
カナダ地図APIを読み込むには、3つのステップが必要です.
まず、第1のステップは、API鍵を受信し、スクリプトとして適用することである.
reactのCreate-act-appを使うと、
共通フォルダのインデックス.htmlに次のタグを挿入すればいいです.

 <script
     type="text/javascript"
     src="//dapi.kakao.com/v2/maps/sdk.js?appkey='API_KEY'"
   ></script>

第2のステップは、APIキーをロードした後、divタグなどを使用して地図を生成する領域を作成することです.
本プロジェクトではreactを使用するためStyled Componentsを使用した.
最後のステップはオフセットマップのコードを書くことです.
オフセットマップのコードを記述する際には,地図を含む空間,地図のスケール度合い,地図の中心座標が必要である.
地図の中心座標を取り戻すのに苦労した.
中心座標を読み込むには、AxiosからDiaryType構成部品から受信したデータを要求します.
MapType素子から取得すればよい.
中心座標のロードが最も困難なのは,State Liftingメソッドを誤って使用したためである.
本プロジェクトの構成要素は以下の通りです.
しかし、実際に適用された素子構造は以下の通りである.

function App() {
 <중략>
          <Route path="/" element={<DiaryType />}></Route>
          <Route path="/map" element={<MapType />}></Route>
 <후략>
}

上記のコードでは、DiaryTypeとMapTypeが共通の親としてAppコンポーネントを持っています.
DiaryTypeとMapType素子は兄弟関係です.
2人の関係は思ったより近いので、props drillingを打っても複雑ではないと思います.
次のサイトを参考にして試した結果...
https://velog.io/@onezerokang/%ED%95%98%EC%9C%84-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EA%B0%80-%EC%83%81%EC%9C%84-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EB%A1%9C-%EA%B0%92%EC%9D%84-%EC%A0%84%EB%8B%AC%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95

Cannot update a component (`App`) while rendering a different component (`DiaryType`). 
To locate the bad setState() call inside `DiaryType`, 
follow the stack trace as described in https://reactjs.org/link/setstate-in-render

警告メッセージが表示されます.
何か間違いがあるようで、最後に思いついた方法はReduxにデータをロードすることです.
コアは、DiaryTypeがaxiosリクエストでデータを受信した後、直ちにuserPostを変更するアクションを作成して配布することです.
これでデータの受信に成功した.
地図の座標は0番目のインデックスの緯度と経度によく適用されます.

2.タグ情報の変更

1.デフォルトタグを変更して適用

今回の最終プロジェクトのテーマは「場所と感情を込めた個人日記」.
地図にも感情情報が含まれている必要があります.
ここで意見の食い違いがあった.
問題は、1つの文章に複数の感情がある場合です.
最初に思いついた案は、感情をそのままいくつも入れる案で、応用していました.
その結果、地図にマークがめちゃくちゃになった問題が発生しました.
そこで、一つの文章で合意し、複数の感情があれば、感情を表すマークを入れる.
しかし、どのように感情を表すかという問題もある.
これに対する解答は思ったより簡単です.
つまり、最初に選んだ感情は感情を表すものです.
一番最初に思いついたのは最優先の感情だからです.
試験問題で置き換えると、間違いの理由とあまり差がありませんか.
そして、文章の情報に従ってタグを使えばいいです.

2.スケールレベルに応じてタグを変更する

地図の表示範囲が広く、マークの大きさが変わらなければ
情報が重複する問題が発生します.
板橋にマークがあると仮定して、隣の団地の盆唐とマークがあります.
板橋と野塔の原因はココ本社が板橋に...
地図が狭いところに表示されていれば、マークは重なりません.
しかし、広い場所を見せてくれれば、マークが重なっているのが見えます.
これを適用するには、タグを変更する必要があります.
ただし、タグを変更するにはタグ情報を変更する必要がありますが、次の関数は理解できません.

markers[index].setImage(marker)

マークが何なのか考えました.
答えは思ったより簡単です.これは、デフォルトのタグを変更し、タグを撮影するときにタグを保存する配列変数です.
デフォルトのタグを変更したら、適用前にタグアレイにタグ情報を追加します.
次に上の関数に変更します.

3.タグをクリックして詳細を表示する

もう終わったかと思いきや、クリックマークで詳細を表示する機能は入っていませんでした.
この機能を追加した理由は、記事をクリックして詳細を表示するためです.
地図上のマークをクリックして、詳細を表示しないのはおかしいです.
これは比較的簡単です.
「記事」(Post)をクリックして、右側の画面を詳細を表示するウィンドウに変更します.
それを設定したからです.
(実際、サイトの基本的なスケルトンはほとんど筆者が作成したものです)
右の状態はRidexが管理しているので、useDispatchを使って変更しました.

3.終了時

すべての技術が変わります.翌日になると、既存の技術よりも優れた技術が現れる可能性があります.
このとき必要なのは新しいものへの適応能力です.
新しいことへの適応力は、正式な書類を読んで自分のものにする能力だと思います.
このため,今回の技術発表のテーマはカナダ地図APIドキュメントとして定められている.
終わる前に、儒学の経典の一つである大学の一言を引用してこの過程を終わらせたい.
これは筆者の座右の銘であり、IT業界に従事するために備えなければならない心理状態だと思います.
新日新日