🥠 TIL 0113

[Synchronous and Asynchronous]

❗️ If the post is submited but the user cannot call the post, that's cuz the user tried to call the post before the post got fully submitted.
➡️ So the user must call the post whenever the posting is fully done. And the process that the user is calling the post before the final submission is called Asyncronous.

The opposite thing for asyncronous is syncronous, which the user can call the post whenever the post is fully submitted.

Examples)
➿ Asyncronous:

• The user can chat using Kakao Talk while downloading random files.
• The user can call both post lists and product lists all at once.

➰ Syncronous:

• The user is only allowed to call one list at a time.
• The action cannot overlap. This is because the code executes from top to bottom, which eventually means the second code is executed only when the first code is fully operated.

▶️ Asynchronous on VS Code

const data = axios.get('http://koreanjson.com/posts/1')
console.log(data) 
//promise

• This code requests to backend computer.
• This code executes what's saved in (data).
• The code is making a promise that it will later fully save to (data). Since the code is asynchronous, the computer is telling the user that the savings will ultimately be done.
• Until the data savings aren't done, the savings are inside the promise.

---

[async / await]

➡️ This command changes asynchronous code to synchronous code.
--> Basically changing async to waiting status.
--> await ALLWAYS follows behind async.

• await is making the code to wait until the command is fully operated or saved so the code cannot go to the next stage.
• Once the data is fully operated/executed, then it is able to be callen by the user.

---

[Hoisting - var]

console.log(aaa)
var aaa = 3

• Computer says it's undefined but anyhow it is executed.
• var aaa goes to the preceding line of the rest of the codes so a is initially declared as 3. Then the rest of the codes are operated.
• var method is old way that uses hoisting.

🖇 On the other hand...

console.log(bbb)
const bbb = 2

• const can be also hoisted but is prevented to approach before the key-value is defined.
• TDX, temporal dead zone, activated: bbb is in temporal dead zone so bbb cannot be approached.

---

[VS CODE Practice]

🟨 index.js ⬇️

import axios from 'axios'
import {useState} from 'react'
import {useMutation, gql} from '@apollo/client'
import { defaultFieldResolver } from 'graphql'

const CREATE_PRODUCT = gql`
    mutation createProduct($seller: String!, $createProductInput: CreateProductInput!){
            createProduct(seller: $seller, createProductInput: $createProductInput){
            _id
            number
            message
        }
    }
`

export default function GraphqlMutationProduct(){
    const [mySeller, setMySeller] = useState("")
    const [myName , setMyName] = useState("")
    const [myContents, setMyContents] = useState("")
    const [myPrice, setMyPrice] = useState("")

    const [createProduct] = useMutation(CREATE_PRODUCT)

    const OnclickSubmit = async() => {
        await createProduct({
        variables: {
            seller: "JB",
            createProductInput: {
                name: "Phone",
                detail: "Great",
                price: Number(myPrice)
            }
        }
        }) 
    }

    const onChangeMySeller = (event) => {
        setMySeller(event.target.value)
    } 
    const onChangeMyName = (event) => {
        setMyName(event.target.value)
    }
    const onChangeMyContents = (event) => {
        setMyContents(event.target.value)
    }
    const onChangeMyPrice = (event) => {
        setMyPrice(event.target.value)
    }

    return(
        <>
        Seller: <input type= "text" onChange={onChangeMySeller} /><br/>
        Product: <input type= "text" onChange={onChangeMyName}/><br/>
        Info: <input type= "text" onChange={onChangeMyContents}/><br/>
        Price: <input type= "text" onChange={onChangeMyPrice}/><br/>
        <button onClick={OnclickSubmit}>Post the Product</button>
        </>
        )
}

🟪 Playground ⬇️

✔️ Seller gets it’s value through $seller, which is getting its userInput value of string.
--> Same for createProductInput.
✔️ < const [execution function] = useMutation(CREATE_PRODUCT) >
--> Function variable should be typed inside ().
--> If the user is creating a profile, createProfile should be typed in.

---

[Algorithms - For/while loop]

🔥 For Loop

✂️ Break: Breaks the loop when the command is given.
📌 continue: Stops the loop when the condition matches then continues after the condition.

Types
*For (let key in object){}

• Before in, object is written and after in, variable is written
• This function can repeat the object{}.

*For (let key of object){}

• This function can get all the elements.
• It's very slow and has low efficiency.

*Array.forEach(function())

• This function is only used for arrays

💧 While Loop

• This function is used when the user didn't decide the total amount of loop he/she will run. The user can run this while loop until they get the answer.

---

[Algorithms Practice]

🟡 ⬇️ Example of for(in) ⬇️

const obj = {
  name: "JB",
  age: 12,
  school: "CodeCamp"
  }
for (let key in obj) {
  console.log(key, obj[key])
  } 
  
 //result: 'name' 'JB'
	   'age' 12
           'school' 'CodeCamp'

↘️ Age printed as number.
↘️ As a result, the key and values are separately printed.

const str = "abcde"
for (let key in str){
  console.log(key)
}

//result: '0'
	  '1'
	  '2'
	  '3'
	  '4'

↘️ This prints the index of string.

🔵 ⬇️ Example of for(of) ⬇️

const str = "what"
for (let key of str){
  console.log(key)
}
//result: 'w'
	  'h'
	  'a'
	  't'

↘️ This prints elements of string.

🟣 ⬇️ Example of forEach ⬇️

const arr = ["Hi","Good Morning", "Bye", "Good Night"];
arr.forEach(( data ) => {
  console.log(data)
})
//result: 'Hi'
	  'Good Morning'
	  'Bye'
	  'Good Night'

↘️ This prints elements of array.

const arr = ["a","b","c"];
arr.forEach (( data, index) => {
  console.log(data, index)
})
//result: 'a' 0
	  'b' 1
	  'c' 2
```js
↘️ This prints the **data** inside the array and it's **index** number.

**🟤 ⬇️ Example of While loop ⬇️**
```js
let current =1; //로봇 현재 위치
let answer =0; //이동횟수

while (current !== 100){
  current++;
  answer ++;
}
//result: 98

↘️ When the statement is true, the statement is operated.
↘️ current: Robot's current location
↘️ answer: Number of stairs the robot moved

---