TIL-20220712

회고

• React가 이렇게 매력적인 library인지 5년 전에는 몰랐는데... 뒤늦게 hook-based function component가 된게 신의 한수라고 생각한다.

• 오늘도 CS는 하지 않았다.

  • 내일도 안하면 사람이 아니야.

• 프로젝트 WYIS(Why Your Investments Suck)관련해서 조금씩이라도 UI 만들어보자.

  • 어차피 주니어수준에서 고민해봤자 퀄러티가 거기서 거기다 모래위라도 우선 지어놓고 보자.

• Software Engineering at Google 이라는 책이 호평이던데 찾아서 노션에 정리해보자.

React (JavaScript)

Synchronizing with Effects

• What are Effects and how are they different from events?
• You might not need an Effect
• How to write an Effect
  • Step 1: Declare and 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

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 the screen. Effects let you run some code after rendering so that you can synchronize your component with some system outside of React.

• __flow__ : useEffect를 잘 알고 현명하게 사용할 줄 아는 React developer가 되자.

You Might Not Need an Effect

• How to remove unnecessary Effects
  • Updating state based on props or state
  • Caching expensive calculations
  • Resetting all state when a prop changes
  • Adjusting some state when a prop changes
  • Sharing logic between event handlers
  • Sending a POST request
  • Initializing the application
  • Notifying parent components about state changes
  • Passing data to the parent
  • Subscribing to an external store
  • Fetching data

Effects are an escape hatch from the React paradigm. They let you "step outside" of React and synchronize your components with some external system lke a non-Reac widget, network, or the Browser DOM. If there is no external system involved (for example, if you want to update a component's state when some props or state change), you shouldn't need an Effect. Removing unnecessary Effects will make your code easier to follow, faster to run, and less error-prone.

• __flow__ : useEffect를 피하는 방법, case가 많은데 어렵다. ㅠㅠ 나중에 다시한번 보자. 실제 프로젝트를 해가면서 하면 더 잘 와닿겠지..

Next (JavaScript)

Static File Serving

Next.js can serve static files, like images, under a folder called public in the root directory. Files inside public can then be referenced by your code starting from the base URL (/).

For example, if you add an image to public/me.png, the following code will acess the image:

import Image from 'next/image';

function Avatar() {
  return <Image src="/me.png" alt="me" width="64" height="64" />
}
  
export default Avatar