JSer.info #462 - 프런트엔드 관련 도구에 대한 설문 조사 Front-End Tooling Survey 2019의 결과가 공개됐습니다.
3,005명 개발자 대상으로 CSS, JavaScript 등에 관한 설문 조사 결과를 지난해의 설문 결과와 함께 비교하여 게재했습니다.
CSS 관련 프리프로세서, 프레임워크, 명명 규칙과 CSS-in-JS 그리고 JavaScript 관련 프레임워크, 라이브러리, Bundler, Transpiler, 테스트 관련 결과가 공개돼 있으며 성능 테스트, 접근성 등에 관한 항목도 있습니다.
흥미가 있는 분은 한번 살펴보면 좋을 것 같습니다.
Build your own React는 스크래치로 React 같은 DOM 렌더링 구조를 구현하는 방법을 소개하고 있습니다.
createElement, render와 같은 함수를 단계적으로 구현하며 Hooks API 구조까지 구현해보는 튜토리얼 느낌의 글입니다.
해당 글은 Code Surfer를 사용해 코드와 문장이 동기화 돼 표현되는 형태로 작성돼 있습니다.
또, React 상의 구조를 직접 살펴보고 싶은 분은 React 커스텀 렌더러를 구현하는 아래 동영상을 보면 재미있을 거 같습니다.
헤드라인
Bytecode Alliance
bytecodealliance.org/articles/announcing-the-bytecode-alliance
Mozilla, Fastly, Intel, Red Hat 중심으로 WebAssembly의 안전한 에코 시스템을 만드는 게 목표인 Bytecode Alliance이라는 단체가 결성됐습니다.
npm을 예로한 현재 에코 시스템에서의 공격 사례와 Nanoprocess라고 불리는 Sandbox 구조에 대해서도 소개돼 있습니다.
아티클
Upcoming notification permission changes in Firefox 72 - Mozilla Hacks - the Web developer blog
hacks.mozilla.org/2019/11/upcoming-notification-permission-changes-in-firefox-72/
Firefox 72에서 알림 허가 팝업은 사용자 상호 작용이 없으면 표시되지 않게 됩니다. 이에 대해서 소개하고 있습니다.
Build your own React
React와 같은 컴포넌트 렌더링 구조, Hooks 구조를 단계적으로 구현해보면서 살펴보는 글입니다.
Handling Errors in Express | Zell Liew
zellwk.com/blog/express-errors/
Express의 에러 핸들링에 대해 이야기하는 글입니다.
express-async-handler를 사용한 async 에러 핸들링, http-errors를 사용한 에러 객체 작성, 커스텀 에러 핸들링이나 Fallback 등에 대해서 작성돼 있습니다.
The Front-End Tooling Survey 2019 - Results - AshleyNolan.co.uk - Blog and Portfolio for Ashley Watson-Nolan
ashleynolan.co.uk/blog/frontend-tooling-survey-2019-results
JavaScript나 CSS 도구와 관련한 설문 조사 The Front-End Tooling Survey 2019 결과가 공새됐습니다.
프리프로세서, 프레임워크, Lint, Bundler, Testing, Performance, Accessiblity 등에 대해서 조사했습니다.
Building a native add-on for Node.js in 2019 - Sqreen Blog
blog.sqreen.com/building-a-native-add-on-for-node-js-in-2019/
Node.js의 네이티브 에드온을 만드는 방법에 대해서 소개합니다.
N-API 버전과 Node.js의 대응표와 NAN을 사용한 네이티브 애드온 작성 방법에 대해서 이야기합니다.
Publishing Typings to DefinitelyTyped - Level Up Coding
levelup.gitconnected.com/publishing-typings-to-definitelytyped-d4e0777e40f5
@types 패키지 작성 방법, 삭제 방법, DefinitelyTyped로 Pull Request 하는 방법, 테스트 방법 등을 소개합니다.
슬라이드, 영상
Chrome Dev Summit 2019 - All Sessions - YouTube
www.youtube.com/playlist?list=PLNYkxOF6rcIDA1uGhqy45bqlul0VcvKMr
Chrome Dev Summmit 2019 영상이 공새됐습니다.
프런트엔드 엔지니어를 위한 보안 대책 ~XSS편~ / #frontkansai 2019 - Speaker Deck(일본어)
speakerdeck.com/masashi/number-frontkansai-2019
XSS를 주제로 한 슬라이드입니다.
XSS 종류(Reflected, Stored, DOM Based)를 소개하고 각각의 전형적인 대책 방법에 대해서 소개합니다.
또, CSP나 Truested Types 등 예방책에 대해서도 이야기합니다.
서비스, 사이트, 문서
Integrate your data, APIs, and cloud services in minutes - Pipedream
Node.js에서 코드로 작성할 수 있는 IFTTT적인 웹 서비스입니다.
Slack이나 GitHub 등에서 이벤트를 전달 받아 코드로 처리하고 다른 서비스에 데이터를 보낼 수 있습니다.
Metrics
웹 사이트의 성능 지표에 대해서 소개 및 설명하는 사이트입니다.
FCP, LCP, FID, TTI, TBT, CLS에 관해 각각 설명하고 측정 방법과 개선 방법이 작성돼 있습니다.
소프트웨어, 도구, 라이브러리
NodeBB/NodeBB: Node.js based forum software built for the modern web
Node.js 버전 포럼 웹 애플리케이션 입니다.
NeekSandhu/onigasm: Oniguruma regex library on the web using WebAssembly
정규표현 엔진인 Oniguruma의 웹 어셈블리 버전입니다.
