2021년 FE 동향, 한방에 끝내기

감상문

2021년 FE 동향, 한방에 끝내기

ihl 2021. 12. 27. 17:32

The state of JavaScript & FE, 2021 Edition (2021년 FE 동향, 한방에 끝내기)

NAVER Engineering | 박재성 - The state of JavaScript & FE, 2021 Edition (2021년 FE 동향, 한방에 끝내기)

tv.naver.com

JavaScript
- ECMAScript 2021 명세
  - Promise.any : 여러 개의 Promise 모음 중, 첫 번째로 fulfilled되고 resolved 된 Promise 반환
  - WeakRefs : 약한 참조를 갖는 객체를 저장. 참조되지 않으나, GC에 포함되지 않는 상황 예방
  - Numeric Separators : 긴 숫자 값의 가독성을 위해 _로 구분자 사용
    - 1_000_000_000
- ECMAScript 2022 명세
  - Top-level await, Class static Block 등 명세 포함 예정
  - stage 4 : public, private, static
  - stage 3 : error.cause, temporal(Date 객체 개선), import assertions(MIME 잘못 처리 시 보안 이슈 제거)...
WASM
- 친숙한 도구와 언어로 개발 후 wasm으로 컴파일 -> 모든 OS에서 실행 or 다른 언어에 임베딩 하여 사용
- Rust > C > AssemblyScript > Blazor
- Web에서 주로 사용. VM으로도 활용 움직임
- WasmEdgeRuntime
  - WASM 런타임
  - 클라우드 네이티브, edge, 분산화 환경, 애플리케이션을 위한 wasm 런타임
  - 가장 빠른 성능 보유
- QuickJS
  - C로 작성된 임베딩 JS 엔진(JIT 지원 없는 인터프리터)
  - wasm 모듈로 제공되어 모든 wasm 런타임에서 js 코드를 실행시키기 위해 사용 가능
React
- Server Components : 새로운 유형의 컴포넌트 제안
  - 클라이언트와 서버 통신은 느리기 때문에, 서버의 데이터가 필요한 컴포넌트는 서버에서 데이터 처리되도록 한다.
  - 서버 컴포넌트는 webpack 번들에 포함하지 않고, 서버에 있음
  - SSR을 대체하는 것은 아님
- v18
  - New Root API
  - SSR support for suspense
  - useDeferredValue : 화면에서 덜 중요한 영역의 업데이트 지연
  - Streaming SSR with selective hydrations : 앱 로드 및 인터렉티브 속도 향상
  - Automatic Batching
    - batch: 성능을 위해 다중 상태 업데이트를 단일 재렌더링으로 수행
    - 리액트 이벤트 핸들러내 작업만 배칭되던 것을, Promise, setTimeout 등으로 확장
Protractor : 2022년말 개발 중단 계획
Svelte-Kit
- Sapper 를 계승하는 애플리케이션 프레임워크
- Next.js의 Svelte 버전
Solid : 요즘 생긴 프레임 워크
- React와 유사하게 단방향 데이터 흐름, 읽기/쓰기 분리, 불변성 인터페이스 원리를 따름
- VDOM을 사용하지 않는다.
- 템플릿으로 실제 DOM으로 컴파일
Corepack
- Node.js 16.9에 기본 포함된 실험적 스크립트 도구
- node와 패키지 매니저 간 브릿지처럼 동작
- npm 외의 서드파티 패키지 관리자를 전역에 설치하지 않고 사용가능하게 함
Pure ESM
- 가장 가까운 부모의 package.json에 'type: module' 인 경우 프로젝트의 모든 .js 파일은 ESM으로 로드됨
  - .cjs만 commonJS 으로 된다.
- 의존성이 있는 패키지가 'type: module' 이라면 내 프로젝트도 'type: module' 해주자
npm
- 2020/3 에 github가 인수한 후, npm 주요 소식은 Github 블로그에서 볼 수 있다.
- v7
  - workspaces : 단일 최상위 레벨 내에서 여러 패키지를 관리 지원 제공
  - peer dependency 자동 설치 (이전에는 개발자가 직접 했다.)
    - node_modules 트리에서 일치하는 패키지가 발견되도록 보장한다.
  - 새로운 package-lock 포맷
    - 재현가능한 빌드구성, 패키지 트리 구축에 필요한 모든 정보 포함
pnpm
- 2016년 발표되었던 패키지 매니저
- 효율적 디스크 사용 : 단일 공간에 패키지를 저장 + 심볼릭 링크로 공유 (동일 패키지는 한 번만 설치 후 링크)
개발 도구 트렌드
- 비 JS 언어를 JS 도구에 사용하기
- 새로운 도구들
  - esbuild : go로 작성된 번들러
  - vite(빗) : 개발 시 번들링 없이 ESM 로딩
    - prebundling은 esbuild, 배포 버전은 rollup 번들러 사용
    - Rollup 플러그인 호환
    - React 개발 시 활용하면, 더 빠른 성능 예상
  - Rome : Babel, ESLint, 웹팩 등 모던 웹 개발의 기본 툴체인을 단일 도구로 대체
    - 단일 AST 를 생성하고 이를 재사용하자.
  - Parcel v2 Release
    - Babel AST 기반 컴파일러 -> SWC 기반 Rust로 작성
    - 트리 쉐이킹 기본 활성화
  - WMR : 의존성 없는 단일 파일 통합 개발 도구
    - 엔트리 포인트 없이 스크립트 로딩만을 통해 실행
      - <script type='module' src='/index.js' >
  - Snowpack : 개발 모드에선 번들링X, 각 파일 빌드 후 캐싱 후 네이티브 ESM으로 로딩
    - CJS 는 단일 파일로 번들링 후, 네이티브 ESM으로 사용될 수 있게 한다.
PWA
- 브라우저 벤더들의 서로 다른 방향성
  - Google/MS/Samsung : 가능성/능력
    - 웹 플랫폼에서 더 많은 것을 수행할 수 있는 가능성/능력에 적극적 관심
  - Apple/Mozilla : 개인정보 보호
    - 개인정보 이슈를 최우선으로 고려. 웹의 새로운 가능성에 부정적
- Fugu Project
  - 2019 주요 벤더들이 네이티브 앱에서 가능한 것을 웹앱에서 가능하게 만들기 위해 시작한 프로젝트
  - 네이티브 기능들이 웹에 노출되더라도, 사용자 보안, 신뢰, 개인정보 보호 등의 원칙 유지
  - 웹 API 형식으로 제공 (Fugu API Traker 참고)
- Richer Install UI (Google)
  - 과거 PWA가 홈화면에 추가 정도만 가능했다면, 이제는 일반적 네이티브 앱처럼 설치 화면 제공
- Webkit
  - 보안 및 개인정보 보호 우려에 따라 Web Bluetooth, Web NFC API 등 일부 Web APIs 구현 X
네이티브로의 이동
- = 개발 코드와 제품 코드를 동일하게 가져가자
- 주요 브라우저와 런타임에서 ES6 지원율 98~100% 도달
- 주요 프레임 워크에서 IE11 지원 중단
- 번들링은 계속 필요할까?
  - import/export를 정적 분석하여 최적화하는 역할이 있으므로, 아직까지 유효하다
- HTTP/2
  - Multiplexing : 단일 TCP 연결을 통해 다중 요청/응답 처리 가능
  - 전세계 요청 중 67% 차지. 점유율 증가추세
- 네이티브 전환의 남은 숙제
  - JSX, TypeScript 트랜스 파일링
  - 트리 쉐이킹과 같은 최적화 작업