몇 달마다 'AI가 개발자를 구식으로 만들었다'는 새로운 주장이 쏟아져 나오고, 몇 달마다 특히 React 개발자들이 가장 대체하기 쉬운 대상으로 지목된다. '그냥 JSX와 hooks일 뿐인데, 모델은 수백만 개의 예시를 봤을 것이다.' 나는 오랫동안 React로 빌드해 왔고, AI 도구를 사용하는 것도 그만큼 오래되었다. 여기는 아무도 이야기하지 않는 실제 격차이며, 예상하는 것과는 다르다.

모두가 걱정하는 부분에서 AI는 정말 훌륭하다

어떤 괜찮은 모델에게 useDebounce hook, 제어된 form, 메모이제이션(memoized) 리스트를 작성해 달라고 요청하면, 그것은 올바르게 보이고, 컴파일되며, 아마도 정상적인 상황(happy path)에서는 작동하는 무언가를 생성할 것이다. 그 두려움의 부분은 정당하다. 기본적인 코드 구조에서 유능한 코드로 가는 격차는 사실상 좁혀졌다.

여전히 부족한 부분: 당신의 버전이 왜 틀렸는지 알려주는 것

여기에는 데모에 나타나지 않는 것이 있다. AI가 생성한 코드는 실제로 정확하든 아니든 자신감 있어 보인다. 그것은 미묘하게 잘못된 의존성 배열을 가진 useEffect를, 빠르게 언마운트될 때 깨지는 debounce hook을, 실제로는 안정적이지 않은 메모이제이션 콜백을 기꺼이 제공할 것이며, 그 설명이 맞든 완전히 지어낸 이야기든 똑같이 자신감 있는 어조로 코드를 설명할 것이다.

실패 모드는 'AI가 React를 작성할 수 없다'가 아니다. 그것은 'AI가 당신의 React가 언제 깨졌는지 신뢰성 있게 알려줄 수 없고, 그저 그럴듯해 보이는 코드와 실제 조건에서 실제로 정확한 코드 사이의 격차에 직면하도록 강요할 수 없다'이다.

이것이 사람들이 생각하는 것보다 왜 React에 더 중요한지

React 버그는 구문 오류(syntax errors)인 경우가 거의 없다. 그것들은 타이밍 버그, 오래된 클로저(stale closures), 조용한 리렌더링을 유발하는 불안정한 참조(unstable references), 예상했던 때 작동하지 않는 정리 함수(cleanup functions)이다. 이 중 어느 것도 코드를 읽는 것만으로는 나타나지 않는다. 그것은 코드가 실제 상호작용(빠른 클릭, 빠른 타이핑, 효과 도중에 컴포넌트 언마운트 등)과 실제로 실행될 때 나타난다.

AI 모델이 코드를 읽을 때는 이러한 모든 것을 놓칠 수 있으며, 이는 풀 리퀘스트(pull request)를 훑어보는 사람의 방식과 같습니다. 실제로 나타나는 것은 코드의 모양이 아니라, 실제 조건에 대입하여 코드를 실행하고 실제 동작을 확인하는 것뿐입니다.

개발자에게 실제로 변화하는 점은 무엇인가요

'AI가 당신을 대체할 것이다'라는 이야기가 아닙니다. 진짜 변화는 다음과 같습니다: 보일러플레이트(boilerplate)를 올바르게 _작성_하는 가치는 빠르게 떨어지고 있으며, 반면 코드가 실제로 정확한지 _알고 있는 것_의 가치—즉 엣지 케이스(edge case)에 대해 추론하고, 동작을 검증하며, AI가 생성한 자신감 넘치는 설명이 간과한 부분을 포착할 수 있는 능력—는 높아지고 있습니다. 만약 당신의 모든 기술이 기억해서 useEffect를 타이핑하는 것이었다면, 그것은 지금으로서는 진정으로 가치가 떨어졌습니다. 만약 당신의 기술이 디바운스(debounce) 훅이 타이머 도중에 언마운트(unmount)되는 상황에서도 살아남아야 한다는 것을 알고 있고, 실제로 그렇게 되는지 검증할 수 있다면, 이는 그 어느 때보다 가치 있습니다. 왜냐하면 그것은 AI 출력물이 신뢰성 있게 스스로 확인하지 못하는 바로 그 부분이기 때문입니다.

실질적으로는 다르게 연습한다는 의미입니다

AI가 생성한 React 코드를 읽고 고개를 끄덕이는 것은, 당신 자신이 같은 버그를 잡을 수 있는지에 대해서는 아무것도 가르쳐주지 못합니다. 실제로 중요한 본능—오래된 클로저(stale closure)를 발견하거나, 의존성 배열(dependency array)이 잘못되었는지 알거나, 불안정한 참조(unstable reference)를 인식하는 것—은 코드를 직접 작성하고, 그것이 실제로 정확한지 여부에 대해 실시간으로 즉각적인 피드백을 받을 때만 쌓입니다. 단순히 올바르게 보이는지에 대한 것이 아닙니다.

이것이 제가 **ReactGrind**를 만든 이유 중 하나입니다. React 전용 코딩 챌린지로, 작성된 정답지 대신 실제 자동화 테스트 스위트(automated test suite)로 검사합니다. 핵심은 바로 그 간극을 메우는 것입니다: 당신이 컴포넌트를 작성하면, 실제 테스트가 그것을 사용자가 실제로 상호작용하는 방식대로 마운트하고 상호작용하며, 단순히 정답처럼 보이는지가 아니라 제대로 작동하는지 즉시 알게 됩니다.

AI는 하루 종일 그럴듯한 React 코드를 작성할 수 있습니다. 하지만 실제 테스트를 통해 연습하는 것이 여전히 차이를 아는 본능을 쌓는 방법입니다.

여기서 다른 분들은 어떤지 궁금하네요. AI가 초안 코드의 더 큰 부분을 작성하게 된 후, 일상적인 디버깅 방식에 변화가 생겼나요? 요즘 실제로 어떤 것이 버그를 잡아내고 있나요?