HTML/CSS 다음은 JavaScript와 React: AI와 함께 배우는 프론트엔드 입문

🤖 AI가 코드를 써 주는 시대, 그런데 왜 내 코드는 고칠 줄 모를까요?

AI는 코드를 빠르게 제안합니다. 하지만 그 코드가 요구사항에 맞는지 판단하고, 오류를 고치고, 실제 서비스에 적용하는 일은 개발자의 몫입니다.

기초가 부족하면 AI의 답을 그대로 복사하게 되고, 작은 문제가 생겨도 어디부터 고쳐야 할지 막힙니다.

이 강의는 "AI에게 코드를 만들어 달라고 하는 방법"을 배우는 과정이 아닙니다. JavaScript의 핵심 문법과 DOM, 이벤트를 먼저 익히고, React의 컴포넌트·상태 구조로 자연스럽게 확장합니다. AI는 학습 파트너로 쓰되, 생성된 코드를 직접 읽고, 수정하고, 검증하는 힘을 기르는 데 집중합니다.

완성작 미리 보기

▶ React 완성본 보기

https://ai-js-react.vercel.app/

이런 분들께 추천해요 🙋

• HTML/CSS까지는 배웠는데, 다음에 무엇을 배워야 할지 막막한 분

• JavaScript 문법은 봤지만 React로 넘어가는 순간 막히는 분

• AI 코딩 도구를 써 봤지만, 받은 코드가 맞는지 판단하고 고치기 어려운 분

• 작은 예제를 넘어 요구사항 정리 → 구현 → 테스트 → 빌드까지 프로젝트 흐름을 경험하고 싶은 분

선수 지식

• HTML/CSS로 간단한 웹페이지(태그 구조, 기본 스타일링)를 만들 수 있는 수준

• VS Code와 웹 브라우저(개발자 도구)의 기본 사용법

• JavaScript·React 경험은 필요 없습니다.

이 강의가 다른 점 💡

HTML/CSS 다음 단계에 딱 맞춘 흐름

JavaScript 기초 → DOM·이벤트 → React 순서로, 한 번에 한 단계씩 올라갑니다.

같은 기능을 두 번 만듭니다 (JavaScript → React)

검색·필터를 먼저 JavaScript로 만들고, 같은 기능을 React로 다시 구현합니다. 두 방식의 차이를 몸으로 이해하는 구간입니다.

막혀도 다시 시작할 수 있습니다

모든 차시에 start 코드와 complete 코드를 제공합니다. 막히면 해당 차시의 start 코드부터 다시 시작하세요.

직접 구현이 중심, AI는 부분 활용

AI에게 통째로 맡기면 빠르지만, 문제가 생겼을 때 어디를 고쳐야 할지 알 수 없습니다. 코드는 대부분 직접 입력하며 원리를 익히고, AI는 요구사항 정리나 구현 방향을 제안받을 때만 사용합니다. 무엇을 반영할지는 학습자가 직접 고릅니다.

🛤️ 내 스타일에 맞는 두 가지 학습 방법

• 두 방법 모두 같은 영상으로 진행합니다. {{학습 노트 제공 위치(예: 수업자료 탭)를 적어 주세요}}

• 학습 노트는 영상 옆에 펴 두고 따라 하는 매뉴얼입니다. 입력할 프롬프트, 작성할 코드, 막혔을 때의 확인 방법이 정리되어 있습니다.

이런 내용을 배워요 📚

🌱 섹션 1 · AI와 JavaScript, 첫걸음

AI를 정답 생성기가 아닌 코딩 파트너로 쓰는 법을 익히고, JavaScript 실행 환경을 준비해 첫 코드를 실행합니다.

• 1차시 - HTML/CSS 다음엔 뭘 배우지? JavaScript가 필요한 이유

• 2차시 - AI를 정답지가 아닌 코딩 파트너로 쓰는 법

• 3차시 - JavaScript 시작하기 - 변수와 자료형

  
  

🧩 섹션 2 · 코드를 읽는 힘, JavaScript 핵심 문법

변수·조건문·함수·배열·객체·map을 배웁니다. AI가 준 코드도 스스로 읽고 설명할 수 있는 기초를 만듭니다.

• 4차시 - 코드가 스스로 판단한다: 연산자와 if 조건문

• 5차시 - 반복 코드는 이제 그만: 함수 한 번에 이해하기

• 6차시 - 상품 목록을 담는 그릇, 배열

• 7차시 - 상품 한 개를 표현하는 법: 객체와 데이터 구조

• 8차시 - for에서 map까지: 목록을 다루는 가장 쉬운 길

• 9차시 - React 입장권: 꼭 알아야 할 최신 JS 문법

🖱️ 섹션 3 · 화면을 움직이는 힘, DOM과 이벤트

요소를 선택하고 클릭·입력 이벤트를 처리해, 데이터로 상품 카드를 그리고 검색과 카테고리 필터까지 직접 구현합니다.

• 10차시 - 화면 속 요소를 내 손으로 잡아보기 (DOM 선택)

• 11차시 - 클릭하면 반응하는 웹: 이벤트 처리(구조분리)

• 12차시 - 코드로 화면 바꾸기: 텍스트·스타일·클래스

• 13차시 - 데이터만 넣으면 카드가 쏟아진다: 목록 렌더링

• 14차시 - 타이핑하면 바로 찾아주는 상품 검색 만들기

• 15차시 - 버튼 클릭 한 번으로 카테고리 필터 완성

⚛️ 섹션 4 · JavaScript에서 React로 사고 확장하기

방금 만든 기능을 컴포넌트·props·state 구조로 다시 만듭니다. 두 방식의 차이를 몸으로 이해하는 구간입니다.

• 16차시 - 왜 React일까? 직접 DOM 제어의 한계 체감하기

• 17차시 - 첫 React 프로젝트 (Vite)

• 18차시 - JSX 이해하기 : HTML처럼 보이는 JavaScript, JSX

• 19차시 - 화면을 레고처럼: 상품 카드 컴포넌트 분리

• 20차시 - 부모에서 자식으로: Props로 데이터 전달

• 21차시 - 값이 바뀌면 화면도 바뀐다: useState

• 22차시 - React로 클릭과 입력 다루기: 이벤트와 Form

• 23차시 - 배열 하나로 목록 완성: map과 key

• 24차시 - 만들기 전에 설계부터: 검색 요구사항과 State 설계

🛒 섹션 5 · AI와 완성하는 React 상품 탐색 프로젝트

요구사항 정리부터 검색, 카테고리·가격 복합 필터, 찜하기, 상품 상세까지 구현합니다. Vitest 테스트와 빌드로 마무리하고, Copilot과 Claude Code로 코드 리뷰와 리팩터링 포인트를 비교해 봅니다.

• 25차시 - 프로젝트 시작: 요구사항 정리와 구조 설계

• 26차시 - React로 상품 검색 구현하기

• 27차시 - 검색 + 카테고리 + 가격, 조건 결합 필터

• 28차시 - 마음에 드는 상품 찜하고 상세 보기

• 29차시 - 정말 잘 돌아갈까? Vitest로 검증하기

• 30차시 - AI 코드 리뷰·리팩터링과 프로젝트 완성

이 강의를 만든 사람

HTML/CSS부터 JavaScript·React까지, 비전공자와 입문자를 가르쳐 온 프론트엔드 강사입니다.

ESTSOFT KDT, 그린컴퓨터아카데미 등에서 "HTML/CSS 다음에 무엇을 해야 할지" 막막해하는 분들을 많이 만났습니다. 그래서 복잡한 개념을 작은 실습으로 나누고, 직접 결과물을 완성하는 프로젝트 중심 수업을 만들어 왔습니다.

『코딩을 처음이라 with 웹 퍼블리싱』 등 웹 퍼블리싱·웹디자인 도서를 집필했고, 웹 퍼블리싱 유튜브 채널 'ezweb'을 운영하고 있습니다.

인프런 이지웹 전체 강의 →

궁금한 점이 있나요?

Q. 🔰 코딩이 처음인데 따라갈 수 있나요?

기초만 있으면 충분합니다. JavaScript부터 차근차근 시작하고, 차시마다 start 코드를 제공해 누구나 같은 환경에서 실습을 시작할 수 있습니다.

Q. 🤖 AI 도구는 무엇을 쓰고, 유료인가요?

기본 도구는 GitHub Copilot이며, 무료 플랜으로 진행할 수 있습니다. {{무료 플랜 월 사용 한도로 실습이 막힐 수 있는지 확인 후 한 줄 추가}} 후반부 코드 리뷰·리팩터링 구간에서는 Claude Code를 함께 써서 두 도구의 결과를 비교합니다. Claude Code는 유료이며, 강의에서 이 점을 먼저 안내합니다. 설치 방법은 강사의 유튜브 영상 링크로 공개합니다.

Q. 💳 Claude Code를 결제하지 않으면 수강이 어렵나요?

Claude Code는 두 도구를 비교하는 구간에서만 사용하고, 최종 진행은 Copilot으로 합니다. 결제하지 않아도 영상으로 비교 과정을 확인하며 진도를 이어갈 수 있습니다.

Q. 📓 영상만 보면 되나요, 학습 노트도 필요한가요?

영상만 따라 해도 학습할 수 있습니다. 두 번째 학습 방법(프롬프트로 AI와 함께 진행)을 선택한다면 학습 노트가 필수입니다.

수강 전 참고 사항

다음 단계 추천

이 강의를 마친 뒤에는 다음 과정으로 이어서 학습해 보세요.

React + TypeScript 실전 - TodoList 프로젝트로 배우는 타입스크립트

AI와 함께 만드는 웹사이트 - Stitch · Figma Make · React 실전 프로젝트