Video
Archive
디코드랩(DCODELAB) 유튜브 채널 영상 목록
AI시대 퍼블리셔가 리액트를 실무에 활용해야 하는 수요에 맞춘 퍼블리셔를 위한 실무 리액트 기초 수업 예제 소개 및 설치
"퍼블리셔는 리액트 안 해도 되지 않나요?" 2026년 프론트엔드 채용공고의 87%에 React가 적혀 있습니다. 그리고 이 강의를 끝내면, 당신은 리액트를 "더 잘하는" 퍼블리셔가 됩니다. useState부터 가르치는 강의는 다 잊으세요. HTML/CSS를 제대로 다뤄본 사람만 알 수 있는 방식으로 React에 진입합니다. 퍼블리셔는 이미 리액트의 절반을 알고 있거든요. 더군다나 AI를 통해 리액트의 기초적인 문법만 알고 있어도 이제 막 리액트에 입문한 초보자라도 쉽게 실무에 리액트를 어렵지 않게 적용가능합니다. ▶ 이 영상에서 보여드리는 것 - 강의 전체에서 함께 만들 실제 예제 미리보기 - 왜 "퍼블리셔용" 리액트 강의가 따로 필요한지 - 강의를 끝낸 당신이 갖게 될 결과물 ▶ 강의 전체 커리큘럼 보기 https://codingazit.com/courses/{강의id} ▶ 타임스탬프 00:00 퍼블리셔에게 리액트가 필요한 진짜 이유 00:45 이 강의로 만들 결과물 미리보기 02:10 useState를 외우지 않아도 되는 이유 03:30 첫 강의에서 만날 예제 ▶ 코딩아지트 HTML/CSS 출신 개발자를 위한 강의를 만듭니다. https://codingazit.com #퍼블리셔React #리액트입문 #코딩아지트 #퍼블리셔에서프론트엔드
NEXT, GSAP 모션 컴포넌트 제작 수업 예제
AI가 코드를 짜주는 시대, 웹퍼블리셔는 정말 대체될까? Next.js 16 + GSAP을 활용한 실무 모션 인터랙션 수업 예제를 시연합니다. 단순 마크업은 AI가 대체할 수 있지만, 섬세한 UI 모션과 인터랙션 설계는 여전히 사람의 감각이 필요합니다. ✅ 이 과정에서 배우는 기술 스택 - Next.js 16 App Router + TypeScript + TailwindCSS - GSAP Timeline · ScrollTrigger 기반 실무 UI 모션 - 페이지 전환 효과 · 스크롤 연동 애니메이션 - WCAG 기반 웹접근성 · ARIA · 키보드 내비게이션 - Spring API 명세 기반 프론트엔드-백엔드 데이터 연동 - Git 브랜치 전략 · 코드 리뷰 · PR · QA 워크플로 - AI(Claude Code) 활용 — 마크업 검증, 접근성 감사, 디버깅, 코드 리뷰 자동화 📈 5개월 성장 로드맵 Phase 1 — 컴포넌트 기반 퍼블리싱 (HTML/CSS → TSX 컴포넌트 전환) Phase 2 — GSAP 모션 · 슬라이더 (실무 인터랙션 구현) Phase 3 — 웹접근성 · JS 로직 (WCAG · ARIA · 바닐라 JS) Phase 4 — 백엔드 협업 최적화 (API 연동 · DTO 타입 매핑) Phase 5 — 협업 · QA 시뮬레이션 (Git · 코드 리뷰 · 실전 프로젝트) 💡 왜 이 과정인가? - 기존 퍼블리싱(HTML/CSS 납품) → 개발자가 다시 컴포넌트로 변환하는 이중작업 제거 - 단순 마크업은 AI가 대체하지만, 컴포넌트 설계 + 접근성 + 모션 + API 연동까지 아우르는 UI 설계 역량은 대체 불가 - 퍼블리셔의 UI 감각은 유지하면서 산출물만 HTML → TSX 컴포넌트로 전환 - 수료 후 협약 기업 실전 프로젝트 투입 기회 제공 🎯 이런 분들에게 추천합니다 - AI 시대에 퍼블리셔 커리어가 불안한 분 - React 강의 완강했는데 실무에서 한 줄도 못 쓰는 분 - GSAP 모션을 Next.js 환경에서 구현하고 싶은 분 - 단순 퍼블리싱을 넘어 UI 설계 전문가로 성장하고 싶은 분 🔗 블로그: https://dcodelab.vercel.app #웹퍼블리셔 #NextJS16 #GSAP #ScrollTrigger #모션UI #AI대체 #프론트엔드 #웹개발 #코딩수업
Next16, 클로드코드를 통한 AI 자동화 설계 수업예제
AI가 코드를 짜주는 시대, 웹퍼블리셔는 정말 대체될까? Next.js 16 App Router로 만든 기업형 홈페이지 수업 예제를 시연합니다. 프레임워크를 다룰 줄 아는 퍼블리셔는 AI 시대에도 경쟁력이 있습니다. 이 영상에서 어떤 수준의 결과물을 만들 수 있는지 직접 확인해보세요. 📌 이런 분들에게 추천합니다 - AI 때문에 퍼블리셔 커리어가 불안한 분 - Next.js를 실무에 도입하고 싶은 웹퍼블리셔 - 기업형 홈페이지 퍼블리싱 예제가 궁금한 분 - React/TypeScript 기반 프로젝트를 경험해보고 싶은 분 🔗 블로그: https://dcodelab.vercel.app/program/inquiry #웹퍼블리셔 #NextJS16 #기업형홈페이지 #AI대체 #프론트엔드 #React #웹개발 #코딩수업
디코드랩 웹 모션 개발 국비 취업과정 수업 예제
디코드랩 웹 모션 개발 국비 취업과정 수업 예제
비전공자를 위한 리액트 프론트엔드 개발, UI/UX디자이너, 웹디자인 취업 국비교육 - 이전기수 훈련생 포트폴리오 2023
영상에 있는 포트폴리오는 해당 과정을 통해 훈련생 분들이 직접 100% 진행한 작업물들입니다. 2023년 리액트 작업물 훈련생 포트폴리오 https://blog.naver.com/hadaboni80
비전공자를 위한 리액트 프론트엔드 개발, UI/UX디자이너, 웹디자인 취업 국비교육 - 수료생 포트폴리오 2022~2023
영상에 있는 포트폴리오는 해당 과정을 통해 훈련생 분들이 직접 100% 진행한 작업물들입니다. - 디코드랩
비전공자를 위한 리액트 프론트엔드 개발, UI/UX디자이너, 웹디자인 취업 국비교육 - 이전기수 훈련생 포트폴리오 6
영상에 있는 포트폴리오는 해당 과정을 통해 훈련생 분들이 직접 100% 진행한 작업물들입니다. - 디코드랩
비전공자를 위한 리액트 프론트엔드 개발, UI/UX디자이너, 웹디자인 취업 국비교육 - 이전기수 훈련생 포트폴리오 5
영상에 있는 포트폴리오는 해당 과정을 통해 훈련생 분들이 직접 100% 진행한 작업물들입니다. - 디코드랩
비전공자를 위한 리액트 프론트엔드 개발, UI/UX디자이너, 웹디자인 취업 국비교육 - 이전기수 훈련생 포트폴리오 4
영상에 있는 포트폴리오는 해당 과정을 통해 훈련생 분들이 직접 100% 진행한 작업물들입니다. - 디코드랩
비전공자를 위한 리액트 프론트엔드 개발, UI/UX디자이너, 웹디자인 취업 국비교육 - 이전기수 훈련생 포트폴리오 3
영상에 있는 포트폴리오는 해당 과정을 통해 훈련생 분들이 직접 100% 진행한 작업물들입니다. - 디코드랩
비전공자를 위한 리액트 프론트엔드 개발, UI/UX디자이너, 웹디자인 취업 국비교육 - 이전기수 훈련생 포트폴리오 2
영상에 있는 포트폴리오는해당 과정을 통해 훈련생 분들이 직접 100% 진행한 작업물들입니다. - 디코드랩
비전공자를 위한 리액트 프론트엔드 개발, UI/UX디자이너, 웹디자인 취업 국비교육 - 이전기수 훈련생 포트폴리오
영상에 있는 포트폴리오는 해당 과정을 통해 훈련생 분들이 직접 100% 진행한 작업물들입니다.