TIL-20220714

회고

• 뭐 한거 없는거 같은데 시간이 잘간다.
  • 좀 더 집중하고, 몰입하자.
• DSNA만 하지말고 다른 CS도 daily로 조금은 하자 인간적으로.
• 프로젝트 WYIS 관련 디자인 레이아웃 등 고민너무 하지 말고 일단은 시작하는것도 중요하다.

DSNA | HUFS(한국외대)

• 유용한 자료구조
  • union find (disjoint set)
• 최소신장트리(MST; Minimum spanning tree)
  • 최소신장트리의 특징
    • 트리의 특징
    • Cut property (CUT에서 최소비용을 edge를 가진 MST는 적어도 하나 이상 존재한다.) -> PRIM
    • Cycle property (CYCLE을 가질때 최대비용 edge는 MST에 포함되지 않는다.) -> KRUSCAL
  • PRIM Algorithm related to 'cut property'
    • 최소 비용 edge를 찾을 때 priority queue(binary heap 등) 사용
  • KRUSKAL Algorith related to 'cycle property'
    • cycle 유무 파악할 때 union-fold 자료구조 사용
• 동영상 정리 및 자료 정리 필요.
  • union-find 자료구조 1, 2
  • 알고리즘 - 그래프 - MST최소신장트리 - 3가지 성질
  • 알고리즘 - 그래프 - MST최소신장트리 - Prim's algorithm
  • 알고리즘 - 그래프 - MST최소신창트리 - Kruskal's algorithm

Vanilla (JS)

• Closures (MDN > References > JavaScript > Closures)
  • Lexical scoping
    • Scoping with let and const
  • Closure
  • Practical closures
  • Emulating private methods with closures
  • Closure scope chain
  • Creating closures in loops: A common mistake
  • Performance considerations

React (JS)

• Responding to Events (revisited)
  • You will learn
    • Differnt ways to wtrite an event handler
    • How to pass event handling logic from a parent component
    • How events propagate and how to stop them
  • Adding event handlers
    • Reading props in event handlers
    • Passing event handlers as props
    • Naming event handler props
  • Event propagation
    • Stop propagation
    • Passing handlers as alternative to propgation
    • Preventing default behavior
  • Can event handlers have side effects?
  • Recap
    • You can handle events by passing a function as a prop an element like <button>.
    • Event handlers must be passed, not called! onClick={handleClick}, not onClick={handleClick()}.
    • You can define an event handler function separately or inline.
    • Event handlers are defined inside a component, sothey can access props.
    • You can declare an event handler in a parent and pass it as a prop to a child.
    • You can define you own event handler props with application-specific names.
    • Events propagate upwards. Call e.stopPropataion() on the first argument to prevent that.
    • Events may have unwanted default browser behavior. Calle.preventDefault() to prevent that.
    • Explicitly calling an event handler prop from a child handler is good alternative to propagation.

• State: A Component's Memory (revisited)
  • You will learn
    • How to add a state variable with the useState Hook
    • What pair of values the useState Hook returns
    • How to add more than one state variable
    • Why state is called local
  • When a regular variable isn't enought
  • Adding a state variable
    • Meet your first Hook
    • Anantory of useState
  • Giving a component multiple state variables
  • State is isolated and privatee
  • Recap
    • Use a state variable when a component needs to "remember" some information between renders.
    • State variables are declared by calling the useState Hook.
    • Hooks are special functions that stat with use. They let you "hook into" React features like state.
    • Hooks might reind you of import: they need to be called unconditionally. Calling Hooks, including useState is only valid at the top level of a component or another Hook.
    • The useState Hook returns a pair of values: the current state and the function to update it.
    • You can have more than one state variable. Internally, React matches them up by their order.
    • State is private to the component. If you render it in two places, each copy gets its own state.

• Render and Commit (revisited)
  • Step1: Trigger a render
    • Initial render
    • Re-renders when state updates
  • Step 2: React renders your components
  • Step 3: React commits changes to the DOM
  • Epilogue: Browser paint
  • Recap
    • Any screen update in a React app happens in three steps:
      1. Trigger
      2. Render
      3. Commit
    • You can use Strict Mode to find mistakes in your components
    • React does not touch the DOM if the rendering result is the same as last time