Skip to content

Latest commit

 

History

History
113 lines (77 loc) · 8.98 KB

2021-01.md

File metadata and controls

113 lines (77 loc) · 8.98 KB

2021-01

링크 & 읽을거리

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

1편, 2편

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

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

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 세션

Chrome Dev Summit 2020 영상 발표

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

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

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

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

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

튜토리얼

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

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

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

코드와 도구

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

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