最初のプロジェクトのレビュー

最初の会社に入社して約3ヶ月後に担当したプロジェクト.
彼は新人に何の期待もないと言って、私たちに最善を尽くすように言いつけた.
まず、Webテクノロジースタックは次のようになります.

php CodeIgniter4

nginx

MySQL

Vue.js

(とりあえずDOKER設定ファイルを見てから書いておきました…)
しかし、現在担当しているプロジェクトはバックエンドではなく、画面側からデータをインポートして出力しています.ドキュメントは後でWebサーバに載せるそうですが、よくわかりません.
このような簡単なプロジェクトで新しく学んだことをいくつか書きたいです.

🧱オブジェクトと配列の処理

Javaに詳しいので、JavaScriptのObjectやArrayの概念を理解するのは難しいです.
しかし,コンソール上で撮影し,構築した関数を探索することにより,データを少しずつ操作する方法を習得した.
今回使用した関数

Object.keys();

//let keyArr = Object.keys(obj);
//오브젝트의 키 이름을 배열로 리턴한다.

Object.prototype.hasOwnProperty()

//let checker = obj.hasOwnProperty('check_key');
//오브젝트에서 입력받은 키값이 있는지 판별한다.

Array.prototype.filter()

//let new-array = array.filter(element => condition)
//배열 요소중 조건문을 통과한 요소들로 새 배열을 리턴한다.

Array.prototype.indexOf()

//arr.indexOf(searchElement[,)
//인자와 일치하는 요소를 찾아서 인덱스를 리턴한다. 
//존재하지 않을 시 -1을 리턴한다

Array.prototype.map()

//let map1 = array1.map(element => function{ .. })
//배열 내 모든 요소 각각에 대하여 주어진 함수를 호출한 결과로 새 배열 반환

Array.prototype.push()
//배열에 요소 추가

Object[key] = value;
//오브젝트에 요소(키:밸류) 추가

Javascriptでは、次の構造も実現できます.

//배열
let arr = [3,5,7];
arr.foo = "hello";

console.log(Array.isArray(arr)); //true
console.log(arr); //[3,5,7, foo:"hello"]

//오브젝트
let obj = { key1:'val1', key2:'val2'};
obj.key3 = ['will', 'this', 'work'];

console.log(obj); // {key1:'val1', key2:'val2', key3: Array(3)}


//오브젝트 속성에 접근하기
//dot notation
obj.key1 //val1

//bracket notation
//key이름을 변수로 받아올 때 편리
let k2 = 'key2'
obj[k2] //val2

そしてfor文もJavaとは違います.

let arr = [3,5,7];
arr.foo = "hello"

//for...in 속성 이름을 반복
for (let i in arr) {
  console.log(i); // 0 1 2 foo
}

//for...of 속성 값을 반복
for (let i of arr) {
  console.log(i); // 3 5 7
}
//반복 가능한 객체(배열, Map, Set)

作成したページは,粗製乱造したyamlファイルをobject出力に変換したページであり,属性ごとに深さやタイプが非常に異なるため,重なり合うオブジェクトの処理が最も困難である.
またyamlのデータ構造はそのまま加工する必要はなく,データ構造をどのように記述するかが鍵となる.

私の頭の中で描かれている構造をすぐに組織したり、自分の望む機能に合った構造を考えたりするのは難しい.
特に関数を再利用可能に抽象化することは難しい.
それは弾くしかない...

🔧クロム開発ツールの使用

elementタブでcssを表示するかconsoleタブで記録するだけで、sourceタブで関数構文にブレークポイントを追加してデバッグする方法を学びました.

「Element」タブ

最終レンダリングのhtml構文を表示します.htmlツリー構造を表示し、クラスまたはidを操作できます.cssも確認できます.DOMブレークポイントをキャプチャできます(たとえば、サブノードが消えたりclassが追加されたりします).

「コンソール」タブ

console.error("test")エラーがどのラインで発生し、どこで呼び出されたかを知りたいとき.console.trace()これもstack traceをチェックできます.console.table(array)資料構造を表形式で簡潔に示す.

「Source」タブ

ネットワークからダウンロードしたリソース(bundle以前のソースコード)が表示されます.breakpointを使用してデバッグできます.
SPAフレームワークはソースマッピングを提供します.(ex:./app/static/bundle/.mapファイル)
本番モードでは提供されず、開発者モードではデバッグしやすい機能を提供します.

Networkタブ

パフォーマンス関連.
1回目の接続時にキャッシュし、その後接続時に接続速度を上げます.
throtting-パフォーマンスチェックを行うには、複数のネットワーク環境を考慮する必要があります.

✅Vue.js

Vue文や詳細は書きたくない.
これはフレームワークに依存する文法のようで、同じ機能でもvanilla javascriptで実現できればいいと思います.
まず簡単ないくつか

v-model

v-bindとイベントの組合せ

v-htmlのdeepセレクタ

v-htmlは後でレンダリングされます...

<template>
  <div class="content-row">
    <p v-html="converted"></p>
  </div>
</template>


<script>
export default{
	name: 'test-component',
    data: function(){
    	return{
        	converted: '<code>console.log('this will be converted');</code>'
        }
    }
}
</script>


<style scoped lang = "scss">
  .content-row{
  	::v-deep code{
      color: grey;
      background-color: black;
    }
  }
</style>

vue router

vue routerをインポートして書きました.
router-viewとrouter-linkはパラメータを送信できますが、(props)ルータリンク側はリンクを通過するかどうかによってパラメータを受信していません.たとえば、ホームページで「≪リンク｜Link｜emdw≫」をクリックすると詳細ページが明確に表示され、直接詳細ページ・アドレスにアクセスすると空白ページが表示されます.router-linkのパラメータをクリアし、router-view端でデータを加工し、ページに適した情報を送信することで解決します.$routeルーティングされたページのプロパティを含むオブジェクト$routerrouter.jsファイル内のオブジェクト
SPAフレームワークはVUEを初めて使用し,最も重要なのはその分離方向性が非常に便利で良いことである.

🤝コラボレーション

これは後で分かったのですが、一人でコードを書いても意味がありません.コードを学ぶのもコミュニケーション手段で、プロジェクトはもうすぐ終わります.