ASong
[工作日誌 J] 前端工程師:第九週 (6/07-6/10)

這週被資遣了,原本打算想要耍廢七天放空後,再順其自然想想下一步,但沒想到沒過幾天我就開始繼續學習和練習。

不甘心,不甘心被說成一無是處的廢物,不甘心被說連最基礎的基礎都沒打穩,明明已經盡了全力,明明是我工作以來最努力的一次!正是這種不甘心燃起了我心中小小的火種,以這種不甘心為驅動力為起點開始,但我竟然開始感到小小的愉悅,不知道是對於技術還是挑戰,但我確確實實在沒有人監督下,我不自覺開始練習技術,而這竟稍微比起完全放空先耍廢僅僅七天快樂,這應該是一種好現象吧?


下面先稍微把我工作以來 49 天的工作日誌整理一下吧,不過因為已經完全去除了公司內部的資訊,大概只剩三成內容,但我還是想要在這個地方紀錄一下:

從零開始的前端工程師工作日誌

  • Day2
    • 安裝 Chrome 套件
      • JSON Viewer
    • MAC 搜索 快捷鍵:control + space
    • 基本上 Template 都是在 blade 裡面,但未來希望不要再用了要 SPA
    • 安裝 CLI 歷史痕跡提示
  • Day4
    • 連上 AWS
      • CLI
        • brew serach awsw
        • brew search aws
        • brew install awscli
        • aws configure
    • CLI 快速到達位置小技巧
      • 把 CLI 拖到資料夾處
    • 要找到畫面,程式碼的頁面的步驟
      • 先找關鍵字搜尋
      • 若是有 @include(A,B) 就是載入 blade 而 A 則是路徑
    • 前端 要改 Ticket 重點就是要找出 blade 在哪裏
      • 可以從網址的關鍵字判斷
    • 實作 sticky 在 button 上面
      • 問題點:應該要去開發者工具去看實際上是不是真的在滾動時有起作用。
  • Day5
    • 網頁完整截圖的好用工具
    • 前後端分離
      • 建立一個共用 function
      • 前後端資料要處理好
      • 在前後端傳輸資料時要帶 token(其實最常用在帶網址)
    • 如果有網頁壞掉的狀況,不是重新整理就好了,而是要找出原因
      • ex: 動態創造的 DOM,要根據綁 EventListener,就有可能在 DOM 創造前就跑到 EventListener,所以以網頁壞掉,此時要用 Promise&then,或者 Sync 解決
    • 資料格式
      • blade 是類似 PHP 中的 HTML 檔案
      • Controller 是 後端 在寫程式的檔案
        • TempController 是先寫一些假的 api 讓後端後續轉移接手
      • web.php 是用來創建 API 的地方
    • 創建 API 的流程
      • 1. Web.php
        • // 前後端分離 API
          • Route::match([‘get’, ‘post’], ‘/api2/getDashilLogs’, ‘TempController@gogs’)->name(‘getDashailLogs’)->middleware(‘need_login’);
        • 可以打上網址測試看看!
        • 若是要登入的都需要加上 ->middleware(‘need_login’);
      • 2. TempController.php
        • 創建假的程式碼
      • 3. .js
        • 用 AJAX 接 Controller 的 後端 資料
        • 放在 setup() 內
      • 4. .blade.php
        • 最下方引入
          • <script src=”{{ mix(‘~/.js’) }}”></script>
  • Day6
    • 每次重開機就要重啟 Docker
      • cd 檔案資料夾
      • docker-compose up -d nginx mysql redis php-worker workspace
    • 每次看到順手把 template 移到 script 下面
  • Day8
    • 快捷鍵 清空快取:command + shift + R
    • 頁面壞掉整頁式顯示 Laravel 錯誤提示的話很可能代表資料庫缺東西跟後端要 query
      • 開啟 Sequel Pro
        • 按 Connect
        • Choose Database
  • Day12
    • 前後端分離所以要創建 router 讓在 web.php 就被攔截
  • Day15
    • Local 端登入不了時
      1. SQL 指令之類的錯誤找後端要指令,貼到 Sequel Pro
      2. 或者重啟 docker
        • cd 資料夾位置
        • docker-compose up -d nginx mysql redis php-worker workspace
        • docker-compose exec workspace bash
        • exit
  • Day16
    • 加上複製按鈕的技巧後面放張空的 img
    • 資料結構和演算法最好看英文版,最重要是要弄懂 pointer 和 value 的概念,還有 linked list 和 array 兩種資料結構。
      • 七種資料結構不一定是互斥的
      • 最基本要把資料存到記憶體,要有記憶體的位置 pointer,和資料本身的值 value。
      • 每種程式語言會有自己衍伸的資料 type 但是其大體都是出自這七種,然後加上各自的特性。
    • @{{}} 才能再 blade 用 JavaScript 變數
  • Day18
    • 確認後端有沒有吐出資料的兩種方法
      1. dd
        • 在不同頁面 dd 就能知道有沒有丟出資料
          • @php
            • dd($)
          • @endphp
          • ex: dd($datas[0][‘timeline’], 1);
        • blade 中把後端在某頁面吐的變數印出來某頁面上的方法
          • @php
            • dd變數
          • @endphp
      2. 在開發者工具看 response
  • Day19
    • Docker 的 container 就像是簡化版的虛擬機,其能夠讀取 image 映像檔,一次安裝所有打包好環境需求的組件!
  • Day20
    • HTML 的整個模板是在網頁渲染前就被後端吐出來
    • {{}} 被 PHP 佔用了語法
    • 所以 JS 的變數加上 @{{}} 實際上畫面上會短暫的出現 {{}} 然後 Script 再把變數吐出來
    • 通常畫面變白有九成都是 JS 的問題
    • 如果是資料錯誤但有畫面則是後端的問題
    • junior 工程師最重要的能力
      1. 切板
      2. JS
      3. Debug 能力
    • 問的時候最好先講自己嘗試過哪些方法
  • Day22
    • SourceTree 是很讚的版本控制視覺化檢測工具
  • Day24
    • Sequel Pro query 的要先全選再執行
    • 刪 DOM (ex: div ) 要從後面開始刪
  • Day25
    • 衝突要用 >>>> 確認是否有,然後手動處理掉,不要無腦刪要仔細看過
    • 若別人示範完功能寫法後,要自己重新檢查所有區域負責所有功能都正常
  • Day26
    • 數字,英文,中文,混合 JS 排序
      • result.sort((a, b)=>{
        • let reg = /[a-zA-Z0-9]/
          • if(reg.test(a.character_name) || reg.test(b.character_name)){
            • if(a.character_name > b.character_name){
              • return 1
            • }else if(a.character_name < b.character_name){
              • return -1
            • }else{
              • return 0
            • }
          • }else{
            • return String(a.character_name).localeCompare(String(b.character_name), ‘zh-Hans-TW-u-co-stroke’, {sensitivity: ‘accent’});
          • }
        • })
  • Day30
    • commit 之前之前要完全確定改了什麼,有沒有推到測試的東西
    • 持續偵測 props 的改變
      • watch(()=>props.errors, ()=>{
        • state.errors = props.errors
      • },{
        • immediate: true
      • })
      • onMounted(()=>{
        • emit(‘init’, props.address)
      • })
  • Day31
    • 下拉式選單,讓他重新清掉
      • @click=”()={
        • window.$(‘body’).trigger(‘click’)
      • }
    • 寫 coding 思路
      • 1.全部的頁面都正常,只有那頁不正常。
      • 2. 所以邏輯沒問題。
      • 3. 到不正常那頁,仔細檢查它用到這段邏輯的底部 bar,看其差異點。
      • 4. 把 …:visible 加入判斷
      • 這樣的 debug 方式才是正確的,而且這裡面都不涉及程式技術,而是一種工程師 debug 的敏感度,這點要注意,因為我認為這比程式技術更重要,不然錯誤的思路,會造成改東邊壞西邊!
    • jQuery
      • scrollTo 是 window 物件的內建函式,$(window) return 的是 jQuery 物件
    • 從 PHP 變數改傳到 JavaScript 變數
      • index.blade.php
        • <input type=”hidden” name=”” value=”{{ json_encode($PHP變數 JSON_UNESCAPED_UNICODE>
      • .js 用 setup(){} 去吃 input 的值轉乘 JS 變數
  • Day33
    • 快捷鍵:VSCode: command+n 開新檔案
  • Day34
    • docker 要灌入新檔案時乾脆把舊檔案刪掉但是不給刪?
    • docker-compose up -d mysql
      • 再來刪
      • 刪完記得把其他 container 打開
  • Day37
    • 共用的 blade 一定會 @include,但並不是每個 @include 都是共用的,有些 @include 只是為了節省下code的空間
  • Day38
    • 錯誤檢討
      • 事件發生:把有 bug 的程式碼推上 master
      • 發生原因:沒有建立一套 SOP ,也沒有將 git 所有指令原理徹底搞清楚,導致將錯誤的程式碼無意中 git push 推上 master
      • 重點:
        • 每次切到共用主線,在一開始和結束時都要用 git status 查看檔案狀態
        • 每次切到共用主線第一件事就是要先 git pull 確保拉下最新的檔案
        • 要更動共用主線的東西一定要先 git pull 拉下最新的檔案後用 git checkout -b ticket_OOXX 切支線出去更改再併回來
        • 當在共用主線時若用 git status 發現有不明的檔案時一定要先用 git reset –hard 和 git clean -fd 清乾淨再做更動或者合併,清完要用 git status 確保是否確實清乾淨
        • 每次只開一條獨立的分支處理一張單,不同的單不可合併在同一張單處理,確保能夠清楚的確定這條分支沒有 bug 後再合併到共同主線
        • 每次 git merge 把分支合併到主線後要用 git status 確保所有檔案的更動都是自己以盤查無誤的。
        • 每次 git merge 後要手動搜尋 >>>>> 確保沒有需要手動解決的程式碼衝突
        • 在共同主線要 git push 檔案到 GitHub 前一定要先打包重建檔案
        • 在 git push 任何東西前一定要先用 git status 檢查,若有沒有加上 hash 結尾的 js 檔案,一定要重新打包重建檔案一次檔案
        • 在 public 資料夾中其中一個檔案是檔案路徑的對照表,每次打包完都會生成新的檔案和檔案路徑對照表
        • 在最外層的 package.json 檔案中定義了打包重建檔案的方法去呼叫的完整 script 指令及其背後意涵
        • 要去檢查是否 public 中的檔案是否有重複的兩份,若有一定是有問題
        • local 端若是出現 PHP 的錯誤頁面 Unable to locale Mix file 有極大可能是沒有從共同主線中 git pull 下最新的檔案就開了分支,若不是此原因就要盡快去追查背後的原因及影響範圍。
        • 用 git log 去回溯查看所有 git commit,並找到錯誤發生前後的 git commit
        • 用 git checkout 切回到舊的 git commit 查看找到錯誤,並且回復到正確的狀態
        • git pull 是包含 git fetch 和 git merge
      • 合併分支到共同主線的檢查表(必須嚴格按照順序)
        • git status
        • git pull
        • git merge ticket_OOXX
        • git status
        • Search >>>>>
        • 打包重建檔案
        • git status
        • git add –all
        • git commit -m “merged from OOXX”
      • git pull (若有新東西則需要從打包重建檔案開始重新一次流程)
      • git push
  • Day49
    • 接觸任何一個新的程式語言要首先掌握以下三點
      • Data Type
      • OOO/OOA/OOD/OOP
      • 內建 function
    • JS 是弱型別的程式語言
    • 計算機概論之重要學習點
      • 邏輯元件
      • 硬體
      • 韌體
      • OS <- 優先讀
      • DB <- 優先讀
      • 軟體 <- 優先讀
      • 網路 <- 優先讀
      • OOO <- 優先讀
      • 演算法 <- 優先讀
      • 程式語言 <- 優先讀
    • 3 個 Level
      • Programmer
      • Software
      • 系統

獨立知識點

  • Vue
    • 在 Setup 設定 state ,再把它拋出去使用
    • Google Vuex 找到 action
      • 你 call action 他會去 call mutations
      • 錯誤但可以的做法,直接在 action 更新狀態
    • v-on:error 是一種初始化
      • 沒換頁就不會再重複觸發
    • v-if 跟 v-else-if 和 v-show 都放標籤最前面,才能一眼看到
      • JS 才能用 aa?.bb?.cc,blade 不能用
    • AJAX
      • async function fetchDatas(){
        • const result = await $.ajax({
          • url: ,
          • type: ‘GET’,
          • data:{
            • _token: window.$(‘[name=””]’).attr(”),
          • },
        • })
        • return result
      • }
    • 現在改用 vue3 一律都寫 setup
    • 之前很多結構都還是用 vue2
      • 像這行程式碼就是引入 vuex
        • .use(store)
      • const app = createApp({
        • data(){
        • }
        • methods: {
        • }
        • watch: {
        • }
  • 切版
    • tailwind 物件跟物件中間的 margin = Space Between
    • col-auto 就是 col 代表內部物件本身的寬度
    • 要寬度可控制又能縮放需要同時 max-width 和 width: 100%
    • col-auto 可搭配 col-12 和 flex-shrink
    • lg: 要有成對再放
    • 只用到一次的寫 inline style 不要用 tailwind 浪費資源
    • 在切板後期要妥善確認哪些 code 是多餘的把它刪除
    • 不要用亂試的寫法要明確知道寫得理由!
      • background-size
        • 有時候還要加 justify-center 或者 content-center
        • 官方文件
          • background-size: contain;
          • background-size: contain;
      • background-repeat: no-repeat;
        • background-size: cover;
        • background-size: 30%;
        • background-size: 200px 100px;
    • tailwind 1 單位 = ?px(要先確認)
    • 內建的顏色系統檔案:tailwind.config.js
    • row 之內的 col 及切版
      • flex-shrink 搭配 col-auto 使用,在版面變小時 auto 不會變,而是會等比例縮小 flex-shrink 的部分。
      • row 內才能使用 col,基本上 col 是連在一起的,之所以看起來會有空格是因為內建的 padding 是 15px,中間合起來是 30px
        • 又 row 又把 col 往外拉讓 col 邊界可以對齊整個表格
      • 如果希望 row 內的 col 可以不要掉下去要加 flex-nowrap
      • 可以利用 ml-auto 的特性讓其被擠壓到最左邊
      • mx-auto 則是會剛好置中
    • Bootstrap -> Tailwind 用法對比
      • .d-lg-none d-block-> lg:hidden block
    • 垂直置中 的兩種方式
      • 法 1: flexbox
        • 外層改 display: flex
        • 內層改 align-items: center; justify-content: center;
      • 法2: absolute
        • 外層改 position: relative
        • 內層改 position: absolute
  • Git
    • GitHub 概念講解 by U
      • https 會有明碼,相對安全性較低被知道就能登入(username, password)
        • 因為我 PC 端存的資料只對應到我的 Git ,不是 JGB 的 Git
      • SSH 必須要有檔案所以安全性相對較高
        • 當你用 ssh generate(產生一次之後,沒事不要亂產生) 會產生兩組檔案(字串 rsa 結尾)
          • 一組是可以放在你電腦的私鑰
          • 一組是可以放在 GitHub 的公鑰
        • 當你之後每次要 git pull 時他就會去比較這兩把鑰匙是否能吻合
      • GitHub 在帳號密碼輸入錯誤時會跟你說 not found 不讓你知道原因增加安全性
    • git 有異動才需要 git add –all
      • merge 有衝突才需要重建打包檔案
    • 當切 輸入 git push 出現 黃字/紅字時
      • 代表有人先推了
      • 要先執行 git pull
    • 隨時要注意 git 有沒有未儲存的變動或者改變
    • 每次切換 git 的 branch 時都要把分頁檔案全部關掉,再重開需要的
    • 暫存當下版本程式碼記憶點的好用方式
      • stash:git:git stash save “05281124” -u
  • VS2
    • VS2 快捷鍵 叫出 CLI:control ~
    • 安裝 VS2 套件
      • GitLens
      • Highlight Bad Chars
      • Highlight Matching Tag
      • IntelliSense for CSS names in HTML
      • Laravel blade Snippets
      • Path Autocomplete
      • vscode-icons

可參考我的八週 [工作日誌 J] 和百日轉職工程師系列文

作者介紹 - ASong

ASong

ASong, 現在是一位前端工程師;業餘的閱讀愛好者、講師、寫作者;任何討論或合作可寄送至 dragoncres@gmail.com。

發表迴響