[정리] FEConf 2021 : A track

[sbyeol3]

컴포넌트, 다시 생각하기

영상 링크, 원지혁님

• React Component의 의존성을 기능적으로 분류하면 props, hooks가 있다.
• 특징적(feature)으로 분류하면 style, logic, global state, remote data schema (API 서버에서 내려주는 데이터 모양)
• 새로운 정보를 추가하기 위해 그 정보 뿐만 아니라 필연적으로 다른 컴포넌트를 수정하게 된다 숨은 의존성

컴포넌트 리팩토링

• 비슷한 관심사라면 가까운 곳에 Keep Locality
  • 보통 로직이나 스타일을 같은 위치에 두게 됨
  • 위에서는 아이디만 받고, 모양(스키마)는 전역 상태에서 받음으로써 의존성을 끊자
• 데이터를 ID 기반으로 정리하기 Abstraction by Normalization
  • 데이터 정규화를 도와주는 라이브러리 normalizr 참고
• 의존한다면 그대로 드러내기 Make Explicit
  • props 네이밍을 지을 때는 의존성을 명확하게 드러내는 것이 좋다.
• 모델 기준으로 컴포넌트 분리하기 Separating Components by Model
  • 함께 변해야 하는 것들과 따로 변해야 하는 것들?
  • 유저들이 생각하는 일관성은 모델이 중심 -> 같은 모델을 의존한다면 재사용, 다른 모델을 의존한다면 분리

Global ID

• 아이디만 가지고 특정 데이터를 유일하게 식별하는 ID 체계
• 사용할 데이터 모델 정보마저 컴포넌트 내부에서 co-locate 할 수 있음
• GOI(Global Object Identification) : 어떠한 코드 위치, 맥락에 있든 global ID를 기반으로 특정 객체를 가져올 수 있는 API
• data flow : 루트 컴포넌트에서 가져온 데이터를 정규화, 내 컴포넌트에서 Global ID로 저장소에서 특정 데이터 요청, 만약 데이터가 없는 경우에는 API 서버에서 데이터 요청하고 저장 후 내 컴포넌트로 전달
• Refetch를 할 때도 유용

왜 나는 React를 사랑하는가

영상 링크, 안희종님

• Reconciler : 렌더러와 무관하게 공유되며 우리가 리액트의 문법이라고 생각되어지는 부분 (components, props, state 등...)
  • React 코드를 해석하는 엔진의 역할을 수행함
• React UI Tree가 그려지는 환경은 호스트 환경과 상호작용 -> 어셈블리

호스팅 환경	패키지
HTML	react-dom
iOS, Android ...	react-native
terminal	ink
Three.js	react-three-fiber
JSON	react-test-render

• React의 코어 로직이 웹 환경과 직접적으로 붙지 않는 것이 React의 의도적 결정
• 프로그래밍 언어의 동적 스코핑 -> Context API
• Fiber Reconciler 방식 -> 운영체제 스케쥴링
• 대수적 효과 -> Hooks, Suspense
• 도전적인 과제에 대한 좋은 해결책은 답안지를 훔쳐봄으로써 얻을 수도 있다.

[sbyeol3]

SWC와 웹 개발의 미래

강동윤님, Vercel

• ECMAScript6 + Babel의 영향으로 웹 프로젝트 빌드의 개념이 강해짐
• React, JSX의 등장 > 브라우저가 이해할 수 있는 코드로 바꾸어주어야 함 (트랜스파일링)
• 빌드라는 작업은 CPU를 많이 쓰는 작업, Nodejs는 이벤트 루프 기반이므로 CPU를 많이 쓰는 작업ㅇ 맞지 않음
• 성능은 컴파일러가 어떻게 얼마나 최적화하는지가 중요
• Babel은 JS로 만들어졌기 때문에 JS의 제약도 그래도 적용 > 1개의 CPU 코어만 사용
  • 트랜스파일링하는 동안 자바스크립트 스레드는 다른 일들을 할 수 없음

언어를 바꾸자

SWC (Speedy Web Compiler)

• Rust로 작성됨, 여러 웹 빌드 툴을 대체하는 것이 목적
• 왜 Rust인가? 제일 중요한 성능! 성능에 영향을 끼치는 건 언어설정, 병렬처리를 위한 Rust는 FFI 편의성이 좋음, 여러 언어가 섞이는 경우 GC가 없는 것이 오히려 편해짐. 제너릭이 있고 proc macro(코드 유틸리티)가 있음

SWC 기능

transform

• babel과 비슷하지만 자바스크립트 코드와 다른 스레드에서 돌아감
• stage3 이상의 기능은 다 포팅
• 타입스크립트, 데코레이터, JSX 지원

minify

• terser와 비슷한 압축률로 성능이 좋음