1. L-Tree

有一組資料 `usersMap: Record<string, string>` ，經過視覺化呈現後會呈現如樹狀的結構。

請利用 `usersMap` 的資料，並設計出一個移動節點的 `move function` 。（可參考下面的資料Ａ以及Ｂ的變化）

    function move(user: string, to: string): void {
        // write your code
    }
    
    move(d, e) //將 user d 移動到 user e 之下

資料Ａ：

    const usersMap = { 
    	a: 'a',
    	b: 'a.b',
    	c: 'a.b.c',
    	d: 'a.d',
    	e: 'a.b.e',
    	f: 'a.d.f',
    	g: 'a.d.g' 
    }

    graph TD
    
    a --> b
    a --> d
    b --> c
    b --> e
    d --> f
    d --> g

資料Ｂ：

    const usersMap = { 
    	a: 'a',
    	b: 'a.b',
    	c: 'a.b.c',
    	d: 'a.b.e.d',
    	e: 'a.b.e',
    	f: 'a.b.e.d.f',
    	g: 'a.b.e.d.g' 
    }

    graph TD
    
    a --> b
    b --> c
    b --> e
    e --> d
    d --> f
    d --> g

2. Sleep Function (V)

請製作一個 sleep function，sleep 會接受一個參數 t 秒，每當 sleep 執行時會等 t 秒後再繼續執行，嘗試符合下列輸出：

    function greeting () {
        console.log('Good Morning!')
    }

   //write your code here

期望執行順序：

    greeting()
    sleep(2)
    greeting()
    sleep(3)
    greeting()

期望輸出：

    Good Morning!
    * wait 2s *
    Good Morning!
    * wait 3s *
    Good Morning!

3. Object To URL Query String (V)

請在不使用 Web API 為前提，製作一個 function，能將下列資料轉換成有效的 URL query string。

（might need example of valid query stinrg?)

    const person = {
        name: "Charlie",
        age: 24,
        isMember: true,
        location: "Taichung/North",
        interestings: ["music", "basketball", "cat"],
        greetins: () => {
            return "Hello, I am Charlie"
        }
    }
    
    function toQueryString(object: Record<string, any>): string {
        //write your code
    }

4. 綜合應用（交流問答）

- 切版佈局
- 元件設計
- ＡＰＩ串接

圖片來源：PCHOME

5. ~~依照使用者權限顯示項目（？）~~

產品側邊欄目錄（Menu），使用者可以透過目錄前往特定頁面，有幾個特定頁面連結（*帳務管理以及系統設定*）需要有 `admin` 權限才能顯示，使用者的資料中有 `isAdmin: "1"` 代表可以顯示。

請嘗試使用 HOC 為前提，完成這個功能。

    function App () {
        return <ul>
            <Link name="儀表板"/>
            <Link name="會員管理"/>
            <Link name="帳務管理"/>  ---> 有權限，頁面才顯示
            <Link name="系統設定"/>  ---> 有權限，頁面才顯示
        </ul>
    }

    function Link () {
        ...可忽略此元件細節
    }

5. 某天你在專案中逛逛時，發現了這麼一段程式碼：

    function App () {
        return <BrowserRouter>
            <UserProvider>
                <Routes>
                    <!--       前略        -->
                    <Route path="/pathA" element={<A />} />
                    .
                    .
                    <Route path="/pathB/morePath" element={<B />} />
                    .
                    .
                    <Route path="/pathC/main/morePath" element={<C />} />
                    <!--       後略        -->
                </Routes>
            </UserProvider>
        </BrowserRouter>
    }

    function A () {       
        return <div>Hey! This is your component - A!</div>
    }

    function B () {       
        const { user } = useContext(userContext)
        
        useEffect(() => {
            if(location.includes("pathB") && !user.isAdmin) {
                navigate("/")
            }
        })
        
        return <div>Hey! This is your component - B!</div>
    }

    function C () {  
        const { user } = useContext(userContext)
        
        useEffect(() => {
            if(location.includes("pathC") && !user.isManager) {
                navigate("/")
            }
        })
        
        return <div>Hey! This is your component - C!</div>
    }

當你看完之後，在不深究產品背後的設計原因之下，覺得可以嘗試優化或重構，請：

1. 敘述這段程式碼的行為
2. 嘗試給出優化的方法

6. useEffect 順序

https://codesandbox.io/s/stupefied-field-gdy8nw?file=/src/index.tsx

7. What is call by value and call by reference in JavaScript? (type)

8. What is difference between IP address and DNS address? (or what happened after when you enter url in browser)

9. Please describe these API endpoints' meaning or behavior.

- GET /members
- GET /members/:id
- POST /members
- DELETE /members/:id

---

##### 題目的ＩＤＥＡ？？？

名詞：SPA / MPA / SSR / CSR

瀏覽器以及裝置的相容性問題

webpack bundle

api & mocking data