iT邦幫忙

2023 iThome 鐵人賽

DAY 8
0
Modern Web

前端轉職人生系列 第 8

前端轉職人生Day8-學習資源整理篇

  • 分享至 

  • xImage
  •  

學習資源整理來到尾聲了!!!/images/emoticon/emoticon31.gif

Full Stack (Frontend + Backend)

基本上在搜尋資料學習的過程中你一定會一直看到Full Stack(Frontend + Backend)的教學,這部分先簡單提一下,能夠讓網站有完整功能,而不是只有靜態網頁,只能單純瀏覽,可以有新增、讀取、刪除、修改的功能(Create、Read、Delete、Update),也有資料存儲的地方,可以理解為廣義的Full Stack。

MERN也是一種Full Stack,還有很多種Full Stack架構,Next.js也有提供作為全端的選擇。

另外還有BAAS(Backend As A Service)和Headless CMS,可以讓前端工程師在沒有後端工程師的情況,也能使用後端的功能(成為一條龍?!),很常在Full Stack的教學看到,底下會稍微介紹,之後作品分享也會再次提到。


BAAS(Backend As A Service)

簡單介紹就是有較完整的後端功能與資料庫服務

想了解更多可以看看有關BAAS(Backend As A Service)的詳細介紹

Firebase

範例影片:React Firebase Realtime Chat App Tutorial | Firebase V9+ Beginner Tutorial


Headless CMS

簡單介紹就是簡易的後端功能與資料庫服務

想了解更多可以看看有關Headless CMS的詳細介紹

Contentful
範例影片:Build a blog using Contentful headless CMS and NextJs

Strapi
範例影片:Complete E-Commerce App with React, Strapi, Stripe | Shopping App Tutorial for Beginners

Sanity
範例影片:Personal Website Tutorial with Next.js 13, Sanity.io, TailwindCSS, and TypeScript


MERN Stack

MERN Stack = Mongodb + Express + React + Node.js

Mongodb : NoSQL資料庫(非關連式資料庫)
Express : 後端框架
React : 前端框架(廣義)前端函式庫(狹義)
Node.js : 後端執行環境

除了MERN Stack之外,還有MEAN Stack跟MEVN Stack,基本上就是前端框架做替換,A是Angular的代稱,V是Vue的代稱。

剛開始的學習資源建議要找時間短的,90–120分鐘這種比較好,或是有拆分成很多單元的也可以,時間太長一開始會看不下去。等要練習做作品再來虐自己,比較不會提早陣亡。

MERN Stack + Tailwind CSS - React 小專案實踐計畫

MERN Stack Crash Course Tutorial

MERN Stack Tutorials

MERN Stack CRUD Operations | Full Stack CRUD Operations | React, Node, Express & MongoDB

MERN Stack Tutorial - Book Store Project

React Node.js Full Stack Blog App Tutorial | MERN Stack APP Full Course

Build and Deploy a Full Stack MERN AI Image Generation App | Midjourney & DALL-E Clone


Next.js

現在已經到13的版本了,看到低於13的教學就不建議花時間學了。

目前大多數的公司都還是React為主,可能部分專案用Next.js,如果時間有限,會建議先把React學完整一點會比較好。

官方文件(新版):https://nextjs.org/

官方文件(舊版):https://nextjs.tw/

Next 13 Crash Course

Next.js 13 Full Course 2023 | Build and Deploy a Full Stack App Using the Official React Framework

Next.js Full Course for Beginners | Nextjs 13 Tutorial | 7 Hours

Restaurant Food Delivery App Design - React Next.js & Tailwind | Responsive Food Ordering Website


之後還會在學習紀錄篇和作品篇提到Full Stack,歡迎持續追蹤。

接下來就是分享學習記錄拉!赤裸裸地分享我的轉職不認真之路/images/emoticon/emoticon21.gif


上一篇
前端轉職人生Day7-學習資源整理篇
下一篇
前端轉職人生Day9-學習紀錄篇
系列文
前端轉職人生30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言