# 彭彭的題目
#### 主講分配表連結
https://docs.google.com/spreadsheets/d/1iqhlynhpy9-IVelvuBNX20k0p5v6WoGH73K32Q6Nj_4/edit#gid=0
****
### 一般性問題
1. 請介紹一下你自己。
1. 在你開發專案的過程中，最困難的部分是什麼？
1. 你對自己未來的職涯想像是什麼？
1. 知道 Git Flow 嗎？你如何在開發過程中使用 Git 做版本控制？
### 網站運作基本概念
1. 什麼是 CORS，如何讓跨網域溝通變得可行？
1. 什麼是 HTTP 通訊協定？
1. HTTPS 如何保護資料的安全？
1. WebSocket 通訊協定和 HTTP 通訊協定的關鍵差異是？
1. 什麼是快取？如何應用在你專案中？
1. 什麼是 Cookie？試說明 Cookie 的運作方式？
1. 什麼是 Web Storage？和 Cookie 的特性有什麼差別？
1. 試解釋非同步程式的運作邏輯。
1. 什麼是 RESTful API，能否分享你串接 RESTful API 的經驗？
1. 解釋一下 MVC 的設計觀念，曾經實作過 MVC 的程式架構嗎？試說明。
### HTML 和 CSS
1. 什麼是 DOCTYPE？
1. 設計一個 RWD 網頁，你會注意哪些關鍵的螢幕解析度？
1. display:inline 和 display:block 的差異？
1. display:none 和 visibility:hidden 的差異？
1. box-sizing 的作用？
1. 什麼是 margin collapsing？
1. 使用語意標籤的好處是什麼？
1. \<div> 和 \<span> 的差異？
1. 請分享一個瀏覽器相容性的問題解決案例？
1. 如何優化網頁的載入速度？有哪些可能的做法和考量？
1. 什麼是 HTML DOM？
1. 你會用什麼方式做 CSS Normalization？
### React
1. 你覺得 React 解決了什麼問題？
1. React 組件中的 property 和 state 有什麼不一樣？
1. 解釋一下 React Virtual DOM 的運作方式和優點？
1. 解釋一下 React 組件的生命週期？
1. 解釋一下 React 的 One-Way Data Flow 設計邏輯，能否舉例說明？
1. 如何在 React 中使用原生的 HTML Element。
1. 為什麼你要使用/不使用 Redux？
1. 為什麼你要使用/不使用 React Context？
1. 為什麼你要使用/不使用 React Hooks？
1. 什麼是 Higher Order Component，用來解決什麼問題？
1. Single Page Application 的優缺點？
1. 如何解決 SPA 的 SEO 問題？
### JavaScript 程式語言
1. null 和 undefined 和 undeclared 的差異？
1. 什麼是 NaN？在什麼情況下會出現 NaN？如何偵測變數中的資料是 NaN？
1. 解釋一下變數 scope 的概念、使用 let 和 var 宣告變數有什麼差別？
1. 解釋 Primitive Data Type 和 Reference Data Type 的差別。
1. 試說明 Hoisting 的現象？
1. 試解釋非同步程式的概念？
1. 什麼是 this？如何用 call、apply、bind 等方法操作函式？
1. 什麼是 Closure？能否舉例說明？
1. 什麼是 Pure Function？
1. 箭頭函式和其他函式的寫法除了語法之外，還有什麼差異？
1. 試說明你對原型鍊的理解？
1. == 和 === 的差別？
1. 你覺得 JavaScript 和 Python 有什麼差別？
1. 請說明 Unit Test 想解決的問題是什麼，可以分享你寫的 Unit Test 案例嗎？
### Event Handling
試說明事件傳遞 (event propagation) 的概念？
試說明事件處理中 bubble 和 capture 的差別。
----
<br >
## JavaScript、React 程式碼考題
第一題 月 8/19
(1) 請解釋流程跟印出來的結果
(2) 如果想維持用 var 不用 let，應該如何改寫才能讓 i 不被覆寫？
```javascript=
for(var i=1;i<=3;i++){
window.setTimeout(function(){
console.log(i);
}, 100*i);
}
```
:::spoiler **回答**
🔑 var 是全域變數。
🔑 setTimeout是非同步的Web API。
🔑 閉包。
```javascript=
// 在 setTimeout 裡帶入參數
for(var i=1;i<=3;i++){
window.setTimeout(function(x){
console.log(x);
}, 100*i, i);
}
// 使用 IIFE 包裝
for(var i=1;i<=3;i++){
(function (x) {
setTimeout(function() {
console.log(x)
}, 1000 * x)
})(i)
}
```
:::
----
第二題 巧 8/19
說明會印出的訊息和順序？為什麼？
```javascript=
let test=()=>{
console.log(this.x);
};
test();
let obj={
x:3,
test:test
};
obj.test();
```
:::spoiler 解答
* 解答:
先印出第四行的test()，結果為undefined；在印出第9行的obj.test()，結果為undefined
* 第一個test:
一般函式建立會位於瀏覽器底下的window執行環境下，因此，在window下直接使用箭頭函式，test的this.x會指向window，this 的值等於全域性物件。
> 嚴格模式底下就都是undefined
> 非嚴格模式，瀏覽器底下是window
> 非嚴格模式，node.js 底下是global
* 第二個test:
常規JavaScript 函式內部，this 值是動態的，因此，this的值取決於如何呼叫函式。
箭頭函式中 this 的行為與常規函式的 this 行為有很大不同，箭頭函式內部的 this 值始終等於外部函式的 this 值。
使用箭頭函式時，要確實將箭頭函式宣告在物件內部，這樣 this 才會指向該物件。
* 修改的方式:
```
let obj={
x:3,
test:function(){
console.log(this.x)}
};
obj.test();
```
```
let obj={
x:3,
test:function(){
const test = ()=>{
console.log(this.x)}
test()
}
};
obj.test();
```
https://www.gushiciku.cn/pl/pRzd/zh-tw
https://blog.techbridge.cc/2019/02/23/javascript-this/
:::
----
第三題 瑞 8/19
在 React Component 的 **`render()`** 中：
```javascript=
let data=[3, 4, 5];
return {data.map(function(value){
return <li>{value}</li>;
})};
```
以上程式有什麼可能的問題？
要如何改善？
:::spoiler 解答
```javascript=
import React from 'react';
let data = [3,4,5]
class DemoKey extends React.Component {
render(){
return (<>
{ data.map(
function(value, index){
return <li key={index}>{value}</li>;
}
)}
</>)
}
}
export default DemoKey;
```
1. 補上 key 值
2. 不會變動的資料不要放在 render 裡，甚至最好放在 Component 的函式外，避免一直重複宣告
3. return 必須有parents fragment包覆內容
:::
----
第四題 若 8/26
請解釋流程跟印出來的結果
```javascript=
function a(a){
a();
}
function b(b){
b();
}
function c(c){
console.log('hihihi');
}
a(b(c()));
```
:::spoiler Answer
會先印出'hihihi'，然後報錯。
因為它呼叫的對象是變數 b，而不是function b，因此會報錯 b is not a function
:::
----
第五題 東 8/19
請問下列 **`console.log`** 的順序內容是？
```javascript=
function getUsersApiMock(){
return new Promise(resolve=>{
resolve('user');
});
}
async function fetchUsers(){
const data = await getUsersApiMock();
console.log('fetchUsers');
return data;
}
fetchUsers().then(users => console.log(users));
console.log('log');
```
:::spoiler Key Concepts
> **Promise**, **Web APIs**, **Event queue**, **Call Stack**
:::
----
第六題 宜 8/26
請問以下 html 分別套用下列兩組 CSS，a 與 b 中間的 margin 各是多少
```=
<section>
<div>a</div>
<div>b</div>
</section>
// A 組 CSS
div {
margin: 10px;
}
// B 組 CSS
section {
display: flex;
flex-direction: column;
}
div {
margin: 10px;
}
```
:::spoiler
* A組：10px (margin collapsing)，因為沒有設定`float`, `position: absolute`
* B組：20px (`flex` 沒有 margin collapsing)，因為它不是 block layout
:::
----
第七題 sol 8/26
請回答下列問題
```javascript=
let customerA = {
name: "Teresa",
age: 20,
friend:{
name: "Andy",
age: 30
}
};
// 題目
let customerB = customerA;
customerB.age = 40;
// 1.console.log(customerA) 會回傳什麼?
let customerC = {...customerA};
customerC.friend.name = "Fred";
// 2.console.log(customerA) 會回傳什麼?
// 3.如何完全複製 customerA？
```
:::spoiler answer
```javascript=
//1.{name: "Teresa",age: 40,friend: {name: "Andy",age: 30,}};
//2.{name: "Teresa",age: 40,friend: {name: "Fred",age: 30,}}
//3.
const customerADeepCopy = JSON.parse(JSON.stringify(customerA));
customerADeepCopy.age = 100;
console.log(JSON.parse(JSON.stringify(customerADeepCopy)));
//{name: "Teresa",age: 100,friend: {name: "Fred",age: 30,}}
console.log(JSON.parse(JSON.stringify(customerA)));
//{name: "Teresa",age: 40,friend: {name: "Fred",age: 30,}}
```
補充：
* 可以利用下面的方式印出一個當下你要log物件的字串拷貝！
`console.log(JSON.parse(JSON.stringify(obj)));`
[console.log() shows the changed value of a variable before the value actually changes](https://stackoverflow.com/questions/11284663/console-log-shows-the-changed-value-of-a-variable-before-the-value-actually-ch)
[How can I make console.log show the current state of an object?](https://stackoverflow.com/questions/7389069/how-can-i-make-console-log-show-the-current-state-of-an-object)
[console.log()](https://developer.mozilla.org/en-US/docs/Web/API/Console/log)
[其他拷貝方式～](https://stackoverflow.com/questions/122102/what-is-the-most-efficient-way-to-deep-clone-an-object-in-javascript)
:::
----
第八題 東 8/26
```javascript=
console.log(0.1+0.2 == 0.3) >> ?
```
:::spoiler 觀念
### floating point number (浮點數)、 binary （二進制）
> 實際測試運算結果
> <img src="https://i.imgur.com/hTksTh5.png" width="200px">
#### 圖解：浮點數與二進位
#### 數值
```javascript
0.1 -> 0.0001100110011001100(1100循環) -> 1.100110011001100 * 2^(-4)
0.2 -> 0.0011001100110011001(1001無限循環) -> 1.100110011001100 * 2^(-3)
```
補充：[詳細解釋影片](https://www.youtube.com/watch?v=PZRI1IfStY0)
:::
<br >
----
## 後端
### Python 程式語言
你如何在 Python 中做多行註解？
請問 is 和 == 的差別？
pass 在程式中的用途是？
如何在函式中使用全域變數？
請問 Set 和 List 最大的差異是什麼？
請問 List 和 Tuple 最大的差異是什麼？
什麼是列表的負索引？能否舉個例子說明？
請說明 Mutable 和 Immutable 資料型態的差異？
試說明什麼試 Iterable 資料型態，在什麼地方會使用到？
試說明淺拷貝和深拷貝的差異？如何進行深拷貝？
試說明 generator 的應用場景？
什麼是 decorator？可能的應用場景？
你覺得 JavaScript 和 Python 有什麼差別？
請說明 Unit Test 想解決的問題是什麼，可以分享你寫的 Unit Test 案例嗎？
### Node
為什麼你要使用 Node.js？
試解釋 Node.js Event Loop。
試解釋 Node.js 的 Non-Block IO 系統。
如何解決 Node.js 單一程序的效率問題？
為什麼你要使用 Nginx 搭配 Node.js 架構系統？
### Database
請說明 No-SQL 和 SQL 資料庫的差異？
什麼是資料庫正規化？
什麼是索引？為什麼要加索引？是否知道索引背後的資料結構技巧。
什麼是外鍵？為什麼要加外鍵？
Inner Join, Outer Join, Left Join, Right Join 的差異？
請解釋 Race Condition，能否進一步解釋 Deadlock？
試說明 Transaction 的概念？
請說明 Connection Pool 的運作觀念。
請解釋 Process 和 Thread 的差別？
### Architecture
Nginx 的用途？你為什麼需要使用 Nginx？
什麼是 CDN，你是否使用過 CDN？
什麼是 DNS，A record 和 CName record 各有什麼用途？
你會怎麼利用 AWS 或 GCP 提供的服務，來面對瞬間暴衝的需求量？
試解釋虛擬化技術？Docker 和傳統的 Virtual Machine 有什麼差別？
什麼是 CI/CD？是否使用過任何 CI/CD 工具？
為什麼你會使用 S3，好處是什麼？
### Security
什麼是 SQL Injection？如何防止？
什麼是 XSS 攻擊？如何防止？
什麼是 DDoS 攻擊？如何處理？
### Python 程式碼考題
請說明和解釋印出來的結果
第一題
def test():
x=3
test()
print(x)
第二題
x=3
def test():
x=10
test()
print(x)
第三題
x=3
def test():
global x
x=10
test()
print(x)
請說明和解釋印出來的結果
data=[0, 1, 5, 2, 4, 3, 6]
print(data[-6])
print(data[1:-2])
print(data[4::-2])
print(data[-7:-3])
print(data[-3:-7])
print(data[-3:-7:-1])
print(data[-8])
請將以下函式改用 Lambda 語法撰寫
def test(x):
return x*2
print(test(3))
請問以下程式會印出什麼？
data = ["", -1, None, [False], True, {}]
for d in data:
if d:
print(d)
請問以下程式會印出什麼
data = [3, 4, 5, 6]
print(data[:] is data)
print(data[:] == data)
請運用 generator 的技巧完成以下程式
def myGenerator(max):
# 你的程式碼
for n in myGenerator(5):
print(n)
#程式要印出 2, 4, 6, 8, 10
請定義 Iterator 物件的類別，完成以下程式
class MyData:
def __init__(self, max):
self.n=0
self.max=max
# 你的程式碼
for x in MyData(5):
print(x)
#程式要印出 2, 4, 6, 8, 10
Sign in with Wallet
Connect another wallet