TIL-20220722

회고

• CS 기본기가 중요한걸 아는데도 마음처럼 잘 안된다..
  • 작은것 부터 꾸준히 해나가는게 중요하다
  • DSNA / OS / SE / Compiler(&Interpreter) / Networking
• 주말은 freestyle day 이므로 WYIS Project에 좀 더 신경쓰자
• Crafting Interpreters 란 책은 Introduction 까지 밖에 못봤지만 정말 좋은 책일거 같다.
• 오늘 25km 자전거 코스 완주 했다. (드디어 올해(4월부터 시작했지만) +800km 달성, 광주에서 오사카까지 편도 거리다. 돌아올 거리도 채워보자!)

DSNA | HUFS

• Balanced Binary Search Tree Definition
• Balanced Binary Search Tree -> Red-Black Tree
• Red-Black Tree and 2-3-4 Tree relationship

Crafting Interpreters

• 1 Introduction

React

• Referencing Values with Refs
  • (Overview) When you wan a component to "remember" some information, but you don't want that information to trigger new renders, you can use a ref.
  • You will learn
    • How to add a ref to your component
    • How to update a ref's value
    • How refs are different from state
    • How to use ref safely
  • Adding a ref to your component
  • Example: building a stopwatch
  • Differences between refs and state
  • When to use refs
  • Best practices for refs
  • Refs and the DOM
  • Recap
    • Refs are an escape hatch to hold onto values tha aren't used for rendering. You won't need them often.
    • A ref is a plain JavaScript object with a single property called current, which you can read or set.
    • You can ask React to give you a ref by calling the useRef Hook.
    • Like state, refs let you retain information between re-renders of a component.
    • Unlike state, setting the ref's current value does not trigger a re-render.
    • Don't read or write ref.current during rendering. This makes your component hard to predict.

• Manipulating the DOM with Refs
  • (Overview) React automatically update the DOM to match your render output, so your components won't often need to manipulate it. However, sometimes you might need access to the DOM elements managed by React - for example, to focus a node, scroll to it, or measure its size and position. There is no built-in way to those things in React, so you will need a ref to the DOM node.
  • You will learn
    • How to access a DOM node managed by React with ref attribute
    • How the ref JSX attribute relates to the useRef Hook
    • How to access another component's DOM node
    • In which cases it's safe to modify the DOM managed by React
  • Recap
    • Refs are a generic concept, but most often you'll use them to hold DOM elements.
    • You instruct React to put a DOM node into myRef.current by passing <div ref={myRef}>.
    • Usually, you will use refs for non-destructive actions like focusing, scrolling, or measuring DOM elements.
    • A component doesn't expose its DOM nodes by deafult, You can opt into exposing a DOM node by using forwardRef and passing the second ref argument down to a specific node.
    • Avoid changing DOM nodes managed by React.
    • If you do modify DOM nodes managed by React, modify parts that React has no reason to update.

Design | Material 3 | Color System

• Key colors & tones
  • (Overview) The color system handles the variability of dynamically changing color schemes that arise as user inputs change. The logic of tonal relationship and shigts in hue and chroma provide a foundation for flexible color application. Color schemes can be considered a cohensive group of relative tones, rather than a fixed group of constant values.
  • Key colors
    • Key colors: accent & neutral
      • Accent colors
      • Neutral colors
    • Additional colors
      • Error colors
      • Product-specific custom colors
  • Total palettes
    • One key color becomes thirteen tones

• Color roles
  • (Overview) While key colors are the basis for tonal palettes, only a selection of the 13 colors from each tonal palette are used in a UI. A scheme is the group of tones assigned to specific roles that get mapped to components. A primary color's tonal palette, for example, defines tones for paired roles such as the colors for text and icons that are placed on top of a component (on primary). The tone pairings in color roles provide accessible contrast by default and inform tone adjustements for any additional custom color to work harmoniously with an existing scheme.
  • Color schemes
  • Roles in a scheme
  • Mapping accent roles
    • Primary
    • Secondary
    • Tertiary
  • Mapping neutral roles: background & surfaces
    • Neutral
      • Surface tones
      • Surface 1
      • Surface 2
      • Surface 3
      • Surface at 4 and 5
      • Inverse roles
      • Inverse surface
    • Neutral variant

• Tokens
  • (Overview) The M3 baseline color scheme uses the same roles and token mapping as user-generated color schems. The baselien colors translate to groups of related tones. The tones are mapped to roles that create contrast and visual interest when applied to elements in the UI. The same tonal palettes created from M3 baseline's five key colors are also produce the colors to comprise a dark scheme.
  • Baseline color scheme tokens