HTML/CSS/JS만 알아도 OK! React와 Firebase로 완성하는 실전 프로젝트

html,css, javascript(jquery) 기초가 있으신가요? 그런데 전체 웹사이트 전체를 어떻게 만들지 잘 모르시나요? 그렇다면 디자인을 참조해서 쇼핑몰 메인페이지 구현을 도전해보세요. 완성된 디자인을 참조하고 기획 의도와 디자인의 상세한 사항들을 파악하여 웹사이트를 구현하는 노하우를 알려드립니다.

생성형 AI를 활용해 기획부터 디자인, 구현, 배포까지 한 번에 완성하는 실전 웹개발 프로젝트 강의입니다. Stitch와 Figma Make를 활용해 디자인을 만들고, AI Studio로 코드를 생성하여 실제 서비스로 배포합니다. 코드를 많이 몰라도 AI와 함께 개발하는 방법을 배우며, 나만의 AI 웹앱을 완성합니다. 이제 여러분도 AI와 협업하는 개발자가 됩니다.

"생성형 AI를 활용해 기획·디자인·구현·배포까지 완성하는 웹개발 실전 프로젝트 강의" 아이디어 구상부터 시작해서, AI로 디자인 뚝딱 만들고, React로 실제 작동하는 웹사이트 구현, 그리고 인터넷에 배포까지 - 모든 과정을 차근차근 함께 완성합니다. Stitch와 Figma Make 같은 최신 AI 도구들이 디자인 작업을 도와주고, 복잡한 코딩도 단계별로 쉽게 따라할 수 있게 알려드려요.

React + TypeScript를 활용하여 실무 감각으로 “할 일 관리 앱(ToDo List)”을 직접 만드는 프로젝트 중심 과정입니다. 단순히 문법을 배우는 데 그치지 않고, 컴포넌트 구조 설계 → 상태 관리 → 타입 적용 → 기능 구현 → 로컬 스토리지 연동 → 배포까지 실제 서비스 형태로 완성하면서 타입스크립트의 활용 감각을 익힐 수 있습니다.

타입 안정성과 코드 가독성을 높이는 TypeScript의 핵심 문법을 실습 위주로 익히는 입문 과정입니다. 프로젝트 환경 설정부터 인터페이스, 제네릭, 유틸리티 타입까지 실제 코드 사례로 학습합니다.

퍼블리셔를 위한 React 첫걸음! 기초 문법부터 반응형 쇼핑몰 웹사이트 제작·배포까지 한 번에 학습합니다. 단편적인 리엑트 예제의 종합이 아니라 실제 웹페이지 제작에 필요한 핵심 문법을 학습하고 적용합니다.

이 강의는 Figma 디자인을 웹 페이지로 구현하는 과정에 대해 단계별로 설명합니다. 이미지 저장부터 HTML, CSS 작성, Javascript 작성까지 전반적인 웹 퍼블리싱 실무를 다룹니다. 초보자도 쉽게 따라 할 수 있도록 체계적으로 진행됩니다. 실습 위주의 학습을 통해 웹 디자인을 효율적으로 코드로 변환하는 방법을 배울 수 있습니다.

CSS Grid는 복잡한 레이아웃도 간단하고 직관적으로 구현할 수 있는 강력한 도구입니다. 이번 강의에서는 CSS Grid의 핵심 개념부터 실전 활용법까지 단계별로 쉽게 배울 수 있도록 구성했습니다. 이제 복잡한 float과 flexbox에 얽매이지 말고, 효율적인 레이아웃 설계의 정석을 배워보세요! 지금 바로 시작하세요!

전세계 웹사이트에서 75%이상이 사용하고 있는 javascript 라이브러리 jQuery ! 화려한 효과보다는 원리를 이해하며 기본기를 다질수 있도록 구성했습니다. 제이쿼리 기초부터 활용까지 학습하여 여러분만의 포트폴리오를 완성하거나, 현업에서 바로 활용해보세요.

웹 개발의 첫 걸음을 떼셨나요? HTML, CSS, javascript를 이제 막 시작하신 분들께 특별한 제안을 드립니다! 모바일 시대에 발맞춰 모바일 웹사이트를 만들고 싶지만, 어디서부터 시작해야 할지 망설여지시나요? 걱정하지 마세요. Figma 모바일 디자인을 직접 분석하고 구현하면서, 자연스럽게 반응형 웹 개발의 핵심을 배워보세요. 세련된 모바일 디자인을 토대로, 사용자의 마음을 사로잡는 섬세한 인터랙션부터 다양한 화면 크기에 완벽하게 적응하는 기술까지, 모든 것을 함께 알아가볼 수 있습니다. 이제 여러분의 웹사이트가 모든 기기에서 빛나도록, 노하우를 나눠드리겠습니다. 함께 시작해볼까요?

javascript를 통해 HTML의 요소를 선택하고 다양한 이벤트에 따라 요소의 스타일을 변경하거나 애니메이션 효과를 구현합니다. javascript의 기분문법에서 스타일 변경, 이벤트 설정 및 웹페이지 구현시 자주 사용되는 효과를 구현합니다.

CSS 기초부터 애니메이션, 반응형까지 학습합니다. 실전 예제를 통해 학습한 내용을 복습하면서 확실하게 기본기를 다집니다.

이 강의를 통해 웹페이지를 구성하는 3대 언어 HTML, CSS, javascript중 HTML언어의 기본기를 확실하게 다질 수 있습니다. 검색에 최적화된, 웹접근성과 웹표준을 준수하는 HTML을 제대로 학습해보세요.

개념부터 독특한 프로젝트까지 함께 다뤄보며 자바스크립트와 리액트를 이 강의로 한 번에 끝내요. 학습은 짧게, 응용은 길게 18시간 분량의 All-in-one 강의!

이제는 실전에 도전할 차례입니다 🔥 React.js + TypeScript + Supabase로 실무급 SNS를 함께 개발해보며 인증&인가, 무한스크롤, 이미지 업로드, 좋아요, 무한 중첩 댓글, 다크모드 등의 기능을 만들어 봅니다. 이 과정에서 Zustand와 Tanstack Query를 이용한 서버 및 전역 상태 관리 기법도 살펴볼 예정입니다.

프론트엔드 프로젝트를 미션 콘텐츠입니다. DevTime이라는 타이머 앱을 직접 구현해보면서 프로젝트 실습을 해볼 수 있도록 PRD 기획 문서, Figma 시안, API 엔드포인트를 제공합니다. 실제 서비스와 유사한 수준의 프로젝트를 구현해 보면서 그동안 학습한 지식을 완벽하게 자신의 것으로 만들어 보세요 🚀

대표적인 UI 요소들을 React 버전 및 순수 JavaScript 버전으로 만들어 보면서, Web API를 활용한 다양한 관점과 방법을 경험하고, 프론트엔드 개발 실력을 한층 끌어올려 보세요.

이 24시간 튜토리얼에서는 자신만의 유튜브 클론을 만드는 방법을 배우게 됩니다. Next 15와 React 19(tRPC 포함), 서버 컴포넌트에서의 프리페칭, 클라이언트 컴포넌트에서의 서스펜스 활용, 비디오 처리, 백그라운드 작업, AI 기능 등 고급 주제들을 다룰 것입니다.

단순히 듣고 끝나는 강의가 아닙니다. 이 강의는 “React를 이해하는 순간”이 아니라 “React를 직접 다룰 수 있게 되는 순간”을 목표로 합니다. 매 섹션마다 강의와 함께 미션을 수행하고, 연습문제를 직접 풀며, JSX, Virtual DOM, State, useEffect 같은 핵심 개념을 손으로 구현하며 익히는 과정입니다. 완강을 마쳤을 때 당신은 단순히 React 문법을 아는 입문자가 아니라, 컴포넌트 설계부터 렌더링 흐름까지 스스로 설명하고 활용할 수 있는 개발자가 되어 있을 것입니다. “듣기만 하는 수업이 아닌, 완성해 나가는 학습.” React의 본질을 이해하고, 선언형 UI의 세계를 직접 체험하세요.

생성형 AI를 활용해 기획부터 디자인, 구현, 배포까지 한 번에 완성하는 실전 웹개발 프로젝트 강의입니다. Stitch와 Figma Make를 활용해 디자인을 만들고, AI Studio로 코드를 생성하여 실제 서비스로 배포합니다. 코드를 많이 몰라도 AI와 함께 개발하는 방법을 배우며, 나만의 AI 웹앱을 완성합니다. 이제 여러분도 AI와 협업하는 개발자가 됩니다.

AI를 사용하는 시대를 넘어, 이제는 AI를 설계하는 사람이 필요한 시대입니다. 이 과정은 "입문 → 구조 → 설계 → 운영"까지, AI 에이전트의 전체 설계 지도를 체계적으로 정리한 마스터 로드맵입니다. RAG, Tool Calling, Memory, Multi-Agent 구조를 기반으로 AI 에이전트를 어떻게 설계하고 확장할 것인지 아키텍트 관점에서 학습합니다. AI를 “사용하는 사람”이 아니라 AI 시스템을 설계하는 사람으로 성장하고 싶다면 이 과정이 방향을 제시합니다.

SpringAI + React로 만들어보는 나만의 감정일기 서비스 Neo + Essential과 함께 만들어보는 4번째 프로젝트 시간입니다!

인재개발원에서 HRD로 12년간 근무하며 느꼈던 가장 큰 어려움 중 하나는, 아이디어는 분명 많은데 그 아이디어를 구현하는 코딩 장벽이 너무 높다는 점이었습니다. 이 강의는 바로 그 지점에서 출발합니다. HRD가 개발자가 되지 않아도, 자신의 아이디어를 직접 구현해볼 수 있도록 돕는 것이 이 강의의 목표입니다. 인사(HR), 교육(HRD), 총무(GA), 조직문화 담당자를 위한 바이브 코딩 기반 실전 강의로, 유료 서비스 없이 무료 기능만을 활용해 원하는 서비스를 직접 만들어봅니다.

1시간안에 끝내는 React기반의 GPT AI서비스 강의 수강 후 나만의 AI GPT SASS 솔루션을 만들어 보세요.

이 강의는 스프링 부트 3와 스프링 시큐리티 6, 리액트를 활용해 일반 로그인과 소셜 로그인, JWT 기반 토큰 인증을 체계적으로 학습하는 과정입니다. MPA와 SPA 환경 모두에서 OAuth2 소셜 로그인과 보안 강화된 JWT 인증 시스템을 구축하고, XSS·CSRF 대응, HTTPS 적용, 토큰 재발급 및 폐기 전략, 비밀키 안전 관리 등 보안 실무 전반을 다룹니다. AWS를 통한 빌드·배포, Redis를 이용한 성능 최적화까지 실제 서비스 수준의 환경 구성을 실습하며, 강의에서 제공되는 완성 프로젝트 소스코드를 통해 전체 로그인 흐름을 이해하고 바로 실무에 적용할 수 있습니다.

API 한 번 호출하고 끝나는 AI 토이 프로젝트는 이제 그만! 풀스택 AI 챗봇을 실제로 설계하고 배포까지 고려한 구조로 만들어 본 경험을 바탕으로, 스트리밍·Tool 호출·메모리·멀티모달·Human in the Loop까지 '서비스로 동작하는' AI 챗봇을 만드는 전 과정을 모두 알려드립니다.

왕초보도 할 수 있는 웹, 서버, 모바일 앱, 머신러닝까지 익히는 끝판왕 풀스택 강의!! 개발을 어디서부터 시작할지 막막했다면 이 강의를 강력 추천할게요. Javascript 하나로 진행합니다!

React, Electron, Zustand를 활용해 타이머 앱을 직접 제작하고 크로스 플랫폼(윈도우, 맥 OS, 리눅스)으로 배포까지 하는 실전 강의입니다. 익숙한 React 웹 개발을 시작으로, Zustand를 통한 전역 상태 관리와 최종 GUI 배포까지, 데스크톱 앱 개발의 전체 흐름을 배우실 수 있습니다!

ThreeJS와 SpringAI로 만드는 3D 지구본 아티클 서비스 | Neo + Essential 나만의 챗봇과 ThreeJS를 통해 3D 지구본 아티클 서비스를 만들어 보세요!

React 프론트엔드와 SpringBoot 백엔드를 AWS 클라우드에 직접 배포하는 포트폴리오 중심 강의! 빠르게 자신의 포트폴리오에 프론트, 백앤드 프로젝트를 배포하고 싶은 분들에게 도움이 되는 강의입니다! 배포하는 데 필요한 지식들을, 서버 설정부터 Docker, Domain 연결, Nginx, HTTPS 적용까지 단계별로 단기간 실습할 수 있게 됩니다!

Mobile App Front-End 개발을 위한 React Native의 기초 지식 습득을 목표로 하고 있습니다. 진입장벽이 낮은 언어/API의 활용을 통해 비전문가도 쉽게 Native Mobile App을 개발할 수 있도록 제작된 강의입니다.

"생성형 AI를 활용해 기획·디자인·구현·배포까지 완성하는 웹개발 실전 프로젝트 강의" 아이디어 구상부터 시작해서, AI로 디자인 뚝딱 만들고, React로 실제 작동하는 웹사이트 구현, 그리고 인터넷에 배포까지 - 모든 과정을 차근차근 함께 완성합니다. Stitch와 Figma Make 같은 최신 AI 도구들이 디자인 작업을 도와주고, 복잡한 코딩도 단계별로 쉽게 따라할 수 있게 알려드려요.

혹시 중요한 고객 미팅 후, 아이 컨택 대신 메모에만 집중하거나 미팅 내용을 정확히 기록하지 못해 아쉬웠던 경험 있으신가요? 이제 더 이상 걱정 마세요! 이 강의에서는 바이브 코딩(Vibe Coding)을 활용해 AI로 핵심 내용을 요약하며, 깔끔하게 미팅 내용을 저장하는 나만의 CRM 어시스턴트를 직접 만들 수 있도록 도와드립니다. 번거로운 문서 작성 시간을 획기적으로 줄여 업무 생산성을 극대화하고, 고객 관리를 혁신하는 방법을 배우게 될 거예요!