非同步觀念開箱工作坊

###### tags: `學期 3` `week2` [toc] # 非同步觀念開箱工作坊 ## Before Webinar ### 報名 Week 2 非同步觀念開箱工作坊！ #### Week 2 非同步觀念開箱工作坊資訊 <div style="width:65%; background: #ececec; padding: 15px; border-radius: 10px ; font-weight: bold; width:fit-content;"> 日期與時間：07/18 (二) 19:30 - 21:00</span><br> 與會連結：<a href="https://zoom.us/j/82530376706">https://zoom.us/j/82530376706</a><br> 會議密碼：476565<br> <span style="color:#CE2D0F; font-size: 0.95rem; font-weight: bold;">注意：請使用電腦開啟連結，以利工作坊進行</span><br> <a class="btn btn-normal" target="_blank" href="https://calendar.google.com/calendar/event?action=TEMPLATE&tmeid=MXYyMjZqZDE2NTJkbGlxa2swMm10YjRyNzIgczdpYmk3OHUxZ2NuYTRxOWhtbzc4cGxoMjhAZw&tmsrc=s7ibi78u1gcna4q9hmo78plh28%40group.calendar.google.com">將行程添加到 Google 日曆</a> </div> </div> 非同步 (Asynchronous) 溝通是使用 JavaScript 的開發者相當頭痛，也是相當重要的主題。學期 3 開始，我們會用使用到更多開法者工具鏈，也更有機會面對非同步的情境，但歸根結底，非同步的核心是什麼？這次的工作坊，助教講師將帶著開箱 —— 「非同步溝通」的概念。 <div style="width: 100%; text-align: center;"><a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/14939/image.jpeg" target="_blank"><img style="width: 60%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/14939/image.jpeg"></a></div> #### 工作坊 Agenda * 非同步是什麼 * 實例討論 * 查詢一種資料 * 查詢兩種資料 * 語法重構 <div style="width: 100%; background: #ececec; padding: 15px; border-radius: 10px ; width:fit-content; font-size: 0.9rem;"> <p>本場工作坊設計根據 Web dev 2.0 版本的學期 2-3 後端課程，進行設計與調整，因此若同學過去有參與過非同步觀念開箱工作坊，將有一定比例的工作坊內容相同。</p> <p>建議參與過的同學，仍可再次參與，但若同學有其他時間規劃，可自行評估是否參加。</p> </div> #### 行前準備閱讀下週開放章節： - [概論與學習建議](https://lighthouse.alphacamp.co/courses/118/units/26106) ~ [Lab：從 Callback 到 Promise](https://lighthouse.alphacamp.co/courses/118/units/26114) 期待在工作坊看見你的身影！ <div class="further-reading" style="background: #ececec;"> <div class="further-reading-inner-wrapper"> <h5>無法參與工作坊怎麼辦？</h5> <p>我們理解許多同學們一邊工作一邊學習，時間上不見得皆能每次參與。因此工作坊結束後隔天，我們會將工作坊的錄影與當天所使用的相關資料 (投影片、Sample Code) 整理發佈課程單元中。</p> <p>但如果時間允許，我們相當推薦同學盡量參與工作坊，與助教、同學們即時互動，一起實作，對於學習的吸收成效更佳。</p> </div> </div> --- ### 07/18 非同步觀念開箱工作坊 - 行前提醒 <div style="width:100%"> <img style="max-width:1000px; width:100%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/16359/Screenshot_2021-08-16___3.38.39_1.png"> </div> 非同步 (Asynchronous) 溝通是使用 JavaScript 的開發者相當頭痛，也相當重要的主題，下週開始我們將會初探這個關念。雖然說下週才是課程內容的正是初探，但其實現在的我們，已經默默地用了許多非同步的語法、概念而不自知，所以這次的工作坊，助教講師將帶著我們搶先開箱 —— 「非同步溝通」的概念。現在就去看看這次工作坊的內容吧 ➡️ [報名 Week 2 非同步觀念開箱工作坊](https://lighthouse.alphacamp.co/courses/207/units/29025)  <div style="width:100%"><img style="max-width:1000px; width:100%;" src="https://assets-lighthouse.s3.amazonaws.com/uploads/image/file/4416/banner_2.001.jpeg"></div> --- ## Webinar Update ### 【今晚 7:30 工作坊提醒】學期 3：非同步觀念開箱工作坊本週我們開始學習到部署，資料庫在本地與推上遠端伺服器後，我們默默地遇到了與許多非同步情境而不自知。所以，今天晚上 7:30 非同步觀念開箱工作坊，助教講師將會初次開箱——「非同步溝通」 #### 活動資訊 <div style="background: #ececec; padding: 15px; margin-bottom: 10px; border-radius: 10px ; min-width:450px; width:fit-content;"> • 活動時間：07/18 (二) 19:30 - 21:00<br> • 與會連結跟行前準備：請參考<a href="https://lighthouse.alphacamp.co/courses/207/units/29025" target="_blank"> 非同步觀念開箱工作坊活動頁面</a> </div>  <div style="width:100%"><img style="max-width:1000px; width:100%;" src="https://assets-lighthouse.s3.amazonaws.com/uploads/image/file/4416/banner_2.001.jpeg"></div> --- 前端版本 ## Webinar Update ### 【今晚 7:30 工作坊提醒】學期 3：非同步觀念開箱工作坊本次的非同步觀念開箱是後端專修的工作坊，也歡迎前端同學一起來學習。今天晚上 7:30 非同步觀念開箱工作坊，助教講師將會初次開箱——「非同步溝通」 #### 活動資訊 <div style="background: #ececec; padding: 15px; margin-bottom: 10px; border-radius: 10px ; min-width:450px; width:fit-content;"> • 活動時間：07/18 (二) 19:30 - 21:00<br> • 與會連結跟行前準備：請參考<a href="https://lighthouse.alphacamp.co/courses/207/units/28780" target="_blank"> 非同步觀念開箱工作坊活動頁面</a> </div>  <div style="width:100%"><img style="max-width:1000px; width:100%;" src="https://assets-lighthouse.s3.amazonaws.com/uploads/image/file/4416/banner_2.001.jpeg"></div> --- # After Webinar ### 學期 3｜七月班 - 非同步觀念開箱工作坊會後精華本次舉辦的非同步觀念開箱工作坊，目的是： - 讓同學初步掌握「非同步」的基本觀念 - 在腦海中註冊「非同步」的概念，幫助同學在實作上遇到問題時，找到可能是非同步問題的判斷點在本次工作坊中，助教 Yan 透過案例與觀念提問，帶領同學思考： - 非同步究竟是什麼？ - 為什麼要有非同步機制？為什麼我們要使用非同步？ - 在 JavaScript 裡，有哪些非同步行為/語法 - 實作中，在哪些情境我們會常常遇到非同步處理？常見問題是什麼？解決方案是什麼？ <div style="position: relative;width:100%;height:0;padding-bottom: 56.25%;"> <iframe style="position:absolute;top:0;left:0;width:100%;height:100%" src="https://player.vimeo.com/video/846502350?h=7c94f2e92a&badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allowfullscreen></iframe> </div> <div style="line-height:16px;"></div> #### 工作坊參考資料 ##### 投影片 <div style="position: relative;width:100%;height:0;padding-bottom: 55%;"><iframe style="position:absolute;top:0;left:0;width:90%;height:90%" src="https://docs.google.com/presentation/d/e/2PACX-1vT6bZuNUp3ZlHzOzwTdv6FIT9obKVmAByZrg0ruD2N30sWwNeXUj_TbA8XM0Ia3efDl8aE_kyYGnJlU/embed?start=false&loop=false&delayms=3000" frameborder="0" width="960" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe></div>  --- ### 學期 3｜七月班 - 非同步觀念開箱工作坊 - Highlights <img src="https://assets-lighthouse.s3.amazonaws.com/uploads/image/file/22872/Picture2.png"> 本次舉辦的非同步觀念開箱工作坊，Yan 助教透過快問快答，與實際案例正反對照，帶同學們更加理解「非同步溝通」的核心觀念，以及找出非同步影響的思考點，讓同學們更清楚地了解抽象觀念。 <div style="display:flex; justify-content: space-between; background-color: #f6f6f6; border-radius:5px; font-size: 0.875rem; margin-bottom: 5px;"> <div style="width: 80%; padding: 2% 5%; display:flex; justify-content: space-between; align-items: center;"> 今天還有一個印象深刻的收穫是，customer與product兩個資料庫的比對，業界作法會先將適量的資料撈出再比對，減少撈一堆不必要資料的時間跟記憶體。很高興能夠一窺更聰明的思路! </div> <div style="width: 18%; display:flex; align-items: center; padding: 2% 0;"> <img style="max-height: 30px; border-radius: 50%; margin-right: 5px;" src="https://assets-lighthouse.s3.amazonaws.com/uploads/user/photo/1495/medium_GOPR0464.JPG"> <p style="margin-block-start: 0.25em; margin-block-end: 0.25em;">mi</p> </div> </div> <div style="display:flex; justify-content: space-between; background-color: #f6f6f6; border-radius:5px; font-size: 0.875rem; margin-bottom: 5px;"> <div style="width: 80%; padding: 2% 5%; display:flex; justify-content: space-between; align-items: center;"> 感謝助教，對於非同步這部分的講解讓寫code的思考邏輯很有幫助。 </div> <div style="width: 18%; display:flex; align-items: center; padding: 2% 0;"> <img style="max-height: 30px; border-radius: 50%; margin-right: 5px;" src="https://assets-lighthouse.s3.amazonaws.com/uploads/user/photo/11410/medium_4EF63770-68C5-49F5-877A-86726BD89779_2.JPG"> <p style="margin-block-start: 0.25em; margin-block-end: 0.25em;">Anna Chu</p> </div> </div> 現在就去看看精彩的會後錄影吧 ➡️ [ Week 3 非同步觀念開箱工作坊 – 2023/07 月班會後精華](https://lighthouse.alphacamp.co/courses/207/units/29040)  <div style="width:100%"><img style="max-width:1000px; width:100%;" src="https://assets-lighthouse.s3.amazonaws.com/uploads/image/file/4416/banner_2.001.jpeg"></div> ---

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.