개발자의 일은 오랫동안 “코드를 잘 쓰는 일”로 이해되어 왔다.물론 틀린 말은 아니다. 개발자는 결국 코드를 통해 문제를 해결한다. 하지만 AI 코딩 도구가 일상으로 들어온 지금, 이 정의는 조금 부족해졌다. 이제 코드는 더 이상 개발자만이 처음부터 끝까지 손으로 작성하는 산물이 아니다. ChatGPT, GitHub Copilot, Cursor, Claude Code 같은 도구는 함수 초안, 테스트 코드, 리팩토링 방향, 문서, 에러 원인 분석까지 빠르게 만들어낸다.Stack Overflow 2025 Developer Survey에 따르면 응답자의 84%가 개발 과정에서 AI 도구를 사용하거나 사용할 계획이 있다고 답했고, 전문 개발자의 51%는 매일 AI 도구를 사용한다고 답했다. 하지만 동시에 AI ..

상태 관리는 라이브러리 선택이 아니라 소유권, 렌더링 위치, 생명주기 설계다React 프로젝트를 시작하면 상태 관리는 대체로 단순하다. const [isOpen, setIsOpen] = useState(false);const [keyword, setKeyword] = useState("");const [selectedId, setSelectedId] = useState(null); 하지만 프로젝트가 커지면 질문이 달라진다.이 상태를 useState에 둘까?Context에 둘까?Zustand에 둘까?TanStack Query에 둘까?URL에 둘까?Server Component에서 가져올까?Server Action으로 바꿀까?localStorage에 저장할까? 상태 관리가 어려워지는 이유는 상태가 많아져서만..

상태 관리는 “어디에 저장할까”가 아니라 “누가 소유하는가”의 문제다프론트엔드 애플리케이션이 작을 때 상태 관리는 단순해 보인다. const [user, setUser] = useState(null);const [isModalOpen, setIsModalOpen] = useState(false);const [keyword, setKeyword] = useState(""); 하지만 기능이 늘어나면 상태는 빠르게 복잡해진다.사용자 정보, 권한, 상품 목록, 검색 필터, 페이지 번호, 모달 열림 여부, 폼 입력값, 선택된 행, 정렬 조건, 알림 배지, 로딩 상태, 에러 상태, 캐시, WebSocket 메시지, optimistic update까지 모두 “상태”라는 이름으로 섞이기 시작한다.이때 많은 팀이 다음 ..

Promise와 async/await 깊이 이해하기 4/4들어가며Promise 코드를 작성하는 것은 어렵지 않다.어려운 것은 작업의 생명주기를 설계하는 일이다.사용자가 페이지를 떠나면 요청을 중단해야 하는가?timeout이 발생하면 실제 네트워크 요청도 종료되는가?부모 작업이 실패하면 자식 작업은 어떻게 되는가?어떤 오류를 재시도해도 안전한가?영원히 pending인 Promise는 무엇을 메모리에 유지하는가?하나가 아닌 여러 비동기 값은 무엇으로 표현해야 하는가? Promise는 성공과 실패를 표현하지만 다음 요소를 직접 제공하지 않는다.취소timeout자원 소유권재시도 정책멱등성backpressure구조적 동시성 이 요소들은 애플리케이션 아키텍처가 별도로 설계해야 한다.1. Promise에는 취소가 없..

Promise와 async/await 깊이 이해하기 3/4들어가며async/await 코드는 읽기 쉽다.그러나 너무 자연스럽게 읽히기 때문에 오히려 불필요한 순차 실행을 만들기 쉽다. const user = await fetchUser();const settings = await fetchSettings(); 두 작업이 서로 독립적이라면 이 코드는 존재하지 않는 의존 관계를 만들어낸다.fetchUser 완료 ↓fetchSettings 시작 Promise 동시성 설계의 핵심은 Promise.all()을 외우는 것이 아니다.다음 질문에 답하는 것이다.어떤 작업이 다른 작업의 결과를 필요로 하는가?어떤 작업은 동시에 시작할 수 있는가?실패했을 때 나머지 작업은 어떻게 해야 하는가?동시에 몇 개까지..

Promise와 async/await 깊이 이해하기 2/4들어가며async/await은 Promise 코드를 동기 코드처럼 읽을 수 있게 만든다. async function loadUser() { const response = await fetch("/api/user"); const user = await response.json(); return user;} 하지만 코드가 동기적으로 보이는 것과 실제로 동기적으로 실행되는 것은 다르다.await은 스레드를 멈추지 않는다.Promise를 제거하지도 않는다.실제로는 다음과 같은 과정이 일어난다.async 함수 실행→ await 지점에서 실행 컨텍스트 중단→ Promise 반응 등록→ 호출자에게 제어권 반환→ Promise 완료→ Job을 통해 실행 컨..

Promise와 async/await 깊이 이해하기 1/4들어가며Promise는 흔히 “나중에 값을 받기 위한 객체”라고 설명된다.이 설명은 입문 단계에서는 유용하지만, 다음 질문에는 충분히 답하지 못한다.resolve()를 호출했는데도 왜 Promise가 여전히 pending일 수 있는가?then()은 왜 항상 새로운 Promise를 반환하는가?Promise 안에 Promise를 반환해도 왜 중첩되지 않는가?Promise와 thenable은 무엇이 다른가?이미 만들어진 Promise를 다시 기다리면 작업도 다시 실행되는가?이 질문들에 답하려면 Promise를 단순한 비동기 문법이 아니라 다음 세 가지 관점에서 바라봐야 한다.Promise = 단일 할당 상태 기계 + 미래 결과를 관찰하는 프..