JavaScript的hoisting這個特性在初學時期可能會偶爾不小心碰到，但不太會有什麼深刻的感受，或是不知道原來這就是hoisting。但是近期參與重構主題的讀書會，有討論到一些寫法和hoisting這個特性有關，才發現其實這個特性其實真的很需要好好認識，加上前陣子因為一些面談的過程，發現自己其實對這個概念有些錯誤的理解，所以就想說來好好地再幫自己釐清和整理一些這部分的必懂常識囉！什麼是hoisting首先，不免俗地要來說文解字一下！直接看字面的話，沒有什麼花俏的說明，hoisting的字面意思就是「提升」。再深入一點理解，就會是「提升」某些東西，某些東西被「提升」了。看起來好像很廢話，總之就是「提升」。
進到MDN看一下更詳細的說明吧！
從上述這段說明可以看到關於「提升」的關鍵句子，也就是"move the declaration of functions, variables or classes to the top of their scope"，大致上的意思就是是「函式、變數的宣告會被提升到作用域頂部」。如何產生hoisting雖然前面的那句話已經解釋了何謂hoisting，但是老實說如果還沒有深刻透過實作來理解的話，可能還是很難單單透過這句的說明就掌握到什麼是hoisting。在進一步看宣告會被hoisting的對象之前，先來從另一個角度了解hoisting是如何產生的吧！
這部分要回到最根本去理解JavaScript建立執行環境的過程，JavaScript在建立執行環境(Execution context)時，主要會分為兩個階段：創建階段(Creation Phase)、執行階段(Execute Phase)
第一個階段、創造階段
在這個階段主要會做以下幾件事情：
- 在記憶體中幫變數、函式建立一個空間，這就是和這次提到的hoisting有關的部分。
- 將全域物件(Global Object)、this設定到記憶體中
- 建立外部環境(Outer Environment)
第二階段、執行階段
在這個階段會逐行執行程式碼，並編譯成電腦懂的內容，如果在執行程式碼的時候，找不到當下程式碼中要使用的變數，就會往一層一層往外找。
文科少女寫程式 發表在
痞客邦
留言(0)
人氣()
文科少女寫程式 發表在
痞客邦
留言(0)
人氣()
許久未寫LeetCode刷題筆記了，趁著這次參加一個小考試的機會，來自己回顧檢討一下自己的寫的這道題。
看一下題目內容
題目需求要將陣列中的數字0全部都排到陣列最後面。解題過程我總共想了兩個方向的作法：第一個方向 - 用一個pointer + 迴圈來檢查是不是0，並且進行splice和push的動作。用while迴圈逐一去比對陣列每個數字，當發現是0的時候，就把這個數字拿出來往後放。但是！！又把它拿出來檢討後，才發現這麼做其實會有一個問題！！(思慮不周的我，還以為這樣就完美完成，然後就這樣把答案交出去了QQ)
發現到的問題是「因為陣列的排序有變動，如果在這個狀況下跑迴圈，會有漏檢查的數字。」
例如：
目標排序陣列為[0, 0, 1, 0]
index會在第一次排成[0, 1, 0, 0]後，被+1，但是這樣就檢查不到原本index為1的數字，如果原本index為1的數字又剛好是0的話，就無法達成這題的需求。
為了解決這個問題，我又改了一個寫法。但是！！又發現一個問題，這個做法會造成太多多餘的迴圈檢查步驟，讓時間限制超過。第二個方向 - 用insertion sort(有兩個pointer)的方式進行排序。因為上面的方向都沒有找到比較完美的解法，所以就又回頭去複習一下之前學的演算法內容，找到了一個比較合適的方法「insertion sort」，整體的實作方向用文字來解釋的話，就是「往後找出不等於0的數字，與數字0交換位置」。
每個小步驟的說明
1. 準備兩個pointer(我這邊命名為leftIndex和rightIndex)，兩個都是從陣列的index 0為起點。
2. 一開始pointer還在相同起點時，如果指到的數字為0，rightIndex會被+1，目的是繼續往後查找不為0的數字；如果數字不為0的話，就存下rightIndex的數字，與leftIndex的數字做交換，目的是將不為0的數字往前排，排定過後需要把rightIndex和leftIndex都+1，目的是要能繼續往後檢查還沒排定的數字。
3. 整體步驟以迴圈來進行，當rightIndex等於array長度就不要再繼續做檢查的動作，也代表每個數字都檢查過一次了。完整程式碼內容
方向二初版方向二優化版
文科少女寫程式 發表在
痞客邦
留言(0)
人氣()
map這個陣列的操作方式，只要從超級新手升級到初階新手，基本上都知道。但是說到Map這個東東，可能就有些人本來沒看過了。沒錯！！就是我！！！這邊說的就是我！！！！學藝不精的我本來沒看QQ不過本來沒看過沒關係，現在看過了，那就花點時間把他是什麼給搞懂吧！Map是什麼？
文科少女寫程式 發表在
痞客邦
留言(0)
人氣()
這禮拜四(9/29)又參加了一場ALPHA Camp主辦的線下的活動，比較不一樣的是這場活動主題是企業參訪，還結合一些交流討論的環節。另外，最令人矚目的就是這場企業參訪的合作企業是大家應該都聽過的AmazingTalker，並請來了創辦人和CTO跟大家分享！身為使用者的我，當然不能錯過這次的機會，手刀給他報名起來了。
除了參與這次的活動外，還收到了一個特別的任務，就是擔任討論環節其中一組的Group Leader，這個角色是主要任務是帶領大家進行討論。雖然我是一個極度內向的人(咦？)，但是喜歡挑戰的我還是接下這個任務了XD活動參與對象ALPHA Camp學生、校友、助教活動內容除了聽創辦人以及CTO分享一些關於AmazingTalker的介紹外，還有參與這場活動的AC學生、校友、助教，以及AmazingTalker工程師們的交流討論，另外，剩下的時間就是企業參訪，參觀AmazingTalker的辦公室。實際活動流程
文科少女寫程式 發表在
痞客邦
留言(0)
人氣()
在學習React的時候，有發現一個hook跟Vue3世界裡面一個很重要的api的名字很類似，那就是useRef。雖然React的useRef因為名字的關係，看起來好像跟Vue3的ref是一樣的東西，但是仔細了解之後，才發現並不是這樣的呀！Vue3 vs ReactVue3 - ref其實Vue3的ref會比較像是React的useState，因為主要是在處理state，讓state的更新變得更方便，使用上跟data有關。不過除了這個主要的用法外，還有儲存DOM元素來操控的使用情境，這部分就稍微和React的useRef有點相似。另外，一個比較需要提的部分是「Vue3世界中，被用ref宣告的state如果使用在畫面上，當這個state有變化時，會讓畫面重新render」。
使用方式
宣告一個帶響應式的state，只要用以下的方式即可。
ref()可以帶入預設值，下圖預設值為"text"。
文科少女寫程式 發表在
痞客邦
留言(0)
人氣()
以前在當韓翻的時期，每次拿到遊戲內要翻譯的文檔都會是一個excel檔案，然後有Key的欄位，和對應語系名的欄位，我那時還以為只是開發人員管理方便而已，直到自己也成了開發人員，才知道原來那個是為了要轉成套用在遊戲中的翻譯檔的格式。
其實成為前端後，偶爾會有需求需要更改翻譯文檔，原本都是藉由後端產套用的翻譯文檔，不過好一陣子前，內部更新成用Google Sheets API來產翻譯文檔，比起以前更方便，因為不用再透過後端處理，可以直接在本機跑起來確認。因為也想要自己試著實作一次這個方便的用法，所以就把這個實作方式記錄下來了。實作重點事前準備：
在雲端硬碟上，創建一份擺放翻譯內容的google sheet，會需要填入Key值，和翻譯內容，表格內容大致上會呈現如下。
主要的兩個大步驟：
- 於Google Cloud控制台設定服務帳號、產出使用google-sheets的金鑰
- 活用google-spreadsheet，產出用來套用翻譯的json檔案
文科少女寫程式 發表在
痞客邦
留言(0)
人氣()
上禮拜日去參加了一個很有趣的社群活動，也是近期內最令我期待的社群活動之一，主要是因為這是一個以女生工程師為主的實體社群活動，身為這個圈子的邊緣菜鳥的我，當然要去參加一波囉！
「當我們同宅一起」這個實體社群活動主要是由ALPHA Camp和The MentorShip曼陀號領航計畫聯合舉辦，是一場AC助教的限定活動，再加上以前一直很想參與曼陀號計畫，所以當知道有這樣的機會，就手刀報名了。 活動參與對象ALPHA Camp助教&The MentorShip 曼陀號領航計畫Data組/Engineering組成員
女生優先參加，當天還是有幾位男性夥伴參與活動內容雖然是工程師實體社群活動，但活動內容主要還是聚焦在認識不同的工程師，以及與其他工程師交流職場經驗、學習經驗等，而不是比較死板板的討論技術。實際活動流程
實際活動流程分為三個部分，分別是「一對一互動」、「四人小組互動」、「分桌主題交流」。
一對一互動
主要就是找一位自己不認識的人聊天、自我介紹，問對方一個小問題，主辦單位有提供問題小紙，可以選擇一提問題來問。雖然這個環節對於內向的我來說，有點小小的尷尬，但卻是我還滿喜歡的環節，因為這樣才能認識很多人。只是時間有限，所以實際上我好像只和五個人講到話，也都是偏向生活化(?)的談話，不過也足以讓身為邊緣人的我踏出舒適圈XD
四人小組互動
四人小組互動只會進行兩輪，其實這個環節我也很喜歡，在這個環節因為人數剛剛好，不會太多也不會太少，所以聊天不會太尷尬，而且也能有更深入的討論，不會只是打打招呼。不過也因為只有兩輪，所以也是很讓人意猶未盡，好想繼續跟大家聊下去。在這個環節中，還意外認識了一位朋友的朋友，而且也是最近加入的Tycia組織的成員，真的覺得超級無敵巧，也覺得好神奇。
分桌主題交流
這是一個主題明確的交流環節，一共有五個主題可以參與討論，在這次的活動中，總共可以進行五輪的主題交流，所以實際上可以參與五種不同的主題討論。主題分別是「職涯經驗&選擇」、「公司文化」、「在職學習」、「下班生活」、「職場生存」。每桌討論一種主題，且有一位桌長帶領大家進行討論，最令我最印象深刻的是「職涯經驗&選擇」和「在職學習」，這兩桌的桌長帶大家討論的節奏很好，也有讓大家都有很深入的討論和交流。「下班生活」主題那桌就是很放鬆的閒聊，真的就是愉快的下班生活感。自己這次沒有參與的主題只有「職場生存」，其實對這個主題也很有興趣，但是只能五擇四，還是只能忍痛捨去它。
文科少女寫程式 發表在
痞客邦
留言(0)
人氣()
雖然我是一位前端工程師，但是因為跟主管自告奮勇(?)接觸新東西，所以就踏入了Nginx世(ㄉ一ˋ)界(ㄩˋ)。雖然很多時候，都只是單純地改現有的設定檔案，但是在改的時候，還是得了解現有策略，避免改到不該改的地方，改寫當然也需要對設定方式有一定的了解，又加上這禮拜終於有些東西有點搞懂了，所以就想說來寫一篇這個吧！
這裡就不詳細介紹Nginx是什麼，單純記錄自己在接觸Nginx的過程中，常碰到但又常搞混的一些我自己認為必懂得Nginx設定內容。root當path匹配到對應的location時，會前往「root」+「path」取得要拿的資源。
範例：
location /resource {
root /data-disck/static/;
}
request URL為https://www.test.com/resource/index.html時實際上會前往/data-disk/static/resource/裡面尋找index.html。alias當path匹配到對應的location時，會前往「把匹配到的path替換成alias設定的內容」+「被匹被到的path外，剩下的path內容」取得要拿的資源。
範例：
location /resource {
alias /data-disk/static;
}
request URL為https://www.test.com/resource/index.html時實際上會前往/data-disk/static/尋找index.html。index用來設定默認要取得哪個檔案，如果匹配到的path已經有明確指定要取得哪個檔案，就不會去拿默認要取得的檔案。
範例：
location /resource {
root/data-disk/static;
index index.html;
}
request URL為https://www.test.com/resource/時：會前往data-disk/static/resource尋找被默認要取得的index.htmlrequest URL為https://www.test.com/resource/test.txt時：因為已經有明確指出要拿到test.txt檔案，所以會前往/data-disk/static/resource尋找被默認要取得的test.txtrewrite會重新定向指定的路徑，並前往「root」+「重新定向的path」取得要拿的資源。
使用上主要會有三個參數，寫法會是rewrite 「匹配規則」+ 「重新定向到哪裡」+「指令(非必要參數)」。
範例：
location ~* ^/(.*)/content/(.*) {
root/data-disk/static;
rewrite (?i)^/(.*)/content/(.*)$ /$2;
}
request URL為https://www.test.com/resource/content/newfile時：
會匹配到這個location，並且將"/resource/content/newfile"這個path重新定向為"/data-disk/static/newfile"拿資源。$2的部分，是指第一個參數中，被匹配到的第二的部分，也就是匹配規則中的，第二的(.*)。如果是$1，就是第一個部分。指令部分
主要有四種指令可以使用
last：rewrite後，會重新匹配location，用被rewrite後的path重新匹配。
break：rewrite後，不會再重新執行rewrite，但是會繼續執行location中剩下的非rewrite的設定。
redirect：會返回302臨時重新定向。
permanent：會返回301永久重新定向。try_files會依序查找指定的檔案，找不到檔案會進行內部重新定向到最後一個參數。搭配root使用的話，會去前往「root」 + 「try_files參數路徑」查找檔案。
範例：
location ~* ^/content/(.*) {
root/data-disk/static;
try_files /index.html /test.html;
}
匹配到這個location時，會先去/data-disk/static/找index.html，沒有的話，會接著再去找test.html以上就是目前比較常碰到且容易搞混的Nginx設定內容。
雖然前端大多不太會碰到Nginx這種和伺服器有關的東西，但其實在接觸的過程中，也讓非本科的我，漸漸對於「網路」這一塊多了一點點了解，而不單單只是知道切版、接API。老實說，雖然過程中充滿痛苦，但還是有不少收穫。
好啦 ，打完收工！
文科少女寫程式 發表在
痞客邦
留言(0)
人氣()
平常都是接觸Vue、React這些CSR的框架，SSR只有透過近期的讀書會稍微了解它的概念，本來以為自己應該差不多理解什麼是SSR了，直到最近要進一步處理nuxt3專案的部屬流程，才發現自己根本沒搞懂啊！這次想說就稍微記錄一下，近期透過規劃nuxt專案部屬流程，所進一步了解到的SSR。從Nuxt3專案的部屬理解SSR什麼是SSR？SSR是Server Side Render的縮寫，用中文來看的話，也就是「伺服器渲染」。有別於「客戶端渲染(CSR)」，HTML的編譯是交由server處理，而不是交由client處理。所以當使用者點進網頁發送request需求後，server會返回完整的HTML內容，而不會像CSR一樣，是一個空白的HTML頁面，需要透過client，才能把頁面內容渲染出來。SSR頁面產生流程使用者對server發送request => 在server端fetch資料 => server產生並回覆完整的HTML =>下載所有JavaScript => 將event Handlers綁定到DOM上(Hydrate) =>Hydrate完成後，使用者就可以和頁面互動(點擊頁面才會有反應)
文科少女寫程式 發表在
痞客邦
留言(0)
人氣()
在React世界中，useState是一個很基礎的Hook，就跟Vue世界的ref和reactive一樣，所以其實使用概念上真的還算簡單。不過就在我以為我早就懂它的時候，卻還是默默踩到了一些蠢蠢的雷，這才發現原來我根本沒有搞懂它啊！所以我就來記錄一下useState這個看似平凡，但又隱藏一些需要注意的點的Hook了！useState的基本用法
- 呼叫useState hook時，可以帶入當作state初始值的參數。- 呼叫useState hook時，會回傳一個array，array中的第一個元素是state，第二個元素是用來變更這個state的function，可以用解構賦值的方式取用(如第一張圖)。
- 要變更state時，可以取用useState回傳物件中index為1的元素，以上面的例子來說，就是setState，將要變成的值當作參數使用setState就可以變更state，例如：setState(3)，state就會從原本的0變成3。
文科少女寫程式 發表在
痞客邦
留言(2)
人氣()
身為一位前端工程師，除了懂得如何切版，以及如何使用前端框架外，了解跟Internet及其他知識也很重要，所以就想說花點時間來惡補一下><
這次先從最近有碰到的DNS和Domain開始看起！什麼是Domain Name？Domain Name簡單來說就是我們在用網址時，會看到的XXX.com的這段文字，例如google.com。Domain Name的結構Domain Name可能會由多個部分組合而成，不同的部分間是以"."區隔，並且閱讀方式並不是我們習慣的由左至右，而是由右至左。
文科少女寫程式 發表在
痞客邦
留言(0)
人氣()
