개요 AI 시대가 오면 개발자는 무엇을 더 갈고닦아야 할까. 예전 같으면 새로운 프레임워크, 언어, 아키텍처, 성능 최적화 같은 것들을 먼저 떠올렸을 것이다. 물론 지금도 중요하다. 개발 기본기가 필요 없어진다는 말은 절대 아니다. 그런데 AI를 실제 개발에 깊게 써볼수록, 앞으로 더 중요해질 능력은 오히려 소프트스킬에 가깝다는 생각이 든다. 표현력, 기획력, 커뮤니케이션 능력, 맥락을 정리하는 능력, 사람과 합의하는 능력. 이런 것들은 예전부터 중요했다. 하지만 개발 업계에서는 종종 부가 능력처럼 취급됐다. 개발을 잘하면 말이 조금 부족해도 넘어갔다. 커뮤니케이션이 거칠어도 결과물이 좋으면 어느 정도 용인됐다. 하지만 이제는 그게 점점 어려워질 것 같다. 왜냐하면 AI가 구현 비용을 낮추고 있기 때..

개요 AI가 개발을 정말 잘해주는 시대가 됐다. 요즘 AI로 개발을 해보면, 예전 같으면 꽤 오래 걸렸을 작업들이 금방 끝난다. 신규 기능 개발이나 기존 기능 수정 정도는 웬만하면 큰 문제 없이 해준다. 사이드프로젝트 규모에서는 더 체감이 크다. 내가 하고 있는 사이드프로젝트들은 규모가 커봐야 4만 줄에서 7만 줄 정도다. 이 정도 규모에서는 AI가 컨텍스트도 꽤 잘 따라오고, 구조도 생각보다 잘 잡아준다. 대규모 마이그레이션이나 검증이 빡세게 들어가는 작업이 아니라면, 유료 플랜 하나로 회사 업무와 사이드프로젝트를 병행하는 것도 가능하다. 그러면 이제 개발 지식은 별로 필요 없어졌을까? 나는 아직은 아니라고 생각한다. 현시점에서는 개발 지식이 여전히 필요하다. 그리고 AI가 더 똑똑해져도 한동안은 ..

개요 요즘 회사에 다니면서 사이드프로젝트를 꽤 많이 굴리고 있다. 1D1S, Rutsubo, Laiteu는 이미 출시해서 운영 중이고, HIARC-Platform은 예전에 했던 프로젝트를 전면 리팩터링하고 있다. 여기에 아직 출시하지 않은 앱도 2개 정도 있다. 이렇게 적어놓고 보니 나도 좀 이상하긴 하다. "아니 회사도 다니면서 이걸 왜 이렇게까지 하지?" ...라고 물으면, 사실 거창한 이유는 없다. 그냥 프로덕트 만드는 게 재밌다. 현재 신분상 겸업을 할 수 없어서 수익을 내고 있는 것도 아니고, 당장 큰돈이 되는 것도 아니다. 그런데도 계속 만들게 된다. 자기만족도 있고, 언젠가는 수익을 만들 수 있지 않을까 하는 기대도 있다. 하지만 제일 큰 이유는 내 머릿속에 있던 것이 실제로 굴러가는 ..

4.1 Deduplicate Global Event Listeners핵심: 전역 이벤트 리스너를 훅 인스턴스 간 공유한다.왜 중요한가: 리스너 폭증으로 인한 메모리/CPU 낭비를 막는다.코드리뷰 신호: 같은 훅 사용 수만큼 window 리스너가 늘어난다. 같은 훅 사용 수만큼 window 리스너가 늘어난다 코드는 보통 구현 편의 때문에 생기지만, 트래픽이 늘면 병목으로 확대된다. 이 항목의 핵심은 문법 변경이 아니라 실행/렌더 흐름을 정리해 전역 이벤트 리스너를 훅 인스턴스 간 공유한다를 기본값으로 만드는 데 있다. 변경 뒤에는 요청 중복 여부, stale 데이터 노출 시간, 재시도/취소 동작와 회귀 테스트를 같이 보면서 리스너 폭증으로 인한 메모리/CPU 낭비를 막는다 결과가 재현되는지 점검한다. 예..

3.1 Authenticate Server Actions Like API Routes핵심: Server Action 내부에서 인증/인가를 반드시 검증한다.왜 중요한가: 액션은 엔드포인트처럼 호출 가능하므로 보안 경계가 필요하다.코드리뷰 신호: action 함수 내부에 auth/authorization 검증이 없다. action 함수 내부에 auth/authorization 검증이 없다 코드는 보통 구현 편의 때문에 생기지만, 트래픽이 늘면 병목으로 확대된다. 이 항목의 핵심은 문법 변경이 아니라 실행/렌더 흐름을 정리해 Server Action 내부에서 인증/인가를 반드시 검증한다를 기본값으로 만드는 데 있다. 변경 뒤에는 서버 응답 시간, DB/외부 API 호출 수, 캐시 적중률와 회귀 테스트를 같이..

2.1 Avoid Barrel File Imports핵심: 대형 라이브러리는 배럴 import 대신 직접 import를 사용한다.왜 중요한가: 불필요한 모듈 해석/번들 포함을 줄인다.코드리뷰 신호: 아이콘/컴포넌트 라이브러리를 루트 엔트리에서 구조분해 import한다. 실무에서 아이콘/컴포넌트 라이브러리를 루트 엔트리에서 구조분해 import한다 부분만 단발성으로 고치면 같은 문제가 다시 나오기 쉽다. 작은 단위(한 페이지, 한 훅, 한 API)부터 대형 라이브러리는 배럴 import 대신 직접 import를 사용한다 패턴을 적용하고, 경계 케이스를 함께 정리해야 회귀를 줄일 수 있다. 이후 번들 분석 결과(엔트리 청크, 라우트별 청크)와 초기 JS 파싱 시간을 배포 전후로 비교해 불필요한 모듈 해석/..

Vercel Labs에서 skill로 공유한 React Best Practices를 개인 공부용으로 사람이 읽기 좋게 정리하고 설명을 다시 작성한 글입니다. 나중에 슥슥 읽으려고 AI와 함께 작성한 글이니까 이상한 부분 있으면 알려주세요. 1.1 Defer Await Until Needed핵심: await는 실제로 필요한 분기 안으로 옮긴다.왜 중요한가: 불필요한 대기를 제거해 응답 시간을 즉시 줄일 수 있다.코드리뷰 신호: `early return`이 가능한데도 그 전에 실행되는 오래 걸리는 비동기 호출이 있다. `early return`이 가능한데도 그 전에 실행되는 오래 걸리는 비동기 호출이 있다 징후는 기능을 빠르게 추가할 때 쉽게 누적된다. 먼저 의존성이 없는 작업은 먼저 시작하고, 실제 소비 ..

개요 프론트엔드 개발자라면 누구나 한 번쯤 이런 순간이 온다. 디자인 시스템이 없어서 매번 버튼 스타일을 복사-붙여넣기 하는 게 답답하거나, 레거시 코드가 섞인 컴포넌트 파일이 500줄을 넘어가는 걸 볼 때 참을 수 없는 충동을 느낀다. "이거 내가 싹 정리해서 공통 컴포넌트로 만들면 대박이겠는데?""지금 쓰고 있는 라이브러리 너무 구려. 요즘 뜨는 걸로 바꾸면 개발 속도 빨라질 텐데." 시작은 언제나 순수한 열정이다. 불편함을 해소하고, 코드를 우아하게 만들고 싶다는 선의다. 하지만 잠시 키보드에서 손을 떼고 냉정하게 생각해 보자. 그거, 정말 지금 우리 팀에 필요한 거 맞나? 혹시 나만의 기술적 만족감을 채우기 위한 욕심은 아닐까? 오늘은 현직 개발자들과의 대화 도중 나온 주제를 바탕으로, 주니..

개요 회사와 사이드 프로젝트에서 디자인 시스템을 구축하게 됐다. React 기반에 Radix UI를 사용하고, Tailwind CSS로 스타일링하고, Storybook으로 문서화하는 전형적인 구성이었다. 하지만 여기서 한 가지 독특한 시도를 했다. 컴포넌트의 스크린샷을 자동으로 캡처해서 JSDoc에 주입하는 파이프라인을 만든 것이다. ▼ 'Storybook이 있는데 도대체 왜?' 라는 의문이 들 수 있을 것이다. 지금부터 왜 이런 걸 만들었고, 어떻게 구현했고, 실제로 얼마나 유용한지 정리해보려 한다. 문제 상황: 컴포넌트를 확인하려면 어디로 가야 하나?일반적인 디자인 시스템 사용 경험디자인 시스템을 만들어 본 사람이라면 알겠지만, 컴포넌트를 쓸 때 항상 이런 과정을 거친다. ▼"이 버튼 컴포넌트 어떻..

핵심만 원한다면 "JSDoc: 단순한 주석이 아니라 IDE와의 대화"로 이동해주세요.개요개발의 패러다임이 바뀌고 있다 개발의 패러다임이 바뀌었다. 불과 몇 년 전만 해도 개발자가 한 줄 한 줄 직접 코드를 작성해야 했지만, 이제는 AI가 개발의 대부분을 수행해준다. 전체적인 아키텍처 설계 면에서는 아직 인간의 통찰력이 필요하지만, 단순 기능 구현을 지시하면 AI는 불과 몇 초 만에 결과물을 내놓는다. 물론 AI에게 모든 것을 맹목적으로 맡기면 심각한 기술 부채로 이어진다. 하지만 인간이 뼈대를 세우고, AI가 살을 붙이면 이야기가 달라진다. '초안 구현'은 AI에게 맡기고, 인간은 그 결과물을 검수하고 리팩토링하는 워크플로우를 구축했을 때 생산성은 폭발적으로 증대된다. 이제 개발의 대세는 AI에게 대부..