洪德成 | Jason Hung

  我是 Jason,目前已有 3年以上的 React 開發經驗,熟悉 React 的主流生態系,例如:React Router、React Redux、React Query。主要使用 TypeScript 開發,並且重視測試的撰寫,以利於後續的維護及未來重構的需求。曾開發過後台系統、會員訂閱流程、多國語系相關專案內容等。

  

  在以往的團隊經驗中,喜歡將學習到的技術知識分享給團隊,並且導入適合專案的工具和解決方式,協助團隊提升開發效率及使用者體驗。曾導入過的改善內容有,將原本以 scss 開發的專案改以 styled-components 處理樣式,導入 storybook 提升開發人員和設計之間的溝通效率,導入 React Query 優化了資料獲取流程、緩存管理和錯誤處理機制,顯著提升了開發效率和用戶體驗。

  

  平時也會去了解目前的技術趨勢,讓自己一直學習新知,是我做為軟體工程師的一個很大的動力。

Front-End Developer
[email protected]

+886-972-987-390

React


  • 有三年以上的 React 開發經驗,熟悉 React 的核心觀念及實作原理
  • 可將重複的 UI 及邏輯抽象化成成獨立的 Component 和 Custom Hooks,讓程式碼模組化,以利開發使用
  • 使用 useMemo、useCallback,減少不必要的 render,改善效能
  •  熟悉主流 React 生態系相關套件如: React Router、Redux Toolkit、React Query 等
  • 使用 React Router 架設 SPA 網站
  • 使用 React Redux,管理前端 state,避免 props drilling 的發生
  • 使用 React Query 管理資料獲取流程、緩存管理和錯誤處理機制
  • 使用 styled-components 處理樣式,及網頁動畫
  • 開發上使用 TypeScript 強化型別判斷,在大型專案內可有效的和協作者共同維護程式碼,減少 bug 的產生
  • 開發 Next.js 相關產品,提升使用者操作網頁的使用體驗
  • 使用 MSW(Mock Service Worker) 讓前後端分離開發,增加開發效率

JavaScript


  • 熟悉 Javascript 基礎及 ES6 標準
  • 了解 This、Hoisting、原型鏈等核心觀念
  • 了解 Event loop 的運作模式
  • 了解 Closure、Promise 等進階觀念
  • 了解 debounce 和 throttle 等優化方式

CSS Frameworks


  • 使用 Material-UI 的 Custom Theme,統一樣式管理,增加開發效率
  • 使用 Tailwind CSS,制定客製化樣式及變數
  • 使用過 Bootstrap 開發
  • 使用過 Ant Design 開發

CI/CD


  • 制定團隊 ESLint Rule,讓團隊程式碼更簡潔且確保程式碼品質符合規範
  • 使用 Jest、React Testing Library 撰寫單元測試,確保程式碼的邏輯和減少重構時發生的錯誤
  • 使用 Husky 建置 pre-commit / push hook
  • 串接 Bitbucket 和 AWS S3 實現自動化部署
  • 使用 Github Actions workflows 實現自動化部屬

學業 / 工作經歷

智影顧問股份有限公司 Frontend Engineer

May 2023 - Present

  • 將專案內 React Class Component 重構成 Functional Component,完成率達 90% 以上
  • 開發手機、平板端的產品介面
  • 維護既有產品模組功能,並協助開發新產品,供應商管理系統
  • 協助導入 locize,加速開發多國語系效率
  • 為團隊導入 React Query
    • 優化了資料獲取流程,確保團隊的程式碼邏輯一致
    • 優化資料緩存管理,減少呼叫 API 次數提升產品效能和使用者體驗
    • 優化錯誤處理機制,減少重複邏輯的程式碼

Tomofun Frontend Engineer

Nov 2021 - Feb 2023

  • 為團隊專案導入 Storybook
    • 協助 UI Designer 建立 design guideline, 並可即時操作的元件網站,以便快速進行測試
    • 視覺化元件,並強化與 Designer 之間的溝通合作
    • 在開發多國語系網站時能及早發現 layout bug
  • 強化 Code quality
    • 制定 code convention,並和團隊成員討論取得共識,統一團隊風格
    • 導入 pre-commit hook ,確保部署前程式碼的品質符合規範
    • 撰寫單元測試,確保專案內元件都有被完整測試
    • 導入 Material-UI 的 Custom Theme,統一樣式管理,增加開發效率
    • 導入 TypeScript,使用強型別增加專案的嚴謹度
  • 開發多國語系網頁內容,符合不同國家使用者習慣

恆星網路科技有限公司 Frontend Engineer  

Sep 2020 - Sep 2021
  • 為團隊專案導入 Styled-components,等 CSS-in-JS 的方式,改善使用 Sass 的樣式管理
  • 將專案內共用組間進行拆分,讓架構更明確,改善開發效率
  • 將產品從原型開發至正式上線,並持續維護,針對企劃需求進行優化與改善

輔仁大學企業管理學系

2014 - 2018
  • 畢業專題擔任組長,協調組內工作事項,並規劃時程表及專題製作方向,最後協助團隊獲得專題第三名的成績
Paragraph image 03 00@2x

 React 訂房網站開發

作品敘述:
  此作品為由 React 製作的訂房網站,使用者可以選擇要去的地點及時間,針對選擇資訊間儲存在 Redux 內,作為後續計算價格的依據,並且有表單驗驗證系統,使用者需填入正確的格式內容,若填入錯誤格式,則會有錯誤提示,引導使用者進入最後的結帳頁面。
  在疫情下,出國旅遊成為一種許久不曾體驗的娛樂,因而閒暇時,會到不同的旅遊網站看看,因而有了嘗試自己寫一個訂房網站的念頭,來去想念以前出國的時光。

使用技術:

  • 使用 Create React App 快速建立專案
  • 使用 React Hook 開發
  • 使用 React Router 配置路由
  • 使用 React Redux 管理資料
  • 使用 React-Bootstrap 的 CSS framework
  • 使用 styled-components 管理樣式
  • 使用 React Hook Form 做表單驗證