2022-04

링크 & 읽을거리

React v18.0

React v18이 지난 3/29일 정식으로 릴리스 되었다. 주요한 기능들은 다음과 같다.

• Automatic Batching
• Transitions
• 클라이언트와 서버에서 사용할 수 있는 새로운 렌더링 API
  • React DOM Client
  • React DOM Server
• 신규 Hooks (useId, useTransition, useDeferredValue, useSyncExternalStore, useInsertionEffect)

관심을 모았던 Server Components는 아직 개발중(실험적) 상태로, 차기 마이너 릴리스 v18.x를 통해 초기 버전을 공개하는 것이 목표라고 한다.

[참고] 다음 글은 v18 alpha 버전 기준이나, 주요 변경 사항들을 확인해 볼 수 있다.

• React 18을 준비하세요

A New Year, A New MDN

최근 MDN 웹사이트가 개편되었다. MDN은 웹 개발자라면 매일 들어가는 웹사이트라고 해도 과언이 아닐 것이다.

MDN은 16년 동안 45,000명 이상의 기여자들과 많은 변화를 겪으면서 사용자 경험에 있어서 다소 일관성을 잃었다고 해도 큰 문제는 아닌 것으로 보인다.

이번 개편은 2021년 중순부터 작업이 시작되었으며 전체적으로 일관된 사용자 경험을 제공할 수 있도록 설계했고 44,000개의 글을 쉽게 검색할 수 있도록 만들었다고 한다.

[참고] 지난 FE News '21/7월 소식을 통해 공유되었던 것처럼, 유료 서비스인 MDN Plus도 정식 공개되었다.

A Proposal For Type Syntax in JavaScript

마이크로소프트(MS)에서 JavaScript에서 타입 구문을 도입하는 1단계 제안서를 TC39에 제출했다.

MS 팀에서 파악한 JavaScript 생태계의 최근 트렌드 중 하나는 빠른 이터레이션 주기와 빌드 단계의 간소화에 대한 수요였다. 더 빠르고 더 간단하게 만들고자 하는 트렌드 속에서 타입스크립트 컴파일 과정이 좋은 개발자 경험을 방해할 수 있다고 판단하고 해당 제안서를 제출했다.

이 제안의 핵심 아이디어는 제안서의 제목인 주석으로서의 타입처럼 런타임에서는 완전히 무시하지만, 타입스크립트와 같은 도구가 사용할 수 있는 타입 구문을 JavaScript에서 사용할 수 있다는 것이다. 이로써 빌드 단계는 제거되고 타입 검사와 같은 타입스크립트의 장점을 그대로 가져갈 수 있다.

[참고] 빠르게 읽고 싶다면 번역글을 참고하자.

Explain the First 10 Lines of Twitter's Source Code to Me

이 글은 트위터 HTML 소스코드의 상위 10개 라인을 분석해서 설명하는 글이다. 저자는 프론트엔드 기초 지식의 깊이를 파악하기 위해 인터뷰에서 해당 질문을 한다고 언급했다. (인터뷰로서 좋은 질문인지는 다른 이야기인듯하다.)

html과 meta 태그의 여러 속성에 관해 설명하고 있으니 플랫폼 간의 일관성과 SEO를 위해서 한 번쯤 읽어보면 좋을 것이다.

Five Things You Don't Need JavaScript for

JavaScript로 많은 것을 할 수 있지만 사용하지 않아도 되는 상황까지 사용하는 경우가 가끔 있다.

이 글에서는 굳이 JavaScript를 사용하지 않고 HTML과 CSS를 사용해 구현할 수 있는 5가지 예시(사이드바, 아코디언 메뉴, 다크모드 등)를 Svelte 코드와 함께 보여준다.

🇺🇦 Leaflet Project Appeals to JS Developers for Ukraine

Leaflet은 우크라이나인 개발자가 만든 유명한 지도 자바스크립트 라이브러리다.

Leaflet 팀은 Leaflet 라이브러리 공식 웹사이트에서 최근 벌어지고 있는 전쟁과 우리가 어떻게 도울 수 있는지에 대해 공유하고 있다.

The Most Modern JavaScript I Know (in One Script)

이 글에서는 짧은 코드에 여러 가지 모던 JavaScript 개념을 포함한다. 짧은 글로 가볍게 읽어보며 모던 JavaScript 개념을 훑을 수 있다.

Preemptive Memoization In React Is Probably Not Evil (Yet)

React에서 값에 대한 메모이제이션을 하기 위해 대체로 useMemo 또는 useCallback hook을 사용해 접근하며, 보통 반복적 수행에 따른 계산 값을 위한 최적화, 그리고 재 렌더링에 따라 발생될 수 있는 객체의 변화에 대한 안정화를 위한 목적을 위해 사용된다.

이 글은 두 번째 목적에 집중해 재 렌더링 시, React의 semi-functional 프로그래밍 모델과 impure 한 JavaScript 언어의 불일치에 따른 객체의 안정성 측면에 대해 설명한다.

[참고] 성능 최적화를 위한 선제적 최적화를 위한 기법으로 메모이제이션은 사용은 권장되지 않는 이유가 궁금하다면 다음 링크를 참고하라.

• Death by a thousand useCallbacks

객체지향 프로그래밍과 Javascript (약간의 역사를 곁들인...)

객체지향 프로그래밍이 꼭 정답일까?

함수형 언어도 객체지향 언어도 아니지만, 또 함수형 언어이기도 하고 객체지향 언어이기도 한 JavaScript로 객체지향 프로그래밍을 해야 할까?

이 글은 객체지향이 갖는 특징이 무엇이고 어떻게 등장했는지 상세히 설명한다. 동시에 JavaScript는 그것을 어떻게 표방했는지 비교하며, 결국엔 객체지향 프로그래밍도 문제점을 해결하기 위한 하나의 관점이자 방법론일 뿐 객체지향의 여러 장점을 취하면서 Javascript의 고유한 특성을 가지고 어떻게 하면 더 좋은 설계를 할 수 있을지 고민하는 것이 더 올바른 방향임을 이야기하고 있다.

튜토리얼

Creating Native Web Components

Minze는 React, Vue.js, Angular와 같이 복잡한 UI를 만들거나 SPA를 만드는 프레임워크가 아니고 캡슐화되고 재사용 가능한 네이티브 웹 컴포넌트를 만들 때 사용하는 JavaScript 프레임워크다.

이 글에서는 Minze를 사용해 아코디언, 스위치, 카드 등 컴포넌트를 직접 만들어보며 네이티브 웹 컴포넌트를 만드는 방법에 대해 배워본다.

Building a loading bar component

• Youtube

GUI Challenges는 인터페이스에 대해 먼저 작성해 보고 피드백을 받은 다른 사람들의 방법도 공유한다.

이번에는 로딩 바 컴포넌트의 구현을 제공하는데, 이 과정에서 웹 접근성과 호환성을 위해 고려한 점들을 배울 수 있다.

RegexPlay

자신의 정규 표현식 실력이 어느 정도인지 궁금하지 않은가? 정규 표현식은 자주 쓰이는 문법이 아니다 보니 생소한 개발자들이 많을 것이다.

RegexPlay에서 정규 표현식 퀴즈를 풀고, 자신의 점수와 백분위를 확인해 보자.

코드와 도구

Reveal.js: An HTML Presentation Framework

Reveal.js는 HTML을 사용해 브라우저 내에서 프레젠테이션을 만들 수 있는 프레임워크다.

CSS로 프레젠테이션의 스타일을 변경할 수 있고, Reveal.js에서 제공하는 JavaScript API를 사용해 특정 액션을 추가할 수도 있다.

PSD: A Zero-Dependency Photoshop Parser

네이버 웹툰에서 개발한 포토샵 파일을 파싱할 수 있는 JavaScript 라이브러리다.

포토샵 파일 확장자인 PSD 혹은 PSB 파일을 지원하며 각 레이어의 정보(사이즈, 오프셋, 이미지 등)를 파싱할 수 있다.

Introducing Ladle

Ladle은 React 컴포넌트를 온전히 고립된 환경에서 개발과 테스트를 할 수 있게 하는 도구로, Storybook의 Component Style Format을 지원하며, 별도의 수정 없이 기존 Storybook을 대체(drop-in replacement) 하기 위해 개발되었다.

Uber 개발자 플랫폼 소속의 Vojtech Miksu가 개발한 Ladle은 vite를 사용해 빌드 하기 때문에, 각 컴포넌트들이 번들링 될 필요 없이 네이티브 ESM으로 서빙되기 때문에 훨씬 빠르게 동작한다.

Ink: React for interactive command-line apps

Ink는 React를 사용해 컴포넌트 기반의 CLI를 만들 수 있는 라이브러리다. React를 사용하던 개발자라면 Ink를 사용해 쉽게 CLI를 개발할 수 있을 것이다.

또한, 해당 오픈소스 메인테이너는 다음과 같은 Ink와 관련된 많은 유틸 라이브러리를 개발해 제공하고 있다.

• create-ink-app - Ink 기반 프로젝트 생성 CLI
• ink-testing-library - Ink 테스팅 유틸 라이브러리
• ink-spinner - Ink Spinner 컴포넌트
• ink-text-input - Ink Text Input 컴포넌트

다음 코드와 데모 예시를 보면 어떤 식으로 동작하는지 간단히 파악할 수 있을 것이다.

import React, { useState, useEffect } from "react";
import { render, Text } from "ink";

const Counter = () => {
  const [counter, setCounter] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCounter((previousCounter) => previousCounter + 1);
    }, 100);

    return () => {
      clearInterval(timer);
    };
  }, []);

  return <Text color="green">{counter} tests passed</Text>;
};

render(<Counter />);

User Inyerface

벨기에 디지털 제품 에이전시 회사인 BAGAAR가 개발한 사용자 인터페이스 체험(?) 게임으로, 왜 좋은 사용자 인터페이스가 필요한지를 알려주기 위해 역설적이게도 가장 최악의 사용자 인터페이스로 구성된 회원가입 페이지를 통해 직접 체험해 볼 수 있게 해준다.

무사히(?) 회원가입을 도전해 보기 바란다.

[Tip] 처음 시작을 위해 헤맬 수도 있는데, 다음 페이지로 이동하기 위해선 제일 하단의 HERE 부분을 클릭해야 한다.