#webdev #react #ai #learning

웹 개발 환경이 변화했습니다. 오늘날의 주니어 개발자들은 단순히 처음부터 코드를 작성하는 것을 넘어, AI 도구(Copilot, ChatGPT, Claude, Cursor)를 함께 활용하여 작업할 것을 요구받습니다. 이번 업데이트된 8주 계획은 모든 주니어 React 개발자에게 필요한 핵심 기술을 유지하면서, 실무적인 AI 보조 워크플로우(AI-assisted workflows)를 위한 공간을 확보하기 위해 일부 심화 이론을 줄였습니다. 2주마다 전용 Tech Insight Day가 마련되어 있습니다. 새로운 학습 내용 없이, 그동안 배운 것에 대한 토론, 질문 및 성찰의 시간을 갖습니다.

1주 차 — 기초: Agile, 웹 기초 및 첫 AI 도구

Jira를 활용한 프로젝트 관리

• Agile 및 Scrum 기초
• 사용자 스토리(user stories), 태스크(tasks), 에픽(epics) 생성
• 태스크 상태 업데이트 (To Do, In Progress, Done)

HTML5 / CSS3 필수 요소

• 핵심 HTML5 태그, 테이블(tables), 폼(forms)
• CSS3 (inline, embedded, external)
• TailwindCSS 입문

AI 도구 시작하기

• 에디터에 GitHub Copilot / Claude / ChatGPT 설정하기
• 프롬프팅(Prompting) 기초: 코드, 설명 및 수정 요청하기
• 일반적인 영어 설명을 바탕으로 AI를 사용하여 HTML/CSS 레이아웃 스캐폴딩(scaffold)하기

2주 차 — AI를 활용한 스타일링 + Tech Insight Day

• TailwindCSS 심화 학습 (utility-first 워크플로우)
• 목업(mockups) 또는 설명을 바탕으로 AI를 사용하여 CSS/Tailwind를 생성 및 리팩터링(refactor)하기
• AI를 사용하여 페이지의 기본적인 접근성(accessibility) 문제 감사하기
• 생성된 마크업/스타일에서 AI의 실수를 발견하고 수정하기 (맹목적인 복사-붙여넣기가 아닌 비판적 검토)

📌 Tech Insight Day (주말)

• 자유 토론: 지금까지 무엇이 효과적이었나? AI가 도움이 된 부분은 어디이며, 방해가 된 부분은 어디인가?
• 쇼앤텔(Show-and-tell): 자신이 만든 것 한 가지, 효과적이었던 프롬프트 한 가지 공유

3주 차 — JavaScript 기초

• 데이터 타입(Data types), 변수(variables), 연산자(operators)
• 조건문(Conditional statements) 및 루프(loops)
• 함수 (declaration, expression, arrow)
• 배열(Arrays) 및 객체(objects) (CRUD 작업)

AI 보조 실습

• 익숙하지 않은 에러 메시지를 설명하기 위해 AI 사용하기
• AI를 사용하여 직접 작성한 함수의 테스트/예외 케이스 (edge cases)를 생성한 후, 수동으로 검증하기
• 경험 법칙 (Rule of thumb): AI가 제안한 코드를 실행하기 전에 반드시 직접 추적(trace)해 볼 것

4주 차 — JavaScript 심화 + 기술 인사이트 데이 (Tech Insight Day)

• 스코프 (Scope) 및 클로저 (closures), 호이스팅 (hoisting), this
• ES6+ 기능 (let/const, spread/rest, 구조 분해 할당 (destructuring))
• 비동기 JavaScript (Asynchronous JavaScript): 콜백 (callbacks), 프로미스 (Promises), async/await, Fetch API

AI 페어 프로그래밍 (AI Pair Programming)

• AI를 사용하여 콜백 기반 코드를 async/await로 리팩터링 (refactor)하기
• 까다로운 비동기 버그에 대해 단계별 설명을 요구하는 프롬프팅 (Prompting)
• 동일한 문제에 대해 AI가 생성한 두 가지 솔루션을 비교하고 더 나은 것을 선택하기

📌 기술 인사이트 데이 (Tech Insight Day) (주말 종료 시점)

• 토론: 비동기 JS의 고충 (pain points), AI 디버깅의 성공 및 실패 사례
• AI의 도움을 받은 실습 과제에 대한 동료 코드 리뷰 (Peer code review)

5주 차 — Git/GitHub + React 기초

Git & GitHub을 활용한 버전 관리 (Version Control)

• 핵심 명령어 (init, add, commit, push, pull)
• 브랜치 (Branches) 및 풀 리퀘스트 (pull requests)
• 더 명확한 커밋 메시지 및 PR 설명을 작성하기 위해 AI 사용하기

React 기초 (React Basics)

• React란 무엇이며 왜 사용하는가?
• Vite 설정, JSX 문법
• 함수형 컴포넌트 (Functional components), props 및 state
• 설명을 통해 새로운 컴포넌트의 뼈대를 만드는 스캐폴딩 (scaffold)에 AI 사용하기 ("title, image, description props를 받는 Card 컴포넌트를 생성해줘")

6주 차 — React 핵심, Hooks & Router + 기술 인사이트 데이 (Tech Insight Day)

React 핵심 개념 (React Core Concepts)

• 이벤트 핸들링 (Event handling), 조건부 렌더링 (conditional rendering), 리스트 렌더링 (map)
• 컴포넌트 재사용 및 합성 (composition)

React Hooks

• useState, useEffect, useRef, useContext

React Router

• 라우트 (routes) 설정, 네비게이션 (navigation), 동적 라우트 (dynamic routes) 및 파라미터 (params)

AI 보조 React 개발 (AI-Assisted React Development)

• AI를 사용하여 보일러플레이트 (boilerplate) 훅을 생성하고, useEffect 의존성 배열 (dependency array)이 왜 중요한지 설명 듣기
• PR을 올리기 전 AI 기반 코드 리뷰 (예: Copilot/Claude 제안) 활용하기

📌 기술 인사이트 데이 (Tech Insight Day) (주말 종료 시점)

• 토론: AI가 "고군분투하며 배우는 (learn by struggling)" 과정을 어떻게 변화시키는가 — 언제 AI에 의존하고, 언제 수동으로 밀고 나가야 하는가
• React Dev Tools를 통해 발견한 내용 한 가지 공유하기

7주 차 — 상태 관리 (State Management), 툴링 (Tooling) 및 실제 API

• Context API 및 Redux 기초 입문
• react-hook-form을 이용한 폼 핸들링 (Form handling)
• Axios를 이용한 API 핸들링 (API handling)
• 커스텀 훅 (Custom hooks), 에러 경계 (Error boundaries)
• 개발 도구 (React Dev Tools, Redux DevTools)

AI 통합 워크플로우 (AI Integration Workflows)

• API 문서/명세서로부터 AI를 사용하여 Axios API 통합 코드 생성하기
• AI에게 커스텀 훅 작성을 요청(Prompting)한 후, 이를 테스트하고 조정하기
• AI를 사용하여 Redux/Context 버그를 설명하고 수정하기

8주 차 — 캡스톤 프로젝트 (Capstone Project) + 기술 인사이트 데이 (Tech Insight Day)

목표: 도구, 코드, AI 지원을 결합하여 실제 업무 스프린트(Sprint)를 시뮬레이션합니다.

• Jira에서 프로젝트를 태스크(Task)로 나누고, 자신에게 티켓을 할당하며, 보드에서 진행 상황을 추적하기
• GitHub에 정기적으로 코드를 푸시(Push)하고, 브랜치(Branch) 간 작업을 수행하며, 리뷰를 위해 풀 리퀘스트(Pull Request)를 생성하기
• 전체 과정에서 AI 도구(스캐폴딩 (Scaffolding), 디버깅 (Debugging), 리팩토링 (Refactoring), PR 설명 작성)를 사용하여 작은 기능을 엔드 투 엔드 (End-to-end)로 구축하기
• 컨테이너 vs 프레젠테이셔널 (Container vs Presentational) 컴포넌트 패턴, 그리고 Context API vs 프롭 드릴링 (Prop drilling) 적용하기

📌 기술 인사이트 데이 (Tech Insight Day) (주말 종료 시점 — 캡스톤 마무리)

• 회고 (Retro): 무엇을 만들었는지, AI가 가장 많이 도움이 된 부분은 무엇인지, 다르게 했다면 무엇을 했을지
• 토론: 주니어 개발자로서의 책임감 있는 AI 사용 — 결과물 검증하기, 과도한 의존 피하기, 그리고 지원을 받는 과정 속에서 근본적인 이해도 쌓기

이 계획에 포함된 AI 도구에 관한 참고 사항

AI 어시스턴트는 이해를 대체하는 수단이 아니라, _페어 프로그래머 (Pair programmer)_로 취급됩니다. AI의 도움을 받는 모든 섹션은 생성(Generation)과 리뷰(Review)를 병행합니다. 즉, 코드를 배포하기 전에 읽고, 테스트하고, 코드를 설명할 수 있어야 합니다. 이러한 습관이 AI를 잘 사용하는 주니어 개발자와 단순히 복사해서 붙여넣기만 하는 개발자를 구분 짓는 차이점입니다.