AI agent란 무엇인가? : AI를 사용해 사용자를 대신하여 목표를 추구하고 태스크를 완료하는 소프트웨어 시스템 단순한 명령어 실행을 넘어 상황 파악, 계획 수립, 정보 수집, 판단 및 수행까지 실행한다. ex) 로그인 기능 만들어줘 ⇒ 폴더 구조 파악, 패키지 상태 파악 - 필요한 작업 쪼개기 - 코드 작성 - 테스트 - 정리 AI Agent를 잘 쓰기 위한 방법 1. AGENTS.md 와 CLAUDE.md AI agent는 프로젝트 전반에 대한 지식이 부족하다. 이를 파악하기 위해 많은 토큰 + 시간을 소모하여 프로젝트 내부 세팅과 코드를 읽거나, AI가 임의로 판단해서 실행하기도 한다. 임의로 판단하는 경우 원하는 결과물과 거리가 있기 때문에, 두 상황 모두 토큰만 낭비하고 원하는 결과값을 받지 못한다. 이를 위해 AI agent에게 미리 프로젝트에 대한 컨텍스트를 알려기 위해 나온 것이 AGENTS.md와 CLAUDE.md 같은 컨텍스트 파일이다. AI agents가 …

과거 리액트 생태계에서는 애플리케이션 상태 관리를 위해 Redux에 크게 의존했다. 이후 Context API와 useState, useReducer 같은 훅이 등장하면서, 리액트 자체만으로도 상태를 관리할 수 있는 방법이 늘어났고, 그 결과 다양한 상태 관리 라이브러리가 선택지로 자리 잡게 됐다. 가장 기본적인 방법: useState / useReducer useState useState 훅의 등장으로 여러 컴포넌트에 동일한 인터페이스의 상태를 생성하고 관리할 수 있게 됐다. 하지만 이 훅을 사용하는 컴포넌트마다 상태는 각각 초기화된다. useReducer useReducer는 상태 변경 로직을 action 단위로 분리해 관리할 수 있는 훅이다. 복잡한 상태 전이를 다루기엔 유용하지만, useState와 마찬가지로 컴포넌트마다 독립적인 상태를 가진다는 한계가 있다. 이처럼 컴포넌트 내부에서만 유효한 상태를 지역 상태(local state)라고 한다. 두 컴포넌트가 동일한 coun…

ko.react에 번역 기여하기 얼마 전 React 공식 문서에 첫 기여를 했다! React 컴파일러 관련 문서에 새로 추가된 Note callout 3개(useCallback, useMemo, memo)를 번역했고, PR이 머지됐다. 큰 기능 추가도 아니고, 분량도 짧은 번역 작업이었다. 그래도 개인적으로는 꽤 의미 있는 경험이어서, 가볍게 기록을 남겨보고자 한다. 계기 처음에는 useCallback 문서를 읽다가 React 컴파일러 관련 Note를 발견했다. React 컴파일러가 등장하면서 “수동 메모이제이션의 필요가 줄어든다”는 메시지를 강조하는 문장이었는데, 비교적 최근 추가된 부분이다보니 아직 번역이 안되어있었다. 간단한 두 문장이었지만 직접 번역해서 기여해보고 싶었고, 자연스럽게 비슷한 최적화 맥락을 가진 useMemo와 memo 페이지도 떠올랐다. 같은 개념을 설명하는 문장들이므로 일관성있게 번역하면 좋겠다는 생각이 들었고, useCallback뿐만 아니라 useMe…

1 싱글 페이지 애플리케이션(SPA) : 렌더링과 라우팅에 필요한 대부분의 기능을 브라우저의 자바스크립트에 의존하는 방식 최초 첫 페이지에서 데이터를 모두 불러옴 이후에는 페이지 전환을 위한 모든 작업이 자바스크립트, 브라우저로 이루어짐 SPA 사이트에 최초 접속시 받아온 html 소스 코드. body 태그 내부에 내용이 없다. 리액트에선 이후 저 div 태그 내부에 JS를 통해 렌더링한다. 전통 방식과 싱글 페이지 애플리케이션의 작동 비교 전통 방식 페이지 전환마다 서버에 새로운 페이지를 요청 후 html 페이지를 다운로드해 파싱 처음부터 페이지를 새로 그리기 때문에 부자연스럽다. 싱글 페이지 애플리케이션 최초에 모든 리소스 다운로드 이후 추가 리소스 다운로드 필요 없음 이후에는 자바스크립트로 페이지 전환 전환이 필요한 일부 영역만 그리면 되므로 UI가 매끄러움 새로운 패러다임의 웹서비스를 향한 요구 일반적인 SPA 방식은 최초에 자바스크립트 파일을 모두 다운로드 한 이후 화면이…

면접 단골 질문이자 웹에서 모든 행위의 시작점. “브라우저의 렌더링 동작 과정을 설명해주세요.” 엄밀히 말하면 URL에 링크를 입력했을 때 모든 행위가 시작되긴 하지만,, (이것도 나중에 글을 쓰긴 할 것이다.) 정상적으로 서버로부터 HTML을 받았다고 가정하고 ! 브라우저의 렌더링 과정을 알아보자 1. DOM 트리 생성 서버로부터 HTML 파일을 받으면, 브라우저는 해당 HTML을 파싱하여 DOM 트리를 만든다. 💡 DOM이 뭐임? 😶 Document Object Model의 줄임말로, HTML 문서의 구조를 메모리에 트리 형태로 표현한 것! CSS나 JS를 적용할 때 브라우저가 이 트리의 각 노드에 접근한다. 2. CSSOM 트리 생성 DOM 트리를 열심히 만들다가 style 태그나 link 태그를 만나면, 브라우저는 서버에 CSS 파일을 요청한다. CSS파일을 받으면 해당 파일을 DOM처럼 트리 형태로 파싱하는데, 이를 CSSOM 트리라고 한다! (씨에쓰에쓰오엠, 씨에쓰에쓰…