2023-04

링크 & 읽을 거리

DEVIEW 2023

지난 2월 삼성동 코엑스 그랜드볼룸에서 개최된 국내 최대 규모 개발자 콘퍼런스 DEVIEW의 영상이 업로드되었다. FE 기술과 관련 있는 발표 주제는 다음과 같이 8개로 DEVIEW 공식 사이트의 Session 페이지에서도 filter를 web으로 설정해 확인할 수 있다.

10 Web Development Trends in 2023

올해의 웹 개발 트렌드는 어떻게 될까? 2023년의 웹 개발 트렌드에 대해 정리된 자료를 통해 쉽게 알아볼 수 있다. 한국어 번역도 존재한다.

TL;DR

메타 프레임워크: Next.js, Remix, Sveltekit, SolidStart
애플리케이션 및 렌더링 패턴: SSR, SSG, ISR, Streaming SSR, On-demand ISR, CSR
엣지에서 서버리스: Cloudflare Workers, Deno Deploy, Vercel
데이터베이스 르네상스:
- 서버리스 데이터베이스: PlanetScale(MySql), Neon(PostgreSQL), Xata(PostgreSQL)
- 플랫폼화: Fly.io, Railway
- Firebase 대체재: Supabase
자바스크립트 런타임: Deno, Cloudflare Workers, Bun
- 서버사이드 자바스크립트 런타임의 파편화 진행 중, 이를 해결하기 위한 WinterCG(Web-interpoerable Runtimes Community Group)
모노레포: Turborepo, Nx, Rush, Lerna
SSR의 부상에 따른 CSS 변화
- Utility First CSS: Tailwind CSS, UnoCSS, CSS Modules
- 제로 런타임 CSS-in-JS: vanilla-extract, linaria, astroturf, compiled
타입스크립트를 통한 E2E 타입 안전성: tRPC, Zod, Prisma, TanStack Router
빌드 도구: Vite, Esbuild, Turbopack, webpack
AI 주도 개발: copilot, chatGPT
기타: Tauri, Playwright, Wrap, Fig, CSS Container Queries, htmx

SPA view transitions land in Chrome 111

웹에서 네이티브 앱처럼 자연스러운 전환을 구현하는 것은 어렵고, 귀찮은 작업이었다.

view transitions API은 자연스러운 전환 효과를 쉽게 구현할 수 있게 해준다. 해당 기능은 크롬의 최신 릴리스 버전인 111 버전부터 지원된다.

Why Turborepo is migrating from Go to Rust

Vercel이 모노레포 툴 Turborepo를 기존의 Go 언어에서 Rust로 옮기기로 결정한 배경에 대해서 설명한다. Turbopack과 코드 중복을 제거하고, 개발자 경험 향상 등의 이유가 있었다고 한다.

Programmers Dev Survey 2023

코딩 테스트 플랫폼 프로그래머스에서 국내 개발자 4,034명을 대상으로 한 설문 조사 결과를 발표했다.

연봉, 언어, 프레임워크/라이브러리, 고민거리 등의 항목으로 구성되어서 국내 개발자들의 경험과 생각을 엿볼 수 있다.

Announcing TypeScript 5.0

typescript 5.0이 릴리스 되었다.

Decorators, const Type Parameters 등의 문법, 기능적 업데이트도 있었지만 더욱 눈여겨봐야 할 것은 ESM으로의 전환이다.

TypeScript’s Migration to Modules 포스트를 통해 ESM으로 전환하게 된 배경에 대해서 밝히고 있다.

지난 3월 16일, 새로운 React 사이트 react.dev가 공개되었다. React는 이제 곧 공개 10년('13년 5월 29일 공개, [JSConfUS 2013] Tom Occhino and Jordan Walke: JS Apps at Facebook)을 맞이하면서 오늘날 UI 개발에 있어 React를 사용하는 것이 대단하다는 점을 알리기 위해 새롭게 홈페이지를 단장했다고 한다.

기존 문서들은 legacy.reactjs.org를 통해 접근할 수 있으며, 새롭게 개편된 홈페이지는 다음 2개의 메인 섹션으로 나뉘어 있다.

Learn React: React를 처음부터 배울 수 있는 자기 주도형 과정
API Reference: 모든 React API에 대한 세부 사항과 사용 예제를 제공

How to start a React Project in 2023

FE-news 구독자분들이라면 지난 3월 Replace Create React App recommendation with Vite에서 공식 문서의 추천 도구로 CRA 대신 Vite로 대체하자는 PR과 그에 대한 Dan Abramov의 답변을 소개한 사실을 알고 있을 것이라고 생각한다.

지금 소개하는 이 글은 위의 답변 이후 작성된 react.dev의 Start a new React Project를 보고 작성되었다. Start a new React Project에서는 Next.js, Remix, Gatsby, Expo를 추천하는데, 작가는 커뮤니티들에서 이 추천 목록이 완벽하게 받아들여지지 않는 것 같다고 이야기하면서, 초보자들에게 좀 더 다양한 선택지를 제공하기 위해 Vite, Next.js, Astro를 추천한다. 각각의 장단점을 기술하면서 추천된 이유와 추천되지 못한 이유들을 짚어본다.

한국어 번역도 존재한다.

튜토리얼

Progressive Web Apps (PWA) for Beginners - Microsoft

Microsoft에서 초보자를 위한 PWA 강의를 공개했다. 4개 챕터, 17개의 비디오로 구성되어 있다. 비디오당 10분 내외의 길이라서 부담 없이 들을 수 있다.

PWA: PWA는 'Progressive Web Apps'의 줄인 말로, 모바일 사이트에서 네이티브 앱과 같은 사용자 경험을 제공하는 기술이다. 설치할 필요가 없지만 홈 화면에 아이콘 추가 및 푸시 알림도 가능하여 사용자와의 접촉 기회를 늘릴 수 있다. 그뿐만 아니라 읽기 속도와 표시의 향상, 오프라인 지원 등 다양한 이점을 얻을 수 있다.

The complete guide to CSS media queries

CSS Media Queries에 대한 기본 개념부터 고급 기술까지 다룬다.

CSS Media Queries: 반응형 디자인을 구현하는 데 필수적인 기술로, 미디어 유형, 디바이스 설정 및 정보 등을 기준으로 CSS 스타일을 적용할 수 있다. 이를 통해 디바이스의 크기나 방향 등에 따라 최적화된 디자인을 제공할 수 있게 된다.

FP and OOP are close siblings

이 글은 FP와 OOP가 조화롭게 같이 사용될 수 있다는 점을 얘기하기 위한 목적을 갖고 있지 않다. 그러나 이 둘은 매우 유사하며, 두 세계의 특정 패턴에 대한 추론에 대해 몇 가지를 배우면 두 가지를 모두 진정으로 이해할 수 있다는 점을 말한다.

OOP와 FP는 모두 인간 세계의 복잡한 문제를 더 잘 표현하고 해결하는 방법이라는 동일한 문제에 대한 해결책이며, Function Currying을 통해 접근하고 있다. 간단히 요약하자면, 이 글은 "OOP 개발자를 위한 FP"로 생각하면 된다.

Speeding up the JavaScript ecosystem - npm scripts

npm script는 높은 빈도로 모든 곳에서 실행되지만, 최적화가 잘되어 있지 않으며 때에 따라 400ms의 오버헤드를 추가하기도 한다. 이 글에서는 0 ~ 22ms로 어떻게 낮출 수 있는지를 설명한다.

[참고] 이 글은 "Speeding up the JavaScript ecosystem"의 4번째 시리즈 글로, 이전의 다른 시리즈의 글들도 같이 참고해 보면 좋다.

Part 1: PostCSS, SVGO and many more

Part 2: Module resolution

Part 3: Linting with eslint

코드와 도구

JSVerbalExpressions

정규 표현식은 강력하지만, 가독성이 항상 아쉽다. JSVerbalExpressions은 정규 표현식을 더 높은 가독성으로 작성하게 도와준다.

비슷한 라이브러리로 magic-regexp도 살펴보길 바란다.

const tester = VerEx()
  .startOfLine()
  .then('http')
  .maybe('s')
  .then('://')
  .maybe('www.')
  .anythingBut(' ')
  .endOfLine();
// 👆🏻 위 코드는 /^(http)(s)?(\:\/\/)(www\.)?([^\ ]*)$/ 정규식을 표현한다.

if (tester.test('https://www.naver.com')) {
  alert('url 테스트 통과');
}

Framework7

네이티브 앱과 유사한 모습과 경험을 웹 앱을 개발하기 위한 프레임워크다. 유명 캐로셀 라이브러리인 swiper 개발자가 개발했다.

제공되는 기능들은 데모에서 훑어볼 수 있다.

유사한 라이브러리로 stackflow도 살펴보길 바란다.

Turbowatch

Nodemon과 유사한 도구로 파일의 변경을 빠르게 감지하고, 작업들에 대한 오케스트레이션을 수행한다.

chatGPT JS2TS

Chat GPT를 활용해 JavaScript 코드를 TypeScript로 변환해 주는 도구로, 간단하게 기존 JavaScript 코드를 붙여넣기해 변환할 수 있다.