12월 첫주차 기록

December 10, 2023 • ☕️ 5 min read

weekly

따뜻한 12월 첫 주

배워가기

크롬 네트워크 탭 팁

크롬 개발자 도구의 네트워크 탭에서

preserved log 옵션을 켜두면 Redirect 동작을 확인할 수 있다.
문서 우클릭 > 복사 > 응답 복사 > cURL 복사를 하면 브라우저에서 어떻게 (옵션들을 담아서) 요청을 날리는지 볼 수 있다.

iOS에서 비디오 제어

iOS에서는 사용자의 터치 동작에 따라 비디오가 자동으로 전체 화면으로 들어가는 경우가 있다. 이를 방지하기 위해 특정 요소에 touch-action 속성을 사용할 수 있다.

Copy

video {
  touch-action: manipulation;
}

useRouteMatch (useMatch)

react-router-dom의 useRouteMatch hook은 현재 URL을 <Route>에 정의된 방식으로 매칭한다. 실제로 <Route>를 렌더링하지 않고도 match 데이터에 접근하고자 할 때 유용하다

Copy

import { Route } from "react-router-dom";

function BlogPost() {
  return (
    <Route
      path="/blog/:slug"
      render={({ match }) => {
        // Do whatever you want with the match...
        return <div />;
      }}
    />
  );
}

Copy

import { useRouteMatch } from "react-router-dom";

function BlogPost() {
  let match = useRouteMatch("/blog/:slug");

  // Do whatever you want with the match...
  return <div />;
}

v6에서는 useMatch로 바뀌었다

Ref https://v5.reactrouter.com/web/api/Hooks/useroutematch

safari overflow: hidden + border-radius 버그

요소에 border-radius를 적용하고 overflow: hidden을 하면 iOS 특정 버전 기기들에서는 border-radius가 먹지 않는 문제 발생

사파리의 렌더링 엔진 Webkit의 버그라고 한다…; (세륜 사파리)

‘쌓임 맥락’에 따라 overflow: hidden 이 적용된 요소를 쌓임 맥락에 포함시키면 된다는 해결책이 있었다.

css isolate: isolate를 사용하여 새로운 쌓임 맥락을 만든다.

Ref

`DOMParser`

XML/HTML 소스코드를 DOM Node로 변환해준다

그 반대는 XMLSerializer

Ref

이것저것

postman-runtime - node 런타임에서 쓸 수 있는 postman (Ref)
터미널에서 ctrl + R - 이전 검색 히스토리를 찾아볼 수 있다
아이폰 저전력 모드에서는 video 태그의 autoplay가 동작하지 않는다!
typeorm nullable - nest.js에서 typeorm을 사용하여 RDB를 설계할 때, null이 들어올 수 있는 필드는 데코레이터에 nullable을 명시해줘야 한다.