stonesy

리렌더링과 useCallback: 언제 써야 할까?

useCallback이 필요 없이 보이는 곳에 쓰여 있는 것을 보고 개념을 정리하기 위해 이 글을 씁니다. 리렌더링리렌더링이란 state나 props가 바뀔 때 컴포넌트의 render 함수가 다시 실행되어 새로운 가상 DOM을 만드는 과정이다. 이때 React는 이전 가상 DOM과 새 가상 DOM을 비교해, 달라진 부분만 실제 DOM에 반영한다. 불필요하게 자주 발생하면 성능 저하로 이어지므로 memo, useMemo, useCallback 등으로 최적화하기도 한다. 리렌더링은 언제 발생하는가?1) 컴포넌트 자신의 state가 바뀔 때 - useState의 setter나 useReducer의 dispatch를 호출하면 발생other은 Parent 컴포넌트 안에 있는 state이기 때문에 setOther가..

1. Claude Code 세션하나의 대화가 시작해서 끝날 때까지의 전체 기록을 뜻한다. 입력한 프롬프트, Claude가 호출한 도구, 결과, 응답을 전부 포함하여 자동으로 ~/.claude/projects/에 저장된다.*세션 간 대화 내용 공유 X새로 세션을 열면 기본적으로 이전 세션 내용을 하나도 기억하지 못한다.명시적으로 이어가려면:claude -c → 직전 세션 이어가기claude -r → 특정 세션 골라서 이어가기/resume → 세션 안에서 다른 세션으로 전환 1-1. /clear: Context 초기화채팅이 길어질수록 모델이 참고해야 하는 대화 내용(Context)이 많아지고, 토큰 사용량도 증가. 특정 작업이 끝난 뒤 /clear를 사용하면 기존 Context를 초기화해서 이후 작업의 불필..

1. Claude, 어떻게 시작할까?1-1. Claude Desktop터미널 없이 GUI로 Chat, Cowork, Code 사용 가능. Claude Desktop의 Code 탭에서는 로컬 파일 접근이 가능한 작업 방식으로 내 로컬의 폴더를 직접 다룰 수 있음.chat: 파일 접근 없는 일반 대화cowork: 클라우드 VM에서 자율적으로 일하는 백그라운드 에이전트code: 로컬 파일에 직접 접근하는 인터랙티브 코딩 어시스턴트1-2. Claude Code Cli터미널 기반으로 파이프 원격 실행, 백그라운드 실행, 반복 자동화에 유리.2. Claude Code Cli2-1. 명령을 내리는 방식: 자연어 vs 슬래시 명령어자연어 명령어package.json에 axios 최신 버전 의존성 추가하고, 기존 fet..

상황: Remote(원격 저장소)의 변경사항을 가져오고 싶다fetch와 pull은 원격 저장소의 변경사항을 가져오고 싶을 때 사용하는 명령어입니다. git fetch는 변경사항이 원격 추적 브랜치에만 반영이되고, git pull은 git fetch와 merge를 한 번에 수행하는 명령어로 로컬 브랜치에도 반영이 됩니다. fetchfetch: Remote의 변경사항을 local로 다운로드하되, 현재 브랜치에는 반영하지 않는 명령어git fetch를 실행하면 원격의 최신 커밋이 origin/main과 같은 원격 추적 브랜치에만 업데이트된다.내 로컬 브랜치(HEAD)와 워킹 디렉토리는 변경되지 않는다.영향을 받는 것origin/main, origin/PKGA, origin/PKGB영향을 받지 않는 것main,..

상황: 커밋을 되돌리고 싶다git reset과 git revert는 커밋을 되돌리고 싶을 때 사용하는 명령어입니다. 보통 push된 커밋을 되돌리는 상황에서는 revert 명령어를 사용합니다. git reset은 커밋 자체를 삭제하여 히스토리가 삭제되기 때문에 공유 브랜치에서는 --force 강제 푸시가 필요해 위허하고, git revert는 커밋을 취소하는 새로운 커밋을 만드는 방식으로 기존 히스토리를 유지한 채 안적하게 push할 수 있기 때문입니다. resetreset: 과거 커밋으로 돌아가면서 이후 히스토리를 없애는 명령어-soft 커밋만 취소 (코드는 그대로 + staged 상태)-mixed 커밋 + staging 취소 (코드는 그대로 + unstaged 상태) ← 기본값-hard 다 날림 (코..

우리는 앞에서 ref를 선언형 모델에서 벗어나는 ‘통제된 예외(Escape Hatch)’라고 정리했습니다. React는 기본적으로 선언형이지만, 필요할 때는 ref를 통한 명령형 접근을 허용합니다.React Hook Form 역시 모든 입력을 state로 관리하지 않고, ref를 기반으로 DOM에 위임하는 방식을 선택했다는 점에서 비슷한 맥락이라고 볼 수 있습니다.https://stonesy927.tistory.com/376 React에서 ref는 언제 사용해야 하는가React: “선언형 모델에서 벗어난다”는 것은 무엇을 의미할까?React 공식 문서는 ref를 설명하면서이를 “선언형 모델에서 벗어나는 것(step outside the declarative model)”이라고 표현합니다.React let..

React: “선언형 모델에서 벗어난다”는 것은 무엇을 의미할까?React 공식 문서는 ref를 설명하면서이를 “선언형 모델에서 벗어나는 것(step outside the declarative model)”이라고 표현합니다.React lets you use refs to step outside the declarative model when you need to.— React 공식 문서,Escape Hatches – Manipulating the DOM with Refs(https://react.dev/learn/manipulating-the-dom-with-refs) 그렇다면 질문이 생깁니다.React는 왜 스스로를 선언형 모델이라고 말할까?그리고 왜 그 모델을 ‘벗어날’ 필요가 있을까? 명령형(Im..

1. 프론트엔드에서의 상태 구분: Client State vs Server State 클라이언트 상태- 브라우저(프론트엔드) 내부에서만 관리되는 데이터- 클라이언트 상태 관리를 도와주는 대표적인 도구/라이브러리: useState, Zustand, Context 등- 특징: 사용자 인터랙션에 즉각 반응 / 생명주기가 비교적 단순- 예시: 다크모드 여부, input 값, 탭 선택 상태 서버 상태- 서버에 저장되어 있고, 네트워크를 통해 가져오는 데이터- 서버 상태 관리를 도와주는 대표적인 도구/라이브러리: React-Query, SWR 등- 특징: 비동기 요청이 필요 / 캐싱, 재요청, 동기화 문제가 존재 - 예시: 게시글 목록, 상품 정보 등 클라이언트 상태서버 상태정의브라우저(프론트엔드) 내부에서만 관..

Why Anti-Patterns Matter1. 예측 불가능한 렌더링2. 불필요한 리렌더링3. 복잡한 디버깅4. React Compiler의 최적화 방해 1. Anti-Pattern: 불필요한 useEffect ❌ Before function Form() { const [firstName, setFirstName] = useState('Taylor'); const [lastName, setLastName] = useState('Swift'); // 🔴 피하세요: 중복된 state 및 불필요한 Effect const [fullName, setFullName] = useState(''); useEffect(() => { setFullName(firstName + ' ' + lastName);..

1. 개요여러 Vue 인스턴스 간 상태 공유 문제를 해결하기 위해 Vuex를 도입하였다. 3개의 Vue 인스턴스가 동시에 상태를 공유해야 하는 상황에서 mixins를 사용했을 때 상태 변화를 다른 인스턴스가 인지하지 못하는 한계가 있었다. 이를 해결하기 위해 중앙 집중식 상태 관리 방식인 Vuex를 적용하게 되었다.mixins와 Vuex(상태 관리)의 차이mixins는 컴포넌트 간 단순 코드 재사용에 사용하며, Vuex는 컴포넌트 간 상태 공유에 사용한다. 즉, mixins로 공유된 상태는 각 컴포넌트마다 개별적으로 존재하여 다른 컴포넌트에 반영되지 않지만, Vuex로 공유된 상태는 중앙 저장소(store)에 따라 모든 컴포넌트에 일관되게 반영된다. 2. 문법Vuex는 Vue.js의 상태 관리 패턴 + ..