2020-06

링크 & 읽을거리

Recoil: State Management library for React

지난 5월 14일 온라인으로 열린 ReactEurope 콘퍼런스에서 페이스북은 새로운 상태 관리자 라이브러리인 Recoil을 공개했다.

발표영상: Recoil: State Management for Today's React

Recoil은 기존 상태 관리자들만으로 해결하기 어려웠던 다음의 문제들을 해결하기 위해 개발되었다고 그 이유를 밝히고 있다.

Flexible shared state
Derived data and queries
App-wide state observation

다음의 Egghead에서 제공되는 총 6분 내외의 짧은 온라인 튜토리얼을 통해 기본적인 Recoil의 사용방법을 빠르게 배울 수 있다.

Up and running with Recoil - a new state management library for React

Implementing Dark Mode In React Apps Using styled-components

많은 웹사이트가 다크 모드를 지원하는 추세다. 다크 모드는 사용자의 눈의 피로를 줄여줄 뿐만 아니라 사용자 디바이스의 전력 소모를 줄이는 데에도 도움을 줄 수 있다. 이 글에서는 CSS-in-JS 라이브러리 중 하나인 styled-components를 이용하여 간단하게 React 환경에서 Dark Mode를 구현하는 방법을 설명한다.

자바스크립트 개발자를 위한 AST(번역)

AST(Abstract Syntax Tree)가 무엇인지, 또, 자바스크립트 코드가 어떻게 AST로 변환이 되는지 설명하는 글이다. AST가 어떻게 활용될 수 있는지 Babel, Prettier 등을 간단하게 예로 들어 보여준다.

Become a better godfather for your React components

React Component를 디버깅하다 보면 한 번쯤은 React Developer Tools에서 Anonymous Component를 마주한 적이 있을 것이다. 이는 React 디버깅 시 작지 않은 방해 요소다. 이 글에서는 어떻게 하면 Anonymous Component를 피할 수 있는지 간단한 예시와 함께 설명한다.

자바스크립트에서 AbortController 를 활용하여 비동기 작업 중단하기

자바스크립트에서 비동기 작업을 도중에 중단하기란 보통 어려운 일이 아니다. 이 글에서는 브라우저의 AbortController API를 이용하여 자바스크립트 비동기 작업을 도중에 중단하는 방법에 대해 예제 코드와 함께 설명한다.

What's New in Lighthouse 6.0

Chrome DevTools의 웹 사이트 진단 도구인 Lighthouse가 6.0 버전을 릴리스하였다. Chrome 84 버전부터 탑재 된다고 한다. 이 글에서는 6.0 버전에서 어떤 것들이 바뀌었는지 설명한다.

Text fields & Forms design — UI components series

FE 개발자들이 빈번하게 개발하는 form. 우리는 그동안 익숙함에 늘 관성적으로 form을 개발하고 있지는 않았는가?

이 글에서는 form에서 각종 요소들이 어떻게 정렬되는지, 어떻게 위치하고 있는지 등에 따라 장단점을 알려준다. 또한 더 나은 사용자 경험을 위한 form을 만들기 위해 어떤 방법들이 있는지 좋은 사례와 나쁜 사례를 비교하며 자세하게 설명해 준다.

FE-news를 통해 지난 3월에 공유한 Design Better Forms를 함께 읽어보면 사용자가 이용하기 편리한 form을 만드는데 큰 도움이 될 것이다.

web.dev - LIVE

구글 웹 플랫폼 팀에서 3일(6/30 ~ 7/2) 동안 온라인 이벤트를 진행할 예정이다.

빌드 도구부터 CSS, 이미지 압축, 크롬 개발자 도구를 활용한 문제점 발견과 해결 방법, PWA를 안드로이드 앱으로 배포하기 등등 웹 개발에 유익한 다양한 모던 웹 기술과 테크닉 세션들이 예정되어 있다.

Standard IO Under the Hood

우리가 console.log()를 사용할 때 실제로는 어떤 과정을 거쳐 호출이 실행될까?

C++로 작성된 JavaScript 런타임 V8의 코드를 통해 전체 실행 과정에 대한 설명을 확인할 수 있다. C++에 대한 경험이 없다면 이해하기 어려울 수도 있지만, 우리가 매일 작성하는 JavaScript 코드가 어떻게 실행되는가에 대한 호기심을 충족시켜 줄 수 있다.

Why is immutability so important (or needed) in JavaScript?

불변성(Immutability)은 JavaScript에서 필수적이라기보다는 패션 트렌드에 가깝고, React를 사용하는 경우 상태 관리에서 일부 혼란스러운 설계에 대한 깔끔한 해결 방법을 제공할 수 있지만 대부분의 다른 상황에서는 도입에 따른 복잡성이 충분한 가치를 더해주지 못한다는 의견을 밝히고 있다.