學習前端之前，先來看看什麼是前端
面試時，曾經被問過一個有趣的問題：「如果時間倒回，你覺得自己先知道什麼，可以讓你學習更好或避免犯錯？」
我的答案是，「擁有較全面的網頁結構概念，知道自己現在在哪裡？為什麼要做這件事或學這個」
比起努力叢林中每一隻昆蟲跟每一片葉子的名字以及特性，要不我們先來看看這整座叢林長怎樣，身為前端到底是要在樹林中走出什麼道路？
網頁的本質-從資料庫到畫面
網頁簡單來說就是一個媒介：把該公司資料庫中的資料庫送到使用者眼前。
在這個過程成我們可以把工程師工作分為三個類別一資料庫、後端、前端，以下簡單的比喻說明一下：
- 資料庫： 存放各類資料的地方，你可以想像一堆堆的 excel 表格（稱為 table)被存在一個主機裡面，透過 SQL 可以對這些表格進行調用（新增、修改、刪除、查詢）
- 後端： 主要工作是得到資料庫的資料，包裝成一個路徑，讓前端透過 API 取得；反之，前端資料修改或新增時，透過 API 傳給後端，經過後端整理及分析後，存到應該存放的 Table 中。可以說是前端與資料庫溝通的橋樑。
- 前端： 將得到的資料轉換為使用者看到的網頁，透過 CSS 和 HTML 製作成靜態頁面，並用 Javascript 增加頁面的互動及運算功能（也有使用別的語言的例如 php, Java)。前端工程師往前與 UI/UX 和網頁設計師合作，往後與後端合作，可以說是工程師中最接近使用者的一群人。
前後端的分野
以前，前端可以做的事情相對較少，例如使用 CSS 和 HTML 製作靜態頁面後（俗稱切版仔），藉由後端的 php 塞入資料及互動。隨著網際網路發展、社群網頁或電子商務網頁前端更多功能的需求，以及隨著瀏覽器及 Javascript 爆發性的成長，目前前端工程師常用的 Javascript 所延伸可以做的事已經越來越多了。
2009 年，Node.js 項目誕生，創始人為 Ryan Dahl，其標誌著 JavaScript 可以使用服務器端編程，從此網站的前端和可以使用同一種語言開發。並且，Node.js 可以承受很大的並發 流量，有助於開發某些互聯網大規模的實時應用變得容易。然而大部分的前端職位還是以網頁資料接界、互動以及渲染為主，和後端主要互動在於 API 資料取得及交換。
前端兩大走向
綜上所述，前端工作再細分可分為畫面互動專精以及再利用模組專精兩部分，當然不能只會一部分，因為前端的工作會兩個職能都需要使用，但是可能拿到的職位會偏向某個職能。
1）動態渲染： 網頁動態互動多用於活動或遊戲網頁，必須要玩轉 CSS 及各種特效，也有可能需要使用進階網頁特效工具如[Canvas](https://developer.mozilla.org/zh-TW/docs/Web/API/Canvas_API/Tutorial)，使得畫面變得生動有趣。
2）功能優化： 其實只要不是走動態渲染為主的，其他都很看功能優化…剛開始會覺得我只要可以把東西做出來，後來就進到怎麼做效能更好、SEO（搜索優化）更佳，甚至整個專案建置如何更開發者友善及更好維護。
總結
對前端工程師工作內涵有初步了解後，可以去 104 搜索一下網頁工程師或前端工程師，主要分析該工作職位的能力要求。
如果是寫 boostrap, JQuery 或者與 php 後端配合的職位可能較偏向靜態頁面製作（切版），而寫到框架例如 React, Vue 的可能較主要製作功能模組。
可以參考看看自己想要的方向，另一方面也對照一下自己缺乏的技能，放在自己的學習計畫內，有具體目標就是最好的學習動機。
# 參考資料
