TOAST UI

프런트엔드 개발의 가장 큰 디펜던시인 크롬 브라우저의 주요 이슈를 Chrome Platform Status의 Roadmap과 한 달간 blink-dev 활동 요약을 기준으로 정리하여 공유한다.

지난 해 많은 개발자 도구들이 출시되었다. 그리고 그 개발자 도구들은 지난 몇 년 동안 webpack, Babel, Rollup, Parcel, create-react-app을 포함하는 프론트엔드 개발을 지배해 온 도구의 뒤를 따른다.

스토리북으로 자동화 테스트를 작성하는 방법, Interactive Stories 기능 등을 활용하여 컴포넌트의 인터랙션을 자동으로 재생하는 방법, 그리고 E2E 도구를 결합하여 테스트하는 방법 소개

터치와 클릭을 사용하지 않는 하루를 상상해보자. 과연 어떨까? 필자는 두 동작 없는 하루를 이제는 상상할 수 없다. 사용자일 때는 무의식적으로 사용해서 이 두 동작의 관계에 대해 깊게 생각해 본 적이 없었다. 프론트엔드 개발자가 되고 터치와 클릭의 차이점 때문에 발생하는 문제를 맞닥뜨린 이후에서야 두 동작의 관계에 대해서 생각해보게 되었다.

많은 기능, 모달 창 또는 사이드 패널을 가진 복잡한 웹앱을 사용해 본 적이 있는가? 이 문제는 모바일 앱에서 앱을 특정 페이지나 UI 상태로 열기 위해 사용하는 딥링크로 해결할 수 있다. 하지만 이 기능은 많은 웹앱에서 왜 존재하지 않을까?

ECMAScript 모듈 시스템(`import`와 `export` 키워드)은 기본적으로 자바스크립트 코드만 가져올 수 있다. 하지만 애플리케이션의 설정을 JSON 파일에 저장하는 것이 편리할 때가 많고, 결과적으로 JSON 파일을 ES 모듈로 직접 가져오고 싶을 것이다.

Lighthouse는 새로운 모드인 User Flow API를 통해 페이지의 생애를 테스트할 수 있게 해줄 것이다. Puppeteer는 정해진 각본대로 페이지를 로드하고 사용자 인터랙션을 유발해 주는 역할을 했고, Lighthouse는 그런 인터랙션이 일어날 때 주요 지표를 측정하기 위해 다양하게 이용되었다. 즉, 성능은 페이지가 로드 될 때와 페이지의 인터랙션 중일 때만 측정 가능하다. 접근성 측정은 CI를 통해서 수행될 수 있다. 첫 화면은 물론이고 하나라도 놓치지 않기 위해 개발자 각자의 복잡한 순서로도 확인할 수 있다.

찬바람이 불고 낙엽이 떨어지는 11월이 되었습니다. 어느덧 2021년도 한 달 밖에 남지 않았는데요. 환절기 감기🤧 유의하시길 바라며 남은 2021년도 건강하게 보내길 바라겠습니다.🙏

새로운 Sanitizer API는 페이지에 임의의 문자열을 안전하게 삽입할 수 있는 강력한 처리방법을 구축하는 것을 목표로 한다.

우리는 리소스의 상대적 중요도(높음 또는 낮음)를 암시할 수 있는 importance 속성과 우선순위 힌트(Priority Hints)를 이야기한다. 우선순위 힌트는 코어 웹 바이탈을 최적화하는 데 도움이 될 수 있다.