7월 첫주차 기록

워케이션 지은님 감사합니다

배워가기

window의 unload 이벤트

윈도우의 unload 이벤트는 문서나 하위 리소스가 언로딩 중일 때 발생하는 이벤트이다.

그러나 다음 케이스를 다루기 어려운 이유로 unload 이벤트의 사용을 지양해야 한다.

1. 모바일 브라우저에서 페이지 접근
2. 유저가 다른 앱으로 변경
3. 앱 매니저(아이폰 기준 화면 아래를 위로 쓸어올려서 나오는 화면)로 모바일 브라우저에서 페이지 접근이 종료된다.

unload의 대체재로 visibilitychange나 pagehide 이벤트를 사용할 수 있다.

• visibilitychange
  • visibilitychange 이벤트에 리스너로 등록된 함수는 웹페이지의 visibility 상태가 변하면, 즉 사용자가 탭을 다른 탭으로 변경하거나 원래 탭으로 복귀하는 등의 행동을 취하면 실행된다.
• pagehide
  • 브라우저가 세션 히스토리에서 다른 페이지를 보여줌에 따라 현재 페이지를 닫을 때 발생한다.
  • 예를 들어, 유저가 브라우저의 뒤로가기 버튼을 누를 때 현재 페이지는 이전 페이지를 보여주기 전에 pagehide 이벤트를 받는다

visibilitychange는 지원하지 않는 브라우저도 있기 때문에, pagehide를 쓰면 좋겠다

Ref https://developer.mozilla.org/en-US/docs/Web/API/Window/unload_event#usage_notes

요청의 멱등성

• 안정성과 멱등성

  • GET, HEAD, OPTION은 리소스를 변경하지 않는 ‘안전한’ 메서드
  • PUT, DELETE는 여러 번 호출해도 매번 같은 결과를 반환하기 때문에 ‘멱등한’ 메서드지만, 리소스를 변경하기 때문에 안전한 메서드는 아니다.

• Idempotency-Key: {IDEMPOTENCY_KEY}

  • 요청의 멱등성을 보장하기 위한 요청 헤더

Ref https://blog.tossbusiness.com/articles/dev-1?from=category

font 요청은 CORS 요청

@font-face에서 url() 표기법으로 작성한 요청은 CORS 요청으로 발생한다. 하지만 preload link는 기본적으로 non-CORS 요청이므로 이를 CORS 요청으로 맞춰주기 위해서 crossorigin attribute를 사용한다.

Ref

• https://developer.mozilla.org/ko/docs/Web/HTTP/CORS#어떤요청이_cors를사용하나요
• https://blog.banksalad.com/tech/font-preload-on-safari/

0부터 n까지 정수 타이핑하기

type IntegerByLength<
  N extends number,
  Acc extends number[] = []
> = Acc["length"] extends N
  ? Acc[number]
  : IntegerByLength<N, [...Acc, Acc["length"]]>;

Ref https://stackoverflow.com/questions/39494689/is-it-possible-to-restrict-number-to-a-certain-range

vitest(jest)

vitest(jest)에서 toBe는 참조값 검사, toEqual은 값들을 검사한다.

vitest(jest) spy 사용법

const review = new Review();
vi.spyOn(review, "updateReviewContent");
// review.updateReviewContent가 호출되었는지 확인
expect(updateSpy).toHaveBeenCalled();

blur 이벤트 방지하기

• 상황
  • 스타일을 위해 input을 div 로 감싼 경우
  • div를 클릭하더라도 input의 포커스가 blur 되지 않고 포커스를 유지하고 싶은 경우
• 해결방법
  • mousedown 이벤트에서 preventDefault() 메서드를 호출
  • 마우스 이벤트는 mousedown -> mouseup -> click 순으로 일어나므로, 가장 앞단에 발생하는 mousedown에 넣어주어야 잘 동작한다.

event.isTrusted

• 사용자 액션에 의해 생성된 이벤트를 식별할 수 있다.
• 스크립트에서 생성 혹은 수정했거나 EventTarget.dispatchEvent로 발생한 이벤트의 경우 false

onChange vs onInput

• change 이벤트는 엔터 키를 누르거나 리스트에서 옵션을 선택하는 등 변경점을 ‘반영’해야 발생한다
• input 이벤트는 단순히 요소의 value가 변할 때마다 발생한다.

👩‍🏫 즉, input 이벤트가 발생했다고 해서, change 이벤트가 발생할 것이 보장되지는 않는다.

dl, dt, dd 태그

• 정의

  • 앞글자 d 는 description 또는 definition 을 의미
  • <dl> : list
  • <dt> : term - dl 안에 사용
  • <dd> : details - dt 다음에 사용

• 접근성

  • 제목과 데이터가 1:1로 쌍을 이룰 때만 사용하는 것을 권장한다.
  • 스크린리더는 <dt>와 <dd>를 1:1로 쌍을 이룰 때 사용하는 것이 가장 정확한 의미를 읽어낼 수 있기 때문이다.
  • <dl> 태그 또한 <ul>이나 <ol>과 마찬가지로 화면에 보이는 병렬 배치를 위해 여러 개를 사용하지 않도록 해야 한다.
  • 스크린리더 사용자는 몇 개의 리스트를 더 탐색해야 하는 건지 전혀 예측이 안되기 때문이다.

• 예시

  Copy

  <dl>
    <dt>알뜰배달</dt>
    <dd>알뜰배달 설명이에요.</dd>
  
    <dt>한집배달</dt>
    <dd>한집배달 설명이에요.</dd>
  </dl>

이것저것

• String.prototype.repeat() - 문자열을 주어진 횟수만큼 반복해 붙인 새로운 문자열을 반환한다. 2022년 말에 나온 최신 문법 🤩
• flaky test - 코드나 테스트를 전혀 변경하지 않았는데도 합격과 불합격 결과가 모두 나오는 소프트웨어 테스트
• document.scrollingElement - 문서를 스크롤하는 요소를 뜻한다. 대부분은 문서의 루트 요소인 document.documentElement이다.
• PointerEvent.isPrimary - pointerEvent를 발생한 주체가 기본 포인터 장치일때 true 값이다. 기본 포인터만 마우스 이벤트를 생성한다.

기타공유

플레이스홀더 이미지 만들기

https://via.placeholder.com/ 사이트에서 플레이스홀더 이미지를 쉽게 만들 수 있다.

크기 커스텀 등 다양한 기능이 많다.

ex) https://via.placeholder.com/375x125/eb4034

Web Platform 6월 업데이트

WebSocket의 기능을 향상할 WebTransport API가 나왔고, SVG에 crossorigin 속성이 추가되었고, 베타 브라우저가 등장했다.

Ref https://web.dev/web-platform-06-2023/

새로 바뀐 네이버 메인 훔쳐보기

크롬 소스코드만으로 많은 걸 까볼 수 있구만 😲

중요한 컨텐츠는 SSR로 내리고, 에러바운더리도 꼼꼼히 감싸고, 이미지 최적화들도 모두 해놓은 것을 보니 역시 까다로운 회사라는 생각이 든다.

Ref https://yceffort.kr/2023/05/what-is-in-naver

useContextSelector와 Speculative Mode

useContextSelector는 React Context와 useContext에서 발전된 hook으로, Context의 변화로 인한 모든 컴포넌트의 리렌더를 막기 위해 지연 접근방식을 적용해 선택적인 업데이트를 수행한다.

이 hook과 함께 RFC에 Speculative Mode를 제안했다. Speculative Mode에서는 React가 실제로 업데이트가 필요한지 확인할 때까지 모든 업데이트 생성을 지연시킨다.

Ref

• https://github.com/dai-shi/use-context-selector
• https://github.com/reactjs/rfcs/pull/150

마무리

팀원들과 부산 워케이션에 다녀왔다! 비가 가끔 왔지만 전반적으로 시원하고 좋았고, 음식들도 다 맛있었고, 일하는 공간과 호텔도 나쁘지 않았다.

일주일이라는 길고도 짧은 시간 동안 팀원들을 더 잘 이해하고 친해질 수 있었던 소중한 시간이었다.

우당탕탕 워케이션을 추진했었는데, 모두 고맙다고 말해주셔서 기쁘다 😁

신나게 놀며 재충전하고 온 만큼 남은 2023년도 더 알차게 채워나갈 수 있을 것 같다!