Less

React로 state를 다루다 보면 배열을 직접 수정했는데 화면이 안 바뀌는 일을 겪는다. items[0]을 바꾸고 setItems에 넣었는데 아무 일도 일어나지 않는다. 해결책은 새 배열을 만들어 넘기는 것이라고 배우지만, 왜 그래야 하는지까지 짚고 가는 경우는 드물다. 이 동작은 React가 state 변경을 어떻게 감지하는지, 그리고 JavaScript가 배열과 객체를 메모리에 어떻게 저장하는지를 알면 전부 설명이된다. spread를 쓰는 이유도, 불변성을 지키라는 말도, batching도 여기서 갈라져 나온다. state는 컴포넌트가 렌더링 사이에 기억하는 값이다. 토글이 켜졌는지 꺼졌는지, 모달이 열렸는지, 어떤 탭이 선택되었는지 같은 UI 상태가 대표적이고, 사용자 입력이나 서버에서 받아온 ..

* 여기서 말하는 렌더링은 리액트 렌더링(React Rendering)이다. 리액트 렌더링과 구분하기 위해서, 그리고 공식문서와 용어를 통일하기 위해서 브라우저 렌더링의 경우 paint 단계라고 표현한다. React 컴포넌트가 하는 일은 크게 두 가지이다. 우선 하나는 렌더링이다. props와 state를 받아 화면이 어떻게 생겨야 하는지 계산하고 JSX를 돌려준다. 또 다른 하나는 사이드 이펙트이다. API를 호출하고, 소켓을 연결하고, DOM을 직접 만지고, 타이머를 거는 것처럼 React 바깥(외부) 세계와 주고받는 일이다. 이 둘중에서 useEffect는 사이드 이펙트를 맡고있다. useEffect는 렌더링을 순수하게 지키려는 React의 사정에서 나왔는데, 이 사정만 잘 이해하면 cleanup이..

eslint-plugin-react-hooks에 react-hooks/set-state-in-effect 라는 규칙이 있다. v6.1에서 recommended-latest 프리셋으로 옵트인 가능해졌고, v7.0부터는 recommended에 기본 포함되었다(현재 최신은 v7.1.1). 이름부터 직관적이라 useEffect 안에서 setState 하지 말라는 규칙으로 읽힌다. 그런데 GitHub 이슈를 보다가 이 규칙이 멀쩡해 보이는 코드에도 경고를 낸다는 걸 알게 되었다.const [didMount, setDidMount] = useState(false);useEffect(() => { setDidMount(true);}, []); 경고 내용은 다음과 같다. Calling setState synchron..

작성 기준일: 2026년 4월 24일이 글은 작성일 기준 공개된 Anthropic 공식 문서와 Claude Code 관련 자료를 바탕으로 한다. Claude Code와 AI 개발 도구 생태계는 빠르게 변하고 있으므로, 지원 범위와 설정 방식은 이후 달라질 수 있다. 0편. Claude Code를 이해하기전에: AI는 왜 작업 시스템이 되고 있는가1편. Claude Code 하네스 설계: 실행 환경이 결과를 바꾼다0편에서는 AI 도구가 실제 작업 환경과 연결되는 흐름을 정리했다. 이번 글에서는 Claude Code 안으로 들어간다. Claude Code를 쓰다 보면 처음에는 프롬프트가 가장 중요해 보인다. 같은 작업이라도 요청을 어떻게 쓰느냐에 따라 결과가 달라지기 때문이다. 그러나 실제 개발 워크플로우 ..

작성 기준일: 2026년 4월 22일 이 글은 작성일 기준 공개된 Anthropic 공식 문서와 Claude Code 관련 자료를 바탕으로 한다. Claude Code와 AI 개발 도구 생태계는 빠르게 변하고 있으므로, 지원 범위와 설정 방식은 이후 달라질 수 있다. 0편. Claude Code를 이해하기 전에: AI는 왜 작업 시스템이 되고 있는가1편. Claude Code 하네스 설계: 실행 환경이 결과를 바꾼다서문Claude Code를 처음 보면 터미널에서 쓰는 AI 코딩 도구로 보인다. 그래서 초기 관심은 프롬프트와 코드 생성 품질에 쏠린다. 어떻게 지시해야 더 나은 코드가 나오는지, 어떤 모델이 더 정확한지, 테스트까지 안정적으로 돌리려면 뭐가 필요한지. 다 필요한 질문이지만, 여기에만 머물면 ..

액션, 계산, 데이터: 코드를 세 가지로 보기 시작하면 달라진다. 함수형 프로그래밍은 생각보다 단순하게 시작한다. 일단 모든 코드를 세 가지로 분류하는 것이다. 그 이후 테스트가 쉬운, 순수성이 보장되는 함수를 최대한 많이 확보하는 전략이라고 이해하면 된다. 데이터는 그냥 값이다. 숫자, 문자열, 배열, 객체같이 아무 동작도 하지 않고, 사실을 담고 있을 뿐이다.const rooms = [ { id: "ROOM-A", name: "루비룸", capacity: 4, pricePerHour: 1000 }, { id: "ROOM-B", name: "자바룸", capacity: 8, pricePerHour: 2000 },]; 계산은 같은 입력에 항상 같은 출력이 나오는 함수이다. 호출 시점이 언제든, 몇 번..