🦊 TIL 0125

📝 [Short-Notes]

✏️ To return in jsx, react must be imported but no need to in next.js.

✏️ <Fragment/> </>
When using such functions like key in empty-shortcut markup, it doesn't work:< key = {el.index}.
But by using fragments, it works: <Fragment key={el.index}>.

• shotcut form doesn't have the key. It's just an empty case.
• So there needs fragment to be imported.

✏️ readOnly={!!props.data?.fetchBoard.writer}

• How it works: !!Name --> false --> true
• !! is literally giving boolean form twice.
  --> !Name => not Name --> !!Name => not Name => Name

✏️ Refactoring

---

❗️ [Modal]

⬇️ Notion Modal

import {Modal} from 'antd'

export default function ModalAlertPage(){

    const onClickSuccessButton = () => {
        Modal.success({content: "Upload Successful"})
    }

    const onClickFailButton = () => {
        Modal.error({content: "Upload Failure"})

    }

    return(
        <div>
            <button onClick={onClickSuccessButton}>Successfully Uploaded Button </button>
            <button onClick={onClickFailButton}>Upload Failure Button</button>
        </div>
    )
}

⬇️ Password Modal

import React, { useState } from 'react';
import { Modal, Button } from 'antd';

export default function ModalCustomPage(){
  const [isModalVisible, setIsModalVisible] = useState(false);

  const [_,setPassword] = useState()
  //since password isn't used, it can be canceled and replace it to underbar.
  
  const showModal = () => {
    setIsModalVisible(true);
    //modal appears (true)
  };

  const handleOk = () => {
    setIsModalVisible(false);
    //modal disappears when hit ok
  };

  const handleCancel = () => {
    setIsModalVisible(false);
    //modal disapears when hit cancel
  };


  const onChangePassword =(event: ChangeEvent<HTMLInputElement>) => {
    setPassword(event.target.value)
  }
  return (
    <>
      <Button type="primary" onClick={showModal}>Open Modal</Button>
      <Modal title="Password" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
        Enter Your Password: <input type="password" onChange={onChangePassword}/>
      </Modal>
    </>
  );
};

⬇️ Address Modal

import React, {useState } from 'react';
import { Modal, Button } from 'antd';
import DaumPostcode from 'react-daum-postcode';


export default function ModalAddressPage(){
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [address, setAddress] = useState("")
  const [zonecode, setZonecode] = useState("")

  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  const onCompleteDaumPostCode = (data: any) =>{
    setAddress(data.address)
    setZonecode(data.zonecode)
    console.log(data)
    setIsModalVisible(false)
  }

  return (
    <>
      <Button type="primary" onClick={showModal}>Search for Zip Code</Button>
      {isModalVisible && (<Modal title="Address" visible={true} onOk={handleOk} onCancel={handleCancel}>
      <DaumPostcode onComplete={onCompleteDaumPostCode}/>
      </Modal>
      )}
    </>
  );
};

• When the user clicks "Search for Zip Code" button and enters some words but cancels, the searching zone must be cleared when the user re-opens the searching zone.
• Basically the page becomes false and everything gets deleted. --> Page re-start
• So when the user re-clicks the button, the code becomes true and the page is newly drawn.

---

🏴 [Properties of State]

⬇️ Count Modal

import { useState } from "react"

export default function StatePrevPage(){
    const [count, setCount] = useState(0)
    const onClickCountUp =() => {

        setCount(count + 1)
    }

    return (
    <div> 
        <div>Current Count: {count}</div>
        <button onClick={onClickCountUp}>Count Up</button>
    </div>
    )
}

↪️ Initial Value

const [count, setCount] = useState(0)
~
setCount(count + 1);
When the user types 0 in the intial value in useState ==> no error.
But when the user doesn't type anything in the initial value in useState, error occurs.

REASON:

• Typescript deduces the type. If there isn't any types delclared, typescript deduces as "undefined" type.
  --> Since it deduced as undefined, the typescript is looking for undefined but since (count + 1) is number type, it makes error.
• Typescript deduces based on the initial value, so there should be 0 to tell that the state will be in number form.

Data Accumulation in Pre-Saving Area

setCount(count + 1)
setCount(count + 1)
setCount(count + 1)
setCount(count + 1)
setCount(count + 1)
setCount(count + 1)
setCount(count + 1)

• This codes doesn't make the count button to make 7 count ups at once. only 1 count up at a time.
• setState doesn't directly counts up the numbers right away.
• Since javascript executes its code from top to bottom, it automatically pre-saves the data in pre-saving area. The data isn't fully saved yet, but it's keep adding its new code to defaultValue which is 0.
• So it doesn't matter how many times the same code is written since everysingle time the code is generated, everysingle time it works as:
  (count(0) + 1) --> count still 0
• Count is saved as 1 in the pre-saving area, but it isn't fully saved so multiple same codes doesn't affect anything.

---

🗒 [Prev]

To make that code upside to be working, the user must use prev method.

• Refactoring the function

setCount((prev) => prev + 1)
setCount((prev) => prev + 1)
setCount((prev) => prev + 1)
setCount((prev) => prev + 1)
setCount((prev) => prev + 1)

Prev is original count value. If there is any saved values inside count, it is accumulating the saved values inside the pre-saving area.

To be specific,

• When the user commands the computer to add up 1 to the count, that countValue '1' is saved to the pre-saving zone.
• When second count + 1 is commanded, it is added up to the previous count value, which is 1; so ultimately count becomes 2.
• And so on and on and on...
• As a result, this code makes 5 count ups at a time.

---

🦅 [Husky]

In the middle of commiting the code, husky takes away the code and checks whether the code is available to commit.

Download
yarn add husky@4 --dev
--> When the user wants to download specific data of extention, @Number at the end of the program name.

• lint-staged: write what it's gonna do while taking away pre-commit.

---

🦁 [Algorithms - .reverse()]

Reverse function literally reverses the array.

function solution(n) {
  const answer = [];
  n = n.toString();
  for (let i = 0; i < n.length; i++) {
    answer.push(Number(n[i]));
  }
  return answer.reverse();
}