1. 들어가며 — AI 에이전트 코딩 시대, 병목은 도구가 아니라 내 머리였다AI 에이전트 코딩이 본격화되면서 개발자의 일하는 방식이 빠르게 바뀌고 있다.불과 1-2년 전만 해도 코드를 한 줄 한 줄 직접 짜는 게 당연했다. 지금은 다르다. Claude, Cursor, Windsurf 같은 도구들이 반복적인 구현을 대신 처리해주면서, 동시에 굴릴 수 있는 프로젝트 수도 자연스럽게 늘어났다.나도 그랬다. 이전에는 한두 개 프로젝트를 순서대로 진행했다면, 요즘은 3-4개를 병렬로 돌리는 게 일상이 됐다. 생산성이 올라간 건 분명한데, 이상하게 머릿속은 점점 더 복잡해졌다. A 프로젝트를 하다가 B로 넘어가면, A에서 어디까지 했는지, 다음에 뭘 해야 했는지, 왜 그런 결정을 내렸는지가 흐릿해졌다. 코드는 그..

Intro마이그레이션 작업 중 빌드 속도가 눈에 띄게 빨라진 적이 있었습니다. 어떤 변경이 원인인지 설명하려다 막혔습니다. tsconfig 옵션 몇 개를 건드렸다는 건 알았지만, 왜 그게 효과가 있는지는 몰랐습니다.그 경험이 이 글을 쓰게 된 계기입니다. TypeScript 컴파일러가 실제로 어떤 순서로, 어떤 이유로 동작하는지 이해하면 빌드가 느릴 때 어디서부터 손봐야 할지, 팀원에게 설정 변경 이유를 어떻게 설명할지 훨씬 명확해집니다.TypeScript 컴파일 과정의 전체 흐름tsc는 소스 파일을 받아 다섯 단계를 거쳐 JavaScript를 출력합니다.소스 파일 → Program 생성 → 파싱(AST) → 바인딩(Symbol) → 타입 체킹 → Emit각 단계는 독립적이지 않습니다. 바인딩이 끝난 심..

1. 멀티에이전트와 스킬, 왜 헷갈릴까?취업에 성공하고 나서 개발보다는 AX(AI Transformation)를 어떻게 높일 수 있을지 고민하며 코딩을 하던 중, 낯선 개념 두 가지를 마주쳤다.스킬과 멀티에이전트.스킬은 에이전트가 특정 책을 꺼내 읽고 그걸 참고해서 일하는 것, 멀티에이전트는 여러 에이전트가 각자 잘하는 일을 나눠서 맡는 것이라고 한다. 그런데 여기서 의문이 생겼다.어차피 둘 다 뭔가를 "불러다 쓰는" 건데, 도대체 뭐가 다른 걸까?2. 스킬이란 무엇인가?스킬을 한 문장으로 정의하면 이렇다.에이전트가 일을 잘 하기 위해 참고하는 "매뉴얼"이다. 사람으로 치면, 신입사원한테 "이 회사에서는 이렇게 일해"라고 적힌 온보딩 문서를 쥐여주는 것과 같다. 에이전트는 기본적으로 아무것도 모르는 상..

1. 왜 인증이 중요한가?웹에서 인증은 필수적인 기능이다. 사용자의 데이터를 보호하고, 로그인한 사용자만 특정 기능을 이용할 수 있도록 제한하는 것이 중요하다.인증 방식에는 여러 가지가 있지만, 이번 강의에서는 세션 기반 인증을 배웠다. 특히 Next.js의 서버 액션과 Lucia 인증 라이브러리를 활용하여 인증 시스템을 구현하는 방법을 살펴보겠습니다.2. Lucia vs NextAuth: 어떤 인증 라이브러리를 선택할까?강의에서 Next.js에서 인증을 구현할 때 유명한 두 라이브러리로 Lucia와 NextAuth.js 얘기가 나왔다. 궁금해져서 지피티에게 물어보았다. 강의에서는 현재 NextAuth.js에 오류가 있어 Lucia를 선택하였다.1️⃣ Lucia✅ 세션 기반 인증 지원 (쿠키 기반, 서버..

강의를 듣다 저번 Nextjs 프로젝트 할때 가장 어려웠던 서버 컴포넌트와 클라이언트 컴포넌트에 대한 내용이 나왔다. 넥스트로 프로젝트를 처음해봤어서 편하다는 이유로 최상단 루트에 클라이언트 컴포넌트를 선언하고 개발을 진행했다. 그리고 개발이 다 끝나고 나서야 알았다. 이게 얼마나 멍청한 짓이였는지를.. 그래서 저번과 같은 실수를 반복하지 않기 위해 서버 컴포넌트와 클라이언트 컴포넌트에 대해 정리를 해보기로 했다.서버 컴포넌트 vs 클라이언트 컴포넌트서버 컴포넌트란서버 컴포넌트는 서버 측에서 렌더링되고 처리되는 React 컴포넌트이다. 그리고 넥스트의 모든 컴포넌트들은 기본적으로 서버 컴포넌트로 동작한다. 또한 주요 특징은 다음과 같다:서버 측 렌더링: 컴포넌트가 서버에서 직접 렌더링되어 초기 로드 속도..

1. Loader와 Action은 왜 나오게 되었나?데이터 API의 변화Loader와 Action이 나오기 전인 React Router DOM v6.4 이전에는 라우팅과 데이터 페칭이 완전히 분리되어 있었습니다. 라우터는 단순히 URL에 따라 어떤 컴포넌트를 렌더링할지만 결정했고, 데이터 로딩은 각 컴포넌트의 책임이었습니다.function ProductPage() { const [product, setProduct] = useState(null); const [loading, setLoading] = useState(true); const { id } = useParams(); useEffect(() => { async function loadProduct() { setLoading..