https://kofearticle.substack.com/p/korean-fe-article-claudemd-boris?utm_source=post-email-title&publication_id=695413&post_id=191739238&utm_campaign=email-post-title&isFreemail=true&r=e5cr6&triedRedirect=true&utm_medium=email
useEffect cleanup의 함정 — 내가 떠난 페이지가 아니라 도착한 페이지의 URL을 건드리고 있었다들어가며React Router로 페이지를 이동했는데, 분명히 ?tab=settings&version=1을 붙여서 navigate했는데 도착하니까 search params가 통째로 사라져있다면?이 글은 useEffect cleanup 함수가 이미 떠난 페이지가 아닌, 도착한 페이지의 URL을 건드린 실제 버그를 추적한 기록입니다.증상상세(Detail) 페이지에서 버튼을 클릭하면 대시보드(Dashboard) 페이지로 이동합니다.// DetailActionButton.tsxnavigate({ pathname: `/projects/${projectId}/dashboard`, search: `?tab=..
📑 SWR(Stale-While-Revalidate) 학습 가이드1. SWR이란 무엇인가? 🤔SWR은 **"일단 낡은(Stale) 데이터라도 보여주면서(While), 그동안 백그라운드에서 최신 데이터를 다시 검증(Revalidate)한다"**는 철학을 가진 캐시 전략입니다. 사용자가 로딩 화면을 보며 기다리는 시간을 최소화하여 서비스의 '반응성'을 극대화합니다.2. 동작 원리 ⚙️SWR은 다음과 같은 3단계 과정을 거칩니다.단계상태동작사용자 경험1단계Stale캐시(저장소)에 있는 이전 데이터를 즉시 반환화면이 즉시 뜸 (로딩 없음)2단계Revalidate백그라운드에서 서버에 새 데이터가 있는지 요청사용자 모르게 업데이트 준비3단계Update새 데이터가 오면 캐시를 갱신하고 화면을 업데이트정보가 최신으..
🍎 Rosetta 2를 사용하여 Node.js v14 설치하는 방법이전 응답에서 언급된 Rosetta 2는 Apple Silicon (M1/M2/M3) Mac에서 Intel (x86_64)용으로 컴파일된 소프트웨어를 실행할 수 있도록 도와주는 에뮬레이션 레이어입니다.Node.js v14 설치가 컴파일 에러로 실패하는 경우, Rosetta 2 환경에서 Intel용으로 빌드된 바이너리를 다운로드하거나 컴파일을 시도하게 하여 문제를 우회할 수 있습니다.아래는 터미널에서 Rosetta 2 환경을 활성화하고 nvm으로 Node.js v14를 설치하는 단계별 절차입니다.1. 셸을 Intel (x86_64) 아키텍처로 실행현재 사용 중인 터미널 세션을 Intel 아키텍처로 일시적으로 전환합니다. 대부분의 경우 zs..
1. 타입 서술어란?타입 서술어는 TypeScript에서 특정 스코프 내의 변수 타입을 좁히는(narrowing) 데 사용되는 특별한 반환 타입입니다.함수가 true를 반환할 때, TypeScript는 인자의 타입을 특정 타입으로 취급합니다.2. 기본 구조function 함수이름(매개변수: 타입): 매개변수 is 특정타입 { return 불리언_표현식;}3. 간단한 예시: 문자열 체크function isString(value: unknown): value is string { return typeof value === 'string';}// 사용 예:function processValue(value: unknown) { if (isString(value)) { // 여기서 ..
import { useState, useEffect } from 'react';const checkImage = (url: string): Promise => { return new Promise(resolve => { const image = new Image(); image.onload = () => resolve(true); image.onerror = () => resolve(false); image.src = `${url}&r=${Math.random()}`; // 캐시 방지 });};export const useImagePolling = ( url: string, isGenerationComplete: boolean, interval: number = 5000,)..
https://ishadeed.com/article/css-grid-area/?utm_source=CSS-Weekly&utm_medium=newsletter&utm_campaign=issue-589-august-13-2024&_bhlid=f2bac55294afc9b1d9188d8f7441cad2123c0c59
Homebrew는 macOS(그리고 Linux)를 위한 패키지 관리 시스템입니다Homebrew 설치 방법은 간단하며, 공식 사이트 랜딩 페이지에 바로 안내해주고 있습니다.$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"위 명령어를 터미널에서 입력하면 설치가 진행되고 설치가 완료됩니다.설치가 완료되었다면 마지막으로 설정 파일에 homebrew를 PATH에 추가하고, 현재 쉘에서 homebrew를 사용할 수 있도록 설정 내용을 추가해주면 끝입니다. 2가지 명령어를 실행하면 되는데1. PATH에 추가하는 내용$ (echo; echo 'eval "$(/opt/homebrew/bin/bre..
