[TIL] Naver FE News 2022-01

[TIL] Naver FE News는 Naver FE 팀에서 매월 첫째주 수요일에 업로드하는 FE 관련 이슈들을 팔로우 하면서 관심있는 내용을 학습하고 정리하는 컨텐츠입니다. [ https://github.com/naver/fe-news ]

1. 자바스크립트는 왜 프로토타입을 선택했을까

https://medium.com/@limsungmook/자바스크립트는-왜-프로토타입을-선택했을까-997f985adb42

자바스크립트는 왜 프로토타입을 선택했을까

• JS는 왜 클래스가 아니라 프로토타입을 쓰는 걸까에 대한 의문
• 프로토타입을 이해하려면 클래스에 대해 우선 알아야 함
  • 플라톤의 이분법적 세계관 : 이데아 vs 현실
    • 현실은 이데아의 모방
    • 이데아는 현실의 추상화
    • 이데아 : chair / 현실 : the chair -> 현실은 the(때)가 묻었다!
  • 아리스토텔레스의 분류(classification) -> class
    • 개체의 속성이 동일한 그룹은 같은 범주로 분류한다.
    • 범주는 정의와 구별의 합이다.
• 19세기 철학자 비트겐슈타인은 분류의 개념에 반박 -> 프로토타입
  • " 공유 속성의 관점에서 정의하기 어려운 개념이 있다. " = 사실상 올바른 분류란 없다.
  • 언어로 정의할 수 없는 개념들과 예외가 존재한다.
  • " 표현은 삶의 흐름 속에서만 의미를 갖는다. " = 이데아는 존재하지 않고 맥락에 의해서 쓰임이 결정된다.
• Rosch의 프로토타입 이론
  • 완벽한 범주 - 개체의 개념을 반박
  • 개체 그룹 간의 유사성에 따른 등급이 존재한다.
    • "새"라는 범주에 "참새"는 전형적인 개체로서 "원형(prototype)"으로 간주
    • "새"라는 범주에서 "타조"는 원형에서 멀리 떨어진 개체
    • 즉 "새"라는 범주는 어떠한 "정의"로부터가 아닌 "원형"으로부터 범주화 됨
  • 맥락에 따라서 펭귄은 "새"의 범주에 들어갈 수도 들어가지 않을 수도 있다.
    • 펭귄은 "참새"라는 원형으로부터 멀리 떨어져 있기 때문에 사용자가 펭귄을 사용하는 맥락에 따라 "새"의 범주에 들어갈 수도 들어가지 않을 수도 있다.

결론적으로, 프로토타입의 개념에서 펭귄이 "새"의 범주의 정의에 해당하는가는 별로 중요하지 않고 (클래스에서는 중요하게 생각하는 부분) "새"의 범주의 원형으로 설정한 "참새"와의 유사성을 고려할 때, 현재 맥락에서 사용 가능한 유사성이 존재하는 가에 따라 펭귄의 범주가 결정된다.

• 이처럼 JS에서 어휘, 쓰임새는 맥락(context)에 의해 평가된다.
• 실행 컨텍스트, 렉시컬 스코프, 스코프 체인, 클로져,  this, 호이스팅 등등 JS의 거의 모든 개념이 프로토타입의 "맥락"을 표현하기 위해 생겨났다.
  • 호이스팅은 동일 범위(스코프) 내에서 변수의 모든 선언을 참고(문맥 파악)해 의미를 정의하는 과정이다.
  • this는 정의된 함수가 어떻게 발화(invoke)되었는 지에 따라 가리키는 값이 달라진다.
    • this는 해당 문맥을 발화시킨 객체를 가리키고 아무것도 지정되어 있지 않으면 전역(global, window)을 가리킨다.
    • 따라서 this는 코드만 보고 무엇을 가리킨다고 말할 수 없고 반드시 어떤 순서로 실행되는지 실행 문맥이 있어야 한다. (관련 예제들을 보면 첫번째, 두번째와 같이 this의 값이 문맥에 따라 변하는 것을 전제로 설명한다.)

 

2. React Rendering Guide

https://blog.isquaredsoftware.com/2020/05/blogged-answers-a-mostly-complete-guide-to-react-rendering-behavior/

Blogged Answers: A (Mostly) Complete Guide to React Rendering Behavior

• 렌더링이란?

Rendering is the process of React asking your components to describe what they want their section of the UI to look like, now, based on the current combination of props and state.

렌더링은 현재 화면을 구성하는 props와 state의 조합을 기반으로 UI의 섹션이 원하는 모양을 묘사하도록 컴포넌트들에게 요청하는 React 프로세스입니다.

• React의 Rendering은 props와 state의 변화에 전적으로 기반하여 동작한다.
• JSX 문법으로 쓰여진 컴포넌트는 React.createElement()로 호출되어 컴파일된다.
  • createElement()는 JS의 가장 순수한 UI 구성 요소인 React element 객체들을 반환한다.
• React는 virtual DOM과 real DOM의 차이를 계속 수집하고 계산하며 이 과정을 "reconciliation(화해?)"라고 부른다.
• React는 식별된 변화를 하나의 동기적 시퀀스로 처리한다.
• React는 value UI다. 이는 React 핵심 원칙 중 하나로 React는 UI를 하나의 값(value)으로 인식한다.
• React 팀은 Rendering을 두 개의 페이즈로 구분했다.
  • 1. Render Phase : 컴포넌트 렌더링 처리, 변화(차이점) 계산
  • 2. Commit Phase : (real) DOM에 이 변화들을 적용
• rendering은 updating the DOM이 아니다. 가시적인 변화가 없더라도 redering은 발생할 수 있다.
• re-render queue에 추가하는 방법
  • useState의 setters
  • useReducer의 dispatches

React의 매우 중요한 기본 동작으로 부모 컴포넌트가 랜더링될 때, 모든 자식 컴포넌트들은 재귀적으로 랜더링된다.

• 이는 props의 여부와 상관 없이 해당 컴포넌트 하위에 존재하는 모든 컴포넌트를 다시 호출하는 것이다.
• 당연히 차이가 없기 때문에 real DOM에 변화는 없겠지만 변화가 있는지 확인하는 작업도 시간과 노력을 필요로 한다.
• 컴포넌트 안에서 새로운 컴포넌트를 생성하면 안된다.
• 많이 하는 실수 중 하나가 setter를 실행 후 로그를 찍어보는 것인데, 바로 찍으면 state는 아직 업데이트 되지 않는다.

function MyComponent() {
  const [counter, setCounter] = useState(0);

  const handleClick = () => {
    setCounter(counter + 1);
    // ❌ THIS WON'T WORK!
    console.log(counter);
    // Original value was logged - why is this not updated yet??????
  };
}

• React의 context를 snap-shot이라고 표현하는데 이는 해당 context에서 state가 setter에 의해 변하지 않음을 의미한다.
• 예시로 아래와 같은 경우에 number는 0에서 1로 증가하는데 이는 setNumber가 1회만 수행된 것이 아니라 각 number의 값이 갱신되지 않기 때문이다. (snap-shot에 계속 0으로 찍혀 있기 때문)

<button onClick={() => {
  setNumber(number + 1);
  setNumber(number + 1);
  setNumber(number + 1);
}}>+3</button>

• 즉, 함수의 렌더링이 끝나기까지 함수 내의 state 값은 절대 변하지 않는다.
• 이는 함수(혹은 이벤트) 발생 중간에 값이 변하여 발생할 수 있는 side effect를 방지하고 안정적인 동작을 보장한다.

Context API와 React-Redux는 다르게 동작한다. 보통 Context API는 Context를 참조하는 모든 Components(하위 포함)들이 값의 변화에 따라 re-reder되지만(따라서 최적화를 위한 memoization이 필요하다.) Redux는 값의 변화에 따라 실제로 rendering이 필요한 Component만 re-render된다. 하지만 이 명제도 얼추 맞지만 약간의 뉘앙스의 차이는 존재한다.

• Redux는 store instance를 전달하기 위해 내부적으로 context를 사용하지만 현재 상태값을 관리하는 것과는 상관없다.
• React 팀은 이러한 랜더링 최적화를 위한 노력을 하고 있으며 내부적으로는 "React Forget"이라는 이름으로 불리는 프로젝트가 진행 중이다. 먼 미래에는 너무 많은 랜더링으로 인해 발생하는 문제가 auto-memoization을 통해서 해결될 것으로 기대한다.

3. 유용한 도구들

• Front-end에서 자주 접하게 되는 디자인 패턴, 랜더링패턴, 성능 패턴을 시각적인 자료, CodeSandbox 예제와 함께 제공하고 있다. 책까지 무료로 제공하고 있다.
• https://www.patterns.dev/

Patterns.dev - Modern Web App Design Patterns

• 자바스크립트로 쉘 스크립트 짜도록 도와주는 라이브러리 "zx"
• https://www.sitepoint.com/google-zx-write-node-shell-scripts/

How to Write Shell Scripts in Node with Google's zx Library — SitePoint