๐ŸŒ’TIL 0211

JBยท2022๋…„ 2์›” 11์ผ
0

CodeCamp FE 05

๋ชฉ๋ก ๋ณด๊ธฐ
22/33

โฌ‡๏ธ Main Note
https://docs.google.com/document/d/10yMsVEwWhhCpnjYH1ORbnXtRYB7-M3nrhqdc13myuf0/edit


โœจ [Parameters]

[props]

<Component /> --> {Component()}

//This is Container Page
import Presenter from "./Presenter.presenter"

export default function Container () {
  return (
    <>
    {Presenter({count: 123})}
    </>
    )
//This is Presenter Page
export default function Presenter (aaa){
  return (
    return (
    <div>{aaa.count}</div>
    }
  • Here, we can now know that "props" was just a parameter, which is made of function's arguments. Additionally the naming doesn't matter.

[map]

//Executing the function
("a", 0)
("b",1)
("ํ›ˆ์ด",2)
//Declaring the function
["a","b","c"].map((index)=> (
	console.log(`What is ${index}?`)
)

//--> Here, the elements are put to ${index} since the sequence goes as (element, index).
  • Same for index; Here the sequence matters but the naming doesn't matter.
  • *Sequence-> (element, index)
  • Also for filter, state, and prev!
//state/Prev
From
setCount(prev => prev + 1)
to 
>>> setCount(asdf => asdf + 1)

โœจ [graphql Variables]

When requesting for two mutations, rest-API must request for separate two times. Meaning that the variables cannot be used again for multiple times.
--> This is called overFetching.
But for graphql, it can request it at once.

  • Using same variables and using in both createBoard and createProduct.
  • This is called underFetching.
    --> underFetching helps the user to use same variables multiple times again.

โœจ [Regular expressions]

  • Regular expressions starts and ends with slashes.
  • Without starting and ending point, the result comes out as true all the time. (That's meaningless)
    --> Assigned with ^ and $.
  • w --> one word
    w+ --> more than one word
  • d--> number
  • Format : /^---$/.test

Email

/^\w+@\w+\.\w+$/.test("aaa@bbb.com")

Phone Number

/^\d+-\d+-\d+$/.test("010-1234-5678")


[Global State - Context-API]

Global state

  • Backend gets alarm when the user accesses to the browser, and there are some browser functinos that work only when the user is logged in.
    --> ex) Profile Information Page, Upload Page, or Payment Page
  • To do so, isLoggedIn must be set true so that it can be used in every components.

Redux

  • apollo-client => graphql
  • rest-api => react-query

Context-API

  • Context helps the user to manage all the states in the parent component or index page.

  • Most of the components can get state by usign context.
    --> No need to use props.

  • Context is declared with createContext.

  • Then, states are put into createContext value spot.
    --> And those states are set with useState.

//Index Page
import { createContext } from "react";
import BoardWriteContext from "../../src/components/units/21-context-api/BoardWrite.container";

export const ExampleContext = createContext(null);

export default function ContextAPIPage() {
  // context ๋งŒ๋“ค๊ณ  ํ™œ์šฉํ•ด์ค˜์•ผํ•จ
  // createContext ํ•˜๊ณ  useContext๋กœ ๊บผ๋‚ด์“ฐ๋Š” ํ˜•์‹

  return (
    <ExampleContext.Provider value={{ isEdit: true }}>
      <BoardWriteContext />
      {/* ์—ฌ๊ธฐ์— ๋”ธ๋ ค์žˆ๋Š” component๋Š” isEdit ์ ‘๊ทผ ๊ฐ€๋Šฅํ•จ */}
    </ExampleContext.Provider>
  );
}
//Container
import BoardWriteContextUI from "./BoardWrite.presenter";

export default function BoardWriteContext() {
  return <BoardWriteContextUI />;
}
import { useContext } from "react";
import { ExampleContext } from "../../../../pages/21-04-context-api";

export default function BoardWriteContextUI() {
  const { isEdit } = useContext(ExampleContext);
  return <div>{isEdit ? "์ˆ˜์ •ํ•˜๊ธฐ" : "๋“ฑ๋กํ•˜๊ธฐ"}</div>;
}

โœจ [Algorithms - splice()]

// ๋ฐฐ์—ด์—์„œ ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ๋ฉ”์„œ๋“œ
// ๋ฐฐ์—ด์˜ ํŠน์ • ์ธ๋ฑ์Šค ๊ฐ’์œผ๋กœ๋ถ€ํ„ฐ ๋ฐ์ดํ„ฐ๋ฅผ ์‚ญ์ œํ•  ์ˆ˜ ์žˆ๋‹ค
// ๋ฐฐ์—ด์˜ ํŠน์ • ์ธ๋ฑ์Šค ๊ฐ’์œผ๋กœ๋ถ€ํ„ฐ ๋ฐ์ดํ„ฐ๋ฅผ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ๋‹ค
// ์›๋ณธ์ด ์ €์žฅ์ด ๋œ๋‹ค

arr = [1, 2, 3, 4, 5];
arr.splice(2, 1);
//result: 3

//2๋ฒˆ์งธ ์ธ๋ฑ์Šค๋ถ€ํ„ฐ ํ•˜๋‚˜๋ฅผ ์ง€์šฐ๊ฒ ๋‹ค!
//splice๋Š” ์ œ๊ฑฐํ•œ ์ธ๋ฑ์Šค์˜ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ˜ํ™˜ํ•จ
//์›๋ณธ์ด ์ €์žฅ์ด ๋˜๊ธฐ ๋•Œ๋ฌธ์— ๋‹ค์‹œ ๋‹ด์ง€ ๋ง๊ณ  array๋ฅผ ๋‹ค์‹œ ์ฐ์œผ๋ฉด 3์ด ์ œ๊ฑฐ๋œ [1,2,4,5] ๋ฅผ ๋ฐ›๊ฒŒ ๋จ

arr.splice(2, 1, 0, 1, 2, 3);
//์ด๋ ‡๊ฒŒ ํ•˜๋ฉด 2๋ฒˆ ์ธ๋ฑ์Šค๋ถ€ํ„ฐ ํ•˜๋‚˜๋ฅผ 0,2,3์œผ๋กœ ๋Œ€์ฒดํ•˜๊ฒ ๋‹ค ๋ผ๋Š”๋ง์ด ๋จ
//result: [1,2,0,1,2,3,4,5]
profile
๋‘๋น„๋‘๋ฐฅ๋ฐฅ

0๊ฐœ์˜ ๋Œ“๊ธ€