TIL-20220715

회고

• 좀 더 열심히 해야겠다.
  • 물론 내일은 주말이니(백수인데 그런 구분이 무슨 의미겠느냐만은) 좀 놀자
• DSNA는 영상만 시청해서는 얻는게 없다.
  • 관련 책(CLRS)을 읽어 정리도 하고, 프로그래머스나 리트코드 코테도 병행하자.
• 다른 CS 공부도 하자
  • Networking
  • Database
  • Compiler 등
• 프로젝트 WYIS

DSNA | HUFS (한국외대)

• 자료구조 - 알고리즘 - 그래프(Graph) 정의와 표현볍
• 알고리즘 + 자료구조 - 그래프(Graph) 기본연산
• 알고리즘 + 자료구조 - 그래프 - DFS 1/2
• 알고리즘 + 자료구조 - 그래프 - DFS 2/2

Vanilla (JS)

• Introducing asynchronous JavaScript
  • Overview: In this article, we'll explain what asynchrnous programming is, why we need it, and briefly discuss some of the ways asynchronous functions have historically been implemented in JavaScript.
  • Objective
    • To gain familiarity with what asynchronous JavaScript is, how it differs from synchronous JavaScript, and why we need it.
  • Synchronous programming
    • A long-running synchronous function
    • The trouble with long-running synchronous functions
  • Event handlers
  • Callbacks

• How to use promises
  • Overview: Promises are the foundation of asynchronous programming in modern JavaScript. A promise is an object returned by an asynchronous function, which represents the current state of the operation. At the time the promise is returned to the caller, the operation often isn't finished, but the promise object provides methods to handle the eventual success or failer of the operation.
  • Objective
    • To understand how to use promises in JavaScript
  • Using the fetch() API
  • Chaining promises
  • Catching erros
  • Promise terminology
  • Combining multiple promises
  • async and await

• How to implement a promise-based API

  • Overview: In the last article we discussed how to use APIs that return promises. In this article we'll look at the other sie - how to implement APIs that return promises. This is a much less common task than using promise-based APIs, but it's still worth knowing about. Generally, when you implement a promise-based API, you'll be wrapping an asynchronous operation, which might use events, or plain callbacks, or a message-passing model. You'll arrange for a Promise object to handle the success or failure of that operation properly.
  • Objective
    • To understand how implement promise-based-APIs
  • Implementing an alarm() API
    • Wrapping setTimeout()
    • The Promise() constructor
  • Using the alarm() API
  • Using async and await with the alram() API
  
  

• Introducing workers

  • Overview
    • In this final article in our "Asynchronous JavaScript" module, we'll introduce workers, which enable you to run some tasks in a separate thread of execution.
    • In the first article of this module, we saw what happens when you have a long-running synchronous taks in your program - the whole window becomes totally unresponsive. Fundamentally, the reason for this is that the program is single-threaded. A threaded is a sequence of insructions that a program follows. Because the program consists of a single thread, it can only do one thing at a time: so if it is waiting for our long-running synchronouscall to return, it can't do anything else
    • Workers give you ability to run some tasks in a different thread, so you can start the task, then continue with other processing (such as handling user actions).
    • But there's a price to pay for this: With multithreaded code, you never know when your thread will be suspended and other thraed will get a chance to run. So if both threads have access to the same variables, it's possible for a variable to change unexpectedly at any time, and this causes bug that are hard to find.
    • To avoid these problems in the web, your main code and your worker code never get direct access to each others's variables. Workers and the main code run in completely separate words, and only interact by sending each other messages. In aprticular, this means taht workers can't access the DOM (the window, document, page, elements, and so on).
  • Using web workers
    • The synchronous prime generator
    • Prime generation with a worker
  • Other types of worker
  • Conclusion

React (JS)

• State as a Snapshot (revisited)
  • Overview: State variables might look like regular JavaScript variables that you can read and write to. However, state behaves more like a snapshot. Setting it does not change the state variable you alread have, but instread trigger a re-render.
  • You will learn
    • How setting state triggers re-render
    • When and how state updates
    • Why state does not update immediately after you set it
    • How event handlers access a "snapshot" of the state.
  • Setting state triggers renders
  • Rendering takes a snapshot in time
  • State over time
  • Recap
    • Setting state requests a new render.
    • React stores state out of your component, as if n a shelf.
    • When you call useState, React gives you a snapshot of the state for that render.
    • Variables and event handlers don't "survive" re-renders. Every render has its own even handlers.
    • Every render (and function inside it) will always "see" the snapshot of the state that React gave to that render.
    • You can mentally substitute state in event handlers, similarly to how you think about the rendered JSX.
    • Event handlers created in the past have the state values from the render in which they were created.

• Queueing a Series of State Updates (revisited)
  • Overview: Setting a state variable will queue another render. But sometimes you might want to perform multiple operations on the value before queueing the next render. To do this, it helps to understand how React batches state updates.
  • You will learn
    • What "batching" is and how React uses it to process multiple state updaes
    • How to apply several updates to the same state variable in a row
  • React batches state updates
  • Updating the same state variable multiple times before the next render
    • What happens if you update state after replacing it
    • What happens if you replace state after updating it
    • Naming conventions
  • Recap
    • Setting state does not change the variable in the existing render, but it requests a new render.
    • React processes state updates after event handlers have finished running. This is called batching.
    • To update some state multiple times in one event, you can use setNumber(n => n + 1) updater function.