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

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

---

1. 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 잘못 처리 시 보안 이슈 제거)...
2. WASM
   • 친숙한 도구와 언어로 개발 후 wasm으로 컴파일 -> 모든 OS에서 실행 or 다른 언어에 임베딩 하여 사용
   • Rust > C > AssemblyScript > Blazor
   • Web에서 주로 사용. VM으로도 활용 움직임
   • WasmEdgeRuntime
     • WASM 런타임
     • 클라우드 네이티브, edge, 분산화 환경, 애플리케이션을 위한 wasm 런타임
     • 가장 빠른 성능 보유
   • QuickJS
     • C로 작성된 임베딩 JS 엔진(JIT 지원 없는 인터프리터)
     • wasm 모듈로 제공되어 모든 wasm 런타임에서 js 코드를 실행시키기 위해 사용 가능
3. React
   • Server Components : 새로운 유형의 컴포넌트 제안
     • 클라이언트와 서버 통신은 느리기 때문에, 서버의 데이터가 필요한 컴포넌트는 서버에서 데이터 처리되도록 한다.
     • 서버 컴포넌트는 webpack 번들에 포함하지 않고, 서버에 있음
     • SSR을 대체하는 것은 아님
   • v18
     • New Root API
     • SSR support for suspense
     • useDeferredValue : 화면에서 덜 중요한 영역의 업데이트 지연
     • Streaming SSR with selective hydrations : 앱 로드 및 인터렉티브 속도 향상
     • Automatic Batching 
       • batch: 성능을 위해 다중 상태 업데이트를 단일 재렌더링으로 수행
       •  리액트 이벤트 핸들러내 작업만 배칭되던 것을, Promise, setTimeout 등으로 확장
4. Protractor : 2022년말 개발 중단 계획
5. Svelte-Kit
   • Sapper 를 계승하는 애플리케이션 프레임워크
   • Next.js의 Svelte 버전
6. Solid : 요즘 생긴 프레임 워크
   • React와 유사하게 단방향 데이터 흐름, 읽기/쓰기 분리, 불변성 인터페이스 원리를 따름
   • VDOM을 사용하지 않는다.
   • 템플릿으로 실제 DOM으로 컴파일 
7. Corepack
   • Node.js 16.9에 기본 포함된 실험적 스크립트 도구
   • node와 패키지 매니저 간 브릿지처럼 동작
   • npm 외의 서드파티 패키지 관리자를 전역에 설치하지 않고 사용가능하게 함
8. Pure ESM
   • 가장 가까운 부모의 package.json에 'type: module' 인 경우 프로젝트의 모든 .js 파일은 ESM으로 로드됨 
     • .cjs만 commonJS 으로 된다.
   • 의존성이 있는 패키지가 'type: module' 이라면 내 프로젝트도 'type: module' 해주자
9. npm
   • 2020/3 에 github가 인수한 후, npm 주요 소식은 Github 블로그에서 볼 수 있다.
   • v7
     • workspaces : 단일 최상위 레벨 내에서 여러 패키지를 관리 지원 제공
     • peer dependency 자동 설치 (이전에는 개발자가 직접 했다.)
       • node_modules 트리에서 일치하는 패키지가 발견되도록 보장한다.
     • 새로운 package-lock 포맷
       • 재현가능한 빌드구성, 패키지 트리 구축에 필요한 모든 정보 포함
10. pnpm
    • 2016년 발표되었던 패키지 매니저
    • 효율적 디스크 사용 : 단일 공간에 패키지를 저장 + 심볼릭 링크로 공유 (동일 패키지는 한 번만 설치 후 링크)
11. 개발 도구 트렌드
    • 비 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으로 사용될 수 있게 한다.
12. 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
13. 네이티브로의 이동
    •  = 개발 코드와 제품 코드를 동일하게 가져가자
    • 주요 브라우저와 런타임에서 ES6 지원율 98~100% 도달
    • 주요 프레임 워크에서 IE11 지원 중단
    • 번들링은 계속 필요할까?
      • import/export를 정적 분석하여 최적화하는 역할이 있으므로, 아직까지 유효하다
    • HTTP/2 
      • Multiplexing : 단일 TCP 연결을 통해 다중 요청/응답 처리 가능
      • 전세계 요청 중 67% 차지. 점유율 증가추세
    • 네이티브 전환의 남은 숙제
      • JSX, TypeScript 트랜스 파일링
      • 트리 쉐이킹과 같은 최적화 작업