TIL-20220713

회고

• 드디어 DSNA를 조금 공부했으니 사람 아닌건 면했다.
  • 좀 더 시간을 할애해서 열심히 하자.
• React/Next docs만 보니 자꾸 까먹는다 WYIS 프로젝트를 밤에라도 조금씩 하자.
• 꾸준히 하지 않으면 다 기록을 하던 무엇을 하든 다 휘발되어 버린다.
• 좀 더 부지런해지자.

React (JS)

• Your First Component (Revisited)
  • Components: UI building blocks
  • Defining a component
    • Step 1: Export the component
    • Step 2: Define the function
    • Step 3: Add markup
  • Using a component
    • What the browser sees
    • Nesting and organizing components
  • Recap
    • React lets you create components, reusable UI elements for your app.
    • In a React app, every piece of UI is a component.
    • React components are regular JavaScript functions except:
      • Their names always begin with a capital letter.
      • They return JSX markup.

• Importing and Exporting Components (Revisited)
  • The root component file
  • Exporting and importing a component
  • Exporting and importing multiple components from the same file
  • Recap
    • What a root component file is
    • How to import and export a component
    • When and how to use default and named imports and exports
    • How to export multiple components from the same file

• Writing Markup with JSX (Revisited)
  • JSX: Putting markup into JavaScript
  • Convert HTML to JSX
  • The Rules of JSX
    • Return a single root element
    • Close all tags
    • camelCase (all) most of the things!
  • Pro-tip: Use a JSX Converter
  • Recap
    • React components group rendering logic together with markup because they are related.
    • JSX is similar to HTML, with a few differences. You can use a converter if you need to.
    • Error messages will often point you in the right direction to fixing your markup.

• JavaScript in JSX with Curly Braces (revisited)
  • Passing strings with quotes
  • Using curly braces: A windo into the JavaScript world
    • Where to use curly braces
  • Using "double curlies": CSS and other objects in JSX
  • More fun with JavaScript objects and curly braces
  • Recap
    • JSX attributes inside quotes are passed as strings.
    • Curly braces let you bring JavaScript logic and variables into your markup.
    • They work inside the JSX tag content or immediately after = in attributes.
    • {{ and }} is not special syntax: it's a JavaScript object tucked inside JSX curly braces.

• Passing Props to a Component (revisited)
  • Familiar props
  • Passing props to a component
    • Step 1: Pass props to the child component
    • Step 2: Read props inside the child component
  • Specifying a defualt value for a prop
  • Fowarding props with the JSX spread syntax
  • Passing JSX as children
  • How props change over time

• Conditional Rendering (revisited)
  • Conditionally returning JSX
    • Conditionally returning nothing with null
  • Conditionally including JSX
    • Conditional (ternary) operator(? : )
    • Logical AND operator (&&)
    • Conditionally assigning JSX to a variable
  • Recap
    • In React, you control branching logic with JavaScript
    • You can return a JSX expression conditionally with an if statement.
    • You can conditionally save some JSX to a variable and then include it inside other JSX by using the curly braces.
    • In JSX, {cond ? <A /> : <B />} means "if cond, render <A />, otherwise <B />".
    • In JSX, {cond && <A />} means "if cond, render <A/>, otherwise nothing".
    • The shortcuts are common, but you don't have to use them if you prefer plain if.

DSNA | Hufs (자료구조 | 한국외대)

• 09 힙(heap)과 힙정렬(heap sort)
  • Heap
  • 힙 클래스
  • 힙 만들기
  • 힙 정렬(heap_sort)
  • 힙 높이 h는 얼마나 커질 수 있지?
  • make_heap의 수행시간은?
  • heap_sort의 수행시간 = O(nlogn)
  • 힙 삽입(insert) 연산
  • 힙 삭제(delete_max) 연산
  • insert와 delete_max의 수행시간

DSNA | pythonds3 (자료구조 | 책)

• 7.8. Priority Queues with Binary Heaps
• 7.9. Binary Heap Operations
• 7.10. Binary Heap Implementation
  • 7.10.1. The Structure Property
  • 7.10.2. The Heap Order Property
  • 7.10.3. Heap Operations