2월 2주차 기록

February 11, 2024 • ☕️ 3 min read

weekly

배워가기

Context API 잘 쓰기

Context Provider를 Consuming Component보다 적어도 한 단계 위에 위치시킬 것
Context를 생성하고, 모든 변수와 메서들을 Context 내부에 만들고, value prop을 전달한 후 Context Provider를 export할 것
Context value들을 useContext()로 consume하고, Provider 객체에서 호출할 것

Ref https://stackoverflow.com/questions/72467494/unable-to-run-the-function-from-the-context

`useEffect`의 cleanup 함수 호출 시점

useEffect의 cleanup 함수는 컴포넌트가 unmount되었을 때가 아니라, 컴포넌트가 리렌더링되었을 때 호출된다.이전 렌더링과 다르게 props가 변경되었을 지 모르니 이전 effect를 cleanup해주는 것이다.

Ref

AWS EC2 vs AWS Lightsail

과금 체계
- EC2: 사용한 만큼 과금 - 껐다켰다 한다면 더 저렴할 수 있음
- Lightsail: 월별 고정금액 과금 - 쭉 사용한다면 더 저렴할 수 있음
구성
- EC2: 더 많은 설정이 가능하다. 더 많은 관리가 필요하다.
- Lightsail: 고급 기능에는 제한이 있다. 일반적인 웹 호스팅에는 문제 없다.
적합한 프로젝트
- EC2: 복잡한 아키텍쳐
- Lightsail: 단순 소규모 프로젝트

이것저것 모음집

설날 맞이 텅 🍩

기타공유

스토리북 8 베타

SWC를 활용한 성능 개선
모바일 UI 개선
테스트 환경 개선
리액트 서버 컴포넌트 지원
리액트 의존성 삭제 및 레거시 버전의 패키니 매니저, 프레임워크들 지원 중단

Ref https://storybook.js.org/blog/storybook-8-beta/

React Conf 2024 티켓 추첨 등록

Ref https://forms.reform.app/bLaLeE/react-conf-2024-ticket-lottery/1aRQLK

nuqs

이름도 특이한… 어떻게 읽는 거람?

next.js에서 URL query string 파싱을 도와주는 라이브러리

Copy

'use client' // app router: only works in client components

import { useQueryState } from 'nuqs'

export default () => {
  const [name, setName] = useQueryState('name')
  return (
    <>
      <h1>Hello, {name || 'anonymous visitor'}!</h1>
      <input value={name || ''} onChange={e => setName(e.target.value)} />
      <button onClick={() => setName(null)}>Clear</button>
    </>
  )
}