[{"content":"ESLint可以做什麼？ 檢查出語法錯誤：變數未經宣告、function未經定義、括號不成對等等\n將code格式化：如何縮排、單引號或雙引號、分號、space及tab的大小等等\n刪除多餘的程式碼：提醒刪除import但沒有使用的模組、空的function、變數宣告但未使用等等\n確保遵循最佳實踐：使用嚴格相等 === 而非 ==\n再搭配現在流行的 style guide： Google Airbnb Standard 透過以上兩種工具的結合，可以確保自己的程式碼與團隊遵循的規則相符，\n一旦通過ESLint的代碼檢查，表示程式碼品質在一定的水準內。\n在專案中引入ESLint套件 以下將會解說如何將vscode內的延伸模組Prettier與ESLint + Airbnb style guide做結合，\n目標是禁用ESLint的格式規則，因為我們只需要用他來檢查語法錯誤，\n並用Prettier格式化程式碼。\n在開始之前，記得要先安裝 npm 及 npx。\n配置方法 下載VScode的 ESLint 及 Prettier 延伸模組\n在我們的專案根目錄中安裝 ESLint 及 Prettier 套件\nnpm install -D eslint prettier\n安裝 Airbnb style guide\nnpx install-peerdeps --dev eslint-config-airbnb\n安裝 eslint-config-prettier（禁用ESLint格式化）\nnpm install --save-dev eslint-config-prettier\n安裝 eslint-plugin-prettier（允許ESLint在我們寫程式時顯示格式錯誤）\n1 2 npm install --save-dev eslint-plugin-prettier npm install --save-dev --save-exact prettier 在專案根目錄建立檔案 .eslintrc ，內容如下：\n1 2 3 4 5 6 7 { \u0026#34;extends\u0026#34;: [\u0026#34;airbnb\u0026#34;, \u0026#34;prettier\u0026#34;], \u0026#34;plugins\u0026#34;: [\u0026#34;prettier\u0026#34;], \u0026#34;rules\u0026#34;: { \u0026#34;prettier/prettier\u0026#34;: [\u0026#34;error\u0026#34;] }, } 最後，在vscode內設定格式化的工具為Prettier就好了，\n設定的方式，可以在撰寫程式碼的地方，按右鍵\u0026raquo;格式化文件，\n這時候vscode會跳出你要選擇什麼延伸模組去格式化，\n在這邊選擇 Prettier 即可。\n","date":"2022-08-08T00:00:00Z","permalink":"https://Yen-An.github.io/p/%E4%BD%BF%E7%94%A8eslint%E6%8F%90%E9%AB%98%E7%A8%8B%E5%BC%8F%E7%A2%BC%E5%93%81%E8%B3%AA/","title":"使用ESLint提高程式碼品質"},{"content":"很多時候我們會需要去串接第三方API，而我的習慣是，在真正去project call api之前，會用postman先測試過，那天心血來潮去試著call 政府的 open data ，用的是\n全國街道路名: https://od.moi.gov.tw/api/v1/rest/datastore/301000000A-000917-035 的api，\n在postman的結果，很正常，\n於是我在我的React Project寫下fetch\n1 2 fetch(\u0026#34;https://od.moi.gov.tw/api/v1/rest/datastore/301000000A-000917-035\u0026#34;) .then((res) =\u0026gt; console.log(res)) 結果出現了錯誤訊息，上面寫的要在我們發送請求時加上 mode:'no-cors'\n於是我加上了\n1 2 3 4 fetch(\u0026#34;https://od.moi.gov.tw/api/v1/rest/datastore/301000000A-000917-035\u0026#34;,{ mode:\u0026#39;no-cors\u0026#39; }) .then((res) =\u0026gt; console.log(res)) But!!!!!人生就是這個BUT!!!!!!!\n可以看到我的 Response 裡面有個 type ='opaque'，關於這個錯誤大家可以上網查查，簡單來說，這是一個不透明的 response，我們是無法去取得裡面的資料，所以 body 裏面是 null，事實證明 mode='no-cors' 並不會讓事情成功的執行，\n我也有試過什麼setupProxy，依舊無法取得我想要的資料，\n就在想要放棄之際，我看到了一個東西，\nhttps://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf/related?hl=en\n這是google chrome的一個插件，可以允許跨域請求，\n我將他安裝在我的瀏覽器，並按下左下角的toggle on ，\n然後回到我的程式碼，將 mode:'no-cors' 拿掉，再去到開發者工具看看這次回傳什麼，\n可以看到我的 Response type 已經是 cors，但body依舊怪怪的？沒有我要的data，\n接著我利用插件的 Test Cors來檢查我的瀏覽器到底可以接受怎樣的跨域請求，\n可以看到我的fetch通通都是被拒絕的，但是，XMLHttpRequest的 GET \u0026amp; POST都是被允許的，\n於是我將我的 fetch 改成 axios，因為axios的請求格式就是 XMLHttpRequest，\n1 2 axios.get(\u0026#34;https://od.moi.gov.tw/api/v1/rest/datastore/301000000A-000917-035\u0026#34;) .then((res) =\u0026gt; console.log(res)) 讓我們再回到開發者工具看看，\n這次成功的回傳了api所提供的data!!!!!\n以上就是我在react project 直接去串接第三方api的辦法，供大家參考。\n","date":"2022-06-20T00:00:00Z","permalink":"https://Yen-An.github.io/p/%E5%89%8D%E7%AB%AF%E5%AF%A6%E4%BD%9C%E7%B3%BB%E5%88%97-%E5%9C%A8react-project%E5%85%A7%E4%B8%B2%E6%8E%A5%E7%AC%AC%E4%B8%89%E6%96%B9api/","title":"前端實作系列-在React Project內串接第三方API"},{"content":"題目解說 原題目 Write a function to find the longest common prefix string amongst an array of strings.\nIf there is no common prefix, return an empty string \u0026quot;\u0026quot;.\nExample 1:\n1 2 Input: strs = [\u0026#34;flower\u0026#34;,\u0026#34;flow\u0026#34;,\u0026#34;flight\u0026#34;] Output: \u0026#34;fl\u0026#34; Example 2:\n1 2 3 Input: strs = [\u0026#34;dog\u0026#34;,\u0026#34;racecar\u0026#34;,\u0026#34;car\u0026#34;] Output: \u0026#34;\u0026#34; Explanation: There is no common prefix among the input strings. Constraints:\n1 \u0026lt;= strs.length \u0026lt;= 200 0 \u0026lt;= strs[i].length \u0026lt;= 200 strs[i] consists of only lowercase English letters. 翻譯 給定一個陣列strs，裡面會有字串，找出此陣列字串相同的前綴，如果沒有，返回\u0026quot;\u0026quot;。\n解題策略 邏輯上是後面的字串去跟前面的做比較就好，所以聲明字串pre，一開始就宣告為陣列的第一個元素，如果比對不到，就將pre刪掉一個字符，刪到比對出相同前綴為止。\nJS程式碼 1 2 3 4 5 6 7 8 9 10 11 var longestCommonPrefix = function(strs) { if(strs == null || strs.length == 0) return \u0026#34;\u0026#34;; let pre =strs[0] console.log(strs.length) for(let i =1;i\u0026lt;strs.length;i++){ while(strs[i].indexOf(pre) != 0){ pre=pre.substring(0, pre.length - 1); } } return pre; }; ","date":"2022-06-19T00:00:00Z","permalink":"https://Yen-An.github.io/p/leetcode-%E5%AF%A6%E4%BD%9C%E8%A7%A3%E8%AA%AA%E7%B3%BB%E5%88%97-longest-common-prefix/","title":"LeetCode 實作解說系列-Longest Common Prefix"},{"content":"題目解說 原題目 Roman numerals are represented by seven different symbols: I, V, X, L, C, D and M.\n1 2 3 4 5 6 7 8 Symbol Value I 1 V 5 X 10 L 50 C 100 D 500 M 1000 For example, 2 is written as II in Roman numeral, just two ones added together. 12 is written as XII, which is simply X + II. The number 27 is written as XXVII, which is XX + V + II.\nRoman numerals are usually written largest to smallest from left to right. However, the numeral for four is not IIII. Instead, the number four is written as IV. Because the one is before the five we subtract it making four. The same principle applies to the number nine, which is written as IX. There are six instances where subtraction is used:\nI can be placed before V (5) and X (10) to make 4 and 9. X can be placed before L (50) and C (100) to make 40 and 90. C can be placed before D (500) and M (1000) to make 400 and 900. Given a roman numeral, convert it to an integer.\nExample 1:\n1 2 3 Input: s = \u0026#34;III\u0026#34; Output: 3 Explanation: III = 3. Example 2:\n1 2 3 Input: s = \u0026#34;LVIII\u0026#34; Output: 58 Explanation: L = 50, V= 5, III = 3. Example 3:\n1 2 3 Input: s = \u0026#34;MCMXCIV\u0026#34; Output: 1994 Explanation: M = 1000, CM = 900, XC = 90 and IV = 4. Constraints:\n1 \u0026lt;= s.length \u0026lt;= 15 s contains only the characters ('I', 'V', 'X', 'L', 'C', 'D', 'M'). It is guaranteed that s is a valid roman numeral in the range [1, 3999]. 翻譯 這題主要是在說羅馬數字的計算方式，並告知('I', 'V', 'X', 'L', 'C', 'D', 'M') 分別等於數字多少，且 4 不是 IIII 而是 VI ，以此類推應用到 9,40,90,400,900。\n解題策略 解題邏輯是讓每個字母等於一個數字，再用 object ={key:value} 的方式加總就好，首先要處理的就是 4,9,40,90,400,900 ，我宣告的 object 把 'IV':4,'IX':9,'XL':40,'XC':90,'CD':400,'CM':900 用一個字母取代掉 'f':4,'n':9,'l':40,'c':90,'d':400,'m':900，接著是做字串s的文字取代 s.replace('IV','f').replace('IX','n').replace('XL','l').replace('XC','c').replace('CD','d').replace('CM','m')，最後利用迴圈加上 charAt()就可以逐一取值並加總。\nJS程式碼 1 2 3 4 5 6 7 8 9 10 var romanToInt = function(s) { //\u0026#39;IV\u0026#39;:4,\u0026#39;IX\u0026#39;:9,\u0026#39;XL\u0026#39;:40,\u0026#39;XC\u0026#39;:90,\u0026#39;CD\u0026#39;:400,\u0026#39;CM\u0026#39;:900 const obj ={\u0026#39;I\u0026#39;:1,\u0026#39;V\u0026#39;:5,\u0026#39;X\u0026#39;:10,\u0026#39;L\u0026#39;:50,\u0026#39;C\u0026#39;:100,\u0026#39;D\u0026#39;:500,\u0026#39;M\u0026#39;:1000,\u0026#39;f\u0026#39;:4,\u0026#39;n\u0026#39;:9,\u0026#39;l\u0026#39;:40,\u0026#39;c\u0026#39;:90,\u0026#39;d\u0026#39;:400,\u0026#39;m\u0026#39;:900}; let new_s = s.replace(\u0026#39;IV\u0026#39;,\u0026#39;f\u0026#39;).replace(\u0026#39;IX\u0026#39;,\u0026#39;n\u0026#39;).replace(\u0026#39;XL\u0026#39;,\u0026#39;l\u0026#39;).replace(\u0026#39;XC\u0026#39;,\u0026#39;c\u0026#39;).replace(\u0026#39;CD\u0026#39;,\u0026#39;d\u0026#39;).replace(\u0026#39;CM\u0026#39;,\u0026#39;m\u0026#39;) let sum = 0 for(let i = 1;i\u0026lt;=new_s.length;i++){ sum = sum + obj[new_s.charAt(i-1)] } return sum; }; ","date":"2022-06-19T00:00:00Z","permalink":"https://Yen-An.github.io/p/leetcode-%E5%AF%A6%E4%BD%9C%E8%A7%A3%E8%AA%AA%E7%B3%BB%E5%88%97-roman-to-integer/","title":"LeetCode 實作解說系列-Roman to Integer"},{"content":"題目解說 原題目 Given an integer x, return true if x is palindrome integer.\nAn integer is a palindrome when it reads the same backward as forward.\nFor example, 121 is a palindrome while 123 is not.\nExample 1:\n1 2 3 Input: x = 121 Output: true Explanation: 121 reads as 121 from left to right and from right to left Example 2:\n1 2 3 Input: x = -121 Output: false Explanation: From left to right, it reads -121. From right to left, it becomes 121-. Therefore it is not a palindrome. Example 3:\n1 2 3 Input: x = 10 Output: false Explanation: Reads 01 from right to left. Therefore it is not a palindrome. Constraints:\n-231 \u0026lt;= x \u0026lt;= 231 - 1 翻譯 給定一個整數x，回傳x是不是個相反數。舉例來說121相反為121，回傳true，-121相反為121-，回傳false。\n解題策略 將x轉為字串xstr，再將xstr利用reverse函數做字序的反轉，最後將x與xstr做一般相等比較。\nJS程式碼 1 2 3 4 5 6 7 8 9 10 var isPalindrome = function(x) { let xstr = x.toString().split(\u0026#34;\u0026#34;).reverse().join(\u0026#34;\u0026#34;) console.log(xstr) if(x==xstr){ return true; } else{ return false; } }; ","date":"2022-06-18T00:00:00Z","permalink":"https://Yen-An.github.io/p/leetcode-%E5%AF%A6%E4%BD%9C%E8%A7%A3%E8%AA%AA%E7%B3%BB%E5%88%97-palindrome-number/","title":"LeetCode 實作解說系列-Palindrome Number"},{"content":"題目解說 原題目 Given an array of integers nums and an integer target, return indices of the two numbers such that they add up to target. You may assume that each input would have exactly one solution, and you may not use the same element twice. You can return the answer in any order.\n翻譯 給一個整數陣列nums以及一個整數target，回傳出兩個整數相加等於target在nums裡面的索引值，每個數不能被重複使用，而且只會有一個解。\nExample 1:\n1 2 3 Input: nums = [2,7,11,15], target = 9 Output: [0,1] Explanation: Because nums[0] + nums[1] == 9, we return [0, 1]. Example 2:\n1 2 Input: nums = [3,2,4], target = 6 Output: [1,2] Example 3:\n1 2 Input: nums = [3,3], target = 6 Output: [0,1] Constraints:\n2 \u0026lt;= nums.length \u0026lt;= 104 -109 \u0026lt;= nums[i] \u0026lt;= 109 -109 \u0026lt;= target \u0026lt;= 109 Only one valid answer exists. 解題策略 跑過整個陣列後必定能找到兩兩相加為target的值，用雙層迴圈跑完陣列中的所有數並兩兩相加，方得解答。\nJS程式碼 1 2 3 4 5 6 7 8 9 10 11 12 13 var twoSum = function(nums, target) { for(let i = 0;i\u0026lt;nums.length-1;i++){ let x = nums[i]; for(let j = i+1;j\u0026lt;nums.length;j++) { let y = nums[j]; if(x+y===target){ return [i,j] } } } }; ","date":"2022-06-18T00:00:00Z","permalink":"https://Yen-An.github.io/p/leetcode-%E5%AF%A6%E4%BD%9C%E8%A7%A3%E8%AA%AA%E7%B3%BB%E5%88%97-two-sum/","title":"LeetCode 實作解說系列-Two Sum"},{"content":"很多前端工程師一定會使用到的功能：圖片上傳，並將圖片預覽在網頁畫面上，其實做法非常簡單\n說明 利用 input type='file' 去取讓使用者選取要上傳的圖片 利用 button onClick() 觸發預覽圖片的funtion fileUp() 利用 FileReader() 讀出file資料 利用 readAsDataURL 產生出當下可用的URL供渲染網頁使用 程式碼 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 \u0026lt;!DOCTYPE html\u0026gt; \u0026lt;head\u0026gt; \u0026lt;meta charset=\u0026#34;utf-8\u0026#34;\u0026gt; \u0026lt;/head\u0026gt; \u0026lt;body\u0026gt; \u0026lt;h3\u0026gt;實作檔案上傳預覽\u0026lt;/h3\u0026gt; \u0026lt;input id=\u0026#34;file1\u0026#34; type=\u0026#34;file\u0026#34; accept=\u0026#34;image/*\u0026#34; /\u0026gt; \u0026lt;button id=\u0026#34;btn1\u0026#34; onclick=\u0026#34;fileUp()\u0026#34;\u0026gt;預覽檔案\u0026lt;/button\u0026gt; \u0026lt;p id=\u0026#34;demo\u0026#34;\u0026gt;\u0026lt;/p\u0026gt; \u0026lt;div\u0026gt; \u0026lt;img id=\u0026#34;img1\u0026#34; width=\u0026#34;50%\u0026#34; /\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;/body\u0026gt; \u0026lt;style type=\u0026#34;text/css\u0026#34;\u0026gt; body { font-family: system-ui; background: #b3d9d9; color: white; text-align: center; } \u0026lt;/style\u0026gt; \u0026lt;script\u0026gt; function fileUp() { const file = document.getElementById(\u0026#34;file1\u0026#34;).files[0]; const reader = new FileReader(); reader.onload = (e) =\u0026gt; { const img = document.getElementById(\u0026#34;img1\u0026#34;); img.setAttribute(\u0026#34;src\u0026#34;, e.target.result); document.getElementById(\u0026#34;demo\u0026#34;).innerHTML = file.name; }; reader.readAsDataURL(file); } \u0026lt;/script\u0026gt; GitHub Link https://github.com/Yen-An/JS-\nTry in CodePen https://codepen.io/yen-an/pen/poaGRRb\n","date":"2022-06-18T00:00:00Z","permalink":"https://Yen-An.github.io/p/%E5%89%8D%E7%AB%AF%E5%AF%A6%E4%BD%9C%E7%B3%BB%E5%88%97-%E4%B8%8A%E5%82%B3%E5%9C%96%E7%89%87%E4%B8%A6%E9%A0%90%E8%A6%BD/","title":"前端實作系列-上傳圖片並預覽"}]