前幾天跟同事看到一篇AC助教寫的文章，剛好那位AC的助教是同事朋友的同事(我不是在念rap XD)，就和同事聊起了寫部落格的這件事，同事是覺得自己也沒有多厲害，不太適合把自己寫的東西公開，所以也就沒有在寫部落格，不過我這裡卻沒有想這麼多，因為覺得只是自己的一些筆記、紀錄，也是一種學習方式，雖然可能會有一些大神看起來不太恰當或正確的說明內容，但若寫出來，有幸被大神看到，不也有可能獲得被指教的機會嗎？其實以前我也不知道自己可以寫部落格，也不知道寫部落格有什麼用處，直到有一天幫出版社審了一本韓文書籍『홀로 성장하는 시대는 끝났다』(獨自成長的時代結束了)這本書，才發現原來我也該開始寫部落格，甚至還成為了我開始接觸前端開發的開端。
今天這篇文章想來說說寫部落格這件事，說說為什麼我會願意開始寫部落格，又為什麼建議大家開始寫部落格。關於學習方式－獨自成長的時代結束了
<照片轉自yes24.com>不知道有沒有人思考過，經過時代的變遷，我們從爸爸、媽媽那一代，到現在自己這一代，是不是都用同一種方式學習？也就是自己一個人埋頭苦讀。用既有的方式並不是不好，但時代在進步，是不是還有更有好的學習方式呢？這時候可以仔細回想一下特定領域的那些大神（不論是軟體開發，或是語言學習），其實不難發現有很多大神往往都會很主動地在社群媒體上分享一些技術新知、想法，不管是用影片、部落格、甚至是直播。這些人往往都有一種號召力，可以將一群人聚集在一起學習，而這樣的學習體驗，不只比自己一個人苦讀還要有趣，甚至能透過教學相長，讓資深的大大們和資淺的菜鳥們都能成長。而這樣的學習方式也就是所謂的社群學習，那些大神也就是所謂的社群領導者。
看到這裡，一定有一些人會有這樣的想法「那些大神，終究是大神啊！他們本來就很聰明，本來就很厲害，當然可以這樣帶領，並且加入整個社群學習，但是沒有那麼多豐富經驗的我們哪有辦法做到那樣的社群學習？」，也可能有一些人會這樣想「我是一個內向的人，我並不想跟不認識的人有太多的互動，所以我並不想參與所謂的社群學習，我只想自己默默地待在自己覺得最舒適的小角落」。但其實所謂的社群學習，也不一定只有開直播、錄製影片、貼出自己的文章這類偏向「主動」進行的這個方式，還有更適合自認為自己並非大神，或個性較內向的人的「被動」進行的方式。而這個被動進行的社群學習的方式，也就是寫自己的部落格。最適合內向者的社群學習方式 - 寫部落格其實我是一位內向的人，雖然自己現在已經滿18歲，變得比較敢主動和不認識的人交流，但是大多數的時候，還是偏向於待在自己覺得安全的小圈圈，所以當我在看了那本書，知道了社群學習的魅力後，第一個選擇嘗試的方式就是寫部落格(寫部落格這種社群學習方式，也是在那本書中有提到的方式)，加上之前參加AC的線上課程後，AC也很推薦大家開始寫部落格，所以更覺得自己當初這個想法是對的，就這樣一路寫到現在的(雖然也還沒寫多久啦XD)。
寫部落格為什麼是一種適合內向者的社群學習方式？因為寫部落格如果不主動分享給別人看的話，基本上不會知道自己的文章會被誰看到，而且也可能很難被不認識的人搜尋到(如果文章內容的SEO沒做好的話XD)，所以是一種可以很輕鬆把自己會的東西，或是學習歷程記錄下來的方式。往好的方向想，除了幫助成長以下，也有可能幫助到一些比自己更晚開始學習這個領域知識的人，也就形成了「被動」的教學相長。
而且對我而言，寫部落格除了是一種學習方式外，也是一種記錄自己學習歷程的方式，讓自己能夠好好檢視過去學習過程中，有沒有哪些可以調整的地方。也是一種筆記，當遇到自己有寫成文章的內容，但自己已經卻有點忘記當初理解的詳細內容時，就可以直接透過搜尋的方式找到自己當初寫的那篇文章來看。(雖然聽起來有點好笑，不過我真的有因為想看某些自己寫過的內容，而自己google自己的部落文XDD)
當然，如果你不是位內向的人，只是單純不知道從哪裡開始社群學習的話，也可以先試試看寫部落格喔！親身體驗到的部落格撰寫優點前面講了為什麼開始寫部落格後，最後再來分享一下自己親身體驗到的寫部落格的優點有哪些。
1. 讓自己有學習動力
因為將自己學習的過程及內容記錄下來了，也就更能看見自己真得學到了些什麼，有看見自己學習的成果，也就更有動力學習下去。這感覺就像是重訓愛好者，會自己拍自己的體態照，做紀錄的感覺吧！
2. 讓自己能再次反思複習
在學習某個內容後，如果再另外撰寫部落文的話，就會需要經過一個重新思考的過程，在這個時候也就能讓自己對這次要撰寫的內容多一次複習的機會，這個過程中也就能讓自己對這個主題更加熟練。
3. 為自己增加一種作品
最後一個體驗到的優點就是變成一個自己的作品，在轉職後的那段面試過程中，真的有面試官看了我的部落格文章，並且拿文章內容來問我問題，這時候就會很感謝自己當初有下定決心要寫部落格。
4. 幫助身邊的人
之前身邊有一些想要轉職的人問我轉職的過程，除了跟他聊聊自己的心路歷程外，也會請他來我看我的部落文，因為除了學習內容外，也有把一些心情類的內容記錄下來。也曾經有不認識的人在看了我的部落文之後，私訊我說他感覺更有力量繼續走下去了 :)
至於你說寫部落文有沒有什麼壞處嗎？我想大概就是很花時間吧XD
有時候並不是對這個主題不熟悉，有點龜毛的我，反而會糾結在一些文句用詞的通順和容不容易理解上，不過這是我個人的職業病啦！
最後我想說，不管是什麼樣的學習主題，可能是軟體開發，或是語言學習，都很推薦大家透過寫部落格來讓自己內化學習內容，以及記錄自己的學習歷程。即使當下只是一個剛踏上學習之路的人，這樣的方式也會讓自己有所成長！
最後的最後再補充一下！我自己真的很推『홀로 성장하는 시대는 끝났다』(獨自成長的時代結束了)這本書，不過台灣似乎還沒有這本書的翻譯版本QQ，如果想了解更多書中內容，歡迎來找我聊聊！如果會韓文，也可以上網搜尋作者的演講內容，雖然不是完整的書中內文，不過也很不錯喔！
好了！這次的內容就到這邊啦！大家掰餔！ 文科少女寫程式 發表在 痞客邦 留言(0) 人氣(148)
最近心血來潮想要來了解一下瀑布流切版，所以就查了一堆資料來看，今天就來記錄一下瀑布流切版到底是什麼？還有要怎麼用JavaScript實作？什麼是瀑布流切版？這個是最常見的一般排版
文科少女寫程式 發表在 痞客邦 留言(0) 人氣(583)
又是一個因為小文件工具的開發，而遇到的問題。為了優化小文件功能，讓它使用上能更便利，前輩那裡著手加入了API釘選的功能，但是需要加入釘選功能的部分，是用React寫的swagger-ui，而我們的專案又是以vue下去開發的，有些操作上就變成不那麼容易另外進行客製化，而這次就有碰到使用swagger-ui原本有的anchor功能是行不通的狀況，因此需要透過DOM+web API的方式下去呈現anchor效果。雖然這個功能主要不是由我完成，但在看前輩寫的code的時候，覺得是一個自己沒有想過的解法，所以就特別記錄下來了。使用DOM+web API實現anchor實作情境swagger-ui有deepLink的功能，但是我們想要額外實作出一個可以儲存deeplink的功能，並且在點擊這個link的同時，還要能透過anchor導到對應的區塊。不過這個實際實作上卻發現，若是在同一頁，anchor功能會起不了作用，因此最後的做法是透過DOM+scrollIntoView()的方式進行。實作方式利用DOM找到我們要設置anchor的區塊，搭配scrollIntoView()實作。要anchor的區塊分別是#food、#shoes、#decoration，所以個別透過getElementById取得這幾個地方。最後再寫一個讓點擊按鈕時達到anchor效果的function。最後這樣就可以透過另一個方式達到anchor的效果^^完整的示範內容請點這裡小補充：使用scrollIntoView()的時候，可以帶入一個object當作參數，裡面可以使用的參數有behavior、block、inline，可以讓實際呈現的anchor效果做微調，例如調整anchor後，滑動到的區塊是顯示在螢幕最上方、中間，或是最下方。
貼心小提醒！！因為是亂亂寫筆記，真的就是純紀錄之前實作時，如何解決曾經卡住過的問題，所以主要都是解決問題的方式為主，不會有太多詳細說明。 文科少女寫程式 發表在 痞客邦 留言(0) 人氣(31)
近期在開發內部前端人員要使用的API文件小工具(?)，就是一個可以把後端工程師完成的API contract轉成前端工程師一眼就可以看得很清楚，且格式統一的頁面。
但在這個頁面中，我這裡有設定了兩種將contract上傳入的方式，一個是file input，一個是textarea。在file input的onChange event和textarea的keyup event要做一個檢查輸入的內文是否為正確的格式的動作，且這裡使用的檢核套件是swagger-parser的validate，所以還必須將我從input接收到的檔案或字串轉乘object(套件規定只能傳入object，若傳入string會被當成要檢查URL)。但是這個時候就發現一個問題，若在textarea的方式中，輸入任意的string，想要將string透過JSON.parse()轉換成object之前，必須確保輸入的字串是JSON String，因為JSON.parse()只接收JSON string，就需要先透過JSON.stringfy()轉換。但若後端人員直接複製貼上他們的API contract，因為已經是JSON String，硬是要把它用JSON.stringfy()再次轉換，就會變成跑出一堆奇怪的符號，也就會導致swagger-parser的validate檢查不過。所以這個時候就必須還要在最前面加入一個檢查，就是檢查輸入的文字是否為JSON string。確認輸入的文字是否為JSON string實作情境在拿到textarea的文字後，為確保在JSON.parse()這個動作執行前，拿到的string是JSON string，需確認現在拿到的string是否為JSON string。實作方式利用JSON.parse()無法接受JSON string以外的東西的特性，來檢查是否為JSON string。這樣就可以檢查輸入的文字是否是JSON string貼心小提醒！！因為是亂亂寫筆記，真的就是純紀錄之前實作時，如何解決曾經卡住過的問題，所以主要都是解決問題的方式為主，不會有太多詳細說明。 文科少女寫程式 發表在 痞客邦 留言(0) 人氣(37)
以前在學前端的時候，基本上是自己做自己的專案，即使到了和同學協作完成作業的那時候，也因為我那一屆很悲悽的只有我一位前端，所以在git的操作上，並沒有協作的經驗。(因為後端和前端各自開一個repo)所以基本上我就只會最基本的clone、pull、push，嚴格來說也都只是會一些很皮毛的用法。直到這陣子，真的必須有很多需要透過git來大量協作的業務後，才發現自己再不好好搞懂真的不行啊！每次遇到都要問一次同事也不是個好現象QQ
因此就誕生了這篇學習筆記！這次就先從和別人協作時，比較常會遇到的merge和rebase這兩個動作開始。merge是什麼？merge這一個詞中文意思是合併，用途也就是把分支內容合併到指定分支。我自己目前在實務上通常會有兩個情境需要merge。情境一、將新修改的內容合併回主要分支(merge branch into main branch)有新的修正內容，或新的開發時，會另外開一個分支作業，當在那個分支上作業完成時，就會在把這個分支合併到主要branch上(實務上，可能會是將修正或是新開發功能的分支合併到develop這個branch上)。情境二、將已經有更新內容的主要分支合併(同步更新)到新修改內容的分支上(merge main branch into branch)當在分支上進行要做的修正或新開發時，如果已經有其他人將自己手上的分支合併回去主要分支的時候(也就是第一個情境)，自己分支的基礎內容(也就是分支上的主要分支內容)，就會有一部分和現在最新的主要分支內容不一樣。因為當我們開分支時，複製出去一份的基礎內容是主要分支被更新前的內容，如果「主要的分支上的新改動與自己分支上的改動檔案有重疊，但又要把自己的分支合併回主要分支前 」或「手上的分支的內容，需要主要分支更新的內容時」，都需要做這個動作。指令用法：
git checkout 要合併進去的分支名
git merge 要合併的分支名rebase是什麼？如果查詢rebase這個詞的中文，會查詢到「變基」這個奇怪的詞，不過如果把rebase這個字，拆成兩個字，"re"和"base"，就比較好理解是什麼意思了。簡單來說，就是「重新定義基底」、「重新定義基礎」。這個動作我比較少使用，因為主要使用的情境，透過merge也可以辦得到。主要會需要使用的情境如下：情境一、將分支的基礎內容重新定義成主要分支(rebase branch to main branch)這個情境跟前面merge的第二個情境的目的一樣，只是達到目的的實際過程不太一樣，這裡我們先理解成目的一樣就可以了。
指令用法：
git checkout 要重新定義基底的分支
git rebase 要當作基底使用的分支merge和rebase的使用方式這邊來用幾個比較具體的情境來看一下怎麼使用merge和rebase。merge的情境情境一、在分支中新增一個style檔案進行style調整完成後，將這個分支合併回主要branch合併前的圖表
步驟：
(1) 切換到要合併進去的分支 git checkout main
(2) 輸入merge指令 git merge phoebe/feat/style 文科少女寫程式 發表在 痞客邦 留言(0) 人氣(235)
今天來看看Functional Component和 Class Component！
其實在Vue裡面也有分這兩種Component，在Vue2主要是Class Component，到了Vue3才變成Functional Component，React也一樣到了Hooks出現後Fuctional Component就變成大家主要在使用的Component。不過老實說，在使用Vue的時候，我並沒有認真去研究這兩種Compnent的差異，甚至也沒不知道原來有這樣的差異，直到這次接觸了React後，才好好地看這個部分，就知道我有多廢了ㅠㅠ。好啦！廢話不多，進入正題吧！什麼是Component？在一個頁面裡面，會由好幾個部分組成，像是Menu、Sidebar、Card等等，這些被拆成一小部分，甚至是可以在不同頁面重複被使用的部分就可以被稱作為Component。中文的話，通常會稱呼為元件。在React中，主要又分為兩種Component，也就是開頭所提到的Class Component和Functional Component。 文科少女寫程式 發表在 痞客邦 留言(0) 人氣(381)
目前已經成為前端工程師六個月了，過了新人蜜月期，開始接觸越來越多不同面向的工作任務，當然主管還是有挑選符合我能力的工作給我，即使目前為止所有任務都有如期完成，但近一個禮拜不知道為什麼卻開始對自己感到自卑，甚至覺得自己根本不夠格成為一位前端工程師。
從以前到現在，不管學什麼、做什麼，我都希望自己能全力以赴，而且對自己及對這件事負一百分的責任。但其實自己在過程中，卻又並不是每分每秒都維持這樣的態度和精神，所以每到這種時候，總是會覺得自己很糟糕、自己不夠好。即便身邊的人，似乎都覺得我好像很認真、很拚，但是我自己知道自己其實還不夠拚，也不夠好，每當這種時候，就很容易讓自己的情緒陷入低潮。最近當然還是有持續讓自己學習新東西，但是近期在公司遇到了一些事，還是讓自己覺得自己真的很糟。
不知道一位非科班轉職的人在一間公司待了六個月後，應該要有成長到怎樣的程度，但是以我自己的狀況來說，到現在我偶爾還是會問一些很笨的問題，偶爾還是會自己找不到可以解決問題的方法，偶爾還是會感受到其他和我配合的人的懷疑及不信任(不過這也許是我想太多？)，還有很多時候，還是聽不懂其它後端工程師在說什麼，而且依然不是每一個任務，每一張單對我來說都能很輕鬆地處理好，或是一秒看穿問題點。即便看結果的話，我都有在時間內完成，但是對我來說，進行任務的過程還是有很多不確定和不熟悉的感覺。我想像中的工程師，應該是要什麼問題來，都能迎刃而解，輕輕鬆鬆處理好，像我的兩位主管一樣。但我似乎連那程度的一半都還沒有，或者是說我可能一輩子都很難達到那種程度...
文科少女寫程式 發表在 痞客邦 留言(0) 人氣(280)
貼心小提醒！！
打工仔人森 (3)