macOS 環境安裝

使用 pyenv 目的是讓本地環境支援多種 Python 版本。大多的程式語言都有對應的工具如 Nodejs 的 nvm，Ruby 的 rvm，rbenv 等。

首先，參考以下的實務範例：

1
2
3
4
5
6
7
8
9
10
11

async function main() {
  const stream = await opeanai.chat.completions.create({
    model: 'gpt-4',
    messages: [
      { role: 'user', content: '測試回答' },
    ],
  });
  for await(const part of stream) {
    process.stdout.write(part.choices[0]?.delta?.content || '');
  }
}

這是一段 OpenAI Node SDK 的範例，使用 GPT-4 搭配串流的方式。

如過您希望製作像 Airbnb 那樣自訂標記的樣式，動態顯示一些資訊並且當用戶和其互動時可以渲染自訂的 React 元件，那麼您來對地方了。

本範例嘗試使用 Google 官方的 React Wrapper 函式庫實作 Google Map 功能，目標為自訂 MapOverView 達成在 Map 上加入複雜的 Marker。 例如像 Airbnb 點擊房源時可以展開。這個範例我們會支援 Marker Clustering。

完整教學與範例請參考 Github

本篇快速入門，我們將部署一個簡單容器化的 Web 應用程式到 Google Kubernetes Engine 叢集。您將學習如何建立一個叢集以及部署應用程式到叢集。

Nginx

使用者介面（UI）是由許多不同“部分”組成，而每個部分會以不同的頻率回應使用者的操作。有些例如表單的輸入欄位（<input>），需要即時回應使用者的操作，而其他像是內容很長的“篩選列表”或切換頁面則稍微慢一些。

在同步渲染的情況下，也就是沒有併發功能的 React 或者大部分的 JavaScript UI 框架/函式庫。一些回應比較慢的介面操作就會阻塞執行而拖累較快回應的部分。

React 併發功能就是為了解耦/分離回應快和慢的介面，使渲染慢的部分在背景繼續執行而不阻塞較快的部分，達到每個部分可以各自回應使用者的操作。

併發渲染並不會讓應用程式提升效率變快，只是利用上敘分離的方式讓使用起來感覺體驗變快了。

本文將探討 React 併發功能（React Concurrent），了解其解決的問題以及如何利用。

本文的核心為將 Next.js 部署至 Google Cloud Run，CI 的部分會使用 Gitlab CI，主要會依據採用不同服務分成兩種流程：

1. 在 Gitlab CI 建置 Docker Image 暫存到 Gitlab 後續部署到 Cloud Run
2. Gitlab CI 搭配 Cloud Build 部署到 Cloud Run

本文希望可以儘量補充其他教學遺失的環節，幫助您可以自行選擇想用的服務調整流程。

[toc]

雖然 ref 是一個可變更 (mutable 物件在建立後可被修改) 的容器，我們理論上可以儲存任何資料。通常我們會拿來處理存取 DOM 節點:

1
2
3

const ref = React.useRef(null);

return <input ref={ref} defaultValue='Hello world' />;

ref 是一個內建的屬性，React 會在渲染後儲存 DOM 節點，當元件卸載後也會設為 null。

Effect 是讓您可以脫離典型 React 設計模型的一個方式。它讓您可以跳脫到 React 之外並讓您的 React 元件同步外部系統，比如使用非 React 的套件，網路，瀏覽器 DOM 。假如沒有涉及外部，例如您想要在某些 props 或 state 發生變更時更新元件的 state ，那麼您不應該使用 Effect。移除不必要的 Effect 可以讓您的程式碼更容易維護，執行效率更好，減少錯誤的產生。

本文您將學習

• 為什麼以及如何移除不必要的 Effect
• 如何快取耗費效能的計算而不使用 Effect
• 如何重置和調整元件 State 而不使用 Effect
• 如何在多個事件處理函式共享邏輯
• 哪些邏輯應該移到事件處理函式中
• 如何通知上層元件狀態變更

由於專案已經陸續採用 Laravel Jetstream 並且遇到一個需求; 根據使用的類型在登入時導向不同路由。想像一個情境，您有一般使用者和管理員，而管理員擁有後台功能。通常可能會需要將管理員導向後台介面。

使用 Laravel Jetstream 或 Fortify，要實作這個功能並不直覺，特別是使用兩階段驗證。