🐶 TIL 0124

🌵 [Branch]

• Branch is like a separate workspace that multiple people can work on the same project at the same time.
  --> ex) Jasons works in branch aaa and Kelly works in branch bbb. So later on if their wors are done, it is able to merge all the branches into one.

---

Terminal Coding

git checkout aaa
—> Swtiches the user's current branch into aaa branch. (The workspace changes)
git branch
—> Shows the current branch location
git checkout master
—> Returns back to master branch.
git pull
—> Updates all the branches that the user created.

---

🌾 [Value]

Value: The value that cannot be changed.

--> Here, the value is fixed to qqqq...
Whatever the user tries to type in, the value is always qqqqq... .

Different from defaultValue:
defaultValue: The initial value that would disappear once the user types in something rather than null.

If defaultValue is set as qqq, the initial value is qqq but when the user tries to give a change, the input box value is able to change.
--> It's not forever qqq, but qqq for the first time the code is executed.

Value, then defaultValue

• If there exists myWriter, show Value. If not, show defaultValue.
  --> value = {props.myWriter || "asdfasdf"}
• So when the user writes anything insdie the input box, it first executes asdfasdf but then changes the value the user wrote.

➡️ Using in freeboard

• At the very momment when the user changes myWriter, onChangeMyWriter is executed. (Yet displayed in the screen.)
• The value goes into in setMyWriter by (event.target.value). Then the value is saved to mywriter.
• When the myWriter is sent to presenter and eventaully finished submitting, My000 is shown empty.

setMyWriter(“”)
setMyPassword("")
setMyContents("")

---

🧽 [Event Bubbling]

*If the user wants to click anywhere of the box to move to the other page, use event bubbling.

: Executing from child component to parent component. (자식에서 부모로 이벤트 전파)
Meaning, even if onclick function is bined to parent, outside onclick is also executed when the clicking child.

• event.currentTarget.id
  Party of event bubbling. (당사자)
  --> eventTarget is the thing the user directly clicked.
  --> currentTarget is declaring the function directly.

• event.capturing
  Exectued from parent to child.

---

📚 [Framework Library]

: Package of bunch of tools.

• Libarary is made of components, so the user just needs to import to use it.

"To reinvent the wheel"
: Waste a great deal of time or effort in creating something that already exists.

Using library does...
-saves time
-reduces errors
-able to use in diverse browsers
-able to resize freely
-addition of functions inside

• But becareful to use verified libraries: The most downloaded libraries.

• Check whether the library is stabalized.

• UI Framework is where all the UI Libraries are contained.

---

☂️ [Icons Practice]

*Ant-Design used(antd is created only for react)

< Downloading antd>
1. Terminal
--> yarn add antd
2. Working Page
--> import 'antd/dist/antd.css’

⬇️ example

import {ScissorOutlined} from '@ant-design/icons'
import styled from '@emotion/styled'

const MyIcon = styled(ScissorOutlined)`
	color: skyblue;
    font-size: 50px;		      `
export default function LibraryIconPage(){
    return <MyIcon/> 
}

---

⛓ [Scope/Scope-Chain]

Scope: {}
Scope-Chain: Happens when the key cannot find its value inside its scope when doing "console.log". By scope-chaining, the key can find it's value in the outside scope.