1월 3주차 기록

January 19, 2024 • ☕️ 4 min read

weekly

배워가기

CloudFront에서 객체를 캐싱하는 시간 지정

CloudFront 배포의 캐시 동작에서 최소값, 최대값 및 기본 TTL 값을 설정한다.
오리진의 응답에 Cache-Control 또는 Expires 헤더를 포함한다.

구체적인 속성의 종류는 👇링크에서 확인. 여러 개의 속성이 설정되었을 때 어떤 우선순위로 캐시 시간이 정해지는지 살펴보자!

Ref https://docs.aws.amazon.com/ko_kr/AmazonCloudFront/latest/DeveloperGuide/Expiration.html#ExpirationDownloadDist

react-router v6의 Ranked Router

Copy

<Route path="/teams/:teamId" />
<Route path="/teams/new" />

위와 같은 순서로 Route를 설정했을 때, /teams/new로 가도 new를 :teamId로 해석하여 잘못된 URL로 떨어지지 않는다! 매칭 알고리즘이 알아서 매칭 우선순위를 계산하여 /teams/new로 이동시켜준다.

진작 이렇게 해주지!

Ref https://reactrouter.com/en/main/start/overview#ranked-route-matching

react-router의 `BrowserRouter` vs `Router`

BrowserRouter
- <BrowserRouter>는 clean URL을 사용하여 브라우저의 주소창에 현재 주소를 저장하고 브라우저의 빌트인 히스토리 스택을 이동할 수 있게 해준다.
Router
- <Router>는 <BrowserRouter>나 <StaticRouter> 등의 모든 라우터 컴포넌트들이 공유하는 저수준 인터페이스다. 리액트의 관점에서, <Router>는 앱 전체에 라우팅 정보를 제공하는 context provider다.

실사용 시에는 그냥 <Router> 대신 <BrowserRouter> 등을 쓰세요!

React Context의 Consumer

Consumer는 useContext 훅이 제공되기 전에 context를 읽어오는 수단이었다.

Copy

function Button() {
  // 🟡 Legacy way (not recommended)
  return (
    <ThemeContext.Consumer>
      {theme => (
        <button className={theme} />
      )}
    </ThemeContext.Consumer>
  );
}

여전히 동작하지만, useContext 사용이 권장된다.

Copy

function Button() {
  // ✅ Recommended way
  const theme = useContext(ThemeContext);
  return <button className={theme} />;
}

Ref shttps://react.dev/reference/react/createContext#consumer

이것저것 모음집

a |= b - a = a | b와 같은 것
git push 시 ‘stale info’ 메시지와 함께 rejected가 뜬다면 - git fetch를 한번 해본다
jest 테스트 구문 - 여러 keydown을 발생시키고 싶을 때, 다음과 같이 연달아 쓸 수도 있다.
- await userEvent.keyboard('{ArrowDown}{ArrowDown}{Tab}');