# 轉職過程中的程式初學心得

## 程式初學心得

寫程式是什麼？

過去看見有人使用 Command line，都覺得這根本是天書一般的存在，沒想過自己也開始接觸這項**工程師技能**。

可能我從來也沒有想過會有這一天，竟然異想天開的要從一名文組設計仔轉職為前端工程師。會記錄下這些，是希望可以在學習的這條路上，有更多前進的動力，並且在未來可以回顧學習的歷程。

## Command line

在學習的過程使用的是 Mac 系統，過去其實也曾經因為一些技術上的問題而打開過“終端機”，在這次才知道原來終端機就是 GUI 出現前與電腦溝通的工具。
在這週我學會了幾項常用的基本技巧，在當下真的覺得自己宛如工程師，用電腦的語言在與電腦溝通著。

### Command line 基本指令

* `cd + 目錄`: 將所在位置導向指定目錄
* `cd` : 回到主目錄
* `cd ~` : 回到主目錄
* `cd ..` : 回到上一層
* `ls` : 列出目前目錄的項目
* `ls -a` : 列出隱藏項目
* `ls -la` : 列出所有細項
* `pwd` : 顯示當前目錄
* `echo + "內容"` : 顯示訊息在終端機上
* `mkdir + 目錄名稱` : 新增一個目錄資料夾
* `touch + 檔案名稱` : 新增一個檔案
* `rm + 檔案名稱` : 刪除檔案
* `rm + *.副檔名` : 刪除所有檔案
* `rmdir + 資料夾名稱` : 刪除資料夾
* `cat + 檔案名稱` : 顯示檔案內容
* `man + 指令名稱` : 打開指令菜單
* `chmod + x + 檔案名稱` : 賦予檔案 execute permission（執行權限）
* `clear` : 清空終端機視窗

## Git & GitHub

在過去只要網頁上有連結到 GitHub 的網站，幾乎都是點開一秒後，馬上跳離，因為發現自己完全看不懂，當時看見密密麻麻的程式碼，覺得就跟天書一樣！
版本控制是什麼？ Git 是什麼？ Github 又是什麼？

Git 與 GitHub 是不一樣的東西！

### 比較 Git & GitHub

* Git 其實是一個**版本控制系統**（ Version Control System ），利用快照的方式去將檔案進行不同版本的紀錄，可以實現多人分工及合作的複雜流程，同時可以追蹤修改者與修改內容。如果今天有一個項目要多人同時操作，利用 Git 去做版本控制就是一件非常重要的事情。

* GitHub 就像是雲端硬碟一樣，版本控制有許多不同的服務供應商，而 GitHub 就是其中一個提供版本種服務的平台，可以利用 Git 將不同版本推至 GitHub 上，讓合作夥伴可以在平台上進行項目的交流。

### Git 基本指令

* `git init` : 將本地資料夾註冊到版本控制系統內
* `git status` : 顯示當前 Git 的狀態
* `git add + 檔案名稱` : 將檔案添加到暫存空間中
* `git commit -m "內容"` : 添加本次版本的說明訊息
* `git remote add + 選端地址` : 將 本地的 Git repository 與遠端的 repository 做連結
* `git branch + 分支名稱` : 建立一個新的分支
* `git checkout + 分支名稱` : 將某個分支設為當前分枝
* `git push` : 將本地暫存空間中的檔案推送至遠端的 repository
* `git merge + 分支名稱` : 將分枝 merge 到某分枝（方法一）
* `git rebase + 分支名稱` : 將分枝 merge 到某分枝（方法二）
! 注意，merge 以及 rebase 雖然都是有 merge 的功能，但還是有很大的不同
可以參考連結：https://www.youtube.com/watch?v=f1wnYdLEpgI

## 學習像電腦一樣思考

大學畢業後，開始自學了參數化的設計，才第一次感受到邏輯性思考的重要性。過去的我，常常想到什麼事情就一股腦地衝上去做，但往往因為熱情燃燒過度，或是因為思考不周全而失敗收場。在這週的學習，也意外看見了一句話“**一名優秀的工程師，是花80%的時間在前期規劃與建構，剩下20%的時間才是Coding**”，這句話深深的影響了我，使我開始反思過去的做事方式...

寫程式就像是蓋房子一樣（當時學參數化的時候也是用同一句話來解讀），一步一步，條列式的將所需的材料、步驟、作法一一列舉出來，給予正確的指令，使得最後的成品是完美的，而不是像海砂屋一樣，有美麗的外觀，卻沒有堅固的結構。所以說，基礎是很重要的！

### 練習

我的一天(幻想中的)

1. 早上 8:00 起床
2. 起床後先打開瑜珈墊，進行 15 分鐘的冥想
3. 做完冥想後，進行 15 分鐘的拉伸瑜伽
4. 做完瑜伽後，到廁所洗漱，如果今天溫度超過 25 度，就洗澡
5. 如果有洗澡，就去吹頭髮，如果沒有洗澡，就去用早餐
6. 吃完早餐後，先到書桌前，打開 ipad 查看今天的代辦事項
7. 先複習完昨日進度，複習完後開始工作
8. 中午 12:00 享用午餐
9. 吃完午餐，進行午休
10. 下午 1:00 開始新的進度章節
11. 如果工作滿 1 小時，就休息 10 分鐘
12. 如果工作滿 3小時，就休息 20 分鐘
13. 晚上 6:00 享用晚餐
14. 晚上 7:30 複習今日進度
15. 複習結束後，去洗澡
16. 洗完澡後，吹頭髮
17. 吹完頭髮後，記錄今天的學習紀錄到 .md 的檔案中
18. 記錄完後，如果時間還沒到晚上 12:00 ，就可以滑手機放鬆
19. 晚上 12:00 進行睡前冥想 10 分鐘
20. 冥想結束後，睡覺

## 前端＆後端的差異

前端就像是一道完成的餐點，也就是一個網頁所呈現在你眼前的畫面。而後端其實就是備料、煮菜的後台區，不會呈現在你眼前，但卻會是核心的區域，也就是網頁處理指令的地方。

## Shell Script

會學習這個語言是因為在網站上看見了 Huli 的 GitHub 作業，所以決定也來研究一下這個語言。在開始學習的過程中會搭配 Terminal 做使用，在當下看見 log 出的結果讓我覺得：「啊～原來這就是寫程式的感覺！」這是來自一個小菜鳥的真實感受，希望未來接觸到更難的語法不會被打倒了！

Shell Script 是一個用 C 語言編寫的程序， Shell 可以幫我們跟作業系統的核心 (Kernel) 做溝通，就像是一台幫使用者翻譯的機器一樣！

### Shell 基本指令

* `#!/bain/bash` : 將此檔案宣告為一個 Shell 檔案（副檔名是 .sh ）
* `./ + .sh檔案` : 執行 Shell 檔案
* `echo -e + "內容 \n"` : 開啟轉譯字符（ \n 不會被打印出來）
* `$變數名稱` : 設定自定義的變數
* `$0` : 當前的 Shell 檔案名稱
* `$n` : 第n個變數是什麼，n是輸入數字
* `$@` : 取得所有參數內容
* `read + 變數名稱` : 讀取使用者輸入的資訊
* `read -p "提示內容"` : 在 Terminal 上顯示要提示使用者輸入的內容
* `$(( a + b ))` : 將變數 a . b 進行四則運算
* `$[ a + b ]` : 將變數 a . b 進行四則運算
* 整數的比較
* `-gt` : 大於
* `-ge` : 大於等於
* `-eq` : 等於
* `-lt` : 小於
* `-le` : 小於等於
* `-ne` : 不等於

### 練習

題目一 : 利用迴圈的方式傳入一個 n 的值，創建 n 個名為Project(n)的檔案夾

for (( i=0; i<$1; i++ ))
do
  filename="Project"
  touch "$filename$i.txt"
done

題目二 : 查找檔案是否存在

echo -e "Enter the file name : \c"
read filename
if [ -e $filename]
then
  echo " $file_name found "
else
  echo " $file_name not found "
fi

題目三 : 若現在時間超過晚上10點，則回傳現在時間

timenow=`date +%T`
timecompare="22:00:00"
if [[ $timenow < $timecompare ]]
then
    echo " $timenow "
fi

## CS50 Lecture 0 重點整理

電腦是一個使用二進制的工具 (0 . 1)，所有的內容都會被轉化成二進制，讓電腦讀取並轉化至你的面前。不管是文字、音樂、影像、文字，都會變成一連串的 0 與 1 ，連顏色還有現在頻繁使用的 emoji 都是！

學習如何向電腦一樣思考是非常重要的，如果有一本電話簿，要從裡面找尋到一個人的電話，那該使用什麼做法才是最省時有效的方法？不可能一頁一頁翻一頁一頁找吧！假設這本電話簿都是按照字母順序排序的，那麼可以直接翻到中間，看看這個人的名字是在右半邊還是左半邊，如果是左半邊，那就可以將右半邊丟掉，以此方式查找下去，便可以找到此人的電話。

### 可以將此段方式轉譯為條列式方式如下：

1. 翻開電話簿，找到一半的位置
2. 看一下此人是否在這一頁上
3. 如果此人在這個頁面上
就打給此人
4. 如果此人在這頁以前
就打開這頁以前的一半位置
回到第二點
5. 如果此人在這頁以後
就打開這頁以後的一半位置
回到第三點
6. 如果此人不在這本書上
把書本關上，停止尋找

## 學習資源

### 文章

* "https://lidemy.com/p/roadmap" Huli 課程學習地圖
* "https://github.com/Lidemy/mentor-program-4th" Huli 學習流程與作業
* "https://linux.vbird.org/linux_basic/centos7/0105computers.php" 鳥哥 計算機概論
* "https://tw511.com/a/01/10469.html" Shell 字串擷取與處理
* "https://markdownlivepreview.com/" Markdown 怎麼寫

### 影片

* "http://ocw.aca.ntu.edu.tw/ntu-ocw/index.php/ocw/cou/101S210/3" 台大 計算機概論
* "https://www.youtube.com/watch?v=YoXxevp1WRQ&list=PLhQjrBD2T382_R182iC2gNZI9HzWFMC_8" Harvard CS50 Lecture 0
* "https://www.youtube.com/playlist?list=PLS1QulWo1RIYmaxcEqw5JhK3b-6rgdWO_" Shell script for beginners
* "https://lidemy.com/courses/389485/lectures/5942905" Huli 初心者的計概與 coding 火球術

###### tags:`frontend learning`