原本表定五月就要開始專心學React了,結果太過懶散的我還是拖到前陣子才終於有比較完整的React學習進度了。所以學習筆記可以來點不一樣的東西了,每天都看Vue也是會膩的,呵呵。
這邊一樣會從建立React專案的部分開始,這次在建立專案時有遇到一些小問題,也會一併記錄到這一篇。接下來就直接進入正題吧!

 

文科少女寫程式 發表在 痞客邦 留言(0) 人氣()

最近剛換了一台電腦,好不容易把一些該用的工具裝好,準備開始進行一個這幾天構想的內容時,突然發現我習慣使用的【.class】+【按下Tab鍵】來自動產生對應class name的HTML標籤的方式居然失效了!!
應該是因為重新安裝,所以有些設定需要自己額外做設定,但是我實在也忘了當初剛學用VSCode的時候,為什麼可以有這樣的功能,這次既然又遇到了,就把它好好記錄下來吧!

遇到這個問題時,其實只需要簡單的三個步驟就可以解決了!
步驟一、先從VSCode的File裡找到Preferences的Settings點進去。
image
按下Setting後,就可以看到以下的這個畫面。
image
步驟二、接著從左手邊的選單中找到Extensions裡面的Emmet
image
步驟三、點擊Edit in setting.json,打開設定的json檔案,並設定
"emmet.triggerExpansionOnTab":true
image

文科少女寫程式 發表在 痞客邦 留言(0) 人氣()

貼心小提醒!!
因為是亂亂寫筆記,真的就是純紀錄之前實作時,
如何解決曾經卡住過的問題,所以主要都是解決問題的方式為主,
不會有太多詳細說明。

用月份陣列和後段取得的資料陣列比對,補齊不足的資料
實作情境
前端畫面固定會顯示六個月的資料,但是後端資料不一定會給六個月的資料,若想要用迴圈方式把資料渲染上去,就會出現問題。但是後端資料給的資料筆數可能是0~6組資料就有,這時候拿到後端的資料就需要另外處理,而且資料的月份順序也必須正確,並不是只要補齊六個月份的共六份資料就可以,顯示基準為五月,需要在前端渲染五月往回推六個月的資料,但是有可能從後端拿到的資料卻只有三月的資料,就需要依照月份另外塞入空的資料。
簡單來說,就是必須處理從後端拿到的資料,必須把確保渲染用資料共用六組,且必須依照月份排序。
實作方式
先拿基準月來組成月份陣列,基準月為後端傳來的月份。
再透過比對月份清單和api取得的單筆資要的月份來補上沒有資料時,應該要顯示的'-'內容。

文科少女寫程式 發表在 痞客邦 留言(0) 人氣()

今天想要來分享一個對於軟體工程師這個職務有點好奇的人可能會想要知道的內容,就是「工程師一天的上班生活都在做什麼?」
雖然這個內容會依公司不同而有差異,但是說真的在我自己並沒有實際成為工程師之前,真的對這個部分充滿好奇,所以這次就想說來寫一篇無關乎技術的內容,給想要更了解工程師職務的人一點點的參考資訊。在正式進入主題前,想先提醒大家!因為我是前端工程師,所以這次的內容只會以前端工程師為主,而且每間公司一定多少都會有差異,所以僅以我目前待的這間公司的工作狀況下去分享,另外,因為我現在還是很菜的工程師,如果是更資深的工程師,可能也會跟我遇到的實際狀況有差異,所以內容僅供參考!

一整天大致上的工作內容
每天工作內容會依照實際手上被分配的事項有不同,不過大多數時候,主要都還是進行這些工作內容。
1. 例行的 stand up meeting
2. 修正bug或參與專案開發
3. 查資料找答案
4. 其他會議

早上例行的stand up meeting
每天早上到公司後,大概在10點15分左右,我們部門就會開始進行stand up meeting,stand up meeting的進行方式有別於大多數公司正式開會的方式,並不會待在辦公室裡開上超過30分鐘的會議,就是很簡單地大家圍一個圈,站著簡述昨天上班的一整天大概進行了什麼工作內容,今天又預計進行哪些工作內容。偶爾有一些需要即時同步的事項和提醒內容,相關人員或是主管也會在這個早上的會議告訴大家。
修正bug
如果手上有比較急的bug單,通常就會處理bug單,在我剛進入公司時,比較常會被分派一些bug單,透過找bug的發生原因(Root Cause),也讓很菜的我對專案比較熟悉。
參與專案開發
前期大多都是支援一些小小的bug單,還既有功能的變更單,最近才開始參與專案的開發。因為是前端工程師,所以在參與專案開發時,主要工作內容分為切版、串接api。切板時會接觸到UI設計師,並依照他們出的設計圖製作畫面;串接api時,會接觸到後端工程師,依照後端工程師給的api contract來進行串接。在參與專案的開發時,有時也會需要和規畫專案內容的BA或PM溝通,因為有時候拿到的開發用文件,可能會不夠清楚,或是有需要釐清的部分。
查資料找答案
不管是在修bug,或是支援專案開發時,偶爾都會出現一些自己不知道該如何解決的問題,這個時候就會花一點時間查資料。目前為止需要查資料時,幾乎都能找到自己需要的資料,或是讓我有靈感想出解決辦法。
其他會議
除了早上的會議外,自己部門每兩個禮拜還會有一個sprint的回顧檢討會議(retro),在這個會議中,大家都可以輕鬆地發表自己的各種想法。另外,偶爾還會需要參加SRS會議,在會議中,主要是負責的BA說明這次的SRS的內容,和會需要調整、修改、增加的開發項目。
在邁入第五個月的菜鳥前端工程師生活中,其實大多時候的工作內容,主要還是在進行開發和修bug,雖然看起來好像都在做差不多的事情,不過實際上在開發不同功能時,偶爾還是會遇到一些新的挑戰,所以到目前為止,還是都感覺非常有趣、有成就感。這就是菜逼八的我一整天上班生活中,會做的事情。
這次的小分享就到這裡了,大家掰餔!

 

文科少女寫程式 發表在 痞客邦 留言(0) 人氣()

這陣子為了開發新功能,主要都在接觸Vue3,前陣子也在公司內聽了前輩大大準備的Vue3分享,所以這次想要針對Vue2的Options API和Vue3的Composition API寫一篇學習紀錄。
為什麼Vue3加入了Composition API?
在Vue3中,依然可以使用Options API,但為了以下幾個部分,所以在Vue3加入了Compositon API。
1. 提高對TypeScript更好的支援度。
2. 增加元件的易維護性。
3. 讓功能被拆分出來並能重複利用。

Options API的寫法
在Vue2中,元件內在data區塊擺放狀態資料,在methods寫功能邏輯,就是Options API呈現的元件內容。雖然資料被放到一個區塊,功能邏輯被放到另一個區塊,看似有做一個分類,但若想要維護單個功能,就需要在好幾個區塊中,找到對應的資料或是方法進行修改,這也就讓想進行維護修改時,沒那麼便利。
image
即使是跟某一個功能有關的資料或methods,還是必須被拆分到data、methods裡面。
image

文科少女寫程式 發表在 痞客邦 留言(0) 人氣()

不知不覺已經邁入第四個月了,比起前幾個月,在公司上班的狀況又更自在了,也開始參與更多工作內容。
這段期間一樣不斷地被新的知識衝擊,也一邊不斷地透過工作上的踩雷學習(隔壁的前輩同事大概快被我煩死了吧XD),雖然這陣子比較少煩我的同事了,但偶爾還是會遇到卡關太久的時候,所以這陣子偶爾還是會尋求前輩的幫助。但比較不一樣的是最近在做手上的任務時,除了把功能做出來以外,已經開始會提醒自己思考用更好的方式完成,雖然被code review的時候,主管前輩還是會留下很多建議給我,但我覺得這樣反而才能讓我繼續改進自己。
另外,這幾個禮拜因為開始參與一些小專案的開發,不再只是打打下手,是真的需要自己完成一個頁面,並且把這個頁面的功能時做出來、串API,所以也開始不只是單純地默默坐著自己的事情,還需要跟BA、設計、後端做溝通,這時候就很感謝過往的經歷,讓內向的我不害怕溝通這件事,甚至可以很熟練地進行溝通,只是自己在技術面還不太有自信,所以有時候溝通上,太過技術類的內容,依然還沒有說明得太清楚。但也因為以前翻譯需求,讓我很擅長(自以為XD)用各種說法讓對方聽懂,所以遇到難解釋的內容,一樣可以想得到用其他方式說明,這時真的很感謝過往的經歷。
最近除了溝通,前幾天也剛完成了一個小專案,並參與專案的demo過程,負責了自己完成的頁面的操作demo。其實我不太習慣很多人面前講話,但是只要一想到反正是用中文發表,就又瞬間覺得這其實沒有那麼困難。這次的demo我也就沒有像以前在做簡報發表一樣,特別寫出講稿並且背起來,只是大概寫了我可能要說明的內容架構,也在家自己大概練習了一下。實際demo的過程,我們整組進行得都很順利,我在進行自己的部分時,也沒想像中緊張,只是被問問題時,依然還是抖了一下,不過我的隊友都很優秀,在我有點疑惑時,就會出來拯救我,真的非常感謝他們。
最後說一下這段期間的心得總結!
除了我自己當然還得加把勁學習外,更多的感觸是~
「工程師不只要懂得寫程式,還要懂得溝通、說話。所以如果是科班出身的人,還是必須磨練這一個部分。如果是後來轉職的人,這一部分的軟實力就能成為我們的優勢!」
各位還在轉職道路上的人!過去的走的路真的不會白費,只是換個方式將這些經歷運用出來而已,大家加油!

 

文科少女寫程式 發表在 痞客邦 留言(0) 人氣()

TALION 血裔征戰: 遊戲資訊 - 成長系統介紹 image 6
關於Vue的slot用法,雖然以前有查資料了解用法,但是因為沒有實際使用的經驗,其實當初查了相關資料後,還是有看沒有懂,久了也就先把這塊放掉了。直到上戰場,才發現slot的用法其實很常出現,所以也就代表這個東西一定要搞懂了。最近又剛好在重構專案,需要把Vue2改寫程Vue3,有遇到一些slot的內容,花了一點時間去釐清slot的用法,於是就決定好好地寫一篇slot的學習紀錄。
Slot是什麼?
Slot的中文就是「插槽」,可以在子元件中設定一個插槽,當在父元件中使用這個子元件時,就可以從父元件中把想放入的內容放入這個已經在子元件中產生的插槽。這不禁讓有點宅的我想到一個比喻,這其實就跟武器鑲嵌是同樣的概念,在武器上開一個插槽,角色要使用這個武器時,可以自己決定要不要把寶石鑲嵌上去,是說這種武器上的鑲嵌插槽在韓文中真的也叫做slot(슬롯)XD。
 

文科少女寫程式 發表在 痞客邦 留言(0) 人氣()

這禮拜收到通過試用期的信件了!(開心)
雖然我還是很菜,很廢,但是主管還是願意繼續用我,我真的很開心也很感謝他們,也希望自己能不忘初心的繼續強化自己。
好啦!回歸本篇重點,其實面試過程的紀錄很早就寫好了,但覺得自己還是過試用期再PO出來比較好,廢話不多說,直接進入我過程有點悲催的面試旅程!

這個面試之旅自己總共投了36封履歷,獲得了9個面試機會(其中包含4間非我主動投遞的公司)。在36封履歷中,有一封透過Yourator,一封透過公司指定的google表單投履歷,其他則是透過104投遞履歷。轉職之路不簡單,很心累又費時,但在這過程中,也讓我學習到不少東西,也接觸到一些以前沒接觸過的事物。
面試公司
以下是這次有經歷面試階段的公司。

文科少女寫程式 發表在 痞客邦 留言(5) 人氣()

一般提到v-model,大家應該都知道它的作用是資料的雙向綁定,也知道他到底有多麼的方便,這次讓我們進一步來了解在自定義元件上該如何使用v-model。
什麼是在自定義元件上使用v-model?
以往使用v-model的時候,都是很單純地在要使用的input標籤上寫上v-model,並且在v-model上綁定一組資料(如下圖),這就是一種預設好的v-model使用方式。
image

文科少女寫程式 發表在 痞客邦 留言(0) 人氣()

貼心小提醒!!
因為是亂亂寫筆記,真的就是純紀錄之前實作時,
如何解決曾經卡住過的問題,所以主要都是解決問題的方式為主,
不會有太多詳細說明。

用A陣列的元素與B陣列元素進行比對
實作情境
有陣列A和陣列B,裡面會被放入型別為number的元素,
新的元素只會進入陣列B,但是陣列A的元素卻有可能同時存在於陣列A及陣列B,
所以當陣列B出現陣列A中沒有的元素時,就等於有新的元素被新增近來了。
也就是說必須比對陣列B的元素有無存在於陣列A中,若陣列B有不存在於陣列A中的元素,
代表陣列B有新的元素。
簡單來說,
就是檢查陣列B中,是否有同時存在於陣列A中的元素。
若陣列B中有著沒同時存在於陣列A的元素,則回傳true(代表陣列B有新元素);
如果陣列B中的元素都同時存在於陣列A中,則回傳false(代表陣列B的元素都是舊的元素)。

實作方式
利用filter&indexOf重新組出一個新元素的陣列,再用新元素陣列的length判斷是否存在新的元素。

文科少女寫程式 發表在 痞客邦 留言(0) 人氣()

不知不覺成為菜逼八工程師已經快滿兩個月了...
仔細回顧過去兩個月,我覺得自己不算有太大的進步,
但是對於某些事情的確變得比較熟練了,
像是做Jira單的流程、使用git的流程,
對於上班這件事情也比較沒有那麼害怕和擔憂了。
這兩個月雖然做得事情都小小的、少少的,
不過真的也學了不少以前不知道的東西。
因為我是一個菜逼八程式麻瓜,
所以常常會滿臉問號的聽著主管說明,
或是被主管一問三不知。
近期被問的有hotfix、nginx...
雖然直接回不知道很不好,但我也不想假裝我什麼都知道,
因為這樣對我來說也沒有好處,所以一旦被問到我真的不懂的東西,
我還是會很誠實地回答「我不懂」。
關於這部分,我也很感謝我的主管願意每次都盡可能地想辦法
用最簡單的方式大略地說明給我聽。
(這週還被主管通知,以後前端工程師要碰nginx的部分QQ)
這兩個月的時間,主要都在協助修一些小bug,
偶爾也會接到一些小的新需求單,不過除了修一些小bug外,
目前還是會有需要去請教前輩們的時候。
但是只要是不急的單,我還是傾向於自己獨力完成後,
再把完成的東西給前輩們重新審視一遍,而是不是遇到疑惑點就馬上找人問,
可是這個前提是這張單不趕,如果很趕又真的卡了有點久,我就會立刻找人問。
另外,由於公司內部有很多個專案,最近也開始漸漸接觸到主要專案外的其他專案,
所以每次開始一張單之前,我都會先把和這張單有關的code先看過一遍,
大概了解這些既有code在做什麼後,才會正式進入這張單需要作的內容。
我不太確定這樣的方式是不是正確的,但對我自己來說,
是一個比較能讓自己更快熟悉的方式,應該也算是一種學習吧!
在下班的時間,這兩個月則是幫自己安排了TypeScript和正規表達式的學習,
不過小女子太廢了,即使把TS的書全部看完,還是有很多不熟悉的部分,
至於正規表達式則是以前完全搞不懂,現在終於懂大概的概念了。
(會想補強正規表達式是因為最近看到專案裡面的code,
有不少前輩們用正規表達式寫的內容,華麗到不行所以覺得自己應該好好學這一塊)
接下來除了上班一樣是寫TS外,還希望自己把TS運用到自己手上私底下想做的專案中,
因為只有一直使用才能讓自己更熟悉該如何用。
距離過試用期還有一個月的時間,你問我覺得自己會不會順利通過,
老實說我自己也不太有保握...
因為雖然主管曾經跟我說「你現在有產出是多的,沒有產出也很正常,就多看專案的內容。」,
但是自己又被問了一些我自己覺得應該是很基本的問題,但我卻一問三不知,
這部分在主管心中應該是滿扣分的QQ
總之,我自己給自己的一個目標就是!我能做多少就會努力做多少,
除了自己發現不夠好的地方,我會努力補足外,如果大家願意教我,我也很樂意虛心學習。
萬一真的無法過試用,這段三個月的時間,對我來說也是獲益良多!
也真的很感謝大家這段期間對我的包容與照顧(講得好像我現在就被炒魷魚一樣XD)
這就是兩個月的菜鳥心得,我不知道未來會怎樣,我只能盡可能地在當下把事情做好。
好啦!那這次的流水帳就先這樣囉!掰餔~

 

文科少女寫程式 發表在 痞客邦 留言(0) 人氣()

在這段期間,不管學習上的一些作業,或是做自己想做的一些作品,
少女我發現很常會需要運用陣列的處理方式讓自己拿到自己需要的資料。
但是少女我其實自己並不算太擅長用陣列的方法,除了常用的幾個方法外。
不過在經歷幾週的上班後,我發現針對這部分,自己還有一些雖然自己知道怎麼用,
但實際上卻沒有真正了解到該在什麼時機用這些陣列方法,
這次的學習筆記的重點就會以這部分為主。

使用陣列方法的各種情境
想要回傳新陣列時
filter()
我覺得這個方法看名字就可以馬上知道它的用途,簡單來說就是篩選(廢話)。
功能就跟在逛網拍時,篩選特定項目一樣,最後只會顯示符合篩選條件的商品項目(回傳新陣列),
但是不符合條件的項目依舊還在(不影響原陣列)。
直接看範例!
範例一:篩選出大於100的數字
image
結果:
只有大於100的數字會存在於新的陣列中。
image

文科少女寫程式 發表在 痞客邦 留言(0) 人氣()

Blog Stats
⚠️

成人內容提醒

本部落格內容僅限年滿十八歲者瀏覽。
若您未滿十八歲,請立即離開。

已滿十八歲者,亦請勿將內容提供給未成年人士。