Skip to content

[2019년 3월 웹 개발 동향] 리액트 훅스, 컨스트럭터블 스타일 시트, CSS 단편화 등

읽고 배울 게 너무 많아서 뇌가 못 버틸 거라 느낄 때가 있나요? 할 일이 너무 많은데 더 많은 일로 뇌를 혹사하면 흔히 겪는 일이죠. 그렇다면 제 글은 공부할 게 많기 때문에 도움이 되지 않을 겁니다. 제가 프론트엔드나 기술과 연관 없는 다양한 글을 엮는 이유 역시 지식을 전달하기 위함입니다. 이번 달처럼 요약할 글이 많지 않을 때면 저 스스로 얼마나 다행으로 생각하는지 모릅니다. 뇌가 힘들어하면 잠시 쉬게 하고 우리가 일하는 방법을 되돌아봅시다 .

일에 접근하는 방식을 생각해봅시다. 어떤 일이 주어질 때 여러분은 세부 사항을 확인하나요? 직접 알아보나요? 아니면 그냥 주어진 일만 하나요? 주어진 일만 해도 물론 일은 끝나겠죠. 하지만 비밀번호 저장 연구가 알려주듯 필수적인 세부 사항을 잊게 될 위험도를 높이기도 합니다. 예를 들면 명세서에 비밀번호 해싱hashing 내용이 없다면 사람들은 해싱이 좋다는 걸 알아도 적용하지는 않을 것입니다. 다른 예로 웹사이트 구축 과정을 들어보죠. 올바른 캐싱caching을 추가하는 과정을 잊으면 서버 비용은 불필요하게 높아지고 퍼포먼스 역시 느려질 겁니다. ‘할 일만 하고 끝내는 것’과 좋고 뛰어난 일을 하는 것의 차이는 몇 번 더 생각하는 데서 옵니다.

업데이트 소식

  • 크롬 버전 74 개발자 도구에 새 기능을 추가했습니다. 이제 CSS 속성에 영향을 받는 모든 요소를 확인할 수 있습니다. 라이트하우스  4Lighthouse 4는 감사Audits 메뉴에 통합됐으며 웹소켓WebSocket 바이너리 메시지 뷰어도 추가됐습니다.
  • 교차 관찰자Intersection Observer는 아직 초기 단계입니다. 크롬 개발자들이 자주 발생하는 문제를 해결하고 첫 번째 버전에서 알아낸 것들을 적용해 두 번째 버전을 공개했습니다. 교차 관찰자 v2에서 변경된 점을 소개합니다.

일반 소식

  • 아직도 우리는 많은 영역에서 다양성을 염두해야 함을 까먹고 해결법을 만들곤 합니다. 여성을 생각하지 않은 자동차 더미 충돌테스트를 통해 그 과정을 설명합니다.
  • 홈팟, 알렉사, 시리, 구글 어시스턴트, 아마존 에코와 같이 디스플레이가 없는 장치가 보급되며 삶에서 목소리가 점점 중요해지고 있습니다. 모질라가 전 세계 연구기관과 힘을 합쳤습니다. 사람이 말하는 방식을 기계에 학습시킬 목적으로 고품질의 목소리를 제공하는 오픈 소스 풀을 만들기로 했습니다.
  • “버리는 건 쉽습니다. 간단해지기는 어렵죠. 설문조사에 질문을 빠르게 추가할 수 있고, 디지털 인터페이스에 더 많은 버튼을 넣을 수 있지만 동시에 사람에겐 부담이 커집니다.” 케이트 클레이턴Kate Clayton품격 있게 단순화하는 법을 탐구합니다.
  • “사람들은 데이터가 구름cloud에 있다고 생각하지만 사실은 바다에 있습니다.” 정보가 전달되는 과정을 확인하며 어떻게 마이크로소프트, 구글, 페이스북, 아마존이 해저 케이블의 절반 이상을 차지하게 됐는지 알아봅시다. 요즘 인터넷이 어떻게 대기업 네 곳에 의존하게 됐으며 이 기업들을 피하려고 하면 많은 어려움과 성능 문제에 직면함을 보여줍니다.
  • 제이슨 밀러Jason Miller가 최신 브라우저로 웹사이트에 접속할 때 어떤 일이 벌어지는지 요약해 웹에 렌더링하는 방법을 썼습니다.
Map of the world showing undersea internet cables in 2021
데이터는 구름에 있지 않습니다. 바다에 있습니다. 그리고 해저 케이블의 절반 이상은 아마존, 페이스북, 구글, 마이크로소프트가 차지하고 있습니다. (이미지 출처)

UI/UX

자바스크립트

CSS

  • 컨스트럭터블 스타일 시트Constructable Stylesheets(객체로 생성하는 스타일 시트)는 외부 스타일 시트나 스타일을 논블로킹non-blocking 방식으로 실행하는 새로운 기법입니다. 자바스크립트로 동적인 스타일 시트를 생성하는 새로운 접근법이며 섀도 돔ShadowDOM 웹 컴포넌트에서 특히 유용합니다. 이 기능은 최근 크롬 프리뷰 빌드에서 사용 가능합니다.

보안

웹 퍼포먼스

접근성

Cartoon cat and a laptop which is running the Accessibility Insights extension
액세서빌리티 인사이트 확장 도구는 접근성 오류를 발견하고 해결 방법을 알려줍니다. (이미지 출처)

일과 삶

  • 리더로서 신뢰를 얻는 방법은 뭘까요? 클레어 리우Claire Lew가 취약점 노출, 작동 의도 설명, 약속 이행과 같이 실제로 차이를 만드는 요소에 비해서 사업상 후퇴, 팀 구성 활동이 크게 중요하지 않은 이유를 설명합니다.
  • 검로드Gumroad의 창립자 사힐 라빈지아Sahil Lavingia의 글에서 통찰력을 얻었습니다. 벤처 캐피털에서 투자를 받을 때 겪은 자신의 실패담과 노력, 잘못된 선택들을 공유하며 왜 ‘일반’ 회사가 가치있고 모든 일을 실패하지 않도록 대비하는지 이야기합니다.
  • 아이들은 기술 중심적이며 스크린 앞에서 게임하고 영상 보는 데 많은 시간을 소비합니다. 패멀라 폴Pamela Paul아이들을 다시 지루하게 만들자고 주장합니다.

그 외 소식

 

한 가지 더 있습니다. 제 글과 기사 요약이 괜찮다면 지지해주세요. – 안셀름

 

도서 소개
 사람을 배려하는 디자인
에릭 마이어, 사라 와터 보에처의 신간 『사람을 배려하는 디자인』
우리는 제품 사용자가 누가 될지, 제품을 사용할 때 어떤 감정일지 정확히 알 수 없습니다. 모든 사용자를 만나볼 수는 없지만 이 책을 통해 더 넓은 범주의 사람을 위해 배려하는 디자인을 만들 수 있을 것입니다. 전 세계 사람이 사랑할 만한 제품을 만들고자 한다면 지금 당장 읽어보세요!
저작권 정보이 글은 Smashing Magazine 기사를 번역한 것입니다. 저작권자의 정당한 허락을 받은 저작물로 한국어판 저작권은 웹액츄얼리에 있습니다. 웹액츄얼리의 서면 동의 없이 무단 전재, 복제를 금합니다. 원본은 Monthly Web Development Update 3/2019: React Hooks, Constructable Stylesheets, And Building Trust에서 확인할 수 있습니다.
참여를 기다립니다!웹액츄얼리에서 웹 디자인 관련 영문 번역자를 찾습니다. 웹 콘텐츠 번역에 관심 있는 분은 메일로 간략한 본인 소개와 번역 이력을 보내주시면 연락드리겠습니다. books@webactually.com


맨위로