TIL-20220727

회고

• 생각보다 한게 많이 없다.
  • DSNA 듣기만 하지말고 코드도 짜보고 Leetcode든 programmers든 해야 남지 안그러며면 그냥 다 까먹다..
  • CS 기본 과목들은 조금씩이라도 꾸준히 하자
• 25KM(80min) Biking done. 빛가람 -> 나주대교 -> 승촌보 -> 나주대교 -> 빛가람
• SOTSOG 프로젝트에는 data visualization with interactivity가 핵심기능 중 하나인데.... d3.js를 해야 할거 같다.

React

• Thinking in React (revisited)
  • Start with the mockup
  • Step 1: Break the UI into a component hierarchy
  • Step 2: Build a static version in React
  • Step 3: Find the minimal but complete representation of UI state
  • Step 4: Identify where your state should live
  • Step 5: Add inverse data flow
  • Punchlines
    • Props are a way of passing data from parent to child.
    • This is called one-way data flow because the data flows down from the top-level component to the ones at the bottom of the tree.
    • Building a static version requires a lot of typing and no thinking, but adding interactivity requires a lot of thinking and not a lot of typing.
    • Think of state as the minimal set of changing data that your app needs to remember.
    • The most important principle for structuring state is to keep it DRY (Don't Repeat Yorself).

• Synchornizing with Effects
  • (Overview) Some components need to synchronize with external systems. For example, you might want to control a non-React component based on the React state, set up a server connection, or send an analytics log when a component appears on screen. Effects let you run some code after rendering so that you can synchronize your component with some system outside of React.
  • You will learn
    • What Effects are
    • How Effects are different from events
    • How to declare an Effect in your components
    • How to skp re-running an Effect unnecesarily
    • Why Effects run twice in development and how to fix them
  • What are Effects and how are they different from events?
  • You might not need an Effect
  • How to write an Effect
    • Step 1: Declare an Effect
    • Step 2: Specify the Effect dependencies
    • Step 3: Add cleanup if needed
  • How to handle the Effect firing twice in development
    • Controlling non-React widgets
    • Subscribing to events
    • Triggering animations
    • Fetching data
    • Sending analytics
    • Not an Effect: Initializing the application
    • Not an Effect: Buying a product
  • Putting it all together
  • Recap
    • Unlike events, Effects are casued by rendering itself rather than a particular interaction.
    • Effects let you synchronize a component with some external system (thid-party API, network, etc).
    • By default, Effects run after every render (including the initial one).
    • React will skip the Effect if all of its dependencies have the same values as during the last render.
    • You can't "choose" your dependencies. They are determined by the code inside the Effect.
    • An empty dependency array ([]) corresponds to the component "mounting", i.e. being added to the screen.
    • When Strict Mode is on, React mounts components twice (in development only!) to stree-test your Effects.
    • If your Effect breaks because of remounting, you need to implement a cleanup function.
    • React will call your cleanup function before the Effect runs next time, and during the unmount.

DSNA | HUFS

• 신찬수 교수님 유튜브 강의 그냥 듣기
  • 핵심
    • Greedy algorithm은 현재 상황에서 최선을 다해서 선택한게(local decision)에 전체적으로 맞는 해를(global solution) 도출한다고 가정한 후 답을 구하는 것
    • 따라서 정확성 증명을 무조건 해야한다.
    • 예
      • 동전교환문제(동전 배수 형태에 따라 greedy가 먹힐수도 안먹힐수도 있음)
      • 강의실 배정문제
      • 허프만 코드 (prefix-free code), min heap 사용
    • 귀류법
      • 주장하는 것이 틀렸다고 가정하고 진행하다 발생되는 모순점으로 역으로 참을 증명, 약간 대우(~q ~p) 느낌
  • 알고리즘 - 그리디 방법 소개
  • 알고리즘 - 그리디알고리즘 - 강의실 배정문제
  • 알고리즘 - 강의실 배정 그리디 알고리즘 정확성 증명
  • 알고리즘 - 그리디 알고리즘 - 허프만코드문제
  • 알고리즘 - 허프만 코딩 알고리즘 정확성 증명