技術筆記
共有 134 篇相關文章
在現代 Web 開發中，地圖服務是許多應用的重要元件。本文將介紹如何在 Next.js 中使用 Google Maps API，並展示一個包含地圖標記和互動功能的範例。
Next.js 從 Pages Router 轉換到 App Router 後，資料獲取和渲染策略有了重大改變。本文將詳細解說如何將 Next.js 12 的 CSR、SSG、ISR 和 SSR 模式轉換到 App Router 架構中。
分享近期針對 Next.js 專案所設計的 Feature-based 資料夾結構，這個架構可以幫助提升模組化、可維護性，與擴展性，覺得相當不錯。
In this article, we’ll explore the hash table data structure, which provides fast data access using keys. We'll build our own hash table step-by-step in JavaScript, covering how it stores data, handles collisions, and retrieves values.
In this article, we'll dive into the fundamentals of Binary Search Trees (BST), a powerful data structure that organizes data for efficient insertion, search, and traversal operations. Starting from the basic concepts, we’ll explore the recursive call stack, how to insert and search for values, and cover multiple traversal methods, including depth-first (in-order, pre-order, post-order) and breadth-first traversals. By the end, you’ll understand BST operations and have the code to create and manipulate a Binary Search Tree in JavaScript.
Linked lists are a fundamental data structure in computer science, offering flexibility in managing and organizing data. This article introduces linked lists in JavaScript, explaining their structure, basic operations like adding and removing nodes, and how to search within them. Perfect for beginners, this guide takes you step-by-step through building and understanding linked lists, making complex concepts accessible to everyone.
In this article, we’ll walk through the Max Stock Profit algorithm, which helps determine the maximum profit achievable from buying and selling a stock in a single day based on its changing prices. This common algorithm problem often appears in technical interviews and requires a mix of array handling and optimization techniques.
In this article, we’re covering Merge Sort, an efficient sorting algorithm that breaks down arrays into smaller parts, sorts them, and merges them back into a single sorted array. Merge Sort is often highlighted in technical interviews, so understanding its mechanics is essential.
In this article, we’ll dive into Bubble Sort, a straightforward sorting algorithm often encountered in coding interviews. We’ll discuss how it works, go through an example, and examine a JavaScript implementation of the algorithm.
Discover the Sieve of Eratosthenes — an efficient algorithm to find all prime numbers up to a given limit. We'll cover the steps involved, optimizing runtime, and breaking down the code for a clear understanding.
In this post, we'll explore two different implementations of the Fibonacci sequence: the classic recursive version and an optimized version using memoization. Both methods generate the same result, but their efficiency is quite different, especially when dealing with large numbers.
Binary Search algorithm is a fundamental technique in computer science. It's widely used in various applications and is a common topic in technical interviews. Understanding binary search is crucial because it offers a fast way to find values in sorted lists.
The Two Sum problem is a popular coding challenge that involves finding pairs of numbers in an array that add up to a specific sum. This is a great problem to practice your problem-solving skills and reinforce your understanding of hash tables for improving time complexity.
Learn how to calculate the mean, median, and mode of a number array in JavaScript with a reusable, functional approach. We’ll split the task into easy-to-follow steps that make this algorithm both efficient and beginner-friendly!
Learn how to reverse an array in place with this efficient, space-saving technique. In this post, we’ll explore swapping elements directly within the original array without creating a new one, practicing some key array manipulation skills along the way. Perfect for those looking to level up their JavaScript skills!
Today, we’re tackling the Reverse Words algorithm! This is a fun little challenge where we take a sentence, flip each word individually, and put the sentence back together—no messing with the word order, just reversing each word. Let’s dive in!
The algorithm we'll explore in this post is the Caesar Cipher. This classic encryption technique shifts each letter in a string by a specified number of places in the alphabet.
The 'Is Palindrome' algorithm checks whether a string reads the same forward and backward, ignoring spaces and punctuation. It's a simple yet classic algorithm that can be easily implemented with JavaScript string and array manipulation.
這是我在部落格寫的第一篇日本關西旅遊紀錄，所以網址命名用 "kansai-travel-1"。這次的關西八天自由行，對我來說意義非凡，雖然這是我第四次來日本，更是第三次踏上關西地區，但因為疫情的關係，睽違了好幾年才再度來到這片熟悉又充滿回憶的土地。這次行程規劃得相當充實，除了經典景點外，還安排了一些過去沒去過的新地方，當然，環球影城（USJ）依然是必訪之地，尤其是全新的任天堂園區，對我這種長年遊戲玩家來說，怎麼可能錯過！
In this post, we'll break down a common algorithm question you might see in coding interviews: the Harmless Ransom Note. It’s a great example to understand how to manipulate strings and use objects as hash tables for performance improvements. Plus, it’s relatively straightforward but offers a solid practice in understanding time complexity.
Hey there, fellow coders! Today, we're diving into a concept that's super important for anyone who writes algorithms: Big O notation. It helps us understand how an algorithm performs as the size of its input grows. Think of it as a way to measure the efficiency of our code. Let’s break it down into bite-sized pieces, along with some relatable examples.
Fizz Buzz is often the very first algorithm people learn. It's a classic and fundamental concept, serving as an entry point into algorithm learning — simple yet fun!
TanStack Query 可以幫助我們發送 HTTP Request 也就是串接 API，讓前端畫面與後端資料能夠溝通與同步。沒錯！這些事情透過 useEffect 以及 Fetch 或 Axios 就能做到了，只是 TanStack Query 大幅地簡化了這方面的 Code，一起來看看 TanStack Query 如何提升開發者體驗吧。
沒有動畫效果的 Web Apps 不是說不好，但就是在完整度上少了一點什麼。如果可以適當添加一些動畫效果，除了可以讓網站看起來更加用心，也可以吸引使用者持續瀏覽。本文會介紹前端加入動畫效果的幾種方式，包含 CSS Transitions、CSS Animations，以及 Framer Motion 這套動畫效果 Library。
本篇文章會透過一個簡單的 Functional Components 的範例，讓大家瞭解 React Higher Order Component (HOC) 的實作方式。
這個 TypeScript 學習大綱包含從基礎到進階的概念，涵蓋了 TypeScript 的基本語法、編譯器配置、高級類型和特性、泛型、裝飾器、命名空間和模組，以及 TypeScript 與其他工具的集成。此大綱適用於想要全面學習 TypeScript 的開發者，從基本開始，然後深入理解 TypeScript 的高級功能。
專案一直以來都是使用 Next 12 以及 Pages Router 進行開發，不久前 Next 發表了 v14，其中 v13 與 v14 都陸續新增了一些概念，最重要的就是 App Router 成為默認的架構方式，而近期 App Router 的功能已經大致完善，因此打算試用看看。族繁不及備載，本篇文章只有記載本身學習與使用 Next 14 的體驗，以及瞭解到的幾項改變。
雖然這篇文章的網址我是用 "seoul-travel-1"，但其實這是我人生第二次去韓國首爾。第一次去韓國是小時候跟家人一起跟團，今年是從疫情結束後再次開始規劃國外旅遊，打算先去韓國自由行八天試試水溫，暑假則是可以再去一次日本。基本上韓國我都沒什麼規劃，就是逛街吃美食？比較特殊的行程應該就只有滑雪、樂天世界，跟體驗韓服而已，主打一個出國 Chill 的風格。
其實專案使用 Next.js 的話，可以考慮直接在 Next 專案中的 API Routes 進行後端的開發，只是這次開發公司專案是第一次用，當初並沒有規劃這一塊，所以目前專案完成上線後，沒有安排進行這方面的重構，不過我們還是可以學習一下怎麼在 Next 這個框架中完成全端開發。
Next.js 的一大特點就是已經即成了許多便利的功能，包含簡便的路由配置、圖片優化、效能優化、打包優化等等，今天來看看圖片優化是怎麼個做法。
近一兩年專案都是使用這套 Linter 與 Formatter 的組合拳，IDE 使用 VS Code 的話歡迎參考看看。
我專案都快成型了，老實講這個 document.js 還真的沒什麼修改到，秉持著自己專案內不能有一丁點自己不懂的東西的想法，來探探這個底線 document.js 是個什麼玩意兒。
最近看 React Developer Roadmap 發現 API Calls 人家推薦 SWR 這套工具，好奇到底是什麼功能居然能撼動 Axios 的地位？試用了一下發現還真有點意思！
Next.js 除了可以用來做 SSR 之外，其實也可以取代原本的 React 做 SPA，或是取代 Gridsome 做 SSG 靜態網站，也可以根據需求混合生成頁面，稱為 ISG，第一次聽到這麼多種，腦子差點打結了 XD
今年下半年接了一個公司的對外專案，因此有 SEO 需求，不知道是不是靜茹給我的勇氣，讓我主動提出可以使用 Next.js 的 SSR 來架構新專案，總之就是且戰且走吧，從零開始一邊做一邊學。
上一篇介紹了 React Router V6 的 Loader，本文會介紹另一個重要的新功能 Action 與表單處理方式。
上一篇介紹了 React Router V6 的基本架構，包含導頁、動態路由與巢狀路由，本文則會介紹 V6 全新的重要功能 Loader。
React Router 團隊最近又來一次全面升級，新增了許多功能，特別是 Loader 功能實在是讓我大開眼界。除此之外，我發現他們的文件寫得很好，基本上只要跟著走一遍 Tutorial 就可以掌握新版的寫法調整與新功能哩。
開發上，我們常常對物件做各種操作與應用，本文記載 Sean 常用到的物件操作方式。
健忘的 Sean 常常需要查看的陣列處理方法小抄。
本文介紹 React 當中 useCallback 這個 Hook 的使用概念，並且結合 Lodash 實作 Debouncing Search 的功能幫助理解 useCallback 的作用。
最近要使用 styled-components 包裝 Ant Design 的元件時，想透過傳遞 Boolean 值的 props 來製作動態樣式，結果是成功了但是卻一直跳出警告訊息，這是為什麼呢？
最近在使用 Ant Design 的 Table 元件時，想要監聽 Scroll 事件去更改呈現的欄位，但是發現 State 成功更新後，Table 所使用的 State 卻沒有跟著更新，這到底是怎麼回事哩。
有很多做法能夠部署 React 專案，本文會介紹如何透過 Firebase Hosting 這項服務來部署一個 SPA 專案。
本文為 React Router 升級第 6 版的筆記。
現代前端開發常見的 SPA 是指頁面 URL 切換時，不必重新 Fetch 新的 HTML 檔案，且會阻止瀏覽器的默認行為，直接去更新畫面上的內容。在 React 技術線當中，可以藉由 React Router 幫助我們完成 SPA 下的頁面切換，根據 Route 的更改呈現出不同的元件。
本文介紹 Redux Toolkit 當中的 Action Creator Thunk 設計，透過 Thunk 幫助我們更好地處理非同步邏輯。
本文介紹 Redux Toolkit 的基本使用方式，因為我是從 Vue 轉 React 的開發者，第一眼看到 Redux Toolkit 真的眼睛為之一亮！裡面使用到的觀念與 Vuex 相仿，非常好理解，撰寫的結構也相當有條理喔。
本文介紹 React Redux 於 Class-based Components 的使用。
本文介紹 React Redux 於 Functional Components 的使用。
本文介紹 React Redux 的概念與基本設定方式，並且探討何時適合使用 Redux 更勝於 React Context API。
本文介紹為什麼我們要建立並使用 Custom Hooks，以及講解如何撰寫創建自己的 Hooks，讓我們在開發 React 專案時更好地複用各種邏輯與程式碼。
本文介紹 React Class-based Components 中 Error Boundary 的使用方式。
本文介紹 React 的 Lifecycle，這是只有 Class-based Components 才有的喔。
本文介紹 React Class-based Components 的使用方式。
本文使用 Star Wars API 為例示範 React 如何串接第三方 API。
本文介紹 useMemo 的使用方式。
本文介紹 React.memo 的使用方式，以此減少元件不必要的渲染。
為了避免 Props Drilling，React 提供了 Context API 幫助我們解決這樣的問題，本文會介紹 Context API 的基本用法，包含 createContext、Provider、Consumer、useContext 等概念。
在 JavaScript 的世界中，陣列處理方法之一的 reduce 就是將多個值陸續處理累積後成為新的單一值，而本文要介紹的 useReducer 也有類似的概念，透過這個更強大的狀態管理 Hook，可以將複雜的 State 處理完成後，返回一個單純的值。
本文介紹何謂 Side Effect，以及我們該如何使用 useEffect 處理這些副作用。
本文介紹如何在 React 中使用 Forms 表單相關元素。
本文會介紹 React 當中的 Refs，及其延伸出的 useRef 與 forwardRef 的使用方式。
透過 Fragments 與 Portals 讓我們可以使用 React 撰寫出更乾淨的 HTML Code。
本文介紹 React 中基本的樣式撰寫方式，包含 Inline Style、CSS Modules、styled-components 等方式。
Props 的用途是讓父子元件之間傳遞狀態，使子元件也能使用到父元件定義的狀態，而子元件的狀態也能透過 Lifting State 的方式提升給父元件使用。
本文介紹 React 中 State 的概念，包含 useState Hook、Snapshot、Lazy State Initialization 等觀念，看似簡單的狀態，其實有一些細節觀念是初學時容易忽略的。
本文介紹 ES6 Class 實體與繼承的概念，以及進入 ES7 後出現的簡化寫法。
Spread 與 Rest 運算子都是寫成三個點，而它的身份就取決於我們在哪裡使用它，一起來看看吧。
在現代前端當中，模組化是相當推薦而且實用的做法，為了要存取其他模組，我們需要透過 export 讓模組可以被引用，並使用 import 來存取模組。
本文內容主要探討 JavaScript ES6 中的「箭頭函式」的相關概念。
因為前後端架構的問題，身為前端需要自己研究開設本地 API，否則做個畫面都得問東問西的，開發效率低到谷底。查了一下資料，發現大家幾乎都是用 JSON Server 居多，有些是使用 Postman。不過剛好發現了 Mockoon 這個工具，嘗試之後覺得真的不錯，很簡單就能上手，記錄一下操作方法。
本文主要內容為探討 Vue 3 的 Methods、Computed、Watch 的寫法與相關知識。
本文主要內容為探討 JavaScript 中 toString() 方法的相關知識，以及關鍵字 typeof 和 instanceof 的使用。
本文主要內容為探討另一個建立物件和設定原型的方法「ES6 Class」的相關知識。
本文主要內容為探討「Object.create」的相關知識以及搭配使用的 Polyfill。
本文主要內容為探討「JavaScript 內建的函式建構子」的相關知識。
本文主要內容為探討關鍵字 new 與函式建構子的相關知識，內容包含關鍵字 new、函式建構子，以及函式的原型屬性。
本文主要內容為探討「原型」的相關知識，包含原型繼承、原型鏈、基本物件，以及資源庫 Underscore 裡面的 Reflection 與 Extend 模式。
本文主要內容為探討「函式程式設計」的相關知識，透過一個經典的範例玩轉 Functional Programming，也會提到 Underscore 與 Loadsh 這兩個有名的資源庫。
本文主要內容為探討 bind()、call() 與 apply() 的相關知識，這三個函式都與 this 有關，可以用來控制 this 變數。
本文主要內容為探討「回呼函式」的相關知識，其實我們可能已經用過回呼函式的概念了，像是 setTimeout 或是 jQuery 事件就是在使用閉包與回呼的概念喔。
本文主要內容為探討「函式工廠」的相關知識。閉包有很多有用的地方，像是函式工廠就是用閉包建立的模式，文章內容也會包含重載函式、一級函式、執行環境等概念。
本文主要內容為探討「閉包」的相關知識，這是 JavaScript 的一個重要觀念，會用到我們之前學到的所有概念，包含一級函式、執行堆、執行環境等等。
本文主要內容為探討「IIFE」的相關知識，理解為什麼 IIFE 會被應用在各種大型框架或資源庫裡面，並且能幫助撰寫安全的程式碼。
本文主要內容為探討「函式參數」的相關知識，包含預設值、arguments 關鍵字、spread parameter 等等。
本文主要內容為探討物件、函式，以及那個令人困惑的「this」的指向問題與相關知識。
本文主要介紹「傳值和傳參考」的概念，這對於 JavaScript 的開發與除錯會很有幫助，如果不知道這些觀念，可能會導致一些很難 Debug 的奇怪問題。
本文主要內容為探討「函式物件」的相關知識，包含「一級函式」這個讓 JavaScript 適合撰寫 Functional Programming 的特性，以及函式陳述式、函式表達式、匿名函式等重要觀念。
本文主要內容為探討「物件」的相關知識，包含成員取用運算子、物件實體語法、偽裝命名空間，與 JSON 資料格式。
本文主要內容為探討「運算子」的各種概念，能幫助我們順利除錯與瞭解可能會因為動態型別而產生的問題。
JavaScript 很特別，它與其他程式語言不同，尤其是處理變數資料與型別的部分。本文主要內容為「型別」的相關知識，包含動態型別、純值、陣列，至於物件則會紀錄在其他筆記中。
Event Loop 負責排程處理同步與非同步的工作，有了這位任務管理員，你的網站才不會卡卡的喔。
範圍鏈是什麼，這個專有名詞聽起來好像很難懂，但是其實它很好理解呢。
本篇主要介紹 JavaScript 的運作過程，可以瞭解到 JavaScript 底層在做的事情，以及程式碼處理與執行的過程，還有一些我們必須理解的專有名詞。以下一一仔細跟大家說明 (๑•̀ㅂ•́)و✧
本文聊聊比較輕鬆的主題 Name-Value Pair 或稱 Key-Value Pair 鍵值對，以及它跟物件的關係。
JavaScript 是屬於語法作用域（靜態作用域），而靜態作用域與動態作用域這兩者有何不同呢。
第一篇文要先來說說 JavaScript 是如何運行的，它是透過什麼去解析程式碼，而在這個過程中有哪些觀念呢。
這個系列筆記的主要內容是 JavaScript: Understanding the Weird Parts 課程的學習筆記，主要在講解 JavaScript 背後的運作原理與邏輯。
最近專案要從 SPA 改成 SSR，雖然一般而言 SSR 是在專案開發前或者開發初期就得考量，但是事情總有個萬一，俗話說的好，需求是會成長的？總之好險 Quasar 有提供建構 SSR 的方法，這對於轉換到 SSR 會減少許多麻煩。
使用 Contenteditable 送出輸入訊息時，我們會監聽 Enter 按鍵來換行，但是這個動作會觸發換行效果，導致送出的訊息多出一個空行，這個問題該怎麼解決呢？
這篇文章主要說明如何透過 vue-tribute 來實作網頁上的標記功能（@mention），先備知識必須要已經基本會使用 Vue。
本篇介紹如何透過 v-bind 指令來動態綁定屬性，這是很常用到的技巧喔，以下就來介紹各種 v-bind 綁定的用法吧！
這篇文章會介紹如何在 Quasar 加入全域的 Filter 過濾器，讓我們在各元件之中都能直接使用過濾器。
最近在使用 Quasar CLI 開發專案，裡面有許多已經做好的元件可以使用，但是它所提供的元件是層層包裝好的，有些元件的 CSS 樣式甚至使用 important 還是難以覆寫或修改。這邊要介紹在 Quasar Framework 之中該如何強硬地修改 CSS 樣式，來客製化 Quasar 提供的元件。
本文延續上篇的 Vuex 基礎入門文章，將介紹該如何透過 Vuex 管理專案的元件與資料狀態，也會介紹如何將 Store 的資料模組化，以減少專案程式碼的重複性，並提升程式碼的可讀性。
瞭解 Vue 的指令、元件、路由配置等概念後，我們用 Vue CLI 製作的網站差不多告一段落了！然而 Vue 生態圈還有一個必備技能是 Vuex，我們現在就來把 Vuex 也加入專案，讓我們的資料狀態可以跨元件同步。
本文介紹如何透過 CSS 來製作出打字動畫與閃爍游標，這個效果用在專案上可以添增一些亮點，視覺效果還滿不錯的，一起來試試看吧！
Vue 提供的 Filter 過濾器可用於自訂畫面資料的呈現格式，如果不是做複雜的資料處理，只是做簡單調整的話，就很適合使用 Filter。
上一篇的 Props 是由外而內傳遞資料，而且要盡量與外層資料斷開關係，而 Emit 則是把資料由內向外傳遞。
本篇文章介紹父子元件之間，由外到內的資料傳遞方式 Props。
本文簡單介紹 Vue 的生命週期，瞭解 Vue 的生命週期對於熟悉 Vue.js 會有很大的幫助。
在 Vue.js 中 Methods、Computed、Watch 裡面都可以寫函式，這三種屬性有什麼差異呢？
Learn Git Branching 能幫助 Git 初學者領會 Git 分支背後的強大概念，對於剛開始使用 Git 的人來說，相當適合用來幫助瞭解分支使用上的各種方式。
本篇文章介紹 JavaScript ES6 裡面 let 與 const 的重要觀念，以及使用上的注意事項。
在使用 v-for 時有一些要注意的小地方，事先搞清楚這些觀念，在開發時就不會卡關哩。
在使用 Vue 的 v-on 時可以搭配修飾符，幫助我們加上一些附加作用，而 Vue 幫我們包裝好的修飾符有事件修飾符、按鍵修飾符，與滑鼠修飾符這三種。
建立起一個 Vue 的應用程式後，我們有 Mustache、v-html、v-text、v-model 這好幾種不同的語法可以將資料呈現到畫面上，這些方式有什麼差別，使用時又有哪些要注意的地方哩。
在修習六角學院的 Git 課程後所整理的指令大全，在內容與順序上有做一些調整，方便讓之後使用 Git 的時候能夠做為參考筆記。
使用 Git 與 Github 進行團隊合作時，會利用遠端數據庫做上傳與下載，同時也會出現 Git 衝突，本篇文講解如何處理這些狀況。
在公司或團隊中，與其他人一起分工工作時，分支 (branch) 是相當重要的觀念喔。
從大二開始接觸前端到現在也快兩年了，途中有煩人的考試，還有充滿雲組員的專題 👻 不過還是陸續學習了 HTML、CSS、jQuery、RWD、JavaScript、Bootstrap，而現在終於要回頭補上 Git 了！雖然目前用 Github Desktop 也可以完成大部分需要的動作，不過 Git 也是遲早要學會的東西，剛好最近的進度告一段落，就順便學個 Git 當作休閒放鬆一下吧。
這次要介紹如何用 AJAX 撈取資料。
此篇文章介紹陣列、物件、for 迴圈。
到了第三篇，我們要介紹運算子以及條件式，之後會進入物件與陣列，一步一步學習 JS 的基礎。
原先想將 Function 與上一篇的 let 與 const 合併在同一篇，但由於篇幅會有些過長，因此決定另外寫一篇文章介紹函式。這篇文章會介紹函式的使用方式與觀念。
這學期終於選到 JS 課程了，很期待但又怕很難哈哈。總之就整理筆記，幫忙加深印象吧，往後複習期中期末考試應該有幫助。此篇將會介紹環境安裝、型別，與 ES6 的 let、const。
過去學過 Java、C 與 Python 都沒遇過這問題，沒想到在學習 JavaScript 時會遇到三等號與雙等號的問題，滿新奇的！
自己計算元素的寬高真的很麻煩，很怕不小心漏算了 1 px，讓畫面不整齊…還好有盒模型幫我控制元素的各種寬高，使用過的都說讚，我也已經回不去了！
本文介紹作業系統「同步」的概念。
本文介紹作業系統中「排程」的基礎概念，主要是在講四種演算法 FCFS、Priority Scheduling、SJF、RR，並說明各演算法延伸出的概念。
本文介紹作業系統 Multi-programming 的概念。
Program、Process、Thread 傻傻分不清楚？本文介紹作業系統 Process 的概念。
覺得之前課堂上講的 OS 很抽象，因此打算寫個筆記複習，考試前也多少有幫助吧！本文介紹作業系統的定義以及基本概念。