6월 첫주차 기록

전쟁나면 어디로

배워가기

HTML로 popover 띄우기

Popover API를 이용하여 컨텐츠 위에 popover를 띄울 수 있다. 크로미움 기반 브라우저에 베타 적용되었다.

popover, dialog 등으로 불리는 이 요소들에는 두 가지 종류가 있다

• modal - popover가 보여지는 동안 페이지의 나머지 부분은 인터랙션 가능하지 않다.
• non-modal - popover가 보여지는 동안에도 페이지의 나머지 부분이 인터랙션 가능하다.

Popover API로 만드는 popover들은 항상 non-modal이며, modal popover를 띄우고자 한다면 <dialog> 태그를 사용하면 된다. 그러나 <dialog>는 기본으로 최상위 레이어에 있지 않은 반면, popover는 최상위 레이어에 있게 된다.

Popover API로 만드는 popover는 유저-인터랙티브한 요소들, 예를 들면 액션 메뉴, 커스텀 토스트 노티, form 등에 사용될 수 있다.

HTML 속성으로 사용할 수도 있으며,

<button popovertarget="mypopover">Toggle the popover</button>
<div id="mypopover" popover>Popover content</div>

JavaScript API - HTMLElement.togglePopover()로 제어할 수도 있다.

Ref

• https://developer.mozilla.org/en-US/docs/Web/API/Popover_API
• https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/togglePopover

HTML5의 ValidateState API

ValidateState 인터페이스는 form 요소의 값에 대한 유효성 상태를 나타낸다.

값이 없음(valueMissing), 너무 짧음(tooShort), 패턴이 다름(patternMismatch) 등의 검증 기능을 제공한다.

추가로 Constraint Validation API를 사용하여 HTML만으로도 오류 메시지를 커스텀할 수 있다.

Ref

• https://developer.mozilla.org/en-US/docs/Web/API/ValidityState
• https://jeonghwan-kim.github.io/dev/2020/06/08/html5-form-validation.html

RIBs

Uber에서 개발한 cross-platform mobile architecture 프레임워크로, 로직과 뷰를 분리하는 데 중점을 두었다.

RIBs라는 이름은 ‘Router, Interactor and Builder’의 줄임말이다.

• Router
  • navigation flow 제어 - 어떤 화면이 유저에게 언제, 어떻게 보여질지 관리
• Interactor
  • 비즈니스 로직 제어, 서버와의 통신, 데이터를 로드하고 변형하는 작업 담당
• Builder
  • RIBs 인스턴스를 생성하는 역할, 의존성 주입과 각 RIBs의 생명주기 관리

Ref https://github.com/uber/RIBs

테스트에서 getByTestId

테스트에서 getByTestId는 최후의 보루로 사용하는 것이 좋다.

최대한 사용자가 사용하는 것과 비슷한 방식으로 select 하는 것이 좀 더 유연한 테스트가 되도록 한다.

// ❌
getByTestId("form-username"); // 사용자는 form-username 라는 어트리뷰트를 모른다.

// ✅
getByLabelText("이름");

Ref

• testing-library.com/docs
• Making your UI tests resilient to change

pnpm 재밌는 명령어 모음

• pnpm dlx
  • npx처럼 동적 패키지 실행을 할 수 있다
• pnpm why <package>
  • 특정한 패키지를 디펜던시로 갖고 있는 모든 패키지 목록을 보여준다

이것저것

• Turborepo는 빌드 결과물과 log를 원격 저장소에 캐싱해둘 수 있다. - 일반적인 캐싱은 하나의 컴퓨터(로컬)에 제한되지만, 원격 캐싱을 사용하면 같은 프로젝트를 개발하는 동료 개발자 뿐 아니라 CI에서도 동일한 input에 대한 캐시데이터가 있다면 가져다 쓸 수 있다
• npkill - 시스템 상의 모든 node_modules 를 지워준다. npx npkill 명령어로 실행할 수 있다

기타공유

React의 10살 생일

글은 vercel에서 축하해주는 내용이다.

지난 5/29이 React의 10살 생일이었다고 한다. 🎂

Ref https://vercel.com/blog/10-years-of-react

Qwik 1.0 release

대체 이 어떻게 읽는지도 모르겠는 라이브러리는 또 언제 나온 건지 🫠

React, Vue, Angular 등의 선진 프레임워크들의 힘에 더해 더 빠르고, 확장성 있으며(scalable), 유지 가능한 옵션들을 제공한다고 한다. (이런 말만 들으면 살짝 뻔하다-)

Qwik은 여태까지의 많은 경우에서 앱의 규모와 상관없이 브라우저가 자바스크립트로 가득차 있었던 문제를 해결한다. Qwik은 유저에게 애플리케이션을 즉각적으로 전송하는데, 애플리케이션의 복잡성에 상관없이 초기 자바스크립트 비용을 일정하게 유지하여 브라우저가 뻗지 않도록 한다.

Qwik이 유저 경험을 향상시키는 key feature들은 다음과 같다.

• 자바스크립트 스트리밍을 사용한 즉시(Instant) 로딩
• 유저 인터랙션에 따라 필요한 코드 페칭
• 지연 실행
• 렌더링 시간 최적화
• 데이터 페칭

이와 더불어 개발자 경험을 향상시키는 feature들도 여럿 제공한다.

Qwik이 React의 킬러가 될 수 있을지 생각해볼 수 있는 블로그 글도 있다.

Ref

• https://www.builder.io/blog/qwik-v1

마무리

6월이 되기 하루 전날 서울에 잘못된 경계경보가 울려서 너무나 무서웠다 ㅠㅠ 저 아직 죽기 싫어요… 오래오래 개발하다가(돈 벌다가) 죽게 해주세요