iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

1 Like 0 留言 1280 瀏覽

鐵人賽 Modern Web DAY 15

從 0 開始建一個 Static Site Generator 系列第 15 篇

技術 Day 15: Universal Javascript

在 SSR 誕生時就出現了一種對於某種程式碼的稱呼 Isomorphic Javascript ，這種程式碼會把與環境相關的部份包裝成同樣的 API ，並靠著...

DanSnow ‧ 2020-09-30

1 Like 0 留言 1534 瀏覽

鐵人賽 Modern Web DAY 14

從 0 開始建一個 Static Site Generator 系列第 14 篇

技術 Day 14: 用 Helmet 管理 head 的內容

這系列的程式碼在 https://github.com/DanSnow/ironman-2020/tree/master/static-site-genera...

DanSnow ‧ 2020-09-29

1 Like 0 留言 1014 瀏覽

鐵人賽 Modern Web DAY 13

從 0 開始建一個 Static Site Generator 系列第 13 篇

技術 Day 13: html 樣版與 eta.js

目前我們產生的 html 是寫死在程式中的，這篇要來讓使用者可以透過 ejs 的方式寫自己的樣版，不過我們實際要用的樣版引擎不是 ejs 而是 eta.js ，...

DanSnow ‧ 2020-09-28

1 Like 0 留言 9139 瀏覽

鐵人賽 Modern Web DAY 15

前端工程師一起來種一棵後端技能樹吧！系列第 15 篇

技術 [Day 15] Server-Side-Rendering - (2) feat. Next.js

前一天介紹了 SSR 基本概念，今天則是要介紹 React 最有名的 SSR 框架：Next.js。今天不是要來講 Next.js 怎麼使用，畢竟網路上學習資...

莫力全 Kyle Mo ‧ 2020-09-28 ‧團隊不要搶我隊友

1 Like 0 留言 786 瀏覽

鐵人賽 Modern Web DAY 12

從 0 開始建一個 Static Site Generator 系列第 12 篇

技術 Day 12: 動態路由

這系列的程式碼在 https://github.com/DanSnow/ironman-2020/tree/master/static-site-genera...

DanSnow ‧ 2020-09-27

3 Like 0 留言 15440 瀏覽

鐵人賽 Modern Web DAY 14

前端工程師一起來種一棵後端技能樹吧！系列第 14 篇

技術 [Day 14] Server-Side-Rendering - (1)

最近在 Frontend 技術圈裡，Server-Side-Rendering（SSR）可說是一個越來越火熱的概念，剛好現在工作上的架構就是使用 Next.j...

莫力全 Kyle Mo ‧ 2020-09-27 ‧團隊不要搶我隊友

1 Like 0 留言 1049 瀏覽

鐵人賽 Modern Web DAY 11

從 0 開始建一個 Static Site Generator 系列第 11 篇

技術 Day 11: 基於檔案系統的路由

這系列的程式碼在 https://github.com/DanSnow/ironman-2020/tree/master/static-site-genera...

DanSnow ‧ 2020-09-26

1 Like 0 留言 1097 瀏覽

鐵人賽 Modern Web DAY 10

從 0 開始建一個 Static Site Generator 系列第 10 篇

技術 Day 10: 將我們的 SSG 變成獨立的套件

從這篇開始，程式碼的目錄結構會有很大的變化，在這之前我們都把 SSR 與我們自己的 blog 的程式碼混在一起，但這系列是要做出一個通用的 SSG ，所以之後會...

DanSnow ‧ 2020-09-25

1 Like 0 留言 2809 瀏覽

鐵人賽 Modern Web DAY 9

從 0 開始建一個 Static Site Generator 系列第 9 篇

技術 Day 9: 在 Server 使用 Redux

這次因為要做出像在 client 一樣從 API 取得資料，所以上次的 store 不能直接使用，要準備一個新的，不過 Entity Adapter 的部份是可...

DanSnow ‧ 2020-09-24

1 Like 0 留言 2769 瀏覽

鐵人賽 Modern Web DAY 8

從 0 開始建一個 Static Site Generator 系列第 8 篇

技術 Day 8: Redux 與準備資料來源的 API

這系列的程式碼在 https://github.com/DanSnow/ironman-2020/tree/master/static-site-genera...

DanSnow ‧ 2020-09-23

1 Like 0 留言 1226 瀏覽

鐵人賽 Modern Web DAY 7

從 0 開始建一個 Static Site Generator 系列第 7 篇

技術 Day 7: 在 Server 使用 React Router

這系列的程式碼在 https://github.com/DanSnow/ironman-2020/tree/master/static-site-genera...

DanSnow ‧ 2020-09-22

1 Like 0 留言 2153 瀏覽

鐵人賽 Modern Web DAY 6

從 0 開始建一個 Static Site Generator 系列第 6 篇

技術 Day 6: 介紹 React Router 與實作文章頁面

如果你有寫過 React ，那你很可能會知道 React Router ，它幾乎可說是用 React 寫 SPA 必備的一個函式庫，雖然現在其實還有另一個 @r...

DanSnow ‧ 2020-09-21

1 Like 0 留言 1062 瀏覽

鐵人賽 Modern Web DAY 5

從 0 開始建一個 Static Site Generator 系列第 5 篇

技術 Day 5: 實作第一個頁面

這系列的程式碼在 https://github.com/DanSnow/ironman-2020/tree/master/static-site-genera...

DanSnow ‧ 2020-09-20

1 Like 0 留言 2033 瀏覽

鐵人賽 Modern Web DAY 4

從 0 開始建一個 Static Site Generator 系列第 4 篇

技術 Day 4: 介紹 Server Side Render

React 的 server side renderer 是在 react-dom 這個套件的 react-dom/server 下，API 就只包含 4 個函...

DanSnow ‧ 2020-09-19

1 Like 0 留言 1206 瀏覽

鐵人賽 Modern Web DAY 3

從 0 開始建一個 Static Site Generator 系列第 3 篇

技術 Day 3: React 介紹與建構環境

這篇與之後的程式碼在 https://github.com/DanSnow/ironman-2020/tree/master/static-site-gene...

DanSnow ‧ 2020-09-18

1 Like 0 留言 1355 瀏覽

鐵人賽 Modern Web DAY 2

從 0 開始建一個 Static Site Generator 系列第 2 篇

技術反樸歸真的前端

會取這樣的標題是因為我覺得，原本的網頁只是純粹展示內容的 html ，到後來動態網頁的出現，管理大量的內容可以不用再一個個的檔案維護，而可以交給資料庫與樣版引擎...

DanSnow ‧ 2020-09-17

2 Like 0 留言 2090 瀏覽

鐵人賽 Modern Web DAY 1

從 0 開始建一個 Static Site Generator 系列第 1 篇

技術 Day 1: 前言

不知各位有沒有聽過 JAMStack ？ JAMStack 就是 JavaScript, API, Markup 合在一起的一種稱呼，是一種新的(？)或說是幫已...

DanSnow ‧ 2020-09-16

5 Like 2 留言 14168 瀏覽

鐵人賽 Modern Web DAY 18

前端三十 - 成為更好的前端工程師系列第 18 篇

技術 18. [FE] 為什麼網站要做成 SPA？SSR 的優點是什麼？

稍有經驗的開發者，可能對最近 SPA，SSR 等術語不太陌生，大概也能知道 SPA 指的是單頁式應用（Single Page Application）、SSR...

Gary ‧ 2019-10-04 ‧團隊Wow Doge!

1 Like 0 留言 2357 瀏覽

鐵人賽 Software Development

30天全端手把手學徒計畫-前後端整合之旅系列第 31 篇

技術 [破] 第三堂課:程式設計模式討論與思辯

今日的課程是由我們課程助教Tyson來主講。重點針對於前端的架構設計解析。首先，我們要問怎麼樣才是一個好的程式架構? 很多從junior工程師要進階到s...

Ivan ‧ 2019-10-20 ‧團隊膠原錠與葉黃素

4 Like 0 留言 11650 瀏覽

鐵人賽 Modern Web

Nuxt - 使用 Vue.js 做 SSR 的第一哩路系列第 32 篇

技術 32. Nuxt 整合 API 服務

這篇介紹 API 服務整合若頁面內容不全靠 SSR 產生，部分頁面資料得透過瀏覽器向第三方、自架 API 後端抓取，會碰到跨域 + CORS 問題。為什麼需...

Ralph ‧ 2018-11-22 ‧團隊InfoSec Horadrim

1 Like 1 留言 9710 瀏覽

鐵人賽 Modern Web

Nuxt - 使用 Vue.js 做 SSR 的第一哩路系列第 31 篇

技術 31. Nuxt 部署 - 反向代理

Nuxt 以 Universal 模式運行下，後端會起 Node Server (預設是 http://127.0.0.1:3000 ) 網站服務一般都走 8...

Ralph ‧ 2018-11-17 ‧團隊InfoSec Horadrim

3 Like 4 留言 4981 瀏覽

鐵人賽 Modern Web DAY 30

Nuxt - 使用 Vue.js 做 SSR 的第一哩路系列第 30 篇

技術 30. 總結，路還長著

第 30 天，聊一下開始玩 Nuxt 的緣由(本來想寫整合 API 服務，發現內容前面沒提觀念太多，有點跳) 一開始嘗試處理 SEO 混著後端框架寫 Vue (...

Ralph ‧ 2018-11-14 ‧團隊InfoSec Horadrim

1 Like 0 留言 5368 瀏覽

鐵人賽 Modern Web DAY 29

Nuxt - 使用 Vue.js 做 SSR 的第一哩路系列第 29 篇

技術 29. Nuxt Universal App 部署至 Heroku

前一篇介紹靜態頁部署，若換成 Universal Mode 呢？「需要個 Node Server，不時讓人戳」當工程師懶得管機器 (或你分身乏術)，想把環境...

Ralph ‧ 2018-11-13 ‧團隊InfoSec Horadrim

2 Like 0 留言 10037 瀏覽

鐵人賽 Modern Web DAY 28

Nuxt - 使用 Vue.js 做 SSR 的第一哩路系列第 28 篇

技術 28. Nuxt 靜態頁部署

這篇介紹靜態頁面部署方式讀者可用電商登入頁案例試試 Nuxt 命令介紹過運行模式差異，透過命令 $ yarn generate /* npm run gene...

Ralph ‧ 2018-11-12 ‧團隊InfoSec Horadrim

0 Like 0 留言 7019 瀏覽

鐵人賽 Modern Web DAY 27

Nuxt - 使用 Vue.js 做 SSR 的第一哩路系列第 27 篇

技術 27. @nuxtjs/axios 如何透過 module 包裝 axios

Nuxt Axios 模組 - @nuxtjs/axios ，是官方推薦使用的 HTTP Client Module主要功能及組成有 axios 提供 HT...

Ralph ‧ 2018-11-11 ‧團隊InfoSec Horadrim

1 Like 0 留言 6723 瀏覽

鐵人賽 Modern Web DAY 26

Nuxt - 使用 Vue.js 做 SSR 的第一哩路系列第 26 篇

技術 26. Nuxt Module，Nuxt 的擴充元件

Nuxt 不像 Angular 這種大型框架，功能包山包海，核心功能不夠得自行擴充。雖然提過如何透過全域/頁面設定客製、用 Plugin 收納初始化片段，但對於...

Ralph ‧ 2018-11-10 ‧團隊InfoSec Horadrim

0 Like 0 留言 9201 瀏覽

鐵人賽 Modern Web DAY 25

Nuxt - 使用 Vue.js 做 SSR 的第一哩路系列第 25 篇

技術 25. Nuxt Plugin 如何讓 Axios 更好用 (下)

上一篇解釋 Nuxt 插件 (Plugins)用於管理特定執行環境的程式碼片段，並在 Nuxt App 自動載入、執行 Plugin 使用一貫簡單風格，需要載...

Ralph ‧ 2018-11-09 ‧團隊InfoSec Horadrim

2 Like 0 留言 9029 瀏覽

鐵人賽 Modern Web DAY 24

Nuxt - 使用 Vue.js 做 SSR 的第一哩路系列第 24 篇

技術 24. Nuxt Plugin 如何讓 Axios 更好用 (上)

複習一下 asyncData 動態產生頁面，作業得透過 axios 拉 product api，藉此產生商品頁面的情境安裝 Axios $ yarn add...

Ralph ‧ 2018-11-08 ‧團隊InfoSec Horadrim

2 Like 0 留言 6260 瀏覽

鐵人賽 Modern Web DAY 23

Nuxt - 使用 Vue.js 做 SSR 的第一哩路系列第 23 篇

技術 23. Nuxt 細說`<nuxt-child>` 和 `<nuxt>`

這篇打算為 Nuxt 內建元件收尾，介紹最後兩種 <nuxt-child> <nuxt> 回顧上一章，巢狀路由讓 slug...

Ralph ‧ 2018-11-07 ‧團隊InfoSec Horadrim

0 Like 0 留言 6671 瀏覽

鐵人賽 Modern Web DAY 22

Nuxt - 使用 Vue.js 做 SSR 的第一哩路系列第 22 篇

技術 22. Nuxt Routing 進階 - 巢狀路由/嵌套路由 (Nested Routes)

Nuxt 路由入門篇介紹過兩層動態路由 pages/ --| _slug/ -----| comments.vue -----| index.vue --|...

Ralph ‧ 2018-11-06 ‧團隊InfoSec Horadrim

技術 Day 15: Universal Javascript

技術 Day 14: 用 Helmet 管理 head 的內容

技術 Day 13: html 樣版與 eta.js

技術 [Day 15] Server-Side-Rendering - (2) feat. Next.js

技術 Day 12: 動態路由

技術 [Day 14] Server-Side-Rendering - (1)

技術 Day 11: 基於檔案系統的路由

技術 Day 10: 將我們的 SSG 變成獨立的套件

技術 Day 9: 在 Server 使用 Redux

技術 Day 8: Redux 與準備資料來源的 API

技術 Day 7: 在 Server 使用 React Router

技術 Day 6: 介紹 React Router 與實作文章頁面

技術 Day 5: 實作第一個頁面

技術 Day 4: 介紹 Server Side Render

技術 Day 3: React 介紹與建構環境

技術 反樸歸真的前端

技術 Day 1: 前言

技術 18. [FE] 為什麼網站要做成 SPA？SSR 的優點是什麼？

技術 [破] 第三堂課:程式設計模式討論與思辯

技術 32. Nuxt 整合 API 服務

技術 31. Nuxt 部署 - 反向代理

技術 30. 總結，路還長著

技術 29. Nuxt Universal App 部署至 Heroku

技術 28. Nuxt 靜態頁部署

技術 27. @nuxtjs/axios 如何透過 module 包裝 axios

技術 26. Nuxt Module，Nuxt 的擴充元件

技術 25. Nuxt Plugin 如何讓 Axios 更好用 (下)

技術 24. Nuxt Plugin 如何讓 Axios 更好用 (上)

技術 23. Nuxt 細說`<nuxt-child>` 和 `<nuxt>`

技術 22. Nuxt Routing 進階 - 巢狀路由/嵌套路由 (Nested Routes)

標記使用者

技術反樸歸真的前端