🌝 TIL 2016

⬇️ Main Note
https://docs.google.com/document/d/1qX7bD1p08PT3N80BDoDXmSgV4sDOsu21TZJl0EF7qdE/edit

---

🌻 [Destructuring]

비구조화할당(=구조분해)

{Object Destructuring}

• By destructuring, the user cna take the particular data as a variable from arrays or objects.
• Pulling out name, age, school from Child object and put them as variables inside the curly bracket.
  
• useState() and useQuery are also in the same formula.
• Key name is important, so the name should be identical.

const {data} = useQuery()
--> Here, we wern't able to change the name of data so the method we used was: {data: fetchBoardData}

[Array Destructuring]

• The variable name can change. (User can assign the name)
• const Child = classmates
  When child[0] --> result: "철수"
  
• The names are set as "state" and setState".
• When useState("") function is executed, array is returned inside the function.
• When [state, setState] is called as aaa:
  const aaa = useState("") --> aaa[0] = 15
• Inside the square bracket, variables should be put so that those variables can be matched with index of the function.
  --> The sequence/order matters. (Index matters)
  --> The naming doesn't really matter.
• [_, setState]
  --> This is possible when state is not really used throughout the code.

Destructuring makes efficient coding.
--> long codes can be held in one sentence of code.
--> Efficient while refactoring the code.

---

🌻 [Rest-Parameter]

Deleting data from the object

• When deleting the data from the object, directly making a change in original obejct is not safe in javascript.
• To make a safe change, there must be a new array made, which doesn't contain the unwanted data inside.
• const {money, hobby, ...rest} = child
  --> {delete1, delete2, ..., ...rest}
  --> Here, I want to delete money and hobby from the object. So write those unwanted data first in the array. After writing those data, type ...rest to call the rest data to make the new object.
• ...rest --> The naming doesn't matter. Writing as rest is conventional.
• ...rest is used with spread syntax.

---

🌻 [CustomHook]

• Hook: state techniques that are used in functional components
  ex) useEffect, useRef, useMutation ...
  CustomHooks: When there are overlapping codes, we use hooks that start with use.

useAuth

• The Process is similar to withAuth.
• Before the particular component is executed, useAuth component is executed precedingly.
  --> Able to check through isLoading

usemoveToPage

• Able to manage the page movement.
• import usemoveToPage to the needed page.
• Not a big difference from using router directly, but the code got neat.

---

🌻 [Refetch]

• I used to use refetchQueries, but for those pages that contain large amounts of data, refetchQueries isn't a fitable function to use when editing or deleting.
  --> It takes away too much network costs.
• But by directly editing and deleting cacheState, which saves data of Apollo, makes things efficient.

update(cache, {data}){}
--> Combining cache, which contains original data, and data, which contains the data after executing query.

cache.modify({})
--> fields exist inside, and inside fields, the name of query I request is saved in key.
--> The change is given in key.
--> According to which kind of work it is(create/delete), filter is used. To read the value of element, readField is used.

• When we take a look at network tab in browser, no more additional refetch-API request is sent to backend server.

---

🌛 [Algorithms]

function solution(s) {
    //Specific strting changes into assigned string
    let str = "abcde"
    str = str.replace( "b" , 2 )
    console.log(str)
}
//result = a2cde

//Changing english number to Integer number
const numbers = [
  "zero", "one", "two", "three", "four",  
  "five","six", "seven", "eight", "nine",
];

function solution(s) {
  for (let i = 0; i < numbers.length; i++) {
    while (s.includes(numbers[i])) {
      console.log(s, numbers[i]);
      s = s.replace(numbers[i], i);
    }
  }
  return Number(s);
}