본문 바로가기

분류 전체보기21

2024년 독서 결산 올해는 마흔 권 좀 넘게 읽었다. 도중에 내팽개친 책도 여럿 있었지만, 대부분은 인내심을 갖고 끝까지 완독했다. 아래는 그 목록. 카테고리는 마음 가는대로 대충 분류했다. 내년에는 또 어떤 책을 읽게 될지. 문학여수의 사랑 - 한강소년이 온다 - 한강이중 하나는 거짓말 - 김애란이방인 - 알베르 카뮈스토너 - 존 윌리엄스위대한 유산 - 찰스 디킨스수레바퀴 아래서 - 헤르만 헤세개미 - 베르나르 베르베르시간과 장의사 - 이묵돌채식주의자 - 한강홍학의 자리 - 정해연이효석문학상 수상작0 영 ZERO - 김사과천 개의 파랑 - 천선란 철학철학의 문제들 - 버트런드 러셀시지프 신화 - 알베르 카뮈서사의 위기 - 한병철러브 온톨로지 - 조중걸돈 말고 무엇을 갖고 있는가 - 정지우사회학신비롭지 않은 여자들 - 임소.. 2024. 12. 30.
NextJS에서 request의 origin 가져오기 NextJS를 사용할 때, 코드가 실행되는 환경의 origin을 가져오려면 어떻게 해야 할까요? x-forwarded-host와 x-forwarded-proto 헤더를 사용하면 됩니다.예를 들어서 다음의 세 가지 환경 및 각각에 해당하는 origin이 있다고 해봅시다.- dev: http://localhost:3000- test: https://test.example.com- prod: https://example.com어떻게 코드 내에서 환경 별로 적절한 origin을 참조할 수 있을까요? 곧바로 떠오르는 방법은 NEXT_PUBLIC_ORIGIN과 같은 환경변수를 설정하고, process.env를 통해 그 값을 읽어오는 것입니다. const origin = process.env.NEXT_PUBLIC_O.. 2024. 12. 20.
Lazy Initializer로 React.useState 성능 개선하기 useState를 초기화하는 방식을 아주 약간만 바꿔도 React 앱의 성능을 개선할 수 있다는 점, 알고 계셨나요?만약 useState의 초기화가 오래 걸리는 작업 expensiveOperation을 통해 얻어진다면 어떻게 될까요? 예를 들어 localStorage를 읽어야 하거나, 복잡한 계산이 필요하거나, 커다란 JSON을 로딩해야 한다면? 아래처럼 선언해도 괜찮을까요?const [state, setState] = useState(expensiveOperation(args));만약 expensiveOperation이 충분히 무겁다면, 성능에 문제가 발생할 겁니다. 컴포넌트가 리렌더링 될 때마다 매번 expensiveOperation이 실행되기 때문이죠.해결책은 다음과 같이 lazy initializ.. 2024. 12. 18.
React 컴포넌트에서 Promise를 리턴하기 React 19 버전부터는 React.Node를 리턴하는 Promise 역시 React.Node로 간주합니다. 이미지와 같이 응용하면, Promise를 기다리는 동안 Fallback을 보여주기 위해 추가적으로 컴포넌트를 만들 필요가 없습니다. 그냥 Promise를 직접 Suspense로 감싸면 됩니다. 물론 Promise는 캐싱되어야 합니다 (리렌더링 간에 참조 동일성을 유지해야 합니다). // 컴포넌트가 Promise를 직접 리턴할 수 있습니다.function PromiseComponent() { return new Promise((resolve) => setTimeout(() => resolve ('Hi!'), 1000))}// 다음과 같이 곧바로 Suspense로 감싸는 것도 가능합니다.functi.. 2024. 12. 16.