😳 TIL 0121

🧄[Review]

defaultValue
--> Show the previous input that the user wrote inside the input box.

readOnly()
--> If the user tries to edit this on browser, it is unable to edit. It's not even able to click the input box.

props.data?.fetchBoard.title
--> props.isEdit ? true : false

🧦 Partly Editing

Method 1 (Not really recommended)

• Save each variables in separate state. Even the user didn't update title but the context, the whole board is updated and sent to backend data.

Method 2 (Efficient way to do)

• Pick only variables that the user want to update and use mutation.

🥽 Edit Button in Editing Page

• Since the user set it as true, the button is avaiable therefore able to edit.
• About both buttons of post and edit, the condition is different since button from the new page needs the input boxes fully filled in, but edit can always be available.

🐙 Et Cetera

Re-factoring
Literally factoring again to make the code more efficient.

Return
Ending/quiting the statement if the condition matches. After return is stated and used, rest of the codes can not be reached.

Pattern
Developers making their own rules to make the team project or even personal programmings clearly.

Shortcut
command + optinon + ➡️

argument

• Factor for sending data

---

🥦 [Typescript]

*If the user write the code written below in container-

const add = (a:number, b:number)=> {
  return a+b
}

and sets add as {add} to ues props method-
add={add}
-then goes to presenter. The user writes props.add(1,2) to tell the computer what data the user is getting.
--> Receiver should know what data they are receiving.

🏷 Event Tag

ex) ChangeEvent: tells how the userInput changed through inserting the contents inside the bracket.
ex) MouseEvent: event happening once the button is clicked.

📚 API Types

API response data: Graphql-codegen

• This is only available in graphql.
• It has the function of code generating. It automatically creates types.

Install
1. Google "graphql codegen"
2. Go to docs
3. copy yarn add -D @graphql-codegen/cli
4. Go to class folder and make new file --> codegen.yml
5. Paste codegen.yml

• Indention is important in yml files. It sets up all the data according to the indent the user made.
• Can call it yml or yaml.

6. Then go into codegen.yml and copy&paste

schema: schema.graphql # you can also point to a GraphQL endpoint!
generates:
  types.ts:
    plugins:
      - @graphql-codegen/typescript 

• schema: Here goes the address of the API files
  --> schema then goes into the address and downloads all the files related to API. Then those typescript files gointo types.ts.
• types.d.ts: types is declared in ts.
  --> can just type types.ts.

7. Go to package.json and in scripts section,

{
  "scripts": {
    "generate": "graphql-codegen"
  }
}

8. Go to terminals and paste yarn add @graphql-codegen/typescript —dev
   --> Here, using dev because it's not for vs code.
9. After dowlnloading’s over, terminal yarn generate.

• parse configuration and generate outputs should be appearing in green color.

🎀 Eslint / Prettier

🍏 Eslint: code linter
ex sequence for imports
ex No using ==
ex Allow using ===
--> Eslint is basically like a rule for group projects.

🍎 prettier: code formatter
ex 2 indents
ex If the length exceeds 00 amount, go to next line
--> Prettier basically makes the code look pretty and clear.

---

🚪 [Algorithms - .sort()]

• Ascending or Descending string or numbers.
• Basic form of sort method is ascending.
• Sort updates the origin therefor no need to put sort method into other variables.
• While ascending numbers in basic form of sort(), only first index of number is counted.

const arr = [1,2,41,102,5]
	arr.sort()
 	result:  [1,102,2,4,5]

• Here, 102 is shown to be smaller than 2 since only using sort() makes the computer to compare the numbers only with the first index in number itself.

⬇️ Correct way for Acsending form of sort()

arr = [1,3,9,12,102,86]
arr.sort((a,b)=> {
  return a - b //but only able for numbers not string form
})
arr

⬇️ Descending form of sort()

arr = [1,3,9,12,102,86]
arr.sort((a,b)=> {
  return b - a 
})
arr

⬇️ How it works

jsarr = ['a','b','Z','A','f','z']
'a' < 'b'
'z' >'f'
'z' > 'w'
'f' > 'w'

• According to the sequence of UNICODE, each elements get their primary code-numbers.
• Via comparing those code-numbers, it is possible to align elements in orders.
• Uppercase letters get smaller value than lowercas letters.

⬇️ DAY 10 Practice

function solution(s) {
    const answer = [];
    for (let i=0;i<s.length; i++){
        answer.push(s[i])
    }
    
    answer.sort((a,b) => {
        return a > b ? -1 : 1 
    })
    
    let result =""
    for (let i= 0; i<answer.length; i++){
        result +=answer[i]
    }
    return result;
}