「我手上開始有待進行的單子了！！」
令人緊張又興奮的第二週開始了！
緊張的是我覺得自己還不算太適應這個公司的環境，
還有對人也不太熟悉，也很害怕自己犯錯，
然後其實主管人感覺很好，但不知道為啥，還是默默地覺得有距離感。
興奮的是我手上終於有待進行的單可以做了，
第二週除了上週最後一天拿到的小bug修正單，
還拿到了一張協助同事修正排版的子單，
和兩張需要自己看SRS來做的單子。
(而且慘的是其實原本我連SRS是什麼意思都不知道...)所謂的SRS，全名是Software Requirements Specification，
也就是軟體需求說明書，裡面會有本次開發的詳細需求內容。這一週跟著大家開著大大小小的會議，
大多時候都是有聽沒有懂，這種時候讓我想起以前第一次參加全韓文的營運會議時，
也是有聽沒有懂，不過這次比以前還可怕，
因為明明大家都講中文，我還是可以有聽沒有懂XDD
另外，也參加了一個進行方式很有趣的會議，
跟我參加AC共創工作坊集思廣益的形式很相似，
真的是一個很願意接受每一位員工想法的新創公司！！
這週正式coding時，比起上週稍微熟練一些些了，
因為為了補足自己對於TypeScript不熟悉的這部分，
在這幾天不斷地努力補足相關的常識和用法，
雖然只有一些些熟練，還不算大躍進><這週也開始向同事請教怎麼樣的寫法比較合適，
很感謝同事們都很願意教我，
尤其是坐我旁邊的同事真的人超好，
看到我修改前寫的內容不太合適，
還花時間向我解釋差別，真的讓我上了一課。
另外一位同事感覺很忙，但我向他請教笨問題時，
也是很親切地向我說明，也是讓我上了一課。
還有一位同事人很好地花自己的時間幫我安裝一些東西，
讓我電腦上可以進行一些操作。
上班的第二週，我感覺自己一樣維持濃濃的菜味ㅠㅠ寫了一些很搞笑的程式內容，讓大家必須多費心檢查，
不過大家還是很有耐心地教我，真的無限地感謝大家。
當然，我也會努力趕上各位大大的腳步，
讓自己成為能多多為大家分擔的夥伴。這陣子我也會再花時間將自己從前輩們身上學到的知識，
整理出一個學習紀錄。
簡略地菜鳥心得記錄到此，就先掰餔啦！
文科少女寫程式 發表在
痞客邦
留言(0)
人氣()
「大家好！我是前端工程師」
就在2020年最後一個禮拜，我成為前端工程師了！
雖然有三個月的試用期，我也還不知道自己能不能順利通過，
但是的確是一隻腳已經踏入坑了XDD這次我想要簡單地記錄一下上班四天心情
(剛好有一天是元旦，賺到一天假)
這一個禮拜上班，嚴格來說我只做了一天跟職務有關的事情，
其他天都在看專案的code怎麼寫，彷彿來到了新世界，
而且直到上班當天我才知道需要用Typescript寫專案，
雖然我很早就想學這個了，但沒想到必須用這麼直接暴力的方式學習QQ。
一共四天的正式上班日，一直到最後一天才真的上場修了一個小bug。
雖然正式寫code的時候，心情很平靜，但其實整體上班時間來說，
心情都非常緊張。也因為公司男生特別多，讓我非常不習慣，
有種格格不入，無法融入這個環境的感覺＞＜
一方面我也一直很擔心自己問了笨問題，或是表現很白癡XDD
不過說真的同事都非常好、非常親切，感覺都很願意教新人，
只是我自己也知道很多事情還是必須先自己加把盡！
總之！！我的第一個目標就是要學會如何靈活運用TS！！
不知道下一週還會有什麼樣的挑戰等著我～！
不過我會繼續努力的！！
就這樣流水帳隨便紀錄一下第一週的上班心得啦！
如果有有趣的事情，會再寫上來。
也會再分享一些學習TS的紀錄。
這次就先草草結束了，掰餔！
文科少女寫程式 發表在
痞客邦
留言(0)
人氣()
前陣子為了證明自己一點都不廢，所以自己向自己下了一個戰帖。
既然模擬桌面的挑戰已經告一段落了，就來整理一下這一個禮拜多的實作心得吧！
在開始前，搶先來看一下完成品長怎樣^^
我是Github page傳送門
我是Github傳送門為什麼想做模擬桌面？前陣子看到很多關於模擬桌面的作品，最令我印象深刻的就是板塊設計所製作的 【卡關・闖關：GAMA25 線上展】另外，也有看到AC助教用React做出的超擬真Windows XP桌面自己覺得真的超級無敵酷，所以就默默自己對自己下戰帖，給自己的這個自己也不知道是否會成功的挑戰。
在決定做這個挑戰的時候，剛好又是蔡依林演唱會的那幾週，因為自己搶不到高雄的票，無法去看高雄場的演唱會，
太過哀傷下，就決定用蔡依林主題做一個自以為很酷炫的電腦桌面，
又因為自己最近突然開始想到要玩DOS版金庸群俠傳，所以是做復古版本的桌面。製作前的準備
1. 大概寫下這次開發過程中，我可能會需要作出哪些功能，大概的呈現方式、色調。
2. 也寫下自己希望自己能完成的挑戰內容有哪些。
3. 大概規劃一個進度時程。本次挑戰的兩大目標1. 手刻音樂播放器以前從來沒有做過音樂播放器，雖然大概知道用audio標籤即可，但是因為想要製作成自己想要的樣式，
所以必須自己實作出音樂進度條的功能。
實際實作的概念：
－進度條：是以音樂播放進度(%)，下去計算進度條要動到哪裡(ex: 音樂播放了10% X 進度條總長度 = 現在應該顯示的進度)
－拖曳進度：監聽滑鼠點擊到放開的事件，並計算從點下去到放開後，滑鼠游標位置被移動了多少，
進一步與原本已播放進度下去加總計算現在應該播放哪一段音樂，並且顯示進度條的變化。
－循環播放功能：利用audio的ended事件，搭配一個循環播放用的陣列，呈現能不斷循環播放的功能。2. 實作視窗拖曳功能在查詢資料前，其實自己對於實作這個功能並沒有什麼想法，也沒有概念，所以其實一開始很擔心自己做不出來。
實際實作的概念：
- 拖曳功能：跟音樂播放視窗的進度條有點類似，個別找出滑鼠點擊及放開後的位置，去計算移動距離，
讓視窗能依照滑鼠的移動而被拖曳。
- 目前點擊的視窗顯示在最上層：這部分主要是用z-index控制，搭配滑鼠點擊事件。
進行途中遇到的問題
在切版的過程中，其實沒有遇到太大的難題，但是在實作功能的過程中，就沒有這麼順利了QQ
卡比較久的問題，主要都跟音樂播放器有關，因為對audio標籤還不夠熟悉，所以看似順利，卻又卡在一些很奇怪的問題上。1. 音樂無法正常播放(錯誤訊息：DOMException: The play() request was interrupted by a new load request.)=>查了資料後，發現audio在呼叫play()時，會返回promise，最後改用Promise的寫法，終於排除這個問題。 2. 佈署後呈github page後，無法讀取到音樂(錯誤訊息：audio net::ERR_CERT_COMMON_NAME_INVALID)=>最後發現問題出在我上傳的音檔是放在開頭為http的網站上，改上傳到https的網站問題就排除了。
最後我想說
雖然說這個成品沒有前輩大神們那麼厲害和華麗，
但不管成品完美不完美，也算是突破自我了。
其實剛開始一直覺得自己根本拿石頭砸自己的腳，自己應該會因為做不出來而半途而廢，
但沒想到把挑戰拆成一個個小小的項目後，好像也沒有想像中那麼難，
再加上自己就是不服輸，還是成功戰勝自己了～～～
從這次的挑戰中，自己也透過接觸沒接觸過的東西，學習到了新東西，感覺很充實，也很有成就感！
真的沒想到自己可以廢到翻轉XD
下次要做什麼我就廢挑戰，目前還在思考中...
但我還是會繼續這個挑戰～～
這次的我就廢挑戰紀錄就到這了，大家掰餔^^
文科少女寫程式 發表在
痞客邦
留言(0)
人氣()
最近為了完成身為蔡依林粉絲的巨作(？)
好一陣子沒寫文章了，深深覺得不妙，所以趕快寫一篇壓壓驚~~
(謎之音：你明明就是又被考倒了吧！！)
不管啦，就是該會的東西，沒有好好記下來，
所以好好地寫一篇筆記文吧～～～什麼是Vue Router？Vue Router是由前端實作的路由，所以有了它，就可以透過前端操控路由，打造一個前端SPA。
以前路由都會先經過網路，並透過後端伺服器，進行請求回應的動作，最後才能顯示這個路由指定的頁面，
但是透過Vue Router，就不一定需要網路，也能渲染這個路由指定的頁面。
使用Vue Router時，當變更路由，會進行以下的流程：
啟動Vue Router=>更改網址=>載入對應的component=>渲染顯示頁面
但是當有讀取、修改、新增資料的動作時，就需要進一步透過網路，向後端伺服器發送請求(也就是API的部分了)
文科少女寫程式 發表在
痞客邦
留言(0)
人氣()
今天要來用jQuery實作捲軸滑動後，圖片自動滑入的效果！實作的大方向1. 需要偵測捲軸滾到哪
2. 將圖片的預設位置設定在外側
3. 設定一個回到顯示位置的CSS，依照滾軸滑動的位置套用這個CSS細部實作內容1. 設定好HTML(我先大概設定一個簡單的樣板，美觀不重要，重點是功能)
詳細內容可參考連結 https://codepen.io/pinkymini/pen/QWEPQZx?editors=1010
2. 設定圖片的初始位置設
HTML的部分
文科少女寫程式 發表在
痞客邦
留言(0)
人氣()
最近因為完成AC的課程
稍微準備一下裝備(?)，就踏上轉職大冒險的路了
但是果然沒有想像中順利啊！
而且最可怕的不是去面試後被洗臉，
最可怕的是投了履歷被已讀沒回應...
也就是說我這樣的轉職者根本不是徵才方想要的人QQ
老實說自己因為這個狀況，覺得打擊有點大...
這幾個禮拜也感覺到非常的慌，又很無力，
不知道該怎麼繼續下去...
但是最後我還是為了改善這樣的現況，
而針對自己的狀況分析出以下幾點可能被理都不理的原因 履歷被已讀不回的可能原因1. 不夠年輕老實說我還年輕，但是也已經不太年輕，
我想很多公司應該還是偏向於要找耐操的新鮮的肝。
但我不管啦，人家就是永遠18歲，哼。2. 作品不夠多目前手上作品不夠，可能導致徵才方在評估能力時，
無法確切的進行評估。也因為作品外觀都中規中矩，
不夠華麗，導致第一眼就給予能力不夠OK的評價。3. 會的語言不夠多雖然我會韓文、英文、泰文，但是程式語言卻只會JavaScript，
在程式開發領域也就可能被認為是不夠好學，
學習能力不夠好(?)之類的。4. 自學的東西不夠多以前自學只有接觸基本的HTML和CSS，
但這個真的是前端技術中的基本中的基本，
所以這基本上可以等於不算了。
其實還有很多東西可以學，但目前來說只算是自學了jQuery，
不過不僅學得還不夠精，對於一些新創公司來說，也不是什麼主流的技術，
所以可能對於徵才方來說，也就感覺我的學習動力偏差。
以上是我推測的原因，不一定正確，但現在還是會先以這幾點下去改善。
我的學習歷程的確比科班出身的人就是硬生生短了很多，
但我不相信身為文科生，一輩子就是只能當文科生，無法踏進這個領域，
所以為了改變這樣的現況我制定了以下的學習計畫。
如果還是沒人願意理我，我就繼續學習，整裝再出發！！！我的學習計畫自己其實還有很多不足的地方，
但是前端的坑很深，要全部都補好補滿，
真的很困難，所以只能先針對可能會派上用場的部分補強。每天的例行學習1. JavaScript觀念複習：8 天重新認識JavaScript！二刷
2. CSS選取器觀念重新建立：金魚都能懂的CSS 選取器
3. Reacte學習：從Hooks 開始，讓你的網頁React 起來每週一次的例行學習1. 每週實做一個網頁效果(輪播圖，滾動文字圖片飛入等)
2. 每週末進行side-project(目前進行中：健身菜單紀錄<Vue.js>)
目前會想要以這樣的方向進行學習計畫，
是因為想要打好基礎，顧好原本就會的東西，但是也想學新的東西，
所以安排這樣雙管齊下的學習計畫。
文科少女寫程式 發表在
痞客邦
留言(0)
人氣()
為什麼這次想以這個主題來寫一篇呢？
主要是因為這題居然把我給問倒了...
對，很令人慚愧的...被問了這麼簡單的問題，居然答不好QQ
秉持著在哪裡跌倒就在哪裡躺好(誤)
不是啦~是從那裡跌倒就從哪裡站起來的精神！
沒搞懂、沒讀熟那就讓自己重新學習吧！
(但是真心對不起我的老師們，徒兒給你們丟臉了...)ECMAScript是什麼？ECMAScript是以JavaScript為基礎去實現ECMA-262規範的標準語言。以一種外語來比喻的話，就等於是正式的標準用法、正確的拼音用法。
像是英文、韓文其實都有自己的方言或是新潮語、非正式的用法，
雖然就算用法不正式一樣是英文、韓文，
但是在考試或正式場合時，就一定需要用正式用語及用法，
這種正式的書面語也就等同於ECMAScript。ECMAScript跟JavaScript的關係是？簡單來說就是ECMAScript是JavaScript語言的標準用法。從由來的角度看，可能會比較好理解。
一開始有JavaScript語言出現時，並沒有特別有一個標準規格，
JavaScript的創造者為了讓JavaScript可以成為國際標準，
所以將JavaScript交給國際標準化組織ECMA去制定JavaScript的標準用法，
因而產生出ECMAScript這個語言。
文科少女寫程式 發表在
痞客邦
留言(0)
人氣()
文科少女寫程式 發表在
痞客邦
留言(0)
人氣()
上禮拜意外獲得一個實作的機會，
雖然在拿到這份作業時，心中忐忑不安，
因為除了串API是自己確定自己有做過的內容外，
其他部分對我而言都是沒碰過的東西。
不過想著「當工程師就該有解決問題的能力」這點，我還是勇敢接招了XD
(其實OS是老娘就跟你拚了~~~~)搶先看完成的畫面GitHub連結在這裡
實作需求內容1. 用GitHub API串接自己的repo資料到頁面上，並顯示標題、敘述、URL。
2. 用無限滾動(infinite scroll)的技術讀取repo資料。
需求解法相關資料收集
首先，我先透過收集資料去尋找可以完成需求內容的靈感。
主要就分以下兩個方向下去收集資料。
1. 看API使用相關的資料
- 了解到API串接只需要透過GitHub產出自己的token再帶入header就可以了
- 確認到自己要用哪條API下去拿我要的資料
- 用POSTMAN先模擬是否能正常取得資料，以及會取得那些資料
2. 查無限滾動相關的資料
- 了解到大概念是要偵測捲軸是否移動到整個頁面的底部，讀到底部再讀取一次資料
- 需要透過clientHeight、scrollY、scrollHeight去做計算是否已經滑到底部
實作過程(包含發生問題處及解法)
1. 查完資料後，我先設定一個vue專案，進行版面的切版。
(想讓自己多刻意練習一些過去用過的東西切版內容，所以雖然需求沒有要做RWD，
我還是加了這部分的內容)。
2. 切完版之後，我就使用Axios串接API拿自己的repo資料，並透過v-for進行渲染。串API時出現的問題在用POSTMAN模擬API串接時，有遇到跨網域存取被拒絕(CORS)的問題，但是這次使用的是public API，
並沒有一位負責製作API的夥伴可以協助從後端解決這個問題，所以就上網查詢如何透過前端解決這樣的狀況。
有查到可以利用cors-anywhere這個API，可透過另一個管道幫我們處理CORS的問題，在要串接的API前面，
再加上cors-anywhere API所提供的網址，最後順利拉取到資料。
3. 確定能夠正確的渲染到頁面後，接著實作infinite scroll的部分，這個部分的實作又拆解成以下幾個步驟。
(1) 進入頁面時，不會將所有資料一次渲染，只會渲染特定筆數的資料
=> 為了讓資料不要一次顯示，除了在Vue data中宣告透過API fetch到的所有repo的資料陣列外，
又宣告了另一個空陣列，好讓頁面上要渲染資料可以依照有無滑到頁面底部而增加。
=>接著讓第一次進入頁面時，currentRenderRepos就能被放入10筆資料。
(這次實作，我想讓每次載入資料時，最多都載入10筆資料)
所以在created的fetch資料動作中，除了拉取API資料外，
還必須讓前10筆資料塞入渲染用的陣列。
我的想法是利用slice去把myTotalRepos的前10筆資料取出，
並且push到渲染用陣列。
文科少女寫程式 發表在
痞客邦
留言(0)
人氣()
文科少女寫程式 發表在
痞客邦
留言(0)
人氣()
這次想用部落格整理一下之前學Vue時，手寫的筆記。
一方面也當作是一個複習~對Vue有興趣的人，也許也可以跟著我這次複習的腳步，
稍微認識一下Vue這個框架怎麼使用。
另外，因為內容很多，所以這次的Vue學習筆記預計會分多個篇文章進行整理 : )什麼是Vue？
文科少女寫程式 發表在
痞客邦
留言(1)
人氣()
這次是找出醜陋數的題目題目需求：
若質因數為2、3、5，則此數字為質因數，如果可以被其他數字整除，則不為醜陋數，但是1為醜陋數(回傳true或false)。
解題過程：
1. 先排除小於1的數字，因為負數和0都不為我們所說的醜陋數。
2. 接著因為1為true，所以也把1的判斷獨立寫出來。
2. 分三個區塊確認，用%分別針對2、3、5取餘數，如果不等於0就一定是false。(迴圈條件設定大於2、3、5的數字)
=>由於分三個部分，用迴圈檢查，當可以被3除，但卻不能被2除的數字出來的話，會直接顯示false，
所以這裡只需要確認是否可以被這三個數字整除就好，每一個數字的餘數確認都不用馬上回傳false，
而是用break跳出迴圈進行下一個數字的餘數檢查。
3. 如果第一次可以被整除，不代表一定可以繼續被整除下去，所以進行除2、3、5的動作，直到數字被除到變最小
4. 不管在取餘數階段就被判斷不是醜陋數而被用break強制跳出迴圈的數字，還是被除到最小後結束迴圈的數字，
都會在最後面再透過%檢查一次，結果的true&false會從這個部分判斷並傳出
程式碼內容：
文科少女寫程式 發表在
痞客邦
留言(0)
人氣()
