2021-01

링크 & 읽을거리

2020년과 이후 JavaScript의 동향 - 라이브러리와 프레임워크

1편, 2편

React, Angular, Vue.js 그리고 Svelte의 최근 동향을 다루는 글로, 다양한 프레임워크들의 기술적 변화와 차이점 들을 다루고 있어 여러 프레임워크들의 동향을 한눈에 파악할 수 있다.

지난 "라이브러리와 프레임워크 동향" 시리즈: 2017, 2018, 2019(1편, 2편)

React Server Component

React Server Component에 대한 영상이 React 공식 블로그에 공개되었다. 현재는 아직 연구 중인 단계이지만 그 가능성에 대해 많은 설명을 하고 있다. 클라이언트 번들 사이즈를 줄이고 backend 자원에 직접 접근할 수 있는 React Server Component에 대한 글과 영상이다.

발표 이후 해커뉴스에서도 질문이 끝이지 않고 있다. Dan Abramov에게 궁금증이 있다면 여러분도 지금 답을 얻을 수 있다.

[참고] React 코어 개발팀의 Dan Abromov 트윗에서는 Server Component에 대한 주요 내용에 대한 요약을 확인해 볼 수 있다.
https://twitter.com/dan_abramov/status/1342261577475633154

Deview 2020

Deview 2020 발표 영상이 공개되었다.

그 중 웹 세션 발표 중 국내와 해외에서 각기 다른 이유로 BFF (Backend for Frontend) 아키텍쳐로의 전환 경험을 다루고 있어 소개한다.

GraphQL

GraphQL이 가져온 에어비앤비 프론트앤드 기술의 변천사(부제: REST환경에서 GraphQL 기반 UI 설계하기)

• 에어비엔비에 GrahphQL을 도입하면서 BFF 아키텍쳐 구조를 만들어간 경험을 공유한 발표이다.
• GraphQL 운영 경험에 대한 구체적인 경험이 궁금하시다면 GraphQL API 까짓거 운영해보지 뭐 발표를 보시는 것도 좋을 것 같다.

Server-Side Rendering

어서와, SSR은 처음이지? (네이버 블로그 Node.js 기반의 Server-Side Rendering 적용기)

• 네이버 블로그에 SSR을 도입하면서 BFF 아키텍처 구조를 만들어간 경험을 공유한 발표이다.
• SSR을 구축하기 위한 구체적인 경험이 궁금하시다면 리액트 개발이 이렇게 쉬웠나? (feat. Next.js) 발표를 보시는 것도 좋을 것 같다.

이 외에도 Deview 2020에서 FrontEnd 경험을 다룬 다양한 세션이 있으니 살펴보기 바란다.

[참고] Deview 2020 FrontEnd 세션

• 묻고 한 벌로 가! (네이버 플레이스 한 벌의 코드로 모바일 웹/모바일 앱/PC 웹 서비스 확장 개발기)
  React로 만들어진 네이버 플레이스 서비스를 지도앱과 Angular 기반의 서비스에 통합시켰던 경험을 소개한다.
• WebXR API를 이용한 웹 AR 개발, 그 한계와 대안
  현 시점에서 WebXR API를 적용하는 장점과 한계점들을 살펴보고 이를 대체할 수 있는 다른 방법들을 설명한다.
• 깃헙 4.4K 스타 billboard.js 메인테이너가 들려주는 오픈소스 개발기(부제: 톨먼이형!, 오픈소스 개발은 왜 이래?)
  네이버 오픈소스 차트 라이브러리인 billboard.js 프로젝트의 개발과 운영 경험을 통해 지속 가능한 오픈소스 메인테이너스를 위한 경험을 소개한다.
• Deno 를 통해 알아보는 Javascript 세상 이야기
  Deno 에 대하여 알아보며 JavaScript 에서 TypeScript, Node.js에서 Deno 까지 JavScript 세상에서의 불편함을 해결 하고자 했던 기술을 소개한다.
• 성능개선 뛰어들기 (고전적 SSR 성능개선)
  네이버의 스마트어라운드 성능개선 방향과 그 여정을 소개한다.
• egjs 오픈 서커스 오신것을 환영합니다
  복잡한 기능을 구현하기 위해서 오픈소스를 찾는 과정과 오픈소스를 활용하면서 겪을수 있는 실제 사례를 재밌게 배울 수 있는 발표이다.
• Recoil: 왕위를 계승하는 중입니다
  Recoil이 Redux의 굳건한 왕좌를 위협할 것이라고 생각하는 근거에 대해서 얘기하고 단계별로 준비된 4가지 예제를 통해 Recoil의 단순하지만 강력한 기능을 간략하게 배워가는 발표이다.

Chrome Dev Summit 2020 영상 발표

Chrome Dev Summit 2020 세션 발표 영상이 공개되었다. CSS 엔진의 low-level api 인 Houdini의 발표부터 PWA, Web Story, Performance까지 구글웹플랫폼의 진보된 경험을 보실 수 있다.

새로운 웹페이지 성능 측정 지표 CLS(Cumulative Layout Shift)

chrome 86 업데이트에서 개발자도구 – Performance 패널 – Experience 섹션에 Cumulative Layout Shift (CLS) 라는 새로운 성능 측정 지표가 생겼다. Web Vital의 새로운 지표인 CLS에 대해 정리한 글이다.

전역상태 관리에 대한 단상 (stale-while-revalidate)

전역 상태 관리로 Redux를 즐겨 쓰던 개발자가 더 이상 Redux를 사용하지 않게된 이유와 회고가 담긴 글이다. React Query, SWR, Apollo와 같은 라이브러리가 추구하는 것과 같이 API 캐싱을 통해 컴포넌트의 응집도와 편의성을 높이는 방법에 대한 고민을 설명하고 있다.

The React Hooks Announcement In Retrospect: 2 Years Later

React Hooks이 소개된 이후 2년이라는 시간이 지났다. 이 글은 그 기간동안 개발자의 경험을 시간 순으로 서술하고 있다.
2021년에도 끝나지 않은 논쟁에 대한 여러분들 의견은 어떤가요?

25 years of JavaScript History

IDE로 유명한 JetBrains에서 JavaScript 25주년을 맞이한 JavaScript 역사에서 주목할만한 타임라인 페이지를 공개하였습니다.

튜토리얼

React / GraphQL Course - Build a social media app (MERNG Stack)

MongoDB + Express + React + Node.js + GraphQL 스택으로 만들어 보는 소셜 미디어 앱 튜토리얼이다.

Build your own CANDY CRUSH using JavaScript, HTML and CSS

JavaScript, HTML, CSS를 이용하여 드래그 앤 드랍을 구현하고 이를 이용하여 우리에게 유명한 CANDY CRUSH 라는 웹게임을 만들어 보는 영상이다.

NodeJS ZOOM Clone

원격 근무에는 빠질수 없는 ZOOM 어플리케이션을 클론해보는 영상이다.

코드와 도구

estimator.dev

ES2015을 지원하는 브라우저 비율이 90%를 넘고 있다. 이 사이트는 Modern JavaScript 최적화를 진행한다면 얼마 만큼의 성능 향상을 기대할 수 있을지를 평가 할수 있는 툴이다.

Monaco Editor

VS Code의 웹 버전. NPM으로 설치해 브라우저에서 VS Code를 이용할 수 있다. 모바일 브라우저는 지원하지 않는다.