技術 [Day30]前端程式部署(Vercel)

昨天已經將後端部署成功，接著我們要讓前端也部署到平台上。使用的平台是 Vercel(免費) Vercel 是一個用於部署和托管 Web 應用程式的雲平台，它提...

技術 [Day29] 後端程式部署(render + google cloud storage)

我們這28天已經完成了前後端的程式，今天我們要將後端的程式部署上去! 使用的平台 render這個平台是免費的，用來部署後端程式 Google Cloud...

技術 [Day28] 使用者頁面和更新使用者資料開發

大綱 使用者頁面開發 更新使用者資料 1. 使用者頁面開發 Wireframe 建立檔案 一樣先在pages資料夾底下建立Profile.js在這個頁面...

技術 [Day27]文章內容頁開發

大綱 1.文章內容頁開發2.編輯文章功能開發 1. 文章內容頁開發 Wireframe 先在pages資料夾底下建立BlogPost.js //BlogPos...

技術 [Day26]發布文章頁面開發和React Quill使用

大綱 Wireframe Quill.js介紹 發布文章頁面開發 1. Wireframe 2. Quill.js介紹 Quill 是一個開源且極具彈性...

技術 [Day25] 文章列表頁和標籤頁開發

今天這兩個頁面比較單純的只是呼叫API去取得當前的資料，並顯示於頁面上。 大綱 文章列表頁開發 標籤頁開發 路由設定 1.文章列表頁開發 Wireframe...

技術 [Day24] 框架頁面和首頁切版

大綱 建立Layout頁面 首頁切版 前言 我們昨天開發出了導覽列，但我們接下來的頁面都會需要導覽列，最直覺的做法就是在每個Component裡面放進去He...

技術 [Day23] 導覽列開發

先前我們已經將登入和註冊頁開發完，今天要來進行導覽列的開發。 大綱 Wireframe 導覽列開發 未登入的導覽列 已登入的導覽列 使用者功能列 1...

技術 [Day20]登入頁開發和CORS處理

大綱 Wireframe 登入頁開發 CORS處理 1. Wireframe 以下是登入和註冊頁面的wireframe，樣式細節可依個人喜好調整 登入頁...

技術 [Day19]React pages 和 routes設定

大綱 新增資料夾和檔案 React Routes設定 1. 新增資料夾和檔案 我們先調整當前專案的資料夾，新增一些資料夾來區分檔案。 專案資料夾結構 ✨表示...

技術 [Day18]TailwindCSS介紹和安裝

前言 在開發前端頁面時我們有多種樣式開發的選擇，可以選擇傳統的CSS寫法、使用UI Framework或Utility-first Framework等，為了達...

技術 [Day17] React專案初始化

昨天快速介紹過react，今天直接進入實作 大綱 建立專案並安裝React 安裝開發用到的套件 1.建立專案並安裝React 在要新增專案的地方輸入以下指令...

技術 [Day15]後端開發總結

今天來回顧一下這幾天使用到的技術和開發的API 大綱 主要使用到的技術 安裝的套件 API設計 1. 主要使用到的技術 MongoDB — docume...

技術 [Day4]實作開始-設定後端專案和Express路由

今天要開始進入實作了，首先我們先從後端開始開發。 大綱 建立專案並安裝Express.js 建立基本路由(Route) 使用express.Router 1...

技術 [Day2]MERN介紹(MongoDB、Express.js、React.js、Node.js)

今天要來介紹一下這次挑戰主要會使用到的技術，其他比較詳細(如程式碼)之後文章會再補充。 大綱 所以MERN是什麼? MERN的優點 MERN的缺點 我選擇M...

技術 [Day1]挑戰前言

緣由 個人擔任前端工程師有一小段時間，雖然工作上會了解到一些後端相關的觀念，但一直都沒有親自實作過。身為一個熱愛挑戰(自虐）的人，希望透過這次鐵人賽紀錄自己30...

技術 斯坦的實戰學院 MongoDB, Express, React, Node.js (MERN) - MongoDB建置

Node.js 串接 MongoDB 會在下一篇教學，滿意的朋友請記得關注，未來預計每週2篇技術文章 國外朋友常提到網頁工程師必備 MERN，那MERN究竟...