收到網友提問如下： ``` 我不知道自己想做前或後端，怎麼辦？ ``` 其實很多人都是這樣，阿川建議「就先都學」！ 如果急著上班賺錢，可以先側重「前端」，然後找個新手友善的職缺就先衝了 因為後端的技術有很多，一開始也不知怎麼挑選 以阿川目前觀察身邊同年紀33歲左右工程師 那些很強的前端或後端，雖然有專精的部份，但其實，同時也是「全端」工程師 同時對前後端保持興趣，有很大的好處 首先，同時學習前後端，會對網路技術生態系，有更深、更廣的了解 再來，是在求職的時候，可以應徵前端的機會，也可以應徵後端的機會 以我自己本人來說，面試上班、或者接案的時候，有時會負責前端，有時會負責後端，工作機會就多很多 最後，擁有全端技能，就算都是初階經驗，也可以在業餘時間做 side-project 甚至是跟朋友一起創業當副業 總之不用一開始就強迫自己一定要選好前端或後端 迷惘、探索、好奇的狀態，本來就是人生的常態 有時間的話，就都學吧！急著賺錢的話，可以先從前端開始～！ 以上，簡單分享
本文將分為三個部分： 1. 通用設計模式 2. 我的建議 3. 進一步閱讀 享受並且讓我知道您在專案中使用的模式和實踐🚀 原文出處：https://dev.to/jacobandrewsky/good-practices-and-design-patterns-for-vue-composables-24lk ## 通用設計模式 我認為了解建置可組合項模式的最佳來源實際上是 Vue.js 文件，您可以在[此處](https://vuejs.org/guide/reusability/composables.html)查看 ### 基本可組合項 Vue 文件顯示了以下 useMouse 可組合項的示例： ``` // mouse.js import { ref, onMounted, onUnmounted } from 'vue' // by convention, composable function names start with "use" export function useMouse() { // state encapsulated and managed by the composable const x = ref(0) const y = ref(0) // a composable can update its managed state over time. function update(event) { x.value = event.pageX y.value = event.pageY } // a composable can also hook into its owner component's // lifecycle to setup and teardown side effects. onMounted(() => window.addEventListener('mousemove', update)) onUnmounted(() => window.removeEventListener('mousemove', update)) // expose managed state as return value return { x, y } } ``` 稍後可以在元件中使用它，如下所示： ``` <script setup> import { useMouse } from './mouse.js' const { x, y } = useMouse() </script> <template>Mouse position is at: {{ x }}, {{ y }}</template> ``` ### 異步可組合項 為了獲取資料，Vue 建議使用以下可組合結構： ``` import { ref, watchEffect, toValue } from 'vue' export function useFetch(url) { const data = ref(null) const error = ref(null) watchEffect(() => { // reset state before fetching.. data.value = null error.value = null // toValue() unwraps potential refs or getters fetch(toValue(url)) .then((res) => res.json()) .then((json) => (data.value = json)) .catch((err) => (error.value = err)) }) return { data, error } } ``` 然後可以在元件中使用它，如下所示： ``` <script setup> import { useFetch } from './fetch.js' const { data, error } = useFetch('...') </script> ``` ### 可組合合約 根據上面的示例，以下是所有可組合項都應遵循的約定： 1. 可組合文件名應以 use 開頭，例如 `useSomeAmazingFeature.ts` 2. 它可以接受輸入參數，這些參數可以是字串等基本類型，也可以接受 refs 和 getter，但需要使用 toValue 幫助器 3. Composable 應該返回一個 ref 值，該值可以在解構可組合項後存取，例如 `const { x, y } = useMouse()` 4. 可組合項可以保存可以在整個應用程式中存取和修改的全局狀態。 5. 可組合性可能會產生副作用，例如加入窗口事件偵聽器，但在卸載元件時應清除它們。 6. 可組合項只能在 `<script setup>` 或 `setup()` 掛鉤中呼叫。它們也應該在這些上下文中同步呼叫。在某些情況下，您還可以在生命週期掛鉤中呼叫它們，例如“onMounted()”。 7. 可組合項可以呼叫內部的其他可組合項。 8. 可組合項應在內部包裝某些邏輯，當過於復雜時，應將它們提取到單獨的可組合項中以便於測試。 ## 我的建議 我已經為我的工作專案和開源專案建置了多個可組合項 - NuxtAlgolia、NuxtCloudinary、NuxtMedusa，因此基於這些，我想根據我的經驗在上面的合同中加入一些要點。 ### 有狀態或/和純函數可組合項 在程式碼標準化的某個時刻，您可能會得出這樣的結論：您希望對可組合項中的狀態保留做出決定。 最容易測試的函數是那些不存儲任何狀態的函數（即它們是簡單的輸入/輸出函數），例如負責將字節轉換為人類可讀值的可組合函數。它接受一個值並返回一個不同的值 - 它不存儲任何狀態。 不要誤會我的意思，你不必做出“或”的決定。您可以完全保留有狀態和無狀態可組合項。但這應該是一個書面決定，以便以後更容易與他們合作 🙂 ### 可組合項的單元測試 我們希望使用 Vitest 為我們的前端應用程式實施單元測試。在後端工作時，進行單元測試程式碼覆蓋率非常有用，因為您主要關注邏輯。然而，在前端，您通常使用視覺效果。 因此，我們認為對整個元件進行單元測試可能不是最好的主意，因為我們基本上將對框架本身進行單元測試（如果按下按鈕，檢查狀態是否更改或模式是否打開）。 由於我們已將所有業務邏輯移至可組合項（基本上是 TypeScript 函數）內，因此它們很容易使用 Vitest 進行測試，並且允許我們擁有更穩定的系統。 ### 可組合項的範圍 不久前，在 VueStorefront 中，我們開發了自己的可組合方法（早在它們實際上像這樣被呼叫之前）。在我們的方法中，我們使用可組合項來映射電子商務的業務領域，如下所示： ``` const { cart, load, addItem, removeItem, remove, ... } = useCart() ``` 這種方法絕對有用，因為它允許將域包裝在一個函數中。在“useProduct”或“useCategory”等更簡單的示例中，實現和維護相對簡單。然而，正如您在此處的“useCart”示例中看到的那樣，當包裝一個包含更多邏輯而不僅僅是資料獲取的域時，這個可組合項正在發展成為一種非常難以開發和維護的形狀。 此時，我開始為 Nuxt 生態系統做出貢獻，其中引入了不同的方法。在這種新方法中，每個可組合項僅負責一件事。因此，我們的想法不是建置一個巨大的“useCart”可組合項，而是為每個功能建置可組合項，即“useAddToCart”、“useFetchCart”、“useRemovefromCart”等。 因此，維護和測試這些可組合項應該更容易 🙂 ## 進一步閱讀 這將是我的研究的全部內容。如果您想了解有關此主題的更多訊息，請務必查看以下文章： * https://vuejs.org/guide/reusability/composables.html * https://www.youtube.com/watch?v=bcZM3EogPJE * https://vueschool.io/articles/vuejs-tutorials/what-is-a-vue-js-composable/ * https://blog.logrocket.com/getting-started-vue-composables/ * https://macopedia.com/blog/news/how-can-vue-3-composables-make-your-life-easier
人工智能遍地開花，隨處可見一些新的人工智能工具。在 [ChatGPT](https://openai.com/blog/chatgpt)、[AutoGPT](https://autogpt.net/)、[Midjourney](https://www.midjourney.com/home/) 之間， [Dall-E](https://openai.com/dall-e-2) 和 [GitHub Copilot](https://github.com/features/copilot)，您可以建置、編碼、獲取答案，以及創造美麗的藝術品……至少我們中的一些人可以。 為什麼有些人在使用生成式 AI 時比其他人獲得更好的結果？為什麼有些人製作的藝術品配得上盧浮宮，而另一些人卻得到了接近狗屁的東西？ 這一切都取決於您使用的輸入。此輸入稱為“提示”。提示是您提出的問題，或者您用來建立內容的詞語。那些“製作”提示或對輸入有策略的人將其稱為“提示工程”。 原文出處：https://dev.to/github/prompt-engineering-for-ai-what-is-prompt-engineering-and-how-to-get-good-results-from-ai-engines-5ch6 ## 什麼是提示工程？ 提示工程是指專門設計提示，以便從 AI 獲得更好的結果。 [OpenAI](https://openai.com/)、[Google](https://bard.google.com/) 等人工智能係統的建立者甚至聘請“快速工程師”來幫助訓練他們的模型。一些“創作者”甚至在 Etsy 等平台上出售他們的 Midjourney 提示。 簡而言之，人工智能系統就像資料：輸入垃圾，輸出垃圾。如果輸入錯誤，可能會得到錯誤的結果。提示工程在很大程度上受上下文影響。 ## 人工智能的背景 當涉及到我們得到的結果時，上下文是最大的問題之一。例如，如果我用谷歌搜尋“donut”（或“doughnut”:doughnut:），我可以獲得一整套結果；從甜甜圈食譜到甜甜圈圖片，或者在哪裡可以買到這種美味的甜點。這是因為我沒有給搜尋引擎任何其他上下文。當然，Google 會使用我之前的搜尋歷史記錄和我的位置等訊息來幫助確定結果，但僅此而已。  _搜尋引擎中的術語“甜甜圈”可以指任何形狀、Slack 插件、應用程式，或者 GitHub Universe 2022 上提供的這些美味的 GitHub 甜甜圈_ 例如，如果我想找到一個關於在 Blender 中建立甜甜圈 3D 模型的教程，那麼如果我只輸入“甜甜圈”，搜尋結果可能不會顯示。我需要更具體。諸如“甜甜圈 Blender3D 教程”之類的東西會為我提供更準確的結果。 人工智能也是如此。您需要為 AI 提供足夠的上下文，以便根據您的需要獲得更好的結果。 ## 聊天應用的提示工程 許多人向我們展示了來自 ChatGPT 的一些瘋狂結果。雖然它們並不總是準確的，但 ChatGPT 確實擅長一件事：散文。寫出優美、結構合理、流暢的句子真是令人難以置信。結果很容易閱讀，聽起來真的很棒。但獲得準確的回應完全是另一回事。例如，人們厭倦了使用 ChatGPT 撰寫歷史文章，雖然文章可能讀起來不錯，但在歷史上可能並不准確。比如你讓ChatGPT“寫一篇關於中國的淪陷的2000字的文章”，它就會給你寫一篇關於中國的淪陷的2000字的文章。但它不一定是事實正確的。  _雖然某些內容可能讀起來不錯，但實際上可能不正確。提示：我沒有博士學位_ :wink: 這是因為 ChatGPT 從各種來源獲取訊息並將它們融合在一起。這些來源本身可能並不准確。 ChatGPT 也不知道您指的是中國的_哪個_秋天。因此它很容易錯誤地交叉引用日期。通過以對話方式向 ChatGPT 提供訊息，然後要求它寫一篇 2000 字的文章，您將獲得更好的結果。 那到底是什麼意思？有些人認為 ChatGPT 是一種單向的、對話式的、單一輸入的獲取訊息的方法。但事實並非如此。它被稱為“聊天”是有原因的。進行對話，完善您的問題，為您的回答提供背景訊息。 例如，如果我想要一段關於“NDC 會議”的旅行報告，我不會以“給我寫一段 NDC 旅行報告”來開始我的 ChatGPT。相反，我會首先弄清楚 ChatGPT 對 NDC 了解多少，並在此過程中提供上下文。您提供的輸入在很大程度上決定了輸出。這就是為什麼有些人能夠獲得非常好的結果，而其他人則不能。  _沒有任何上下文，ChatGPT 不知道我指的是什麼 NDC_ 另一個例子：如果你要去參加工作面試，你想要一些提示，讓 ChatGPT“給我一些準備工作面試的提示”，會給你一些很好的回應，但它遠非具體。相反，諸如“我要去一家 AI 初創公司面試軟體開發人員的職位。你能給我一些準備面試的提示嗎？”將為您提供更加量身定制的個性化結果。這就好比你讓台上的專家給觀眾中的 1000 個人一個答案，他們可能會提供一些通用的東西，這樣每個人都有一個外賣訊息。但如果你一對一地問同一個人，他們可能會問你一些後續問題以了解你的情況，因此會提供更個性化、更具體的答案。 ## 藝術應用的提示工程 您可能已經看到一些人使用穩定的傳播應用程式創作的一些精美藝術品。然後是看起來“錯誤”的藝術品。其中很多都歸結為上下文。例如，如果我使用 [Night Café](https://nightcafe.studio/)（我最喜歡的生成器之一），然後輸入“dog”這個詞，這就是我得到的：  _使用 Night Café 生成的圖像，以及提示符“dog”_ 有一些隨機的“狗”字寫成一個標誌，前景中有一隻看起來很奇怪的狗，而且它的顏色非常奇怪。現在，如果我想像成年德國牧羊犬在陽光明媚的日子裡在公園裡的照片般的圖像，那可能不是我要得到的。人工智能沒有那種背景。它無法讀懂我的想法（還沒有！）。當你想創作藝術品時，你需要描述你在腦海中想像的圖像。您提供的細節越多，輸出就越好。這就是它變得棘手的地方。許多穩定的擴散應用程式都有有限的字符數。因此，您需要對如何製作提示具有意義和戰略性。 與 ChatGPT 類似，您需要不斷地重新製作提示並完善它們。然而，基於聊天的 AI 的優勢在於，您可以繼續對話並不斷向 AI 提供更多訊息和不同的問題，以獲得良好的回應。雖然一些藝術生成器允許您“重新混合”您的輸出，但它仍然依賴於新的提示。因此，您一直在等待輸出，查看未加入的內容，然後發送經過調整的新提示。一些用戶在 Midjourney 上花費數小時，接收輸出並重新製作他們的提示以產生一些驚人的作品。這都是練習的問題。這就是為什麼一些創作者在 Etsy 上出售他們的提示！  _我的朋友 Jean 使用 Midjourney 製作的藝術品_ 有一件事是肯定的，如果你想製作一些高質量的藝術品，不要指望花幾秒鐘寫一個提示，點擊“建立”按鈕然後看到莫內。沒有！相反，您需要投入時間（和金錢）來創作數百件藝術品，在每次迭代中重新處理您的提示以製作您的傑作。 ## 提示工程程式碼 我不會花大量時間談論如何為 [GitHub Copilot](https://github.com/features/copilot) 之類的東西製作好的提示。我的同事 [Rizel](https://twitter.com/blackgirlbytes/) 寫了一篇精彩的博文，深入探討了 GitHub Copilot 的提示工程： https://dev.to/github/a-beginners-guide-to-prompt-engineering-with-github-copilot-3ibp 我要說的是——類似於 ChatGPT——GitHub Copilot 依賴於上下文。存儲庫中還編寫了哪些其他程式碼？文件的擴展名（以及語言）是什麼？ GitHub Copilot 還為您打造了什麼？您在程式碼中加入了哪些註釋？所有這些都將幫助 GitHub Copilot 為您合成更準確的程式碼。 可以這樣想：如果您寫了一條評論，說明您想要建立一個使用後端資料並解決特定問題的複雜函數，那麼您可能不會僅僅通過一條評論就得到很好的回應。就像你的程式碼——至少它應該是——被分解成許多函數，（希望）有很多有用的評論，當你分解東西時，GitHub Copilot 工作得更好。 而不是要求 GitHub Copilot： `//反轉句子`（使用 JavaScript） 想想如何從邏輯上分解問題。例如，如果有人給我一張紙，上面寫著一句話，讓我把它倒過來，我會怎麼做？像這樣寫評論會更有益。如果您這樣做，GitHub Copilot 將擁有更多的上下文並更好地理解您想要什麼。 與 ChatGPT 之類的東西相比，GitHub Copilot 的另一個區別是 GitHub Copilot 考慮了你擁有的_所有_上下文。我上面提到的所有事情： - 什麼是文件擴展名 - 專案中還有哪些其他文件 - 你是怎麼寫其他評論的 - 其他程式碼是如何建置的 - 您輸入的評論是什麼 - 您輸入的程式碼是什麼 ChatGPT 和其他聊天應用程式會更加重視您對聊天所做的最後評論； 也就是，您加入到對話中的最後一條訊息。但是，GitHub Copilot 始終會考慮上下文以生成更好的程式碼結果。 ## 更好的提示工程 歸根結底，從任何類型的生成式 AI 中獲得好的結果都在你身上——你提供輸入的人。正如我一開始所說：垃圾進，垃圾出。因此，在製作提示時請考慮以下重要提示： - 提供良好的**上下文**；提供有關您要實現的目標的示例和訊息 - 請明確點**;如果它是針對特定觀眾的，那麼就說 - **分解**問題 - **清楚**你如何提問。如果返回的內容聽起來不對，請澄清 - 根據您的提示**改寫**和**精煉** 最後，始終，始終驗證您從 AI 收到的訊息。對於藝術品生成器而言，這不太重要，但如果您查看程式碼和訊息，它就很重要。檢查您收到的程式碼是否按照您的預期工作。驗證提供給您的書面訊息的準確性。 請記住，無論發生什麼，您仍然是飛行員。您仍然是負責人，您對使用和共享哪些藝術作品、哪些程式碼片段以及哪些訊息有最終決定權。
開源對很多事情都非常有用。其中之一是學習新技能。在本文中，我們將介紹 GitHub 上一些最好的開源 React 專案，您可以使用它們來快速提升您的 React 技能。 原文出處：https://dev.to/livecycle/top-github-repositories-to-learn-modern-react-development-5d3h ## 你可以學習的開源 React 專案  ## Cal.com  [https://github.com/calcom/cal.com](https://github.com/calcom/cal.com) Cal.com 將自己標榜為“絕對適合所有人的日程安排基礎設施”。他們是 Calendly 等預約安排服務的競爭對手。他們同時提供託管和自託管產品。它是一個全棧 Next.js 應用程式，它依賴 tRPC 進行類型安全的客戶端到伺服器通信。該存儲庫具有相當廣泛的 Monorepo 設置（使用 Turborepo），可將應用程式拆分為多個包。在樣式方面，Cal.com 使用 TailwindCSS 和無頭 Radix 元件。存儲庫非常活躍，他們積極鼓勵貢獻者。許多問題被標記為“良好的第一期”和“需要幫助”。 ## Taxonomy  [https://github.com/shadcn/taxonomy](https://github.com/shadcn/taxonomy) 這個有點不同。它由單個開發人員建置，作為探索新的 Next.js 13 App Router 功能的演示。但是不要讓那個愚弄你。它可以說是使用新 App Router 的最全面的開源應用程式之一。因此，即使對於想要學習如何在生產中使用 App Router 的經驗豐富的 React 開發人員來說，這也是一個很好的資源。 除了用於前端和後端的 Next.js 之外，Taxonomy 使用 NextAuth 進行身份驗證，使用 Prisma 作為 ORM，使用帶有 Radix 的 TailwindCSS 進行樣式設置。特別有趣的是 Stripe 訂閱集成。因此，如果您想了解如何將訂閱集成到您的應用程式中，這就是適合您的存儲庫。 ## Highstorm  [https://github.com/chronark/highstorm](https://github.com/chronark/highstorm) Highstorm 是這個街區的新玩家。它是一種監視應用程式中發生的事件的服務。您通過他們的 API 提交事件，然後將其輸入 Highstorm 儀表板。再次重申，這是一個基於 Next.js 的專案。它使用 Tinybird 作為分析資料的資料庫，並使用 Clerk 進行身份驗證。如果您想學習如何處理大量分析資料並將它們顯示在精美的圖表中，那麼這個專案很棒。 ## Dub.sh  [https://github.com/steven-tey/dub](https://github.com/steven-tey/dub) Dub.sh 大約在一年前作為開源連結縮短器推出。它是 Bitly 等服務的替代品。它也是基於 Next.js 並結合使用舊頁面和新 App 路由器。它通常是最早採用 Next.js 新功能（例如元資料 API）的專案之一。 該存儲庫是了解多租戶 Next 應用程式的好地方。這些是為不同域下的不同用戶提供服務的應用程式。在 Dub.sh 的情況下，用戶可以加入自己的域以在其下建立縮短的連結。該應用程式的設計也很精美，整個網站上都有許多令人愉悅的動畫。 Framer Motion 庫用於幫助解決此問題。 ## Bulletproof React  [https://github.com/alan2207/bulletproof-react](https://github.com/alan2207/bulletproof-react) Bulletproof React 與我們目前介紹的其他專案不同。該存儲庫確實包含一個功能齊全的演示 React 應用程式。但最大的價值來自閱讀此應用程式附帶的綜合文件。本文件列出了設計大型 React 應用程式各個方面的最佳實踐。這是一個很好的資源，可以定期參考以刷新您對最佳實踐的記憶。 ## 總結和開始 正如我們所見，上述每個存儲庫都提供了一個獨特的視角來了解大型 React 應用程式是如何建置的。每個人都可以從研究存儲庫的程式碼中獲益，無論您有多有經驗。 開始從存儲庫中學習的一個很好的實用技巧是提出一個特定的問題。例如，您可能會問“Taxonomy 如何處理 Stripe 訂閱？”之類的問題。然後挖掘程式碼層以找到問題的答案。 最後一點——探索開源存儲庫是提升 React 技能的好方法，但這不是您唯一應該做的事情。將您新獲得的知識應用到您自己的專案中也很重要。這就是您鞏固新技能和保留訊息的方式。 最主要的是享受這個過程，並認識到開源是培養新技能的友好場所，無論您目前的經驗水平如何。
公司開始丟一些專案給我，主要都是修改樣式 聽起來還好，不會太困難，結果打開專案檔案是PHP檔，之前被沒有碰過PHP的部分，所以有點不習慣 專案中可能每個時期是不同人修改的，出現了CSS權種問題，加上PM時間上急需，改起來真的困難 找檔案這部分也是很困難，都翻西找用搜尋還未必能找到(公司有新舊公版和客制化的版) 問公司前輩說目前前後端分離只佔百分之五十，剛好我遇到的都是沒有分離 另外還有多人開發時git問題，一直很怕當雷隊友，把別人的檔案覆蓋過去，結果組長說我太緊張了，叫我放輕鬆不要那麼焦慮XD
大家好，我從站長的Dcard貼文中知道這個論壇的。 希望能夠在這裡跟大家一起學習成長。 我有一些問題想請問大家，我是資工畢業的，目前待業中，退伍後決定要朝後端發展，但是因為大學專題及所學都跟後端無關，因此退伍後一直自學到現在(一個月），下面是我建立的網站。 https://paulzhu.netlify.app/ 目前學的有html,css,javascript,git,node.js,express.js 大學專題是深度學習結合APP做掌紋辨識 想請問大家後端該學到什麼樣子的程度，才能夠求職。 謝謝各位抽空觀看這篇文章。
如站長所說，工作上一切都好混亂 光是設定開發環境就耗掉兩天，不知道為什麼很不順利，我根本薪水小偷٩(◦`꒳´◦)۶ 還有要找MIS幫我設定權限等等問題，聽到一些不是很熟悉的名詞 例如：GCP、遠傳、SFTP、SSH KEY 然後git 部分還多知道了git submodule這個關鍵字，有空要研究一下是什麼 因爲公司的同事前輩忙，沒空理我只好東翻西翻看前人寫的code，不得不說真的複雜 有些沒有前後端分離，也看不懂PHP，光是改個CSS小小的樣式就有點困難，因為找不到引入外部資源的CSS檔 回家繼續研究vue cli的部分
我後端是用 php + laravel 我會開始轉貼一些 php 的技術文章～大部份是我以前寫的文章 未來也考慮推出 php 自學教材～ 評估中～
簡單複習一下，在這次的課程中，我們學會了 - 寫 node 程式 - 讀取、寫入檔案 - 匯入、匯出模組 - 從終端機輸入、輸出訊息 - NPM 套件管理工具 - 非同步語法、同步語法 是不是很有趣呢？ --- 補充一點，我在課程中多次提到非同步程式設計很多餘，其實不太精準 拿 node 寫 CLI 當然會覺得非同步程式設計很多餘，那是因為 node 設計的初衷是拿來寫網站後端！ 相比於其他像是 php 或 python 語言，js/node 非同步的設計會讓網站後端的效能比較強大！ 詳細原因可以先不用知道，有興趣再自己去研究一下即可！ --- 再補充一點，隨著 js 與 node 的發展 套件匯入匯出的語法，有時會看到 `require` 的寫法，有時會看到 `import` 的寫法 用 `import` 寫法有一些額外設定＆調整要弄 我是為了教學方便，才使用 `require` 的寫法，現在主流都改用 `import` 寫法了！ 實務上，就以 `import` 寫法為主吧！ 不過，反正就是模組管理而已，你就看情況，隨便哪一種寫法都可以，程式能解決問題最重要！ --- 這次的課程內容，完全不需要打開瀏覽器，沒有任何程式是在 `瀏覽器 js 環境` 執行的喔！ 都是從 `終端機` 直接要求 `node 主程式` 來執行！ --- 坊間的 Node 課程，大多是從「web 後端程式設計」開始教起 雖然也不錯，但是需要一開始就碰 node 的 `http` 模組，或是 `express` 模組 從前端開始認識 javascript 的學習者，常常會在這地方有點「腦袋打結」 分不清 `瀏覽器 js 環境` 以及 `node 環境` 的差別 也分不清為何 `node_modules` 的內容一下是在瀏覽器上出現，一下是在伺服器端出現 所以，我決定退一步來教，我們先學老派的 CLI 應用程式開發 這樣，過程中跟 `網站` `瀏覽器` `web 伺服器` 完全沒關係，你就可以先抓到純粹 node 寫程式的感覺！ 古早年代，所有程式都是 CLI 程式，文書處理、作業系統、連電腦遊戲都是 CLI 時至今日，CLI 應用程式看似老派，但依然是開發人員最重要的操作 UI 之一！所以值得學一下！ 但我們學一點就好了，不用深入鑽研 CLI 程式的開發技巧，這只是替後面 node 的進階應用、以及後端開發學習鋪路而已！ --- 消化、研究完本課程之後，請接著前往下一份教材，繼續邁向資深之路吧！ https://codelove.tw/@howtomakeaturn/course/bap2xj
## 課程目標 - 學習 node 匯入/匯出模組 ## 課程內容 教大家怎麼把多個程式組裝起來，變成一個強大的主程式 順便學習 node 裡面自訂模組，匯出、匯入的語法！ --- 建立 `task1.js` 放入以下內容 ``` function task1() { console.log('====== start ======') console.log('this is task 1'); console.log('====== finish ======') } module.exports = { task1: task1 }; ``` 建立 `task2.js` 放入以下內容 ``` function task2() { console.log('====== start ======') console.log('this is task 2'); console.log('====== finish ======') } module.exports = { task2: task2 }; ``` 建立 `task3.js` 放入以下內容 ``` function task3() { console.log('====== start ======') console.log('this is task 3'); console.log('====== finish ======') } module.exports = { task3: task3 }; ``` --- 在 node 中，要匯出模組時，只要使用全域變數 `module` 物件的屬性 `exports` 即可，這樣 node 就知道怎麼處理了 我們設計這些 `task` 程式，不再是直接拿來執行的腳本，而是提供特定功能的模組，所以記得把要匯出的任務寫在函式裡面 --- 接著來寫主程式，通常會命名為 index 或 main 我們就建立 `main.js` 吧，放入以下內容 ``` const readlineSync = require('readline-sync'); var module1 = require('./task1'); var module2 = require('./task2'); var module3 = require('./task3'); function showMenu() { const answer = readlineSync.question('您要執行什麼？\n1. 任務1\n2. 任務2\n3. 任務3\n4. 離開\n'); if (answer === '1') { module1.task1(); showMenu(); } else if (answer === '2') { module2.task2(); showMenu(); } else if (answer === '3') { module3.task3(); showMenu(); } else if (answer === '4') { process.exit(); } else { showMenu(); } } showMenu(); ``` 注意看 `require('./task1')` 那個 `.` 是當前檔案路徑的意思，當 require 看到檔案路徑，就會去從檔案路徑匯入模組 如果看起來不是檔案路徑，而是純粹模組名稱 `require('readline-sync')` 那麼 node 就會從 node_modules 資料夾尋找模組 去終端機輸入 ``` node main.js ``` 很好玩吧！這已經很接近實務上會操作的 CLI 應用程式了！ ## 課後作業 接續前一課的作業，現在來把之前的多個檔案，打包成一個程式吧！ 請將之前的多的程式改寫，讓內容能夠匯出 接著建立一個 `index.js` 檔案，匯入上面提到的所有函式 使用者輸入 `node index.js` 之後，終端機會詢問 ``` 您要執行下列什麼指令？ 1. 建立待辦事項 2. 讀取待辦事項 3. 更新待辦事項 4. 刪除待辦事項 5. 離開 ``` 使用者可以輸入數字，程式會分別去執行任務，也就是呼叫前面匯入的對應函式 完成以上任務，你就完成這次的課程目標了！
## 課程目標 - 替 CLI 應用程式加上顏色 ## 課程內容 這一課來做有趣的任務吧！很花俏的那種！ 我們來替終端機的文字，加上顏色吧！ 看一下這個套件的介紹 https://www.npmjs.com/package/colors 請先輸入指令安裝 ``` npm install colors ``` 安裝之後，記得觀察一下 `package.json` 與 `node_modules` 內容的變化喔！ --- 建立 `try-colors.js` 程式，裡面輸入 ``` var colors = require('colors'); console.log(colors.green('hello')); console.log(colors.red.underline('i like cake and pies')) console.log(colors.inverse('inverse the color')); console.log(colors.rainbow('OMG Rainbows!')); console.log(colors.trap('Run the trap')); ``` 然後去終端機輸入 ``` node try-colors.js ``` 你會看到終端機出現，花俏、華麗的顏色文字！ 更多用法可以參閱套件介紹 https://github.com/Marak/colors.js ## 課後作業 接續前一課的作業，現在來替我們的 CLI 應用程式，加上顏色！ --- 請打開之前的所有檔案 目前這些程式，終端機訊息全都是預設的白色文字 請把這些訊息的文字顏色改變！ 不用通通改變，改一部份，讓程式看起來更清楚即可 可以使用這款套件 完成以上任務，你就完成這次的課程目標了！
## 課程目標 - 繼續練習 node 輸入輸出、檔案處理 ## 課程內容 現在你已經會從終端機輸入、輸出訊息，以及讀取、寫入檔案囉 同時，你也知道非同步、同步的語法，分別怎麼寫了 這一課，讓我們用兩個作業，進一步練習上述技能吧！ ## 課後作業 接續前一課的作業，現在來寫「刪除」、「更新」功能 --- 請建立一個 `delete.js` 檔案 使用者輸入 `node delete.js` 之後，終端機會詢問 ``` 您要刪除哪個待辦事項？ #0 去操場跑步 #1 去市場採購 #2 找朋友吃飯 ``` 使用者可以輸入數字，接著終端機會顯示 ``` 刪除事項：XXXXXX ``` 打開 `todos.json` 查看，會看到剛剛刪除的項目，不見了 --- 請建立一個 `update.js` 檔案 使用者輸入 `node update.js` 之後，終端機會詢問 ``` 您要更新哪個待辦事項？ #0 去操場跑步 #1 去市場採購 #2 找朋友吃飯 ``` 使用者可以輸入數字，接著終端機會顯示 ``` 您想把內容更新成什麼？ ``` 使用者可以輸入內容，接著終端機會顯示 ``` 更新事項：XXXXXX ``` 打開 `todos.json` 查看，會看到修改的項目，內容有更新 --- 完成以上任務，你就完成這次的課程目標了！
## 課程目標 - 把 node 非同步設計改寫為同步設計 ## 課程內容 前面我說過，node 有些地方的寫法設計，看起來很怪、很醜 在瀏覽器 js 環境，我們的確不知道用戶何時會點擊按鈕、不知道 AJAX 回應何時會拿到 不能讓網頁整個停下來卡住、等待上述事件發生，所以必須用「非同步程式設計」處理 可是檔案系統模組，絕大多數情況下，你就是要現在就讀取好檔案、讀取完才讓程式接著繼續跑，才有意義 實在沒必要用「非同步程式設計」處理！ 取得用戶輸入就更不用說了，程式就是該停在這裡、等用戶輸入完再接著繼續執行，才有意義 何必用「非同步程式設計」處理！ 其他程式語言，大多都是「同步程式設計」，例如用 Python 寫同樣程式時 就是一行一行寫下來即可，不用像這邊這樣把函式當參數傳進去 簡單講，javascript 的非同步設計，在網頁畫面上運作時，有其優勢與必要 但是在用來寫腳本時，顯得多餘而不必要 --- 來學習怎麼改寫吧，打開 `read-my-name.js`，改寫成以下內容 ``` var fs = require('fs'); var data = fs.readFileSync('my-name.txt'); console.log("您好，" + data); process.exit(0); ``` 執行看看！ ``` node read-my-name.js ``` 跑起來一模一樣，但是不是好讀多了？ 注意 `fs.readFileSync` 後面的 sync，那就是同步的意思 --- 接著來改寫第二個程式吧，打開 `write-my-name.js`，改寫成以下內容 ``` var fs = require('fs'); const readlineSync = require('readline-sync'); var answer = readlineSync.question('請問您的大名？\n'); fs.writeFileSync('my-name.txt', answer); console.log('儲存成功。'); process.exit(0); ``` 是不是好讀多了？ 新函式名稱，就是後面加上 sync 而已，node 官方知道大家的抱怨，所以有提供這些同步函式 但是，這段 code 不能直接執行，因為 `readline-sync` 不是官方內建模組，是社群開發的，需要透過 npm 安裝 怎麼辦？ --- NPM 全稱為 Node Package Manager，也就是 Node 套件管理工具 關於 npm 的安裝，網路上有非常多教學，請根據你的作業系統，自己找一套安裝方法 安裝好之後，你就可以使用「終端機」運行 npm 指令 --- 請在終端機輸入 `npm install readline-sync` 即可安裝 `readline-sync` 套件 會多出兩個檔案 `package-lock.json` `package.json` 用來記錄目前專案用到的 npm 套件，你可以打開這兩個檔案看一看 還會多出一個資料夾 `node_modules`，套件本身會下載到這個地方，你可以打開資料夾逛一逛 接著執行看看！ ``` node write-my-name.js ``` 跑起來一模一樣，但是好讀多了！ ## 課後作業 接續前一課的作業，現在來嘗試「同步」的語法 請把「非同步」的語法改寫，通通改用「同步」的語法 改完之後，程式碼中，應該就不會出現 callback function 了 也就是不會出現「把一段函式定義當作參數傳進另一個函式」這種情況 完成以上任務，你就完成這次的課程目標了！
## 課程目標 - 用 node 寫入檔案內容 ## 課程內容 來學習一下用 node 寫入檔案的方法 學會這方法，可以用 node 寫腳本處理工作上的文書瑣事 --- 建立 `write-my-name.js` 程式，裡面輸入 ``` var fs = require('fs'); const readline = require('readline').createInterface({ input: process.stdin, output: process.stdout }); readline.question('請問您的大名？\n', function (answer) { fs.writeFile('my-name.txt', answer, function (err) { console.log('儲存成功。'); process.exit(0); }); }); ``` 然後去終端機輸入 ``` node write-my-name.js ``` 你會看到終端機要求你輸入內容，接著會去更新文字檔內容！ --- 第一段的 `readline` 模組，是處理 `輸入/輸出` 資訊的模組，後面要呼叫 `createInterface` 並且用全域變數 `process` 來設定輸入、輸出來源 照做就好，背後意義不用細究，能用就好，有興趣自行 google `readline.question` 從終端機請求用戶輸入內容，`\n` 是換行字元，讓畫面更好看而已 注意 `readline.question` 後面還是把函式當參數傳，也就是依然採用「非同步程式設計」 很怪、很醜，對嗎？我同意，這語法設計實在意義不明 又不是在等待 AJAX 回應的同時，用戶可以先做別的事情 這邊就是要等用戶輸入完內容，程式往下走才有意義呀！ 後面會教你如何改寫成「同步程式設計」，先照做就好 ## 課後作業 接續前一課的作業，現在來寫「新增」功能 請建立一個 `create.js` 檔案 使用者輸入 `node create.js` 之後，終端機會詢問 ``` 您要新增什麼待辦事項？ ``` 使用者可以輸入內容，接著終端機會顯示 ``` 新增事項：XXXXXX ``` 打開 `todos.json` 查看，會看到剛剛輸入的項目出現在裡面 完成以上任務，你就完成這次的課程目標了！
## 課程目標 - 用 node 讀取檔案內容 ## 課程內容 來學習一下用 node 讀取檔案的方法 學會這方法，可以用 node 寫出簡易的檔案內容分析程式 --- 建立一個 `my-name.txt` 文字檔，在裡面輸入你的名字 然後建立 `read-my-name.js` 程式，裡面輸入 ``` var fs = require('fs'); fs.readFile('my-name.txt', function(err, data) { console.log("您好，" + data); process.exit(0); }); ``` 然後去終端機輸入 ``` node read-my-name.js ``` 你會看到一段打招呼的訊息！ --- 讓我們逐行說明一下 ``` var fs = require('fs'); ``` 這是載入「檔案系統模組」的意思，`fs` 是 `file system` 的縮寫 `readFile` 函式，第一個參數是檔案名稱，第二個參數是「一個函式定義」 看起來有點怪，其實是「非同步程式設計」的關係 之前在學網頁元素的事件處理時，就是用「非同步」程式設計處理 也就是我不確定「點擊」事件何時會發生，但我先「綁定」好事件發生時要做的任務 還有在網頁呼叫 AJAX 時也是，我不確定「主機回應」何時會拿到，但我先「綁定」好拿到之後要做的任務 這邊 `fs` 的意思就是：我不確定何時會「檔案讀取完畢」，但我先「綁定」好讀取完畢之後，要做的任務 看起來很怪、很醜，這種設計的意義不明，對嗎？我也覺得！後面會教你如何改寫成「同步程式設計」，先照做就好 -- `console.log` 是印出訊息到終端機（語法就跟在瀏覽器環境一樣！） `process.exit(0);` 是結束程式的意思。那個 `process` 是代表當前 node 程式的全域變數 --- 在瀏覽器裡面，無法去操作「檔案系統模組」，否則也太可怕，每個人上網時，都能用 js 亂改電腦上的檔案，資安大問題！ 在瀏覽器裡面，也沒有 `process` 這個全域變數 用 node 跑完這段程式，你應該會發現，這段程式拿到網頁環境，是無法執行的！ 在瀏覽器、node 跑 js 程式，有很多相似，也有很多相異之處，希望你慢慢抓到兩者的感覺！ ## 課後作業 讓我們嘗試開發一個 CLI 版本的待辦管理工具 請建立一個檔案 `todos.json` 並放入以下內容 ``` [ { "title": "去操場跑步" }, { "title": "去市場採購" }, { "title": "找朋友吃飯" } ] ``` 然後建立一個 `read.js` 檔案 使用者輸入 `node read.js` 之後，終端機會去讀取 `todos.json` 並且顯示 ``` 您的待辦事項： #0 去操場跑步 #1 去市場採購 #2 找朋友吃飯 ``` 完成以上任務，你就完成這次的課程目標了！ --- 交作業的方法： **方法一** 直接截圖視窗內容，上傳到留言區 **方法二** 開一個新資料夾，用 git 初始化這個資料夾 接下來的作業，都放在這個資料夾，然後上傳 github 然後把 github 專案連結，貼到留言區即可
## 課程目標 - 安裝 node 環境 ## 課程內容 `Node.js` 業界通常簡稱為 `node` 關於 node 的基本安裝，網路上有非常多教學，請根據你的作業系統，自己找一套安裝方法 安裝好之後，你就可以使用「終端機」運行 node 程式 如果你是找到用 GUI（圖形化介面）來運行 node 程式的安裝方法，也沒關係 能跑 node 就可以了！ --- 這系列的課程，通通跟瀏覽器無關、跟網站無關 也就是讀每一課的內容、寫作業時，都不需要打開瀏覽器 我希望讓你體驗一下寫 CLI app 的感覺 平常逛網站跑 javascript 都是透過「瀏覽器內建的 javascript 引擎」在執行 javascript 程式 這系列的課程，不透過瀏覽器，而是用電腦裡安裝的 node 主程式來執行 javascript 讓你習慣一下，脫離瀏覽器環境之外，寫程式是什麼感覺 ## 課後作業 請打開終端機，輸入 ``` node -v ``` 你應該會看到 node 回報版本號碼 完成以上任務，你就完成這次的課程目標了！ --- 交作業的方法： 可以把顯示的文字內容複製，貼到留言區 也可以直接截圖視窗內容，上傳到留言區
身為網站工程師，對於 JavaScript 在 `瀏覽器還境` vs `Node.js 環境` 的關係，通常有點困惑 我認為單獨教一下 Node.js 開發，對於前端工程師的能力會有很大幫助！ 坊間要教 Node.js 通常會教「網頁後端程式設計」，這種教法當然沒問題 不過，我找到了一個更好吸收的教學法，就是從「命令列程式設計」開始教起！嘿嘿！ 命令列英文是 Command Line Interface，我們通常簡短稱呼為 CLI CLI 程式就是那種打開一個全黑的視窗，用戶需要手動打字，然後視窗又會跳出一堆字的程式 聽起來像是 40 年前人們使用電腦的方式，感覺是老派過氣的東西，對嗎？ 其實大錯特錯！ 工程師在 ssh 遠端處理主機的設定時，幾乎都還是操作透過 CLI 操作 使用 Linux 系列電腦的朋友（例如 Ubuntu 作業系統），日常中也會大量使用 CLI 即便是前端工程師，在開發過程，還是有大量的情況要使用 CLI，例如 NPM 相關指令通通會用到 --- 其實，CLI 是電腦程式最原始的 UI 介面！ Windows 電腦是一種 UI、網頁是一種 UI、手機是一種 UI 工程師在開發工具給別的工程師使用時，很常會懶得設計 UI 比如我寫了一個很強的檔案壓縮程式、或是硬碟清理程式，核心演算法寫完，我就想發佈給大家用了 我幹嘛還要花時間去寫一個漂亮、五顏六色、有按鈕的 UI？程式就用 CLI 操作就可以了，反正用戶都是工程師 --- 因為 CLI 是最原始的 UI，我認為教你寫一些 CLI 應用程式，對於 Node.js 會有極大的幫助 別擔心，這門課非常簡單，也非常好玩，也會讓你知道 Node.js 拿來寫 CLI 是什麼感覺 雖然這年頭市面上沒有人會去教 CLI 程式開發了，不過我保證你會獲益良多，還能讓之後學 Node.js 網頁後端開發，吸收得更好 嘿嘿，讓我們馬上開始吧！
最近看到滿多年輕學生、考慮轉職者提問：未來 ChatGPT 會取代軟體工程師嗎？ 看來這個議題已經造成不少 IT 領域學生的焦慮，我非常驚訝，讓我簡單談論一下這件事 # 個人經驗回顧 我在畢業前全心學習 web 前端與後端開發，2012 年畢業時，正逢智慧型手機快速發展，所有公司都在思考如何開發手機 app 來創造新機會，當時媒體的主要論述是：「web 已死！web 工程師都將失業，未來是 mobile app 的世界！」 當時年輕的我，看到這些媒體這樣分析，也是有點焦慮，但同時又有點不服氣，所以依然 100% 心思在研究 web 開發，不管媒體怎麼看衰。現在，10 年過去了，請問 web 職缺消失了嗎？ # 媒體的習慣、網紅 YTer 的習慣 想像你住在一個非常小的島嶼國家上，往外走一下就看到海，國家全年365天基本沒什麼大事，每天就是太陽升起、太陽落下。如果你是島上的「新聞從業人員」，請問你每天能做什麼？你當然只能誇大你看到的每件事情。 看到海水漲潮，發新聞：「海水異常上漲！恐有釀禍危機！全國一半人口恐有水災、死亡風險！」 看到海水退潮，發新聞：「近三年最低點！海水不斷消退、國家水資源流失、重大警訊！我國恐成大型沙漠！」 世界上大多數事情本就「帶有波動性」，一下狀況好一下狀況壞，潮起又潮落，正如月有陰晴圓缺，這相當正常。 媒體、網紅，基本上需要吸引人們關注來過活，他總不能每天發新聞：「今天海水正常漲潮，沒什麼特別的。」、「今天海水退潮了，這很自然，不太重要。」 身為現代公民，你要有能力透過媒體吸收新知，但同時也要有能力保持冷靜、自行判斷，不要隨意被影響。你要能看出各種觀點背後相關的利益。 # AI 對職缺的影響 AI 當然對各行各業會有重大衝擊，但是目前也僅止於改善工作效率、優化流程而已。 AI 因為可以加強專業人員的生產力，所以會造成職缺變少一點，但要到「軟體工程師通通失業」、「就靠機器人寫完所有程式」這種程度，實在太誇大了 最後，程式設計已經是各種工作領域之中，最難被機器取代的職缺之一，如果真的被高階人工智能取代，那社會上已經沒有多少工作適合人做，大概會是「無條件基本收入」制度之類的社會 --- # 結論 太廢的技能、感覺問 google 或問 ChatGPT 就有的東西，可以不用學了，像死背課文一樣的任務再也不用做了 除此之外，該學什麼學什麼，不用想太多 上個時代，懂得善用 google 與網際網路的專業人士 vs 不懂得善用的專業人士，生產力有巨大差別 下個時代，懂得善用 AI 的專業人士 vs 不懂得善用的專業人士，生產力有巨大差別 除此之外，跟案主溝通、釐清功能規格、分析各種技術選擇、認識領域知識並設計軟體，是極度複雜的工作，你真的覺得一個機器人放在面前聊天幾分鐘，它就能通通做完給你？ --- 以上，簡單看法分享
對於轉職寫程式、或是業界情況好奇、擔心的人很多 簡單分享一些看法＆建議 # 前端好像很氾濫，現在適合轉職前端嗎？ 過去幾年，我指導過很多非本科的朋友入行，幾乎都是從前端入行（也有少數是從 iphone 開發、網站後端、資料科學入行） 我都分別問過這些朋友 轉職前的薪資 說真的 在台灣 有很多產業、領域 薪水對年輕人真的很不友善 寫程式這一行 前端雖說門檻低、就業者越來越多 這些都是事實 但是 跟很多行業比起來 薪水還是有比較好 而且進步空間很多（台北的工作機會又會更多一些） 所以 如果受不了原本產業的低薪 考慮寫程式 就試試看吧 先找書 或是便宜的線上課程試試就對了 （真的要花數萬～十幾萬找補習班之前，切記要多打聽，多比較） # 2023景氣好像很差，很多軟體公司裁員，業界很慘嗎？ 新聞上看到的 矽谷各大科技公司裁員幾千幾萬人 都是真的 但是台灣的軟體業還沒出現這情況 主要原因是 北美的公司本來就比較多「創業投資人」的資源＆募資 台灣的軟體業本來就沒拿到多少投資人的錢 😂 簡單講就是窮習慣了 現在全球資金緊縮 台灣業界本來就不是特別高薪的地方 所以衝擊反而還好 😂😂 （不過，很多靠過去幾年ABC輪募資撐下來的新創公司 現在都有危機 這是鐵定的） 我有在兼職接案北美的案子 目前北美的案件報酬大概打6折左右 非常慘 什麼時候會回溫不知道 不過，身在台灣，打開徵才網站，很多公司還是有在徵才，篩選條件選「無經驗可」就可找到「可接受半路出家」的職缺 所以，大環境沒辦法預測，想入行的話，還是先學就對了，還是有不少機會 # 我想轉職寫程式，未來也許可以接案子、賺外快，對嗎？ 工作3-5年之後，基本上多少會有親戚朋友，想找人接案寫程式 這種機會有是有，但，有幾件事還是要分享一下 要常態獲得接案收入、甚至全職接案的話，是滿困難的 首先，自由工作者需要有兩個特質，第一個是談判者特質，也就是樂於談判，拉高價碼、限制住案主規格，這樣才能有較好利潤 第二個是銷售者特質，也就是樂於老王賣瓜，自賣自誇，這樣才能被人看見，有更多機會 我認為大多數人並不會喜歡做這兩件事，我自己也不太擅長、也不太喜歡做這兩件事，所以，接案這條路，偶爾賺一點可以，要經營得好，並不容易 最後要說的是，台灣的發案報酬，常常會比你想像的還要「低很多」，有人拿幾千元就希望你架一個網站給他，或者各種離譜的情況，很多 這些都要花時間處理，很多時候綜合比較下來，直接在一間不錯的軟體公司上班、學習，還比較好 以上，簡單分享，大家有什麼問題，可以多多提問，我盡量回答
在後端設計 API 的時候 以電商網站來說，跟產品相關的 API，最早以前，最直覺的做法，就是像這樣設計： HTTP GET ``` /get-product ``` HTTP POST ``` /create-product /update-product /delete-product ``` 參數的話，跟在網址後面，或者用 form submit 都可以 --- 久而久之，業界開始有很多人發現，其實 HTTP method 本身，已經具有一些意義，不需通通用網址命名來表達： 取得商品資料 HTTP GET ``` /product ``` --- 建立商品資料 HTTP POST ``` /product ``` --- 更新商品資料 HTTP PUT ``` /product ``` --- 刪除商品資料 HTTP DELETE ``` /product ``` --- RESTful 實際上的慣例、實務做法，有很多細節 總之，就是一種設計 API 的慣例而已 設計 API 時可以參考 RESTful 慣例，也可以完全不參考，通通憑自己喜好去寫，自己有把握就可以了 --- 以上，簡單說明 RESTful 的意義，有沒有不清楚的地方？
你的轉職路上，還缺少一份自學作業包！寫完這幾包，直接拿作品去面試上班！
本論壇另有附設一個 LINE 新手發問＆交流群組！歡迎加入討論！
