2021-06

링크 & 읽을거리

Design Systems Repo

최근 들어 디자인 시스템에 대한 관심이 많아지고 있고, 그에 비례해 다양한 디자인 시스템들이 공개되고 있다. 그러나 잘 만들어진 디자인 시스템을 검색하고 찾아보는 것은 쉽지 않다.

Design System Repo에서는 여러분들이 영감받을 수 있는 큐레이션 된 다양한 디자인 시스템 목록과 스타일 가이드, 패턴 라이브러리 그리고 관련 문서와 컨퍼런스 등, 디자인 시스템과 관련된 방대한 리소스 들을 찾아볼 수 있다.

Implementing Private Fields For JavaScript

Firefox JavaScript 엔진인 SpiderMonkey 팀에서 일하고 있는 저자는 새로운 JavaScript 언어의 기능을 구현할 때 제정된 명세의 구현 과정에서의 현실적 어려움(언어 규격을 벗어나는 등의)을 다루는 글이다.

저자는 class field proposal을 통해 제안된 Private fields 예를 통해 명세와 구현의 현실적 차이를 설명한다.

A JavaScript optimizing compiler

JavaScript 코드를 최적화된 JavaScript로 컴파일 하는 실험적 시도에 관한 흥미로운 글로, 대상 JavaScript 코드를 LLVM 중간 표현식(Intermediate Representation)으로 변환한 후, 최적화된 IR(중간 표현식)을 통해 다시 JavaScript 코드를 생성하는 접근 방식을 취한다.

최적화에 대한 결과는 아래 링크를 통해 직접 벤치마크를 수행해 볼 수 있다.
https://carlopi.github.io/js-opt-benchmark/

Past, Present, and Future of React State Management

2013년 등장한 React는 UI의 상태를 표현하는 함수라는 패러다임 전환을 가져왔고, React는 컴포넌트가 어떻게 보이게 될지를 상태에 기반해 처리한다. 이처럼 React는 '상태'라는 아이디어에 기반해 만들어졌다 할 수 있다.

글의 저자는 과거와 오늘날에 이르기까지 등장했던 다양한 상태 관리자들과 기본적 개념들과 어떤 문제들을 해결하고자 했는지를 포괄적으로 다루고 있다.

Google I/O 2021: Web 영역

구글의 연례 개발자 행사인 Google I/O 2021이 지난 5월 18일 ~ 20일, 3일간 진행되었고, 다채로운 내용들이 발표되었다. Front-end 영역 관점에서, 웹 영역 세션들을 통해 구글이 어떤 기술 영역에 집중하고 있는지를 가늠해 볼 수 있다.

라이트하우스 성능 지표 살펴보기

웹 품질 측정을 위한 도구로는 여러 도구가 있겠지만, 그중 가장 유명한 것은 단연 구글에서 제공하는 Lighthouse 일 것이다.

Lighthouse를 이용하면 어렵지 않게 웹 품질을 측정하고 확인할 수 있는데, 이때 측정 결과는 여러 지표들의 점수로서 나타나게 된다. 각 지표의 점수가 높을수록 좋다는 것은 직관적으로 알 수 있지만, 각 지표의 정확한 의미를 알기는 조금 어려울 수 있다.

본 글에서는 Lighthouse의 각 지표들의 의미를 그림과 함께 알기 쉽게 설명하여 이해를 돕는다.

Software Engineering at Google

O'Reilly에서 출간한 Software Engineering at Google 책이 PDF 파일로 무료 공개되었다.

소프트웨어 엔지니어링이란 무엇인가라는 근본적인 내용부터 시작하여 팀으로 일하기, 지식 공유하기 등 전반적인 소프트웨어 엔지니어링에 대해 다룬다.

Journey of Improving React App Performance by 10x

React Application의 성능을 향상시켰던 방법을 알려준다.

render에서 inline 함수 제거
상태가 변경되는 경우만, Redux Store 업데이트
조건부 렌더링 적용
불필요한 await을 제거하고 적용 가능하면 Promise.all() 사용

The future of Internet Explorer on Windows 10 is in Microsoft Edge

MS에서 Windows 데스크톱의 IE 지원을 2022년 6월 15일부로 종료하겠다고 공식 발표하였다.

Modern Javascript: Everything you missed over the last 10 years (ECMAScript 2020)

ECMAScript는 매년 새 버전을 발표하며 빠르게 변화하고 있어 최신 기술 스펙을 놓치기에 십상이다. 최근 10년 동안의 새로 발표된 내용들을 한곳에 모아 보기 쉽게 정리한 글이다.

튜토리얼

Learn CSS

구글의 web.dev 팀에서 공개한 튜토리얼로, CSS의 기본적인 내용들을 이해하기 쉽게 항목들을 세분화하고 CSS를 효과적으로 사용하는 방법을 설명한다. 박스 모델, 셀렉터, 크기 단위, 플렉스 박스, 가상 요소/클래스 등 거의 모든 CSS 스펙들을 다루며, 각각의 항목들은 관련 podcast와 인터랙티브 데모가 제공된다.

Building A Rich Text Editor (WYSIWYG)

커스텀 가능한 리치 텍스트 편집기를 만들 수 있는 JavaScript 라이브러리 Slate를 사용해 위지윅(WYSIWYG) 편집기를 구현하는 방법을 상세히 설명한다.

How to Create Actions for Selected Text With the Selection API

텍스트 에디터에서 문장 선택 시, 선택 영역 위에 메뉴가 나타나는 것을 본 적이 있을 것이다. 웹에서는 어떻게 이것을 구현할 수 있을까? 다소 생소할 수 있는 API인 Selection API를 이용하여 이를 웹에서 구현하는 방법을 설명한다.

Coding Fantasy: Learn Flexbox by Playing a Coding Game

flexbox를 이용하면 레이아웃 작업을 비교적 쉽게 진행할 수 있다. 게임을 통해 flexbox 개념을 학습할 수 있도록 돕는다.

Get Started With React By Building A Whac-A-Mole Game

React를 이용해 두더지 잡기(Whac-A-Mole) 게임을 만들어본다. React의 기초부터 하나씩 구현을 진행한다. 기초 개념들도 함께 설명해 주기 때문에 React 입문자도 따라 해보기 좋다.

코드와 도구

React Notion X

인기를 끌고 있는 메모 애플리케이션인 Notion의 콘텐츠를 React로 렌더링 할 수 있게 하는 TypeScript로 작성된 도구다.

# 1) Notion 콘텐츠를 얻어온다.
import { NotionAPI } from 'notion-client'

const notion = new NotionAPI()
const recordMap = await notion.getPage('067dd719a912471ea9a3ac10710e7fdf')

# 2) 얻어온 콘텐츠를 React를 통해 렌더링한다.
import React from 'react'
import { NotionRenderer } from 'react-notion-x'

export default ({ recordMap }) => (
  <NotionRenderer recordMap={recordMap} fullPage={true} darkMode={false} />
)

예를 들어, 다음의 Notion 콘텐츠를

https://www.notion.so/Notion-Kit-Test-Suite-067dd719a912471ea9a3ac10710e7fdf

React 애플리케이션에서 로딩해 다음과 같이 웹사이트를 만들 수 있다.

https://react-notion-x-demo.transitivebullsh.it/