Fresh는 Deno에서 동작하는 새로운 full-stack 웹 프레임워크로 Deno 개발팀에서 개발했다. Next.js와 유사한 파일시스템 라우팅이 지원되며, 빌드 과정이 없고 디폴트로 어떠한 JavaScript 코드도 클라이언트로 보내지 않는다. 대부분의 렌더링은 서버에서 이뤄지며, 클라이언트는 상호작용을 위해 작은 영역들(small islands - Island 아키텍처)에 대한 재렌더링을 수행한다.
사실상 Next.js의 Deno 버전으로 볼 수 있으며, Preact를 사용한다.
참고 링크
Next.js를 개발(또한 socket.io, Mongoose도 개발)한 Vercel의 창업자인 Guillermo Rauch에 대한 2017년 인터뷰 내용이다. 아르헨티나 수도인 부에노스아이레스 근교에서 성장했고, 스타 트렉과 엔지니어링에 관심이 많던 아버지로 인해 7살 때 컴퓨터를 처음 사용하기 시작했다고 한다.
이후 16살이 되었을 때, 당시 유명했던 MooTools 코어 개발자로 합류하게 되었고 그 다음 해 스위스 스타트업의 Front-end 애플리케이션 개발 지원을 위해 채용되었고, 이후 샌프란시스코 사무실을 열게 됨에 따라 미국으로 이동하게 되었고 이후 창업을 통해 오늘날에 이르게 되었다고 회고한다.
오늘날 Front-end 씬에서 영향력을 갖는 이의 궤적을 엿보는 것은 언제나 흥미롭다.
추가로 다음의 팟캐스트 인터뷰도 같이 들어보기 바란다.
지난 5월 24~25일, 처음 개최된 Remix 콘퍼런스 세션들을 확인해 볼 수 있다.
상태 관리 라이브러리가 해결해야 하는 핵심 문제와 모던 라이브러리들이 어떻게 새로운 방법으로 이를 다루고 있는지 설명하는 글이다. 대체적으로 전역 상태 관리 라이브러리는 다음의 문제들을 해결할 수 있어야 한다.
- 구성 요소 트리의 모든 위치에서 저장된 상태를 읽을 수 있어야 한다.
- 스토어에서 쉽게 데이터를 읽고 저장할 수 있어야 한다.
- 렌더링 최적화 메커니즘 제공해야 한다.
- 메모리 사용을 최적화하는 메커니즘 제공해야 한다.
오늘날 JavaScript 개발에서 사용하는 의존성들 중 얼마나 많은 영역에서 wasm을 배후에서 활용하고 있는지를 안다면 놀랄 것이다.
이 동영상은 JavaScript와 TypeScript 생태계에서 wasm의 주목할 만한 용도를 살펴보고 완전한 네이티브 또는 완전 JavaScript 해법과 비교해 하이브리드 wasm/JS 도구의 이점에 대해 설명한다.
시리즈로 구성된(아직 완성되지 않은) 글을 통해 저자는 웹 성능을 위해 이해해야 하는 본질적 요소들을 하나씩 설명한다.
첫 번째 시리즈 글에선 브라우저의 렌더링 사이클과 하드웨어 가속, 합성 레이어 등에 대한 전반적인 브라우저의 렌더링 과정을 다루며, 두 번째 글에선 이벤트 루프, 비동기 스케줄링 등을 통해 브라우저의 동작을 블록 하지 않는 것에 대한 설명을 이어 간다.
두 번째 시리즈 글:
Bun은 새로운 JavaScript 런타임이면서 동시에 번들러, 트랜스파일러 그리고 패키지 매니저 역할을 수행할 수 있는 all-in-one 도구이기도 하다.
속도에 초점을 맞춰 Node.js나 Deno와는 다르게 WebKit의 JavaScriptCore 엔진을 활용한다. 주요한 Front-end 생태계의 도구와 환경을 모두 지원하며, TypeScript와 JSX, Jest-like 테스트 러너도 빌트인 되어 기본 지원된다. Bun은 로우 레벨 언어인 Zig로 작성되었으며, 엄청나게 많은 시간을 투자해 프로파일링과 최적화 그리고 Zig의 수동 메모리 관리 특성을 최대한 활용해 보다 단순하고 빠르게 만들 수 있었다고 한다.
[참고]
저자는 최근 몇 년간 "Redux는 React 앱에서 45~50% 정도 사용되고 있다"와 "Redux는 React 앱에서 가장 널리 사용되는 상태 관리 도구이다"라는 의견을 얘기해 왔었고, 어떻게 그러한 결론을 도출해 낼 수 있었는지에 대한 접근 방법(다양한 참고 지표들)을 소개한다.
글에선 Redux를 대상으로 하지만, 어떤 라이브러리를 사용해야 하는지 결정이 필요한 경우라면 이 경험이 도움이 될 수 있을 것이다.
Slack, Netfliy 그리고 Ambassador Labs에서 일하는 엔지니어들간의 토론 세션 팟캐스트로 번아웃을 극복하기 위한 가장 좋은 해법이 무엇인지에 대한 얘기를 들어볼 수 있다.
Slack의 수석 엔지니어는 개발 번아웃의 위험성은 정기적인 배포/릴리스 진행을 통해 감소되며, 재작업과 병목현상에 많은 정신적 에너지를 사용하는 것으로부터 발생되며, 개발자들이 코딩하지 못하게 하는 모든 것에 의해 어떻게 번아웃이 발생함을 얘기한다.
MS Edge 웹 플랫폼 팀의 Melanie Richardson은 21년 1월 새로운 <popup> 요소에 대한 제안과 그에 대한 설명(explainer) 문서를 공개했었다.
이 요소는 문서 내의 다른 요소들보다 최상위 레벨에 표현되는 레이어를 생성하고 표현하는 것에 대한 것으로, ESC 키를 통해 숨겨지고 한 번에 한 개의 레이어만 노출되어야 하는 상황에 사용될 수 있는 요소다.
해당 제안은 추가적인 논의 진행을 통해 별도 요소가 아닌, 기존 요소의 속성 형태로 제공되는 새로운 제안(Pop Up API (Explainer))으로 논의가 변경되어 진행 중에 있다.
이에 대한 chromium 구현 진행상황은 Tracking bug for implementation of popup attribute/API을 통해 확인할 수 있다.
2022년 브라우저에서 사용할 수 있는(또는 지원될 것으로 기대) 다양한 새로운 CSS 기술들을 소개한다.
- Container Queries: 컨테이너 크기에 따라 스타일 적용
- Cascade Layers:
@layer를 사용해 레이어 단위로 우선순위를 지정 - Color Functions: 상대적 색상 값, 색상 혼합, 대비 색상을 지정하는 함수들
- New Viewport Units: 새로운 뷰포트 단위
- svw/svh: Short Viewport
- lvw/lvh: Large Viewport
- dvw/dvh: Dynamic Viewport
- :has(): 특정 자식이 있는 부모 요소를 선택
- overscroll Behavior: overscroll 할 때의 동작을 제어
- Subgrid: 부모 그리드와 같이 정렬
- Accent Color: input 요소에 색상을 지정
- Media Query Ranges: 미디어 쿼리의 최대/최소 너비 범위를 지정
지난 6월 9~10일 암스테르담에서 진행된 CSS만을 다루는 콘퍼런스다.
19년도부터 자주 언급되던 뉴모피즘(Newmorphism)은 주요한 UI 트렌드가 되었나 물은다면 그 대답은 아직까지는 "NO" 일 것이다. (FE-news 2020년 4월 호 - "뉴모피즘은 새로운 UI 트렌드가 될 수 있을까" 참고) 그렇다 뉴모피즘과 글래스모피즘(Glassmorphism)은 UI를 새로운 방향으로 이끌고자 했지만 크게 흥하지는 못했다고 할 수 있다.
최근에는 위 디자인과 상당히 대비되는 특징의 뉴브루탈리즘(Neubrutalism)이 떠오르고 있다. 특이하면서 채도 높은 색상, 색상 간 고도 대비와 기발한 타이포그래피, 그리고 전통적인 레이아웃이라는 톡톡 튀는 개성을 가지는 뉴브루탈리즘은 새로운 UI 트렌드가 될 수 있을까?
[참고] 뉴브루탈리즘의 다양한 사이트들을 보고 싶다면 다음 글에서 확인 가능하다.
Hydration 과정은 서버로부터 전달되고 렌더링 된 HTML에 대해 상호작용을 위한 이벤트 핸들러 설정과 초기 상태 설정 등과 같이 애플리케이션이 동작하기 위해 필요한 처리 과정을 의미한다. 대다수의 모던 JavaScript 프레임워크들에서 이 과정을 위해 상당한 초기 비용이 발생되기 때문에, 어떻게 처리하는지에 따라 사용자 경험에 영향을 큰 영향을 미치게 된다.
이 글은 보다 효율적인 hydration을 위해 다양한 프레임워크들이 채택하고 있는 접근 방법들을 소개하고 있다.
브라우저의 개발자 도구 내의 Performance 도구를 사용해 런타임 성능을 분석하는 방법을 설명한다.
다음 데모에서 보이는 느릿하게 실행되는 애니메이션에서 병목지점을 프로파일링을 통해 확인하고, 소스 레벨에서 병목지점을 찾는 과정을 확인해 볼 수 있다.
시스템 설계는 광범위한 주제지만 확장 가능한 시스템을 설계하는 방법을 배운다면 더 나은 엔지니어가 될 수 있을 것이다.
이 저장소는 규모에 맞는 시스템 구축 방법을 학습하는 데 도움이 되는 다양한 리소스들을 한곳에서 확인할 수 있으며, 다양한 사례별 시스템 구축에 대한 모범적인 해법도 일부 제공한다.
이 튜토리얼은 runjs라 불리는 아주 단순화된 Deno와 같은 JavaScript 런타임을 직접 만들어 보는 내용을 설명한다.
개발된 런타임은 CLI를 통해 파일의 읽기, 쓰기, 삭제할 수 있는 API가 제공되며, 그리고 심플한 console API를 제공한다.
이 저장소는 우리가 좋아하거나 매일 활용하는 기술을 처음부터 다시 만들어 볼 수 있는 방대한 리소스들에 대한 모음을 제공한다.
GitHub 프로젝트 readme 파일에 커스텀 배지(badge)를 추가할 수 있는 다양한 방법들을 소개한다.
CSS specifity는 CSS 선택자의 우선순위를 나타내는 가중치를 나타낸다.
그러나 선택자에 따른 가중치가 어떻게 부여되는지에 대해서는 쉽게 알아차리기 어려운 점이 있으며, 이 데모는 이를 쉽게 이해할 수 있도록 도와준다.
HTML 우선 주의를 표방하는 프레임워크로, AngularJS를 개발한 Miško Hevery와 Stencil을 개발했던 Manu Almeida 그리고 Ionic/Stencil 개발에 참여했던 Adam Bradley가 참여했다.
특징으로는 비 hydration, 자동 lazy-loading 지원, SSR/SSG로 생성된 HTML내 애플리케이션의 상태를 포함시키기 때문에 언제든 실행을 재개할 수 있는(resumable) 기능을 지원한다.
JSX를 기본 지원하며, React를 알고 있다면 쉽게 접근할 수 있다.
[참고] 보다 깊게 알고 싶다면, 다음의 링크들을 추가로 참고하라.
- Miško Hevery가 작성한 8개 시리즈로 구성된 소개글: A first look at Qwik - the HTML first framework
- Qwik Tutorial
fnm (Fast Node Manager)
Rust로 작성된 node 버전 매니저로 단일 파일로 제공된다. 크로스 플랫폼이 기본 지원되며, .node-version과 .nvmrc 설정 파일과 호환된다.
자신에게 주요 장애물이 되는 성장하는 라인을 조종하는 게임 장르인 스네이크 게임을 브라우저의 favicon 영역에서 플레이할 수 있다.
Service Worker는 HTTP 요청을 캐싱 해 오프라인 상태에서도 앱이 동작하도록 만들 수 있으며, wayne은 마치 express.js와 같이 Service Worker 요청들을 쉽게 다룰 수 있는 라우팅 라이브러리이다.
GitHub Actions가 편리하다는 것은 다들 알고 있을 것이다. 그러나 GitHub Actions를 개발/테스트하기 위해 매번 GitHub Repo에 commit 해야 한다는 것은 여간 귀찮은 일이 아니다.
act를 이용하면 로컬에서 docker를 이용해 GitHub Actions를 실행해 볼 수 있다.
CSS를 사용할 때 가장 많이 쓰이는 레이아웃 중 하나인 flexbox는 처음에 익숙해지기가 쉽지 않다. 익숙하지 않을 때 Flexbox Playground를 활용해 아이템을 이곳저곳 배치해 보며 학습해 보자.
말 그대로 웹사이트 내에서 불꽃놀이 효과를 구현할 수 있는 라이브러리다. 데모 웹사이트에 들어가면 현란한 불꽃놀이를 감상할 수 있다. 또한, 라이브러리의 파라미터를 조정해 보면서 이펙트를 변경할 수도 있다. React, Vue, Angular 등 여러 프레임워크의 컴포넌트를 지원하고 있다.
워싱턴 지역 고등학교에 재학 중인 Aden Bai가 개발한 Million.js는 1kb 미만의 VDOM 라이브러리로, 컴파일러를 통해 불필요한 부분을 제거해 더 작은 크기의 번들을 생성할 수 있다.
또한 React와 유사한 API를 제공하고 있어, 기존 React 사용자라면 쉽게 접근할 수 있다.
[참고] VDOM과 Million.js 개발의 기술적 배경에 대해서는 다음 글을 추가로 참고하면 좋다.